[
  {
    "path": ".github/ISSUE_TEMPLATE/bug.yaml",
    "content": "name: 🐛 Bug Report\ndescription: Report a bug that affects a Material Web component\n\nbody:\n  - type: dropdown\n    id: affected\n    validations:\n      required: true\n    attributes:\n      label: What is affected?\n      multiple: true\n      description: Note you can select more than one.\n      options:\n        - Accessibility\n        - Component\n        - Theming\n        - Tooling\n        - Other/unknown\n\n  - type: textarea\n    id: description\n    validations:\n      required: true\n    attributes:\n      label: Description\n      description: |\n        Please describe the bug in as much detail as possible. Include what you expected to happen, and what actually happened. If you have an error message, please include as much of the error message as possible.\n      placeholder: |\n        When I do '...'.\n        I would expect '...'.\n        However, instead '...' happens.\n\n\n  - type: textarea\n    id: reproduction\n    validations:\n      required: true\n    attributes:\n      label: Reproduction\n      description: |\n        If possible, please link to a working reproduction that will help us verify and understand the bug.\n        Bugs that provide a reproduction in CodePen, Fiddle, or lit.dev playground ([Example Playground](https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9idXR0b24vb3V0bGluZWQtYnV0dG9uLmpzXCI7In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbWF0ZXJpYWwtaW1wb3J0cy5qc1wiPjwvc2NyaXB0PlxuXG48bWQtb3V0bGluZWQtYnV0dG9uPkEgbWF0ZXJpYWwgYnV0dG9uPC9tZC1vdXRsaW5lZC1idXR0b24-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d))\n        can be triaged much faster.\n\n        For bugs that show up on the command-line, please create a [Stackblitz](https://stackblitz.com/) Node.js/Vite project, and provide step-by-step instructions for setting up, and observing the bug.\n      placeholder: |\n        The text should update when the button is clicked, but it doesn't:\n        https://lit.dev/playground/#gist=f9817b9c703e037b5ac576030110a983\n\n  - type: textarea\n    id: workaround\n    validations:\n      required: true\n    attributes:\n      label: Workaround\n      description: |\n        If you have found a workaround for this problem, please explain it here. If you have not found a workaround, please write \"I have not found a workaround\".\n      placeholder: |\n        I have worked around this problem by registering the event handler manually with `addEventListener`.\n\n        ... or:\n\n        I have not found a workaround.\n\n  - type: dropdown\n    id: regression\n    validations:\n      required: true\n    attributes:\n      label: Is this a regression?\n      multiple: false\n      options:\n        - Yes. This used to work, but now it doesn't.\n        - No or unsure. This never worked, or I haven't tried before.\n\n  - type: input\n    id: version\n    validations:\n      required: true\n    attributes:\n      label: Affected versions\n      description: Please specify which version of the package you are using, and if this is a known regression, what is the last known version that worked? Run e.g. `npm ls @material/web` to check your installed version.\n      placeholder: |\n        Failing in X.X.X, worked in X.X.X\n\n  - type: textarea\n    id: environment\n    validations:\n      required: true\n    attributes:\n      label: Browser/OS/Node environment\n      description: |\n        Please list which browser and operating system combination(s) you are using, and/or if this bug affects a command-line tool, please list your Node and npm versions.\n      placeholder: |\n        Browser: Chrome 103.0.5060.53\n        OS: macOS 12.4\n        Node version: 16.15.0\n        npm version: 8.11.0"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: false\ncontact_links:\n  - name: ❓ Questions, Help, and Advice\n    url: https://github.com/material-components/material-web/discussions\n    about: For general support, please refer to the Material Web discussion board.\n\n  - name: 💬 Chat\n    url: https://lit.dev/discord/\n    about: Alternatively, you can join the Lit Discord and join the `#material` channel to talk to the team.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/documentation-bug.yaml",
    "content": "name: 🐛 Documentation Bug\ndescription: Report a bug that affects Material Web documentation (https://material-web.dev/)\n\nbody:\n  - type: textarea\n    id: description\n    validations:\n      required: true\n    attributes:\n      label: Description\n      description: |\n        Please describe the documentation issue in as much detail as possible.\n      placeholder: |\n        Add issue description here.\n\n  - type: textarea\n    id: environment\n    attributes:\n      label: Browser/OS Environment\n      description: |\n        Please list which browser and operating system combination(s) you are using.\n      placeholder: |\n        Browser: Chrome 103.0.5060.53\n        OS: macOS 12.4\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature.yaml",
    "content": "name: ✨ Feature Request\ndescription: Request a feature to be added to Material Web Components.\n\nbody:\n  - type: textarea\n    id: description\n    validations:\n      required: true\n    attributes:\n      label: Description\n      description: |\n        Please describe the feature request in as much detail as possible. Include why the feature is needed, and example code or screenshots to help describe it.\n      placeholder: |\n        Add support for '...'.\n        This is needed to '...'.\n        Requirements, code examples, and screenshots that help describe the feature.\n"
  },
  {
    "path": ".github/workflows/build-catalog.yml",
    "content": "name: Build Catalog\n\non: [push]\n\npermissions:\n  contents: read\n\njobs:\n  build-catalog:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n\n      - run: npm ci\n      - run: npm run build:catalog\n        env:\n          WIREIT_FAILURES: continue\n"
  },
  {
    "path": ".github/workflows/commitlint.yml",
    "content": "name: commitlint\n\non: [pull_request]\n\npermissions:\n  contents: read\n\njobs:\n  commitlint:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          cache: npm\n\n      - run: npm install -g @commitlint/cli @commitlint/config-conventional\n      - run: 'echo \"${PR_TITLE}\" | commitlint'\n        env:\n          PR_TITLE: ${{ github.event.pull_request.title }}\n"
  },
  {
    "path": ".github/workflows/firebase-hosting-merge.yml",
    "content": "name: Deploy to Firebase Hosting on release and manual\n'on':\n  release:\n    types:\n      - published\n  workflow_dispatch:\n    # allows triggering from the gihub UI\n\npermissions:\n  contents: read\n\njobs:\n  build_and_deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 20\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n      - run: npm ci\n      - run: 'npm run build:catalog'\n      - uses: FirebaseExtended/action-hosting-deploy@v0\n        with:\n          repoToken: '${{ secrets.GITHUB_TOKEN }}'\n          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MATERIAL_WEB_CATALOG }}'\n          channelId: live\n          projectId: material-web-catalog\n          entryPoint: catalog\n"
  },
  {
    "path": ".github/workflows/firebase-hosting-pull-request.yml",
    "content": "# This file was auto-generated by the Firebase CLI\n# https://github.com/firebase/firebase-tools\n\nname: Deploy to Firebase Hosting on PR\non:\n  pull_request:\n    types: [ labeled ]\n\npermissions:\n  contents: read\n  pull-requests: write\n\njobs:\n  build_and_preview:\n    if: github.event.label.name == 'preview-catalog' && github.event.pull_request.head.repo.full_name == github.repository\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 20\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n      - run: npm ci\n      - run: 'npm run build:catalog'\n      - uses: FirebaseExtended/action-hosting-deploy@v0\n        with:\n          repoToken: '${{ secrets.GITHUB_TOKEN }}'\n          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MATERIAL_WEB_CATALOG }}'\n          projectId: material-web-catalog\n          entryPoint: catalog\n"
  },
  {
    "path": ".github/workflows/nightly.yml",
    "content": "name: Nightly publish\n\non:\n  schedule:\n    - cron: '21 3 * * *'\n  workflow_dispatch:\n    # allows triggering from the github UI\n\npermissions:\n  contents: write\n\njobs:\n  check_for_changes:\n    runs-on: ubuntu-latest\n    outputs:\n      changed: ${{ steps.check.outputs.changed }}\n\n    steps:\n      - uses: actions/checkout@v3\n      - name: Check if the current commit is less than 24 hours old\n        id: check\n        continue-on-error: true\n        run: test -n \"$(git rev-list --after='24 hours' ${{ github.sha }})\" && echo \"changed=yes\" >> \"$GITHUB_OUTPUT\"\n\n  publish:\n    needs: check_for_changes\n    if: needs.check_for_changes.outputs.changed == 'yes'\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n\n      - run: npm ci\n      - run: npm run build\n        env:\n          WIREIT_FAILURES: continue\n\n      - name: Create nightly release commit\n        run: |\n          npm version --no-git-tag-version --preid nightly.$(git rev-parse --short HEAD) prepatch\n          git config --local user.email \"action@github.com\"\n          git config --local user.name \"GitHub Action\"\n          git commit -am \"chore: nightly publish\"\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          registry-url: 'https://wombat-dressing-room.appspot.com/'\n      - run: npm publish --tag nightly\n        env:\n          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/publish.yml",
    "content": "name: Publish\n\non:\n  push:\n    tags:\n      - 'v*'\n\npermissions:\n  contents: read\n\njobs:\n  publish:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n\n      - run: npm ci\n      - run: npm run build\n        env:\n          WIREIT_FAILURES: continue\n\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          registry-url: 'https://wombat-dressing-room.appspot.com/'\n      - run: npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/release-please.yml",
    "content": "on:\n  push:\n    branches:\n      - main\n\nname: release-please\n\njobs:\n  release-please:\n    runs-on: ubuntu-latest\n    permissions:\n      contents: write\n      pull-requests: write\n    steps:\n      - uses: googleapis/release-please-action@v4\n        with:\n          token: ${{ secrets.LIT_ROBOT_ACCESS_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/test.yml",
    "content": "name: Tests\n\non: [push]\n\npermissions:\n  contents: read\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n\n      - run: npm ci\n      - run: npm run build\n        env:\n          WIREIT_FAILURES: continue\n\n  test:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n\n      - run: npm ci\n      - run: npx playwright install --with-deps\n      - run: npm test\n        env:\n          WIREIT_FAILURES: continue\n"
  },
  {
    "path": ".github/workflows/update-docs-on-main.yml",
    "content": "name: Update API Docs\n\non:\n  push:\n    branches: main\n  workflow_dispatch:\n    # allows triggering from the github UI\n\npermissions:\n  contents: write\n  pull-requests: write\n\njobs:\n  check-for-doc-changes:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 20\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n\n      - name: Install Dependencies\n        run: npm ci\n\n      - name: Update Docs\n        run: npm run update-docs\n\n      - name: Check if update-docs produces git diff\n        id: ifChange\n        run: git diff --exit-code || echo \"::set-output name=changed::yes\"\n\n      - name: Create PR\n        if: steps.ifChange.outputs.changed == 'yes'\n        uses: peter-evans/create-pull-request@v7\n        with:\n          token: ${{ secrets.LIT_ROBOT_ACCESS_TOKEN }}\n          commit-message: 'docs: update API docs'\n          author: lit-robot <lit-robot@google.com>\n          committer: lit-robot <lit-robot@google.com>\n          title: 'docs: update API docs'\n          body: This PR was auto generated by the update-docs-on-main GitHub action.\n          reviewers: asyncliz\n          branch: auto-update-docs\n          labels: |\n            Ready for Google\n            preview-catalog\n"
  },
  {
    "path": ".github/workflows/update-size-on-main.yml",
    "content": "name: Update size\n\non:\n  push:\n    branches: main\n  workflow_dispatch:\n    # allows triggering from the github UI\n\npermissions:\n  contents: write\n  pull-requests: write\n\njobs:\n  check-for-doc-changes:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 20\n          cache: npm\n      - uses: google/wireit@setup-github-actions-caching/v2\n\n      - name: Install Dependencies\n        run: npm ci\n\n      - name: Update Size\n        run: npm run update-size\n\n      - name: Check if update-size produces git diff\n        id: ifChange\n        run: git diff --exit-code || echo \"::set-output name=changed::yes\"\n\n      - name: Create or update PR\n        if: steps.ifChange.outputs.changed == 'yes'\n        uses: peter-evans/create-pull-request@v7\n        with:\n          token: ${{ secrets.LIT_ROBOT_ACCESS_TOKEN }}\n          commit-message: 'chore: update sizes'\n          author: lit-robot <lit-robot@google.com>\n          committer: lit-robot <lit-robot@google.com>\n          title: 'chore: update sizes'\n          body: This PR was auto generated by the update-size-on-main GitHub action.\n          branch: auto-update-sizes\n          # Don't automatically add reviewers or Ready for Google label until we're ready\n          # since this will be noisy.\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n*.js\n!web-test-runner.config.js\n!commitlint.config.js\n*.css\n*-styles.ts\n*.map\n*.d.ts\n!types/*.d.ts\n.wireit/\n*.tsbuildinfo\n\n!catalog/**/*.css\ncatalog/_dev\ncatalog/_prod\ncatalog/node_modules\ncatalog/.wireit\ncatalog/lib/\ncatalog/build/\ncatalog/site/components/*.md\ncatalog/site/components/images\ncatalog/site/theming/*.md\ncatalog/site/theming/images\ncatalog/site/about/*.md\ncatalog/site/about/images\ncatalog/stories/*/\n!catalog/stories/components/\n!catalog/src/types/**/*.d.ts\n"
  },
  {
    "path": ".release-please-manifest.json",
    "content": "{\n  \".\": \"2.4.1\"\n}\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\n## [2.4.1](https://github.com/material-components/material-web/compare/v2.4.0...v2.4.1) (2025-10-27)\n\n\n### Bug Fixes\n\n* **radio:** also move sibling uncheck logic after root assignment ([6010e52](https://github.com/material-components/material-web/commit/6010e52c8fcd53577a8cf2cee53095033f329d2a))\n* **radio:** move root assignment to mirror hostDisconnected ([adb8d10](https://github.com/material-components/material-web/commit/adb8d104f2ebc29890b8c578e34a412e8c5c3fc2))\n* **tokens:** `@material/web/tokens/v*` moved to `@material/web/tokens/versions/v*` ([60c0cfa](https://github.com/material-components/material-web/commit/60c0cfa58ad135c189cb0fa95c5f2744499f0327))\n\n## [2.4.0](https://github.com/material-components/material-web/compare/v2.3.0...v2.4.0) (2025-08-21)\n\n\n### Features\n\n* **button:** add disabled link support ([c3c4848](https://github.com/material-components/material-web/commit/c3c48485b152595c0e892383dc5ab38fdb1ac442))\n* **button:** add gradient support to container colors ([5bc1506](https://github.com/material-components/material-web/commit/5bc15069d136c51e912137dcba1b212a106bb1dd))\n* **catalog:** hide body if dsd-pending ([bf89645](https://github.com/material-components/material-web/commit/bf896458b0a656a40187d3fdddbc573407a4e55b))\n* **select:** add showPicker() functionality ([8808a25](https://github.com/material-components/material-web/commit/8808a25da8cb879d120c11b6961e10ef75ca5add))\n\n\n### Bug Fixes\n\n* **catalog:** hydrate CSR component pages ([0037c14](https://github.com/material-components/material-web/commit/0037c14f6ba17ae224f8377e4afcba35862c4bf4))\n* **menu:** output menu item theme values ([ca5f750](https://github.com/material-components/material-web/commit/ca5f75094b3ac2d314ccb31ec06ec653501cf801))\n* **radio:** stack overflow error when rendering many radios ([688ab3c](https://github.com/material-components/material-web/commit/688ab3cf5f12ddbff07407910b8e8e158b3282d7))\n* **ripple:** misaligned when using CSS zoom ([3072a9b](https://github.com/material-components/material-web/commit/3072a9bc286876be157e15d65b0d4877245e1acc))\n* **ripple:** remove pointerdown contextmenu bounds check for Chrome ([cd7512f](https://github.com/material-components/material-web/commit/cd7512ff90cf25ad98c6caa9842bf86d284146c7))\n\n## [2.3.0](https://github.com/material-components/material-web/compare/v2.2.0...v2.3.0) (2025-03-26)\n\n\n### Features\n\n* **button:** add download filename support for link buttons ([4098832](https://github.com/material-components/material-web/commit/4098832b8b6fe9def9c08d551014f113e39b2546))\n* **button:** rename attribute downloadFilename to download ([8aefe19](https://github.com/material-components/material-web/commit/8aefe1983d28abcc3bc9c659ff0b328454e0547e))\n* **chip:** add download attribute to assist chip ([902a84f](https://github.com/material-components/material-web/commit/902a84fe0cc389c1d691e42ce1c95d9156a4781b))\n* **icon-button:** add download attribute ([9e84130](https://github.com/material-components/material-web/commit/9e8413080d911108fd1fb97fe8909b96926e1a24))\n* **menu:** add menu padding tokens ([767d1f1](https://github.com/material-components/material-web/commit/767d1f159e9ebcd001968bb7e8bcdf6c4ef1e537))\n* **text-field:** add showPicker method ([bad490c](https://github.com/material-components/material-web/commit/bad490c7cb05be4898d8528569776d4e75bbb8fd))\n\n\n### Bug Fixes\n\n* **catalog:** add hyphen to md-evelated-button attribute ([ac9b14a](https://github.com/material-components/material-web/commit/ac9b14a65c384d9389022f11555fb063b932ec96))\n* **iconbutton:** href will respond to touch target ([ea1134a](https://github.com/material-components/material-web/commit/ea1134a1a77c032f8b8c6c749e670fca90d8cd89))\n* **labs:** add mixinCustomStateSet() for :state() compatibility ([045fe94](https://github.com/material-components/material-web/commit/045fe94872607f67da6c18d3689bff6a541102d2))\n* **listitem:** click() from listItemRoot ([1c60e56](https://github.com/material-components/material-web/commit/1c60e56c6c1210fd5a116290271b9bc7e612fdf7))\n* **menu:** export CloseReason ([29d6763](https://github.com/material-components/material-web/commit/29d6763dc3abe4e80a6fb3ad0eaca5bb24b2d29a))\n* **select:** missing accessible label ([1bdcbd3](https://github.com/material-components/material-web/commit/1bdcbd38ab96f6a7537c36cb7d61d9e8db2144e7))\n\n## [2.2.0](https://github.com/material-components/material-web/compare/v2.1.0...v2.2.0) (2024-09-17)\n\n\n### Features\n\n* **field,textfield:** add `container` slot for custom background content ([44c13cd](https://github.com/material-components/material-web/commit/44c13cdd753108137e9765bf14a6ea3ed46be18e))\n\n\n### Bug Fixes\n\n* **checkbox:** add override to symbol properties ([a9ee4f5](https://github.com/material-components/material-web/commit/a9ee4f5bc1d6702e5dc352eefed13a1d849577e3))\n* remove the input entirely and replace it with a touch target ([cf84a27](https://github.com/material-components/material-web/commit/cf84a271e75b806075427f4d176b38f8884fdd7e))\n* remove unnecessary css variable prefixes ([5044e6e](https://github.com/material-components/material-web/commit/5044e6eb2fe6c6bd3e53b19bef04ba6b6c0b2a2b))\n* Replace aria-hidden attribute with inert attribute in &lt;md-radio&gt; component ([192f17e](https://github.com/material-components/material-web/commit/192f17e8c1ce4a38cf76b5a81cb6c2b1ddcfbe46))\n* Set touch target to `display: none` ([a696121](https://github.com/material-components/material-web/commit/a69612162d79b63f0b82da0468201942dc82ed9e))\n\n## [2.1.0](https://github.com/material-components/material-web/compare/v2.0.0...v2.1.0) (2024-08-20)\n\n\n### Features\n\n* **switch:** add touch target token ([b8f362a](https://github.com/material-components/material-web/commit/b8f362a97d8369e0f6bab834794f99bd50b5ab78))\n* **textfield,field:** add leading/trailing icon spacing tokens ([c1991c4](https://github.com/material-components/material-web/commit/c1991c4c894c48fe77abe09a2791f97dc77d438f))\n\n\n### Bug Fixes\n\n* changed checkmark to check in md-icon selected slot ([2e2817b](https://github.com/material-components/material-web/commit/2e2817bab5fc51bb32363b36471cb01d1f029a46))\n\n## [2.0.0](https://github.com/material-components/material-web/compare/v1.5.1...v2.0.0) (2024-07-23)\n\n\n### ⚠ BREAKING CHANGES\n\n* **tokens:** Sass component tokens, such as `tokens.md-comp-checkbox-values()`, return `var(--md-<component>, <value>)` instead of just the CSS value. Use `$exclude-custom-properties: true` to remove them.\n* `querySelector` for `[role]` and `[aria-*]` attributes may no longer work. See `@material/web/migrations/v2/README.md` and `@material/web/migrations/v2/query-selector-aria.ts`.\n\n### Features\n\n* **button:** add `soft-disabled` attribute for focusable disabled buttons ([48124ba](https://github.com/material-components/material-web/commit/48124ba09f538c6264407a49e6bc0ba097991a9d))\n* check for server before creating treewalker from document ([0d50ed9](https://github.com/material-components/material-web/commit/0d50ed91f0c542b4d5b5e2c913930a52a46136e5))\n* **chips:** add label slot ([7ec70c4](https://github.com/material-components/material-web/commit/7ec70c4c2d8863fa1e1d38724d77a9b6d4e6a20c))\n* **chips:** add new `soft-disabled` attribute for focusable disabled chips ([750b886](https://github.com/material-components/material-web/commit/750b886acfa15960d66f83a08599d2a2155ae659))\n* **iconbutton:** add `soft-disabled` attribute for focusable disabled icon buttons ([281c092](https://github.com/material-components/material-web/commit/281c092d061f77b812e57f473e77cfd123016471))\n\n\n### Bug Fixes\n\n* add typecast ([1482bff](https://github.com/material-components/material-web/commit/1482bfff0de55e136513861c1976776c5a4b4b93))\n* aria-labels announcing twice with \"group\" on components ([5df9410](https://github.com/material-components/material-web/commit/5df9410e604cf446c83bb5ada3454596c34b2c50))\n* **chips:** add truncation support ([713f0a8](https://github.com/material-components/material-web/commit/713f0a80fcfc9ef730e1c1f88e15098b9d10735b))\n* **tokens:** `tokens.md-comp-*-values()` include custom properties by default ([55b4650](https://github.com/material-components/material-web/commit/55b46500634c022c335d9c4818121a1b5d95e111))\n\n## [1.5.1](https://github.com/material-components/material-web/compare/v1.5.0...v1.5.1) (2024-06-25)\n\n\n### Bug Fixes\n\n* **checkbox:** sass theme mixin not working ([46d66ed](https://github.com/material-components/material-web/commit/46d66ed9d188243e313e6833f244a5b750aa9fdb)), closes [#5651](https://github.com/material-components/material-web/issues/5651)\n* **dialog:** have content expand to fill height ([17aa21a](https://github.com/material-components/material-web/commit/17aa21a53ecc949b3326ed0d2c2bf461a20617c6))\n* **menu:** resolve aborted animations as false rather than reject ([4f7ff4f](https://github.com/material-components/material-web/commit/4f7ff4f63adaec11cfc7e2772990a757139be01b)), closes [#5638](https://github.com/material-components/material-web/issues/5638)\n* **switch:** pressing enter toggles the switch ([99ec9e2](https://github.com/material-components/material-web/commit/99ec9e25eb0d64887a3530e494ba8683909c0e62))\n\n## [1.5.0](https://github.com/material-components/material-web/compare/v1.4.1...v1.5.0) (2024-05-23)\n\n\n### Features\n\n* **menu:** allow customizing `scrollbar-width` ([1bf8b5f](https://github.com/material-components/material-web/commit/1bf8b5fbf9ff8f7c0084acee77988b1af9ad7e19))\n* **select:** make required asterisk optional ([8f194a5](https://github.com/material-components/material-web/commit/8f194a51dbc85ead2d9d8c10e0be69f183788a31))\n* **textfield:** make required asterisk optional ([be5bb43](https://github.com/material-components/material-web/commit/be5bb43100fbf0df3a7cfec4c4d4399559a23114))\n\n\n### Bug Fixes\n\n* **button:** add part attribute to button ([a2b5c91](https://github.com/material-components/material-web/commit/a2b5c91a549e206603f23d84233de83a8c165d77))\n* **dialog:** focus is trapped for a11y, use `no-focus-trap` to disable ([0aea436](https://github.com/material-components/material-web/commit/0aea4364a142f3db84b77ae99eea1df6a3cd8456))\n* **docs:** progress.webp not playing ([2f0c99a](https://github.com/material-components/material-web/commit/2f0c99ad3d3320341a4ae61db5abe64c37649ddb)), closes [#5569](https://github.com/material-components/material-web/issues/5569)\n* **menu:** `getBoundingClientRect()` and `getClientRects()` not working ([e1f9cbc](https://github.com/material-components/material-web/commit/e1f9cbc59e4cbb50921304158edbb8e68706c405))\n\n## [1.4.1](https://github.com/material-components/material-web/compare/v1.4.0...v1.4.1) (2024-04-15)\n\n\n### Bug Fixes\n\n* **dialog:** update info comment with autocomplete -&gt; autofocus ([fc4c999](https://github.com/material-components/material-web/commit/fc4c9992f8827e2a07e5c0b32cc48a065356cf29))\n* **select:** select.click() opens the menu ([7a6cf16](https://github.com/material-components/material-web/commit/7a6cf16a4e37889d0497af4f1c4df8be78aefa54))\n\n## [1.4.0](https://github.com/material-components/material-web/compare/v1.3.0...v1.4.0) (2024-03-21)\n\n\n### Features\n\n* **menu:** add `no-navigation-wrap` to fix select accessibility ([c6ffd70](https://github.com/material-components/material-web/commit/c6ffd70fc82060d894e4f4ef7fc43a1fb15e2a65))\n* **typography:** add `@material/web/typography/md-typescale` classes ([36dd77e](https://github.com/material-components/material-web/commit/36dd77ef97bfa9fbbd9f3a8885f010cb0741e797))\n\n\n### Bug Fixes\n\n* **button,fab,chips,labs:** text-transform inherits through shadow root ([758e615](https://github.com/material-components/material-web/commit/758e61581ef30481e5dd8c1bd7707db2a2988ab8))\n* **elevation:** expose md-elevation `::part` in all components ([b74e3dd](https://github.com/material-components/material-web/commit/b74e3dd2e3f11fa20dd5a39148a6b491bacded16))\n* **elevation:** limit elevation transition to box-shadow and opacity ([34c0a67](https://github.com/material-components/material-web/commit/34c0a6779e8a722ec6dfbf6ad5c0d1bb607289e6))\n* publish `.css` files for `[@import](https://github.com/import)`-ing ([cde649c](https://github.com/material-components/material-web/commit/cde649c83b5236bc441607cda797bdd8caf7e6ad))\n* rename internal `&lt;styles&gt;.css.js` to `<styles>.css` ([c35bad0](https://github.com/material-components/material-web/commit/c35bad0c643a7c3ee982739868ee3676372e23ad))\n* **switch:** reflect `selected` state in input event ([8d201e0](https://github.com/material-components/material-web/commit/8d201e0d5dfb5c26aa6b4e58e526db1b1ef6c404))\n* **tabs:** default `scroll-behavior: smooth` not working ([274ce3e](https://github.com/material-components/material-web/commit/274ce3e4e06867acfab642123192e0a7aa9b45d4)), closes [#5497](https://github.com/material-components/material-web/issues/5497)\n* **textfield:** no longer inherits `text-align` from parents ([668f0ee](https://github.com/material-components/material-web/commit/668f0ee5e96ed0b697596d7fa7d0b4748924162b)), closes [#5509](https://github.com/material-components/material-web/issues/5509)\n* **typography:** rename md-typescale.js to md-typescale-styles.js ([1e47fd7](https://github.com/material-components/material-web/commit/1e47fd7383ea2818beab64e7f9f4339cc790a5ee))\n* use explicit `CSSResult[]` types for static styles ([ce41b7b](https://github.com/material-components/material-web/commit/ce41b7bfb3fc04f8e93a781eb6d92fe15b1d7fac))\n\n## [1.3.0](https://github.com/material-components/material-web/compare/v1.2.0...v1.3.0) (2024-02-22)\n\n\n### Features\n\n* add `--md-sys-shape-*` tokens for all components ([41bac9e](https://github.com/material-components/material-web/commit/41bac9e44d0afef2a9cba08cb855572556e61342))\n* **tabs:** expose activeTabIndex ([4bce86d](https://github.com/material-components/material-web/commit/4bce86d18b8d553607b8d2ee909faff0c095096b)), closes [#5297](https://github.com/material-components/material-web/issues/5297)\n* **tokens:** add component custom properties to Sass values ([feff721](https://github.com/material-components/material-web/commit/feff7214a753559bc5ed5da5ed50ad508b4417e7))\n\n\n### Bug Fixes\n\n* **icon:** fix uncentered icons when using WCAG text spacing overrides ([b23e321](https://github.com/material-components/material-web/commit/b23e3218eebc293dc99a7343a6ecddebe585e89e))\n* **labs:** hasConstructed and constructor deprecated, changing tabIndex update in connectedCallback ([fb086bb](https://github.com/material-components/material-web/commit/fb086bbd355d69a99dc9e6c38c2b8ebb7d7ce9ad))\n* **labs:** removing hasConstructed and setting privateIsConstructed to handle setting tabIndex ([ea518d0](https://github.com/material-components/material-web/commit/ea518d0353facd94037843aca7e623b91a16363c))\n* **labs:** update tabIndex once the element is connected to the DOM ([a6b8c09](https://github.com/material-components/material-web/commit/a6b8c090262ef173eb9d88161ba5051c31e2f930))\n* **menu:** left arrow in submenu closes submenu in closure ([2049323](https://github.com/material-components/material-web/commit/2049323dde3eec643f14a03f12f0b449e4432aeb))\n* remove `:host-context` rtl selectors ([f2ff867](https://github.com/material-components/material-web/commit/f2ff86725ccb96347af1881657428e4de1fe0bae))\n\n## [1.2.0](https://github.com/material-components/material-web/compare/v1.1.1...v1.2.0) (2024-01-24)\n\n\n### Features\n\n* **select:** add keyboard support for arrow end and home ([8912019](https://github.com/material-components/material-web/commit/8912019b902803a018a1d92fb7caaa39369f6cf6))\n* **select:** add menuAlign to allow end-aligning the select menu ([50a9ffa](https://github.com/material-components/material-web/commit/50a9ffae46499ec575a38887b5dcce8f5506e576))\n* **select:** support width fit-content ([4bb9418](https://github.com/material-components/material-web/commit/4bb9418a52564984e32666c9383d8eb262e876cf))\n* **textfield:** add `no-spinner` to remove number spin buttons ([3c6e550](https://github.com/material-components/material-web/commit/3c6e55006b3a7bad0d7fa782fab3141e1961e686))\n\n\n### Bug Fixes\n\n* **button:** add missing sass imports ([37fad06](https://github.com/material-components/material-web/commit/37fad0660dd96cf565062075e056a6288fea5290))\n* **chips:** filter's `click.preventDefault()` not working when also updating `selected` ([5dc870b](https://github.com/material-components/material-web/commit/5dc870bfe1609a50702ef078a3da1b01620f7ef8))\n* **dialog:** buttons not reflecting value attribute when setting property ([35913a6](https://github.com/material-components/material-web/commit/35913a6ea42776f2c402d879067ae772833e52b5)), closes [#5409](https://github.com/material-components/material-web/issues/5409)\n* **dialog:** immediate escape key not firing cancel event in Chrome 120 ([be3dc6f](https://github.com/material-components/material-web/commit/be3dc6f6776f86a95619de0d708e2815e744ac6d)), closes [#5313](https://github.com/material-components/material-web/issues/5313)\n* **dialog:** text is now selectable ([4ae9db6](https://github.com/material-components/material-web/commit/4ae9db6c67e3704a7be8bd83dfa18dbd50b7fc94))\n* forms correctly focus the first invalid control instead of last ([7dd7a68](https://github.com/material-components/material-web/commit/7dd7a68ae9229d5685fe4ab85a6d8514624245d8))\n* **labs:** add card support for high contrast mode ([53ec44b](https://github.com/material-components/material-web/commit/53ec44b4b81cbf691a0455efb6d9907957ef1205))\n* **labs:** card content not clickable with outline fix ([9c5cff8](https://github.com/material-components/material-web/commit/9c5cff8f90198860149e6237798e73f2c846a36b)), closes [#5312](https://github.com/material-components/material-web/issues/5312)\n* **menu:** `--md-menu-item-container-color` not working ([86bd6f8](https://github.com/material-components/material-web/commit/86bd6f830913330e41033c5eceab938fa4f42bc2))\n* **progress:** prevent unnecessary animation to run when not visible ([4de5e74](https://github.com/material-components/material-web/commit/4de5e74b5caec5cff0fdb4696cb64790d471170c))\n* rename and move `internal/controller/events` ([eca1357](https://github.com/material-components/material-web/commit/eca1357f1a7d185d4ec8a368f6467f481f9b2798))\n* **ripple:** multiple touches causing ripples to start from center ([cef1b74](https://github.com/material-components/material-web/commit/cef1b740ee0a72488a9a9c4f197e2398d4027f1e)), closes [#5349](https://github.com/material-components/material-web/issues/5349)\n* **select:** allow aria-expanded to be set to false ([73725be](https://github.com/material-components/material-web/commit/73725be67053f3a5ba4aa25f8b12a82afc4cad71)), closes [#5360](https://github.com/material-components/material-web/issues/5360)\n* **select:** clicking select toggles the menu rather than just open ([043bbad](https://github.com/material-components/material-web/commit/043bbad6f30293c053c1fc1689cbf0d1e90c0d75))\n* **select:** ensure md-select selection logic uses fresh DOM references ([8942715](https://github.com/material-components/material-web/commit/89427158b7a15265556db2f86423a9905760c696))\n* **select:** expose SelectOption interface ([edb3559](https://github.com/material-components/material-web/commit/edb3559a1ce12d13921d93761bedbfde4c1c7898))\n* **slider:** move ripple and focus ring beneath handle ([68b078b](https://github.com/material-components/material-web/commit/68b078b4e1f7357a15098bb59ae22ae8a4d02cbf))\n* **slider:** nested dir attributes do not break on chrome 120+ ([57168f6](https://github.com/material-components/material-web/commit/57168f6a95403cd5a29e2774e42525efeb1e3eae))\n* **tabs:** `--md-elevation-level` no longer leaks into tabs ([ddf1fb0](https://github.com/material-components/material-web/commit/ddf1fb0c613e43d26735832b9fdb1efcf2969949)), closes [#5137](https://github.com/material-components/material-web/issues/5137)\n* **tabs:** `tabs.scrollToTab()` not working ([eb7c17e](https://github.com/material-components/material-web/commit/eb7c17e3dc6b14d900f4ce9d13d93ce0c09b9806))\n* **textfield:** counter showing when max length is 0 or removed ([9973b90](https://github.com/material-components/material-web/commit/9973b90981b2414cc18dfb91279f204b7f50c080))\n* **textfield:** error styles not removing when an unrelated control is invalid ([3151fd8](https://github.com/material-components/material-web/commit/3151fd8d904f0ac529f3a4f872a9dac537a65dc0))\n* **textfield:** focus style lost after `reportValidity()` during change ([6efc904](https://github.com/material-components/material-web/commit/6efc90403b17684f77d1da577453fa66cfcb1c30))\n* **textfield:** remove Firefox high contrast mode background on linux ([926edfb](https://github.com/material-components/material-web/commit/926edfb367de71eed77deaba45a4a7eaa79342fc))\n* **tokens:** moved '_values.scss' to 'internal/_values.scss' ([b986b1e](https://github.com/material-components/material-web/commit/b986b1eb7cac5a5feef90478406247cebe7e690e))\n\n\n### Performance Improvements\n\n* **ripple:** don't process events in high contrast mode ([839667d](https://github.com/material-components/material-web/commit/839667dcf6becda087015edcb5468b8b2107d8c7))\n\n## [1.1.1](https://github.com/material-components/material-web/compare/v1.1.0...v1.1.1) (2023-12-13)\n\n\n### Bug Fixes\n\n* formAssociated disabled attribute not working ([ab04299](https://github.com/material-components/material-web/commit/ab042992acd6702f11fd8f1d64bb1597cb701815))\n\n## [1.1.0](https://github.com/material-components/material-web/compare/v1.0.1...v1.1.0) (2023-12-12)\n\n\n### Features\n\n* **chips:** add filter chip `selected-icon` slot to customize checkmark ([89b4c2e](https://github.com/material-components/material-web/commit/89b4c2e752fd7055f35f8b743cad6861376f3d95))\n* **chips:** add tokens to customize padding ([c9e8de0](https://github.com/material-components/material-web/commit/c9e8de0207f158791d79629599682edf21d26498))\n* **chip:** trailing remove icon can now be customized ([b44b90c](https://github.com/material-components/material-web/commit/b44b90c82643be1d0ae9c24d2450081db13dc04d))\n* **chip:** trailing remove icon can now be customized ([49a6be1](https://github.com/material-components/material-web/commit/49a6be141b1f4a28c27b0982e0123ede7825a19d))\n* **chip:** trailing remove icon can now be customized ([76883cd](https://github.com/material-components/material-web/commit/76883cd420a058dfa9c71c887605e890233ff53b))\n* **menu,select:** allow menu and select typeahead to read default slot text content ([af49b64](https://github.com/material-components/material-web/commit/af49b64ab4e66872ff25d6ad767f9d37fce231b6))\n* **menu:** add document-level positioning ([2b591ca](https://github.com/material-components/material-web/commit/2b591ca759ec8180659476a072db1a8b83c1ae20)), closes [#5120](https://github.com/material-components/material-web/issues/5120)\n* **menu:** add popover functionality ([7859b39](https://github.com/material-components/material-web/commit/7859b39afef3de779225dfdb87470daf1f91fc27)), closes [#2023](https://github.com/material-components/material-web/issues/2023) [#5120](https://github.com/material-components/material-web/issues/5120)\n* **radio:** add required constraint validation ([b5686ea](https://github.com/material-components/material-web/commit/b5686ea4e0ad17717ef086bcdf7dfdeb565acc9b)), closes [#4316](https://github.com/material-components/material-web/issues/4316)\n* **select:** match menu width to select and introduce clamp-menu-width ([a5a40b6](https://github.com/material-components/material-web/commit/a5a40b6dd35a36e1d3f9a512d68369f3d639922d))\n* **switch:** add slot icons ([9255be1](https://github.com/material-components/material-web/commit/9255be1be587cdbb29d6cd99efefc512de4882db))\n\n\n### Bug Fixes\n\n* 5182: dialog icon padding error ([257e9c6](https://github.com/material-components/material-web/commit/257e9c6f6f47bb61155fd21729bbd8326a7156e2))\n* add `@material/web@nightly` publishes ([91c1221](https://github.com/material-components/material-web/commit/91c1221cef63b82e134949c7ff14b99653897602))\n* **behaviors:** add focusable behavior to labs ([d1ef1fe](https://github.com/material-components/material-web/commit/d1ef1febb648b7afd521e05123024f9e4c71bca0))\n* **behaviors:** validation not reporting when form tries to submit ([c53a419](https://github.com/material-components/material-web/commit/c53a4194e9796b5bd862ac166e66f0c16d4d8bcd))\n* **button:** allow overriding `cursor` using CSS ([798f5ae](https://github.com/material-components/material-web/commit/798f5ae179c63d22a83ad4a7bcf8bb085541f6a1))\n* **button:** allow overriding `min-width` and `user-select` ([1852238](https://github.com/material-components/material-web/commit/18522381d8038beeb28948bf993a679cc8feb02a))\n* **button:** allow overriding `padding` and `gap` ([5bb4a42](https://github.com/material-components/material-web/commit/5bb4a422de35e953a35c032a66949cacea1e0496))\n* **button:** don't show overflowing labels ([8dcb3f6](https://github.com/material-components/material-web/commit/8dcb3f62c7ccce09290211350e418c0089265305))\n* **button:** height increases when label wraps ([7cd657b](https://github.com/material-components/material-web/commit/7cd657b83dcb80107d8d4e3601491b259476742b))\n* **button:** labels not truncating, add support for multiline with `text-wrap: wrap` ([5d964ad](https://github.com/material-components/material-web/commit/5d964adcf9df7cfc4cc0b6108e378e6bc6b330fd))\n* **button:** sometimes submits form even when click listener prevents default ([9e3f080](https://github.com/material-components/material-web/commit/9e3f0801aab349504f88e9aa221d0fcb5baa248b)), closes [#5032](https://github.com/material-components/material-web/issues/5032)\n* **checkbox:** `checked` and `indeterminate` not updated during input event ([e78a52f](https://github.com/material-components/material-web/commit/e78a52f1e4f427cf328ab1e2373a7ba9ed1d4d8f))\n* **chip:** disabled attribute prevents click event. ([2dba006](https://github.com/material-components/material-web/commit/2dba006ddd49f71f362bfb7b3c1547a4f9ced8c2))\n* **chip:** disabled attribute prevents click event. ([d501ddd](https://github.com/material-components/material-web/commit/d501dddfd541a72ef50aff667cd06644801b1e90))\n* **chip:** make tap highlight transparent ([c3bfbaa](https://github.com/material-components/material-web/commit/c3bfbaaf4c055fc3bc68f6f28b229ac2aa8fe5bc))\n* Circular progress isn't circular in flex column display ([075119c](https://github.com/material-components/material-web/commit/075119c98fd71d3f4ec1b8c3e513e2c750e4550f))\n* **docs:** prepare docs generator for mixin version of lit analyzer ([5e0000a](https://github.com/material-components/material-web/commit/5e0000a495ae6dc836a2e7cedf9778830e326ad0))\n* **fab:** make tap highlight transparent ([4e8053d](https://github.com/material-components/material-web/commit/4e8053d15d8d06ed152844a1517a3f2313e37651))\n* **filter-chip:** reflect correct value on click event ([0b4d4c2](https://github.com/material-components/material-web/commit/0b4d4c2e07b4f6be2289733500fbba36de29a2d3))\n* **list-item:** hide headline overflow and fix width. ([4697407](https://github.com/material-components/material-web/commit/4697407cff0c8032c3a292aad24338df0927f865))\n* **list-item:** make tap highlight transparent ([cca0789](https://github.com/material-components/material-web/commit/cca0789826af0dae789f143d243c359aa23dd1ad))\n* **menu:** declare popover API types ([bf8d3f6](https://github.com/material-components/material-web/commit/bf8d3f6289c76bc708e5b487231939d02bfab3c4))\n* **menu:** declare popover property type on HTMLElement ([3d8c7ac](https://github.com/material-components/material-web/commit/3d8c7ac7f3780158f885f7ca647b658071c81556))\n* **menu:** escape not closing menus with submenus ([bd88880](https://github.com/material-components/material-web/commit/bd88880f78e54e88cb5083a74134ac4e130f3228))\n* **menu:** shift tab into anchor closes menu ([c4cbd36](https://github.com/material-components/material-web/commit/c4cbd3612c08a6143eb104db07eb90a1171fb23c))\n* **progress:** allow linear progress to fill flex containers ([a450e42](https://github.com/material-components/material-web/commit/a450e4288cdac6f61a13790f8820d57a7fb141a7)), closes [#5042](https://github.com/material-components/material-web/issues/5042)\n* **segmented-button:** make tap highlight transparent ([e4728bd](https://github.com/material-components/material-web/commit/e4728bd018e5640fb03fc49169805a51aabf0a5c))\n* **select,textfield:** native form validation shows error state ([6b5ab21](https://github.com/material-components/material-web/commit/6b5ab21332438dc971eb94b7da2271511bb99719))\n* **select:** focus() delegates properly, focus on reporting validity ([897d977](https://github.com/material-components/material-web/commit/897d9775c2143dd3b8d07deab35dfe90decd1336))\n* **select:** form failure no longer throws non-focusable error ([a5a6974](https://github.com/material-components/material-web/commit/a5a6974decb19b5ce42020c3c7c5386a8b203d76)), closes [#5078](https://github.com/material-components/material-web/issues/5078)\n* **select:** select menu render is over most stacking contexts with popover ([a2b3204](https://github.com/material-components/material-web/commit/a2b32042bd51c34853a9ca7b1c7901fb69270a44))\n* **tabs:** allow changing tab padding ([dd005df](https://github.com/material-components/material-web/commit/dd005df7806002a60fe9af136387ad4623b4ae8e))\n* **tabs:** fields intended to be accessed from templates must be exported ([b7be1cb](https://github.com/material-components/material-web/commit/b7be1cbbb4e7b08421d293ba89f364632822d113))\n* **text-field:** wrap text in textarea ([4fce487](https://github.com/material-components/material-web/commit/4fce487c812954da816c0bdb4ba5165902c2f3e9))\n\n## [1.0.1](https://github.com/material-components/material-web/compare/v1.0.0...v1.0.1) (2023-10-18)\n\n\n### Bug Fixes\n\n* **catalog:** align one liners to center ([fbc1fa6](https://github.com/material-components/material-web/commit/fbc1fa626a92299c627004efa9d41151b44febb0))\n* **catalog:** center items in blockquotes ([5235b3e](https://github.com/material-components/material-web/commit/5235b3ea52b7aa5a27c2b00a49712a3ce0e22378))\n* **checkbox:** cursor should be pointer when not disabled ([18fe451](https://github.com/material-components/material-web/commit/18fe45170a66588e84ecaac9ef2be0f96bec5d8d)), closes [#5079](https://github.com/material-components/material-web/issues/5079)\n* **fab:** cursor should be pointer ([5280c6e](https://github.com/material-components/material-web/commit/5280c6ec27ee54f82df4f4a25f0a1343961c168b)), closes [#5017](https://github.com/material-components/material-web/issues/5017)\n* **list:** list items will not escape their parent when parent width is restricted ([4b00a95](https://github.com/material-components/material-web/commit/4b00a9561c39b8f87299daed36e4aff0679e1263))\n* **list:** show pointer cursor for button list items ([16480d0](https://github.com/material-components/material-web/commit/16480d0e5d1c24f24ef143f8401192e6fa7e2c52)), closes [#5045](https://github.com/material-components/material-web/issues/5045)\n* **md-item:** exclude start slot from hidden overflow ([5607059](https://github.com/material-components/material-web/commit/56070593cebeb1b25b87fbe7e4767f6291548004))\n* **md-item:** exclude start slot from hidden overflow ([e087141](https://github.com/material-components/material-web/commit/e0871411dd70554dd47bd256da9c2c50b44404c2))\n* **menu,select:** enter clicks href items ([8ae8c02](https://github.com/material-components/material-web/commit/8ae8c02866d9284ee2e3a4e95b7cf573fdebf984))\n* **menu:** fix menu item fade in order animation ([73eb15e](https://github.com/material-components/material-web/commit/73eb15ebee06d1ac12e94a43d7b59234b8bd48ee)), closes [#5014](https://github.com/material-components/material-web/issues/5014)\n* **menu:** fix menu OOB from resizing window ([863109e](https://github.com/material-components/material-web/commit/863109e2043d82af2acf28c90a9393509b6ef5ee)), closes [#5063](https://github.com/material-components/material-web/issues/5063)\n* **menu:** fix menu tapping behaviors on iOS and do not close on anchor click ([8bbb4b4](https://github.com/material-components/material-web/commit/8bbb4b4ffffa45373bc539da95152af5724713a8))\n* **menu:** fix submenu SSR left keyboard close navigation ([d6f7220](https://github.com/material-components/material-web/commit/d6f7220f0b0d394ae265ca1546eb0af4f63c07d9))\n* **radio:** cursor should be pointer except when disabled ([7779987](https://github.com/material-components/material-web/commit/7779987118a6c88091ad378eeee24b96f0c2c037))\n* **select:** cursor on select options should be pointer ([ff250dc](https://github.com/material-components/material-web/commit/ff250dc983794e356c329a9bef8f391583948d71)), closes [#5066](https://github.com/material-components/material-web/issues/5066)\n* **slider:** slider knob has size to drag on ios safari ([6298cd2](https://github.com/material-components/material-web/commit/6298cd2cf04cc4c62e940972068d7469a9f1a1cc)), closes [#5016](https://github.com/material-components/material-web/issues/5016)\n* **switch:** cursor should be pointer except when disabled ([9a3ff28](https://github.com/material-components/material-web/commit/9a3ff289f5343e4350afa5951cf09527f270c2c6)), closes [#5075](https://github.com/material-components/material-web/issues/5075)\n* **tabs:** revert `isTab` check so it is possible to create your own tab ([db3c865](https://github.com/material-components/material-web/commit/db3c8651c2407e777042cace9ba7aac4eb75f988))\n* **tabs:** revert `isTab` check so it is possible to create your own tab ([e10186e](https://github.com/material-components/material-web/commit/e10186e91b35e4844e437914394e5581ff63fbc1))\n* **tabs:** use `md-tab` attribute to brand individual tab children ([8ec0813](https://github.com/material-components/material-web/commit/8ec08133af05c0755fbac764b3275af0f8ae0c1c))\n* **textfield:** calling focus on textfield with a leading icon focuses the input ([8f999d4](https://github.com/material-components/material-web/commit/8f999d4a0db80658664437e38bb51f2eaee6fe2d))\n* **textfield:** forward the `multiple` field to the native input ([03e5a7e](https://github.com/material-components/material-web/commit/03e5a7ec8be9690368677693f95e3ba1c640852f)), closes [#5064](https://github.com/material-components/material-web/issues/5064)\n* **textfield:** missing focused left border for textarea in HCM ([9194cc9](https://github.com/material-components/material-web/commit/9194cc94db76c5395cfff3e2bd2bb205c702d1a4))\n* **tabs:** use `md-tab` attribute to brand individual tab children\n\n\n### Reverts\n\n* fix(tabs)!: use md-tab attribute to brand individual tab children ([d1f3887](https://github.com/material-components/material-web/commit/d1f3887613bf9eda7a148b8c3cebd1f370b4cc26))\n* pardon the mess, \"use `md-tab` attribute to brand individual tab children\" is not a breaking change ([43af3ba](https://github.com/material-components/material-web/commit/43af3baa7f599c0d9cf3f5562e2a772e229d95c2))\n\n## [1.0.0](https://github.com/material-components/material-web/compare/v1.0.0-pre.17...v1.0.0) (2023-09-26)\n\n\n### ⚠ BREAKING CHANGES\n\n* **list:** the new ListController behavior no longer waits for event.preventDefault asynchronously because it was causing keyboard navigations to scroll the page.\n* **list:** `<md-list-item>` now uses slots instead of properties and has removed many prescriptive items (such as avatar, image, and video items). The default slot can be used for any custom content. ```html <md-list-item>   <div slot=\"overline\">OVERLINE</div>   <div slot=\"headline\">First line</div>   <div slot=\"supporting-text\">Second+ lines</div>   <div slot=\"trailing-supporting-text\">Trailing</div>   <md-icon slot=\"start\">star</md-icon>   <md-icon slot=\"end\">star</md-icon> </md-list-item> ``` Add `type=\"button\"` or `type=\"link\"` for interactive list items.\n* **menu:** Several enums in menu had their values changed from SCREAM_CASE to kebab-case to follow style guide. They are NAVIGABLE_KEYS -> NavigableKey, SELECTION_KEY -> SelectionKey, CLOSE_REASON -> CloseReason, KEYDOWN_CLOSE_KEY -> KeydownCloseKey\n* **menu,select:** refactor `fixed` property to `positioning=\"fixed\"` in Menu and `menuFixed` to `menuPositioning=\"fixed\"`\n* **menu:** This change refactors menu-item to no longer subclass or import from list-item. It also refactors it to use md-item directly which means that the API of menu item has moved from properties to slots. `start-*` and `end-*` slots are now just `start` and `end`, many tokens are now gone in favor of slotting. `headline` property is now a `slot=\"headline\"` slot. Typeahead search text can now be set via `typeaheadText` which defaults to the slotted headline `textContent`. `select-option` now has the `displayText` which is used to display text in the `md-select` when the option is selected; defaults to the slotted headline `textContent`.\n* **menu:** We have deleted `md-sub-menu-item`. Instead it is recommended to use `md-sub-menu` which can have `md-menu-item[slot=item]` and `md-menu[slot=menu]` slotted into it. This makes `sub-menu-item` accessible for screen readers using linear navigation\n* **menu:** Menu no longer uses md-list internally which means the list-related properties such as `list-tabindex` and `type` should now be on the host of md-menu. The new attributes should be `tabindex` and `role` respectively.\n* **iconbutton:** Replace `container-size` tokens with `container-width` and `container-height`.\n* **list:** the `noninteractive` property has been replaced by the `interactive` property, and by default, a list-item will no longer show a ripple or focus ring. What to change:\n    - To preserve prior default behavior, add the `interactive` attribute explicitly.\n    - Any setting of a truthy `noninteractive` attribute or property can be removed as it's the new default behavior.\n* **menu:** rename corner and focus state values lowercase with dashes\n* **chips:** chips now follow the [aria toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/). Chip sets are toolbars and chips are buttons or links. Filter chips are toggle buttons. What to change:\n    - Remove `type` attribute from `<md-chip-set>` (you can mix and match chip types!)\n    - Remove `single-select` from `<md-chip-set>`. Use JS to control filter chips if single selection is required. Radio filter chips will come in a future update.\n    - Disabled chips CAN be focused with the keyboard if `always-focusable` is set.\n    - Filter chips no longer dispatch a `\"selected\"` event. Listen to `\"click\"` and use `event.target.selected` instead.\n    - ArrowUp and ArrowDown no longer navigate between chips. These are reserved for chip actions, like dropdown menu chips.\n* **list,menu,select:** the data-variant=\"..\" selectors in list-item and all variants have been removed in favor of their respective slots. e.g. a slotted icon of the form `md-icon[slot=end][data-variant=icon]` should now be `md-icon[slot=end-icon]`.\n* **menu:** menu selected container color changed to secondary-container\n* **list:** \n* **list:** Aria and roles on List have been moved to the host element. list-tabindex attribute should be migrated to tabindex attribute. type attribute should be migrated to role attribute.\n* **list,menu,select:** removed `active` from list-item, menu-item, and select-option. Instead, List uses tabindex to track whether something is focusable.\n* **select:** `option.selected` no longer reflects. Set the attribute instead if relying on the attribute for styles/queries.\n* **dialog:** if overriding margin on a dialog's content, swap it to padding. If a dialog's slotted first or last child has built-in margin (such as `<h3>` or `<p>`), remove the top/bottom margin as needed (since margin swapped to padding, there's no more margin collapsing).\n* **tabs:** Rename the `selected` index property on md-tabs to `activeTabIndex` (`active-tab-index` attribute). Rename `select-on-focus` to `auto-activate`\n* **typography:** composite `-type` tokens are no longer supported. Use discrete `-font`, `-size`, `-line-height`, and `-weight` tokens instead.\n* **tabs:** replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`\n* **tabs:** rename `selected` to `active` for primary and secondary tabs.\n* **textfield:** replace slot names `leadingicon` and `trailingicon` with `leading-icon` and `trailing-icon`\n* **select:** replace `leadingicon` and `trailingicon` slot names with `leading-icon` and `trailing-icon`\n* **navigationtab:** change slot names activeIcon and inactiveIcon to active-icon and inactive-icon\n\n### Features\n\n* **chips:** swap to toolbar a11y pattern ([16bfac1](https://github.com/material-components/material-web/commit/16bfac1343128f641b34e74e21c69a05a28a9185))\n* **iconbutton:** update tokens to v0.192 ([e8b5b29](https://github.com/material-components/material-web/commit/e8b5b29d1eb18566126b77fcdc01c5f7f8899e25))\n* **item:** add `&lt;md-item&gt;` layout component ([ffe4f79](https://github.com/material-components/material-web/commit/ffe4f79b5d749eabf051e677cb09a03488a1717d))\n* **items:** add `&lt;md-item&gt;` to `@material/web/labs` ([b35212a](https://github.com/material-components/material-web/commit/b35212a9ac7907af3460ea64cc4f2e5874bf73fc))\n* **list,menu,select:** add slots for specific slotted variants ([ed68995](https://github.com/material-components/material-web/commit/ed689952ddc6380fc6f004e190d521e6c739e415))\n* **menu:** create a Menu interface for easier md-menu wrapping ([5fad4f0](https://github.com/material-components/material-web/commit/5fad4f088f2bcc957ee5cef0c261d537bf7caa12))\n* **menu:** do not close menu if anchor is clicked ([c7c276f](https://github.com/material-components/material-web/commit/c7c276fdfa5eb2c7b4d06c7ccef8e36deaa96e5c))\n* **menu:** implement md-sub-menu ([54fbb2e](https://github.com/material-components/material-web/commit/54fbb2ed5ee28d68d6d27b8121a8c4b3b1d10c8e))\n* **menu:** menus will resize and flip corners to stay in viewport ([235a203](https://github.com/material-components/material-web/commit/235a2033d7e492e5ed245e7a81b0082e8ecd35ac))\n* **menu:** update tokens to v0.192 ([94b5c81](https://github.com/material-components/material-web/commit/94b5c8125e2f264699b8afd1b44968346a526759))\n* **select:** add required and form association ([4ad2336](https://github.com/material-components/material-web/commit/4ad2336b878b8db1523e1d333fc80c72a0969647)), closes [#4903](https://github.com/material-components/material-web/issues/4903)\n* **tabs:** add `tabs` property to retrieve tab elements ([bf48fc3](https://github.com/material-components/material-web/commit/bf48fc307ecadb7eb768052a54838a5ab532e059))\n* **typography:** add typography Sass APIs ([8e480de](https://github.com/material-components/material-web/commit/8e480deae3501eaec7d8d5f5b959bff10ab699d7))\n\n\n### Bug Fixes\n\n* aria polyfill overrides user values and user values override internals values ([8aa4faf](https://github.com/material-components/material-web/commit/8aa4faf14ac8207c9a39f783f971bfbf5933bfa5))\n* **catalog:** remove TODO from home page ([af27ff8](https://github.com/material-components/material-web/commit/af27ff8374e1814e7f1a3b303a28ab1c49b115a7))\n* **dialog:** change content margin to padding ([8613fe6](https://github.com/material-components/material-web/commit/8613fe6a5845f87c7264254bdc114341fef7d824))\n* **dialog:** not delegating focus in closure ([375b766](https://github.com/material-components/material-web/commit/375b7664efcc84925f7f283ef0902c32b558c090))\n* **iconbutton:** allow prevent default click for toggles ([ed539c6](https://github.com/material-components/material-web/commit/ed539c6853cc6f1c6e5f3b2c40f06e83c779c3e5)), closes [#4857](https://github.com/material-components/material-web/issues/4857)\n* **iconbutton:** fix HCM disabled opacity and outlined ([1163315](https://github.com/material-components/material-web/commit/116331594826032c09e5dacee5e97d729c7f36a3))\n* **linearprogress:** linear progress buffer dots now visible in HCM ([70bfea8](https://github.com/material-components/material-web/commit/70bfea873818d321343649df36046931c8eaab25))\n* **list,menu:** clicking items in a list followed by keyboard nav functions as expected ([af171df](https://github.com/material-components/material-web/commit/af171df086d73094df4fa01ba052ffdef06a1197))\n* **list,menu:** list items left right keyboard navigation ([fad6104](https://github.com/material-components/material-web/commit/fad61043914463f3e385bf786f6a6ff0b4d0c60c))\n* **list:** list items are now noninteractive by default ([3b5cbc4](https://github.com/material-components/material-web/commit/3b5cbc4ede8c32066a76087870f08b55a246d13a))\n* **list:** text items are no longer tabbable, links cannot be disabled ([54c4ddb](https://github.com/material-components/material-web/commit/54c4ddba4c13be05de08a64f635a0cf11fbb33cb))\n* **list:** update tokens to 0.192 ([58539b1](https://github.com/material-components/material-web/commit/58539b156984d7bbbbb4a534230d796596984323))\n* **menu,select:** fix final aria issues ([aeb5103](https://github.com/material-components/material-web/commit/aeb5103e1c6342d565f4af01da1f9d3fb59c50a6))\n* **menu:** allow submenus to close when focus is lost ([7a19c7e](https://github.com/material-components/material-web/commit/7a19c7e97a40103e65697c1f669d887b176f1cc6))\n* **menu:** apply padding to dividers per spec ([df52d92](https://github.com/material-components/material-web/commit/df52d927242fc13828f58fd10b495c586ce92324))\n* **menu:** expose item custom properties and fix selected color ([d27ef2e](https://github.com/material-components/material-web/commit/d27ef2e059454624293c0a6ce7ee6d25afde8d5d))\n* **menu:** fix submenus on mobile ([368991c](https://github.com/material-components/material-web/commit/368991ce306e904959a5d53e49293a8a683c46a1))\n* **menu:** menu's default focus behavior follows google accessibility practices ([2927245](https://github.com/material-components/material-web/commit/29272451146afcb918237c11e8b7d7ef715a4675))\n* **menu:** update default min width to spec and allow max-width to inherit ([2e25bf8](https://github.com/material-components/material-web/commit/2e25bf8ce2979de4a5bccabc244fd4ca715ecebc))\n* **navigationtab:** change slot names activeIcon and inactiveIcon to active-icon and inactive-icon ([f019ac3](https://github.com/material-components/material-web/commit/f019ac37fe07da0a0a75821ce955dc6c6cbdc3c9))\n* **radio:** dispatches input event on select ([e444de3](https://github.com/material-components/material-web/commit/e444de3c0264697e2fc094c35ae59808a04ff29f))\n* **select:** change slot names to kebab-case ([059dad5](https://github.com/material-components/material-web/commit/059dad5d44ed43f4c84e754ce73f10b24bbbd1ae))\n* **select:** don't reflect `selected` attribute ([573caae](https://github.com/material-components/material-web/commit/573caaee1b7fe64b57b84e2b287b6c5c74666de1))\n* **select:** select can reopen when animation interrupted ([78e7c17](https://github.com/material-components/material-web/commit/78e7c1742f04437eee3f804cc73de9d3ffaaf1bb))\n* **select:** update select docs and fix initial selection ([5e4434b](https://github.com/material-components/material-web/commit/5e4434bfed93db4ea0b02f3987483860ed7b2411))\n* **slider:** border should only appear when handle nubs are overlapping ([6e72a8e](https://github.com/material-components/material-web/commit/6e72a8e5f4d118992fd110e19a02a2a3b2e31dc9))\n* **slider:** label should not changed size when stacked ([b50d5c8](https://github.com/material-components/material-web/commit/b50d5c87b33f0a46bc98e2d362abc0656fdbc424))\n* **slider:** make tickmarks visible when slider is disabled ([e9d1e7d](https://github.com/material-components/material-web/commit/e9d1e7d3c4ff937ed4f8913ab7280aee28a9e3eb))\n* **tabs:** a11y and tabs sometimes not activating ([58f2446](https://github.com/material-components/material-web/commit/58f24462467b549c810554d8bc78480673d36e3d))\n* **tabs:** remove font shorthand tokens ([88eb175](https://github.com/material-components/material-web/commit/88eb1759c50863eb444bc45dc28aa861beb8f853))\n* **tabs:** remove previously selected tab property ([70ce0d2](https://github.com/material-components/material-web/commit/70ce0d2779e2310d28351141296106dbcb526255))\n* **tabs:** remove public indicator property ([d296316](https://github.com/material-components/material-web/commit/d296316a2b69beff48ceb89dfc9b79bd475b0122))\n* **tabs:** rename tab `selected` to `active` ([23b291b](https://github.com/material-components/material-web/commit/23b291b2ddf2450875868679ef7a288e770920bc))\n* **tabs:** scrollable divider not taking up full width ([a0fca90](https://github.com/material-components/material-web/commit/a0fca90bdf8a8254ed6f28802b7d58248e24f889))\n* **tabs:** setting `active` on tab selects them ([1442f9b](https://github.com/material-components/material-web/commit/1442f9b223761f0202b3c935159bc0b26bb0a16d))\n* **textfield,focus,ripple:** fix textfield SSR ([f576b60](https://github.com/material-components/material-web/commit/f576b60aecf8f0e01746c61f6a4319922d1753e8))\n* **textfield:** add demo a11y and fix outlined label navigation ([7866a93](https://github.com/material-components/material-web/commit/7866a939b95e10e5e5dafa5e4098370971e78e8b))\n* **textfield:** broken required validity on Safari ([c26a578](https://github.com/material-components/material-web/commit/c26a578448666fda50eb2b25be59b88390e32097)), closes [#4796](https://github.com/material-components/material-web/issues/4796)\n* **textfield:** change slot names to kebab-case ([82e9e92](https://github.com/material-components/material-web/commit/82e9e92a19b82c401d2d878b2a713fbd773b1ad6))\n* **textfield:** don't show focus indicator when focused on icon ([61c8f6d](https://github.com/material-components/material-web/commit/61c8f6db460c23caa9ab27b1ccfa84a72a8e1709))\n* **textfield:** remove icon that appears in search input in chrome and safari ([86aaacd](https://github.com/material-components/material-web/commit/86aaacd32c02ee533a5506723ac7dbd77faf8fd3))\n* **tokens:** generate tokens v0.192 ([116b448](https://github.com/material-components/material-web/commit/116b448639454674f9024b22f1dfe88187851d0d))\n* **tokens:** update components to v0.192 ([cfd053c](https://github.com/material-components/material-web/commit/cfd053c39701aa0b8d8e33a9e0392a68ec842a83))\n\n\n### Miscellaneous Chores\n\n* prep release version ([df508ef](https://github.com/material-components/material-web/commit/df508ef5fdd1494bf6a3c567d9ac82da978fb8e0))\n\n\n### Code Refactoring\n\n* **list,menu,select:** remove active concept and now parent controls tabIndex and focus ([d446315](https://github.com/material-components/material-web/commit/d4463154cc1f5831aac79cf2894146289d9a56be))\n* **list,menu,select:** remove data-variant slotted variant selectors ([1f31df8](https://github.com/material-components/material-web/commit/1f31df818be4140640bc1b12a8401a9f202b7914))\n* **list:** move list aria to host ([9447ec7](https://github.com/material-components/material-web/commit/9447ec7d72999f5e6bcef91baf803d51d0d0e442))\n* **list:** refactor list to reuse ListController ([6d0c7e8](https://github.com/material-components/material-web/commit/6d0c7e8538c41be727cd333faffc5c6085d69c6b))\n* **list:** refactor list using md-item ([7536774](https://github.com/material-components/material-web/commit/753677489b90175ca799bd422cdd7c2b9b2ede42))\n* **menu,select:** rename `fixed` to `positioning` ([63b0142](https://github.com/material-components/material-web/commit/63b01425e7ed5e810853c7af629f4e3198a9fb5d))\n* **menu:** pull logic out of menuitem into a controller & change enum vals ([1217b62](https://github.com/material-components/material-web/commit/1217b62ef2cd73fbf28fe32ef45941ce130961d1))\n* **menu:** refactor menu-item to use md-item and not rely on md-list-item ([2a1d877](https://github.com/material-components/material-web/commit/2a1d8776a76025ff9ff5ebc8cacea1f12f69badf))\n* **menu:** remove sub-menu-item in favor of sub-menu ([d6cbf74](https://github.com/material-components/material-web/commit/d6cbf741374cbb22abe3764d19afe265f42f9a5f))\n* **menu:** rename corner and focus state values lowercase with dashes ([6e54048](https://github.com/material-components/material-web/commit/6e54048f1eadb8234c3681009a5b8193f14f7c14))\n* **menu:** update menu to use host-aria ([0384507](https://github.com/material-components/material-web/commit/03845074479894e3e609b7c5ec6e37d4f6cdaf88))\n\n## [1.0.0-pre.17](https://github.com/material-components/material-web/compare/v1.0.0-pre.16...v1.0.0-pre.17) (2023-09-06)\n\n\n### ⚠ BREAKING CHANGES\n\n* **slider:** replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`. Additionally, rename `label-label-*` tokens to a single `label-*`\n* **list:** replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight`\n* **chips:** replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight`\n* **text-field,select:** replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight`\n* **fab:** replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`\n* **dialogs:** replace `headline-text-type` and `supporting-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`\n* **button:** replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight`\n* **circularprogress:** make default width 4px\n* **textfield:** The field component must add the `resizable` attribute rather than using CSS. CSS `resize` can still customize the direction (defaults to both).\n* **list,menu,select:** menu harnesses will not automatically open menus in quick mode anymore and interactions in menu and list harnesses will not automatically go to the first item but rather the menu roots.\n* **iconbutton:** change `slot=\"selectedIcon\"` to `slot=\"selected\"` for toggle icon buttons.\n* **tabs:** secondary tabs always have inline icons\n* **tabs:** remove `variant` attributes and change `md-tab` to `md-primary-tab`, or `md-secondary-tab` if using `variant=\"secondary\"\n* **menu:** allow anchoring with idref string and set element ref on anchorElement\n* **tokens:** Change \"radio-button\" and \"progress-indicator\" Sass token APIs to \"radio\" and \"progress\". This matches the tag names of their components.\n* **tabs:** Remove `--md-*tab-divider` tokens and use `md-tabs::part(divider)` and `--md-divider-*` tokens\n* **tabs:** tabs cannot be disabled per spec. If disabled tabs are required, use `pointer-events: none` and CSS to style them.\n* **iconbutton:** change visibility of `willUpdate` to protected\n\n### Features\n\n* **color:** add color folder for md-sys-color theming APIs ([cdd9b26](https://github.com/material-components/material-web/commit/cdd9b264cb18dd9c43c4691b32fd47b65a90dab9))\n* **color:** add color folder for md-sys-color theming APIs ([87af9aa](https://github.com/material-components/material-web/commit/87af9aa13022ed69dbe20961293e67b2bf5914c4))\n* **focus,ripple:** allow setting `element.control = elementRef` ([1e7aff5](https://github.com/material-components/material-web/commit/1e7aff50cf3882f711dd6eb56f08a95ee6f3c084))\n* **menu:** allow anchoring with idref string and set element ref on anchorElement ([5ba348d](https://github.com/material-components/material-web/commit/5ba348dfd07f771d0db093841353f85b2a366c5a))\n* **select:** dispatch select-(open|close)(ing|ed) events ([1a1fb93](https://github.com/material-components/material-web/commit/1a1fb93be77634d45c373bf97804ccd074cef719)), closes [#4798](https://github.com/material-components/material-web/issues/4798)\n* **switch:** add required and form validity ([9694191](https://github.com/material-components/material-web/commit/9694191ec02bb37575df8d74af6e530f3e4e45e9))\n\n\n### Bug Fixes\n\n* add aria-hidden=\"true\" to ripple, focus ring, and elevation ([2295f12](https://github.com/material-components/material-web/commit/2295f12e711f563b05a19d1d354e37a986027d5d))\n* **badge:** center align value text ([cc195a9](https://github.com/material-components/material-web/commit/cc195a947656b2f4765be77ba2fa3cbfe680ba76))\n* **button:** remove font shorthand tokens ([8894c20](https://github.com/material-components/material-web/commit/8894c20c6becab188f6136753f538372258b8faf))\n* **button:** update demos to fix a11y ([4b61e8d](https://github.com/material-components/material-web/commit/4b61e8d2034448a0d06baddca4d6f768f82b35bd))\n* **chips:** apply cursor styling ([9389e26](https://github.com/material-components/material-web/commit/9389e26b68705e82c1cde5469ab7777790db5477))\n* **chips:** linear navigation not working in VoiceOver ([dfc87f3](https://github.com/material-components/material-web/commit/dfc87f32e8621b0bbcf8156a276bd67a5ecd1ddc))\n* **chips:** remove font shorthand tokens ([87ad1da](https://github.com/material-components/material-web/commit/87ad1dae4fbcdc037f842e65e173d0b66e210081))\n* **circularprogress:** make default width 4px ([c864d3b](https://github.com/material-components/material-web/commit/c864d3b638fffdb22a1897507595d666fb16784a))\n* **dialog, select:** allow fixed selects to render correctly in dialogs ([d6aa6b2](https://github.com/material-components/material-web/commit/d6aa6b22c794ed48f2937ea4a33f321d0b1f9b25))\n* **dialog:** content not displaying on Safari ([9b7647b](https://github.com/material-components/material-web/commit/9b7647bd3d44c433e0edad7cd4d30f6fdd220f25)), closes [#4728](https://github.com/material-components/material-web/issues/4728)\n* **dialog:** not showing if opened before connected ([d25c5e9](https://github.com/material-components/material-web/commit/d25c5e9ecade4ecc3d6ea4ceb9c5e2bc1d19dc06)), closes [#4728](https://github.com/material-components/material-web/issues/4728)\n* **dialogs:** remove font shorthand tokens ([81e11e0](https://github.com/material-components/material-web/commit/81e11e09fa5ded5ab41e7cbcb977cd7dbc3ece81))\n* **fab:** remove font shorthand tokens ([f77ee36](https://github.com/material-components/material-web/commit/f77ee3628c0ef6945f11c8045c3c2e4e0f262d68))\n* **iconbutton:** change visibility of `willUpdate` to protected ([dffff2d](https://github.com/material-components/material-web/commit/dffff2d1a31f3ed40b28f57570ba4df7f61f7210))\n* **iconbutton:** rename `selectedIcon` slot to `selected` ([9647f5e](https://github.com/material-components/material-web/commit/9647f5e5147b2d94f2db8ea6ca45c7f819714324))\n* **iconbutton:** update demos to fix a11y ([a9091fe](https://github.com/material-components/material-web/commit/a9091fe036af55986123770606a686388fd39b3f))\n* **labs:** remove font shorthand tokens ([acd40a2](https://github.com/material-components/material-web/commit/acd40a2f57277a67850c8e103a405dfcc4d3fdce))\n* **list,menu:** restrict type to only supported aria roles ([32a8c44](https://github.com/material-components/material-web/commit/32a8c4410eff4bede75c77bcdd43541967c8d0e7))\n* **list:** remove font shorthand tokens ([ca2cd56](https://github.com/material-components/material-web/commit/ca2cd56bd1b668904c6aea2b4d18602e773e1c9f))\n* **list:** remove internal md3-* class prefix ([641142d](https://github.com/material-components/material-web/commit/641142dff0fa679754a6f26518e9db7eccf5f6f5))\n* **menu,list,select:** do not stopPropagation on native events when handled only prevent default ([b85b57f](https://github.com/material-components/material-web/commit/b85b57fa792663460dbc1730c9e574e2b5ab998d))\n* **radio:** make host radio role to fix a11y ([0711f8c](https://github.com/material-components/material-web/commit/0711f8c03c2c4c743386abf490e6dddf243be5e6))\n* ripple and focus ring not centered in Safari ([0e8afc0](https://github.com/material-components/material-web/commit/0e8afc01757c3f1f8a5bf904e8cb857ea88bd7bf))\n* **select, menu:** allow item selection while animation is running in non-overflow contexts ([b905807](https://github.com/material-components/material-web/commit/b9058076b6bdf10ad135003b6c91ac46ebcb273b))\n* **select:** announce typeahead selection when select is closed ([2c892c4](https://github.com/material-components/material-web/commit/2c892c411472481c44d6d5a0bdec073d74634d89))\n* **slider:** display tick marks when forced-colors is active ([2f9cc20](https://github.com/material-components/material-web/commit/2f9cc208df53f0587e3712ec03c164bac25efade))\n* **slider:** remove font shorthand tokens ([6988a49](https://github.com/material-components/material-web/commit/6988a49a3b28273d02cad20ff0129c2906a63a26))\n* **tabs:** add nocollapse so isTab doesn't get minified ([17ddcd3](https://github.com/material-components/material-web/commit/17ddcd3c2e1c994b868d8b49d55a7457234929b2))\n* **tabs:** incorrect layout and primary indicator width ([0467c48](https://github.com/material-components/material-web/commit/0467c4845db7c31deddf7383beb199157f4c5034))\n* **tabs:** make indicator animation faster ([b542d2a](https://github.com/material-components/material-web/commit/b542d2aa12dcfc70fa250265cc82647d04218254))\n* **tabs:** remove disabled tabs ([d18db2a](https://github.com/material-components/material-web/commit/d18db2a6acb90a059856fbf74e8c2212f7680a68))\n* **tabs:** remove divider tokens in favor of md-divider ([13690a3](https://github.com/material-components/material-web/commit/13690a396f666b2073f6dc4995090d12947de59f))\n* **tabs:** secondary tabs always have inline icons ([6b2955b](https://github.com/material-components/material-web/commit/6b2955bffe68adc4c8c36ee96e2d45c2955b3a4c))\n* **tabs:** split md-tab into md-primary-tab and md-secondary-tab ([5b13b5c](https://github.com/material-components/material-web/commit/5b13b5c05bdbe7a85e30408a33a07de6480317d2))\n* **tabs:** use instanceof to check for a Tab ([58497f1](https://github.com/material-components/material-web/commit/58497f13b2ca494f233c290f6571f5f03f142d7f))\n* **testing:** harness not applying :active to parents ([327eeaf](https://github.com/material-components/material-web/commit/327eeafbf9f3f7bbf5f80d458cd9e423c5a7d98d))\n* **testing:** remove font shorthand tokens ([01a99a5](https://github.com/material-components/material-web/commit/01a99a5cc36cafe11422062d513e38cbf7442e02))\n* **text-field,select:** remove font shorthand tokens ([0c5a2a2](https://github.com/material-components/material-web/commit/0c5a2a2886fd934c598361aacc0719ad484ade9b))\n* **textfield:** don't transition colors when disabling ([11cc472](https://github.com/material-components/material-web/commit/11cc4721ce42bf63ed06637081fdeb01aa2f25bb))\n* **textfield:** line breaks not visible in Firefox ([541c0e9](https://github.com/material-components/material-web/commit/541c0e947d1ad4549256af5ebdde645a86724171)), closes [#4581](https://github.com/material-components/material-web/issues/4581)\n* **textfield:** show overflowing content like popups and focus rings ([ecac7ec](https://github.com/material-components/material-web/commit/ecac7ecbad43b90b94f61d44974312d5546877d8)), closes [#4071](https://github.com/material-components/material-web/issues/4071)\n* **textfield:** textarea resize handle overlapping outline ([cdd2ea6](https://github.com/material-components/material-web/commit/cdd2ea6c1db189495abd3b45eee5e9872fc9622c))\n* **tokens:** rename token override files ([59c44fc](https://github.com/material-components/material-web/commit/59c44fc2f9266b60d22e9bd5ff5d39e7d0ee8dff))\n\n\n### Reverts\n\n* feat(color): add color folder for md-sys-color theming APIs ([a528393](https://github.com/material-components/material-web/commit/a5283936fedd8da92af994fa0d721e07bc2686c4))\n\n\n### Miscellaneous Chores\n\n* update next version ([f41c816](https://github.com/material-components/material-web/commit/f41c8165f47e6a212b6c8ca104951187c8020622))\n\n\n### Tests\n\n* **list,menu,select:** clean up internal testing patterns from harnesses ([fcfc696](https://github.com/material-components/material-web/commit/fcfc696c4628fd2f41b09c060e6af4cd8e7658c2))\n\n## [1.0.0-pre.16](https://github.com/material-components/material-web/compare/v1.0.0-pre.15...v1.0.0-pre.16) (2023-08-21)\n\n\n### ⚠ BREAKING CHANGES\n\n* **list-item:** remove duplicate list-item menu-item from custom prop names\n\n### Features\n\n* **fab:** do not require has-icon ([156ca3c](https://github.com/material-components/material-web/commit/156ca3cbe7fc03290892a1b20c8b5036b996d2ed))\n* **iconbutton:** add touch target configs ([0862c58](https://github.com/material-components/material-web/commit/0862c58d24054a496b452d22fd56726e38057669))\n* **list:** change default host display to flex so max-width can be set without user setting display ([aa3fe3d](https://github.com/material-components/material-web/commit/aa3fe3d1ecff7c32850045b5c7eaedb2adbedc43))\n* **switch:** add touch target configs ([8bad07b](https://github.com/material-components/material-web/commit/8bad07bcf7aade5bb79b04a177acc227da8527bc))\n* **tab:** add logical container shape tokens ([dbed51c](https://github.com/material-components/material-web/commit/dbed51cc275dd37251e4e7e151e8f9b7d698ff22))\n* **textfield:** support inputmode attribute ([5d0cbf5](https://github.com/material-components/material-web/commit/5d0cbf5e9758e07d2d580fd2a47bc6bc74289856))\n\n\n### Bug Fixes\n\n* **button:** `href` and `target` default value is now an empty string ([d665864](https://github.com/material-components/material-web/commit/d665864cba14e06aa050a1c77d8b5db914355113))\n* **button:** add value to form when submitting ([f23fac1](https://github.com/material-components/material-web/commit/f23fac1465d7e0f6a6fa029f7395c91bd5b765c6)), closes [#4526](https://github.com/material-components/material-web/issues/4526)\n* **button:** incorrect HCM colors ([b144227](https://github.com/material-components/material-web/commit/b1442274383a8ba83e6ec94e24d04becb5988b88))\n* **checkbox:** not working after formAssociated changes ([33803ab](https://github.com/material-components/material-web/commit/33803aba39ab531f233c6b4831eaa9d7715919a7)), closes [#4747](https://github.com/material-components/material-web/issues/4747)\n* **chips:** avatar input chips are rounded by default ([b7671fb](https://github.com/material-components/material-web/commit/b7671fb7882836e192de194d801e6d3edc856eb0))\n* **chips:** make forced-color border color explicit ([cd8f2fc](https://github.com/material-components/material-web/commit/cd8f2fc9fc9315024a9b22c89d07ac870836ddd5))\n* **chips:** per spec, trailing focus rings are always circles ([fc9b945](https://github.com/material-components/material-web/commit/fc9b945d9969091611d54b7b80e6b41a44c2df16))\n* **elevation:** don't transition border-radius ([7d616fa](https://github.com/material-components/material-web/commit/7d616faecdc20ff2bb407e6af99f46716b1a813f))\n* **iconbutton:** make target type stricter ([c874cd5](https://github.com/material-components/material-web/commit/c874cd55c70d0b3b5fe99464b2301a325dfea2df))\n* **iconbutton:** rename selectedAriaLabel to ariaLabelSelected along with attribute ([2bbab09](https://github.com/material-components/material-web/commit/2bbab09a509595e50b3d4684374b3210f4b44c42))\n* **icon:** don't allow user text selection by default ([53aab28](https://github.com/material-components/material-web/commit/53aab285e94495bbac577712d35db264a9d6c908))\n* **list:** use margin over padding on slotted content and fix extraneous spacing ([1530aca](https://github.com/material-components/material-web/commit/1530aca17de16919380e3a52d5eb348da05e60d8))\n* **menu:** make overriding default styles less likely ([626b4ef](https://github.com/material-components/material-web/commit/626b4efd69166b9c5602fdbb62389ce490bdef56))\n* **progress:** incorrect HCM colors ([f39da54](https://github.com/material-components/material-web/commit/f39da54bc579d0ec1f230fc4ab3b40a7466867d0))\n* **slider:** fix accessibility issues ([e836dc3](https://github.com/material-components/material-web/commit/e836dc333bdb840f41ed9afafd6f04f87ca67896))\n* **slider:** focus ring too small ([8942568](https://github.com/material-components/material-web/commit/8942568ffec755b588055cfd84a8d5b1e7829197))\n* **switch:** unselected handle too big with selected icon only ([ecf83a0](https://github.com/material-components/material-web/commit/ecf83a0e7a0f8ed377350ee4af40cb51b4404496))\n* **textfield:** add form validity support ([a167cab](https://github.com/material-components/material-web/commit/a167cabeff27275b88bcaa4c98d14307fc0f1fe9)), closes [#4435](https://github.com/material-components/material-web/issues/4435)\n* **textfield:** focus indicator and outline are 3px ([bbb7840](https://github.com/material-components/material-web/commit/bbb784012a3d29aa594e2051e1763f745e29d666))\n\n\n### Miscellaneous Chores\n\n* update next version ([1675fd0](https://github.com/material-components/material-web/commit/1675fd0062e8378897dbc8de4b2869dda3079987))\n\n\n### Code Refactoring\n\n* **list-item:** remove duplicate list-item menu-item from custom prop names ([2d9352e](https://github.com/material-components/material-web/commit/2d9352e3f4ec0fef3d5ffca5d34f07bf38345a92))\n\n## [1.0.0-pre.15](https://github.com/material-components/material-web/compare/v1.0.0-pre.14...v1.0.0-pre.15) (2023-08-10)\n\n\n### ⚠ BREAKING CHANGES\n\n* **dialog:** See https://github.com/material-components/material-web/discussions/4675 for more details.\n* **fab:** Replace `reduced-touch-target` with `touch-target=\"none\"`\n* **checkbox:** Checkbox's size is now smaller by default. Add margin or `touch-target=\"wrapper\"` to increase it to the previous size.\n* **radio:** Radio's size is now smaller by default. Add margin or `touch-target=\"wrapper\"` to increase it to the previous size.\n* **dialog:** Fullscreen dialogs weren't matching spec, so we're removing them for now to avoid future breaking changes. They will be re-added later.\n* **list,menu:** list-item-link and menu-item-link have been removed and their functionality has been added to menu-item and list-item respectively.\n* **dialog:** use `autofocus` attribute instead of `dialog-focus`\n* **dialog:** Use dialog.open, dialog.show(), and dialog.close() instead.\n* **dialog:** dialog actions can set their own layout with a container element.\n* **dialog:** Material dialogs are always modal.\n* **select:** select will now show an arrow indicator and will apply default styles to slotted icons\n* **icon:** Remove css custom properties from icon and prefer applying normal css properties on host except for font-family.\n* **menu:** subclassing events is not supported in ES5 so all menu-related events now use CustomEvent rather than subclassing Event\n* **button:** Buttons submit forms by default, like `<button>`. Add `type=\"button\"` to not submit forms.\n* **checkbox:** Design is still exploring error-state checkboxes. If needed, theme with an error color and set aria-invalid.\n* **iconbutton:** Remove \"unselected\" from `--md-*-icon-button-*` custom properties.\n* **button:** Rename \"md-tonal-button\" elements, imports, and tokens to \"md-filled-tonal-button\"\n* **iconbutton:** rename <md-standard-icon-button> to <md-icon-button>\n* **dialog:** remove transitions\n* **dialog:** remove content and divider tokens\n* **dialog:** remove transition and scrim tokens\n* **switch:** Rename `--md-switch-unselected-<token>` to `--md-switch-<token>`\n* **button:** Rename `--md-<button>-spacing-<token>` to `--md-<button>-<token>-space`. Rename `--md-<button>-with-icon-*` to `--md-<button>-with-leading-icon-*`.\n* **dialog:** remove draggable\n* **dialog:** remove fullscreen tokens\n* **radio:** Rename `--md-radio-unselected-<token>` to `--md-radio-<token>`\n\n### Features\n\n* **button:** add touch target configs ([1f46179](https://github.com/material-components/material-web/commit/1f46179e831537b4470548e09e1574c1c4c5a90c))\n* **checkbox:** add required and form validity ([5606eef](https://github.com/material-components/material-web/commit/5606eefc38b08ebeb5f63d54b4b82631ea67936a))\n* **checkbox:** add touch target configurations ([f574b00](https://github.com/material-components/material-web/commit/f574b00a6384ec8f95bffd5e2c730c58639f98dd))\n* **chips:** add touch target configs ([2300eb6](https://github.com/material-components/material-web/commit/2300eb6e4f666f8776d9860157ce6f09f322e4b6))\n* **fab:** add touch target configurations ([8588a3f](https://github.com/material-components/material-web/commit/8588a3f52e7496e281bf59d6b1ad6a9ab116d236))\n* **icon:** add aria-hidden true by default ([08d50e2](https://github.com/material-components/material-web/commit/08d50e231dd7091f5fd4b843e636e9f04941f998))\n* **iconbutton:** add form submission ([c0da72b](https://github.com/material-components/material-web/commit/c0da72b6dc743772f34fb1e20ef678850bcc0dd1))\n* **list,menu:** add css shadow parts to sub components ([65d04a3](https://github.com/material-components/material-web/commit/65d04a3cf3cba46deb12cd0affa2649bf3e45407))\n* **radio:** add touch target configurations ([7c461ca](https://github.com/material-components/material-web/commit/7c461cad75c58eb28c3b02321197ebcf9d3b93cd))\n\n\n### Bug Fixes\n\n* **button:** rename `&lt;md-tonal-button&gt;` to `<md-filled-tonal-button>` ([cc26ef6](https://github.com/material-components/material-web/commit/cc26ef6c02dabf9e853b4aee08f5cb3af5e29f8f))\n* **button:** rename spacing tokens ([2329d2b](https://github.com/material-components/material-web/commit/2329d2b419d2963d8050dc4cda1607f165f3d2fd))\n* **button:** type is submit by default ([97f5b61](https://github.com/material-components/material-web/commit/97f5b616d6b76e23e378f7abed4c6a72b60c9367))\n* **checkbox:** remove error property ([ce248dc](https://github.com/material-components/material-web/commit/ce248dc3831a494bf70625d3f4b0b6ca895a2d97))\n* **dialog:** misspelled `transition` ([fa103cb](https://github.com/material-components/material-web/commit/fa103cbc78677b4829a94743b1561a023d44058f)), closes [#4638](https://github.com/material-components/material-web/issues/4638)\n* **dialog:** remove content and divider tokens ([5adbf73](https://github.com/material-components/material-web/commit/5adbf730d3c9bf9ccfa066a0b7e10ac1831b8269))\n* **dialog:** remove draggable ([2568d4f](https://github.com/material-components/material-web/commit/2568d4fbac69c8b5e9a5d5198c6525224ebf778d))\n* **dialog:** remove fullscreen temporarily ([39ae5a6](https://github.com/material-components/material-web/commit/39ae5a694723d83674eab06dcee9f8a3c5d7d764))\n* **dialog:** remove fullscreen tokens ([8b896e0](https://github.com/material-components/material-web/commit/8b896e0e638f61a7963a9104db70d27f6d2afbca))\n* **dialog:** remove modeless ([d8ac9ce](https://github.com/material-components/material-web/commit/d8ac9ce29e146516d84c3f6ba38cd9b8d39db8ec))\n* **dialog:** remove stacked ([500472b](https://github.com/material-components/material-web/commit/500472bbdf094187de1c937a2e2fac293880ba1c))\n* **dialog:** remove toggleShow() ([b992b15](https://github.com/material-components/material-web/commit/b992b154dee676a746cd3ada066809514c8a1dbb))\n* **dialog:** remove transition and scrim tokens ([e581142](https://github.com/material-components/material-web/commit/e581142d67ebe5429999e3517cf420138cfac671))\n* **dialog:** remove transitions ([2d1c580](https://github.com/material-components/material-web/commit/2d1c58022e70c3141f79e94cb2ccc12af1d3f816))\n* **dialog:** use `autofocus` attribute instead of `dialog-focus` ([50fd2f3](https://github.com/material-components/material-web/commit/50fd2f3fe08d9c9dc8c2e188fc0b9c39750e8af8))\n* **filter-chip:** make click event preventDefault proof ([041cb21](https://github.com/material-components/material-web/commit/041cb21233b49680ec47980bea2e5cf44cbcbd05))\n* **filter-chip:** move click event to inner button ([22b5b21](https://github.com/material-components/material-web/commit/22b5b2173aedfec88362b256a02d7841097e9598))\n* **focus:** allow `--md-focus-ring-*` cascading again ([1fa5cf3](https://github.com/material-components/material-web/commit/1fa5cf34852fde4353352056b76520ff5c1321d1))\n* **icon-button:** delegates focus ([db2010d](https://github.com/material-components/material-web/commit/db2010d2c12673a5905e751c68583d3df86f281d))\n* **iconbutton:** remove unselected token prefix ([0a63c26](https://github.com/material-components/material-web/commit/0a63c267e9ccb272916d80b30c79908c2736e37f))\n* **iconbutton:** rename &lt;md-standard-icon-button&gt; to <md-icon-button> ([a117b06](https://github.com/material-components/material-web/commit/a117b06b7b1d177cc9cd8abd4c9b9ff489e20d5d))\n* **radio:** remove \"unselected\" prefix from tokens ([fb1c603](https://github.com/material-components/material-web/commit/fb1c6039e763dc7b78687f660772aeec5fe494b9))\n* **segmentedbutton:** add back container height token ([db8be0a](https://github.com/material-components/material-web/commit/db8be0a15c81dd4854ea984d842c5bfe21e890d6))\n* **segmentedbutton:** add back shape token ([c148bf6](https://github.com/material-components/material-web/commit/c148bf61fe11564eb60bd34ca8d1a92bb33cb0a8))\n* **select:** add trailing icon indicator and fix icon token application ([4ab2e39](https://github.com/material-components/material-web/commit/4ab2e393d440225b6eb37c83aead7fd62920b11a))\n* **switch:** remove unselected token prefix ([3681b58](https://github.com/material-components/material-web/commit/3681b588e02a43a4c72d4be703206348eea943a7))\n\n\n### Miscellaneous Chores\n\n* update next version ([432e660](https://github.com/material-components/material-web/commit/432e660d0cf65d94e390d9d1f0043d03c1381061))\n\n\n### Code Refactoring\n\n* **dialog:** match native `&lt;dialog&gt;` and fix spacing ([2996a8b](https://github.com/material-components/material-web/commit/2996a8b8266ac721e66d88fce9b1097e23f8ff49))\n* **icon:** remove css custom props from icon and apply values directly on host ([ff60a88](https://github.com/material-components/material-web/commit/ff60a88843f901eb553e271fb5a786d6439935c8))\n* **list,menu:** add href to (list|menu)-item and remove (menu|list)-item-link ([09cb6da](https://github.com/material-components/material-web/commit/09cb6da8fb0335494df04f8310242d3248507b40))\n* **menu:** events no longer subclass Event but rather use CustomEvent ([043d548](https://github.com/material-components/material-web/commit/043d5482702620fe36f87255c74b17bb76d10554))\n\n## [1.0.0-pre.14](https://github.com/material-components/material-web/compare/v1.0.0-pre.13...v1.0.0-pre.14) (2023-07-24)\n\n\n### ⚠ BREAKING CHANGES\n\n* Rename `@material/web/<component>/lib` to `@material/web/<component>/internal`. Prefer not using internal files.\n* **focus:** Change `@material/web/focus/focus-ring.js` to `@material/web/focus/md-focus-ring.js`.\n* **menu:** Rename `@material/web/menu/lib` to `@material/web/menu/internal`. Prefer not using internal files.\n* **list:** Rename `@material/web/list/lib` to `@material/web/list/internal`. Prefer not using internal files.\n* **focus:** Rename `@material/web/focus/lib` to `@material/web/focus/internal`. Prefer not using internal files.\n* **icon:** Rename `@material/web/icon/lib` to `@material/web/icon/internal`. Prefer not using internal files.\n* **iconbutton:** Rename `@material/web/iconbutton/lib` to `@material/web/iconbutton/internal`. Prefer not using internal files.\n* **field:** Rename `@material/web/field/lib` to `@material/web/field/internal`. Prefer not using internal files.\n* **divider:** Rename `@material/web/divider/lib` to `@material/web/divider/internal`. Prefer not using internal files.\n* **chips:** Rename `@material/web/chips/lib` to `@material/web/chips/internal`. Prefer not using internal files.\n* **elevation:** Rename `@material/web/elevation/lib` to `@material/web/elevation/internal`. Prefer not using internal files.\n* **fab:** Rename `@material/web/fab/lib` to `@material/web/fab/internal`. Prefer not using internal files.\n* **dialog:** Rename `@material/web/dialog/lib` to `@material/web/dialog/internal`. Prefer not using internal files.\n* **checkbox:** Rename `@material/web/checkbox/lib` to `@material/web/checkbox/internal`. Prefer not using internal files.\n* **button:** Rename `@material/web/button/lib` to `@material/web/button/internal`. Prefer not using internal files.\n* **checkbox:** Rename `--md-checkbox-unselected-<token>` to `--md-checkbox-<token>`\n* **progress:** rename `progress` property to `value`\n* **progress:** remove circular progress slots\n* **focus:** Set `--md-focus-ring-*` tokens directly on `<md-focus-ring>` elements. Focus rings are exposed with `::part(focus-ring)`.\n* **linearprogress:** remove linearprogress directory\n* **circularprogress:** remove circularprogress directory\n* **field:** remove resizable, use css `resize: both`\n* **textfield:** Rename `--md-*-field-container-padding-vertical` to `--md-*-field-top-space` and `--md-*-field-bottom-space`. Rename `--md-filled-*-field-with-label-container-padding-vertical` to `--md-filled-*-field-with-label-top-space` and `--md-filled-*-field-with-label-bottom-space`\n* **textfield:** Rename `--md-*-field-container-padding-horizontal` to `--md-*-field-leading-space` and `--md-*-field-trailing-space`\n* **textfield:** Rename `--md-*-field-supporting-text-padding` to `--md-*-field-supporting-text-leading-space` and `--md-*-field-supporting-text-trailing-space`. Rename `--md-*-field-supporting-text-padding-top` to `--md-*-field-supporting-text-top-space`\n* **textfield:** Rename `--md-*-text-field-input-text-prefix-padding` and `--md-*-text-field-input-text-suffix-padding` to `--md-*-text-field-input-text-prefix-trailing-space` and `--md-*-text-field-input-text-suffix-leading-space`\n\n### Features\n\n* add component convenience bundles ([ae407b0](https://github.com/material-components/material-web/commit/ae407b0874760cb6a3d5a8db55c72f6cd4dc3d3c))\n* **all:** expose `focus-ring` parts ([243e231](https://github.com/material-components/material-web/commit/243e231a1370c06d6ecd34b81be5f7c091cee6a7))\n* **checkbox:** dispatch input event ([154861c](https://github.com/material-components/material-web/commit/154861c99e51e22c0a96f29fe5be22e053bbe04f))\n* **progress:** add `max` property ([02a509b](https://github.com/material-components/material-web/commit/02a509b480145abf6bea44ec9d1f03379ea25538))\n* **select:** expose menu and field CSS shadow parts ([c512808](https://github.com/material-components/material-web/commit/c5128089cdaed532ea47c0f8c3b556183d1ad3ec)), closes [#4291](https://github.com/material-components/material-web/issues/4291)\n* **textfield:** add textarea type ([ff2e089](https://github.com/material-components/material-web/commit/ff2e0896800faeca0942dbd0fc4e0e159974d6a4))\n\n\n### Bug Fixes\n\n* **button:** remove md3-* class prefixes ([2dabbdc](https://github.com/material-components/material-web/commit/2dabbdc142c88e4c94bcbcbaa333811e7126ba97))\n* **button:** rename \"lib\" directory to \"internal\" ([601ebb6](https://github.com/material-components/material-web/commit/601ebb669cc02b9a50c25950210bf6142550d546))\n* **checkbox:** add a11y to demos ([89b99a7](https://github.com/material-components/material-web/commit/89b99a70947c10353f243c6adc6c12b6e895f6e5))\n* **checkbox:** do not announce icon for screen readers ([921f185](https://github.com/material-components/material-web/commit/921f185aa14b22d3dce72fe1fe272b1501404cc4))\n* **checkbox:** fix broken \"lib\" to \"internal\" sass import ([2147af7](https://github.com/material-components/material-web/commit/2147af7e28e1c96dc138c85c55eb1b1dd70da715))\n* **checkbox:** reduce forced-colors size ([b5712f3](https://github.com/material-components/material-web/commit/b5712f3d4b4845e98cfb74f145e400647b492823))\n* **checkbox:** remove \"unselected\" prefix from tokens ([66d7b8b](https://github.com/material-components/material-web/commit/66d7b8b275a51ae3a2f8a3957178583bb2904d5a))\n* **checkbox:** rename \"lib\" directory to \"internal\" ([c4ac9f7](https://github.com/material-components/material-web/commit/c4ac9f73d923237457f856589b10e0413943664c))\n* **checkbox:** screen readers announce errors as invalid ([ec02fe4](https://github.com/material-components/material-web/commit/ec02fe40fc6b576f8060b5862141f5061e85529c))\n* **chips:** rename \"lib\" directory to \"internal\" ([a8880f7](https://github.com/material-components/material-web/commit/a8880f791b0a4961065dd8cc19f3727eb4d60100))\n* **circularprogress:** remove circularprogress directory ([48edec0](https://github.com/material-components/material-web/commit/48edec020034a648961ea3b5670f8d60b5b27cda))\n* **dialog:** rename \"lib\" directory to \"internal\" ([aaa672b](https://github.com/material-components/material-web/commit/aaa672b8687f89b638050aef08691a01a73e23c2))\n* **divider:** rename \"lib\" directory to \"internal\" ([7fc17c9](https://github.com/material-components/material-web/commit/7fc17c99c9b6daaf2fa677889b242a71468d9f10))\n* **elevation:** rename \"lib\" directory to \"internal\" ([0432e6d](https://github.com/material-components/material-web/commit/0432e6d9ceb454b94265ddafb63db2059633acbd))\n* **fab:** rename \"lib\" directory to \"internal\" ([5618b5e](https://github.com/material-components/material-web/commit/5618b5e23f8dc6ad3e9b4625d7172d6f3f4a1bfd))\n* **field:** keep label in same spot when resizing ([e1f8819](https://github.com/material-components/material-web/commit/e1f881991aac43c87b050bc4b1ec255f8d394fa3))\n* **field:** move padding to slotted content ([0ab5fd5](https://github.com/material-components/material-web/commit/0ab5fd595d8c163065860a2e0deec8b77c8c9d77))\n* **field:** remove resizable, use css `resize: both` ([6734344](https://github.com/material-components/material-web/commit/6734344e7362c484fb3e1f47449c364c3a8ad176))\n* **field:** rename \"lib\" directory to \"internal\" ([dac3639](https://github.com/material-components/material-web/commit/dac363972149d78ca8f810bee970487f2a533946))\n* **field:** use margin for textarea content ([7fdd0c4](https://github.com/material-components/material-web/commit/7fdd0c4c31a1cbaeba8297179c18645947410dfa))\n* **focus:** move --md-focus-ring tokens to host ([f7eff48](https://github.com/material-components/material-web/commit/f7eff48c665ba5d59756c7d9013bcd058ba41575))\n* **focus:** rename \"lib\" directory to \"internal\" ([77110d7](https://github.com/material-components/material-web/commit/77110d7c8ef8a91974bc93a7a0060433ee3fee04))\n* **focus:** rename import to md-focus-ring.ts ([d49f9b8](https://github.com/material-components/material-web/commit/d49f9b89e4aed98382705f62cdacf0e777b5f5e0))\n* **iconbutton:** rename \"lib\" directory to \"internal\" ([38b1b69](https://github.com/material-components/material-web/commit/38b1b69a9c0f243836fecc38cae17a237c312313))\n* **icon:** rename \"lib\" directory to \"internal\" ([21b7bec](https://github.com/material-components/material-web/commit/21b7becd7bddc8e04f0428a1f8fb8d5fd37c912c))\n* **linearprogress:** remove linearprogress directory ([bac10a6](https://github.com/material-components/material-web/commit/bac10a619bcb0d4e413ac94a0c387dcff2184d02))\n* **list,menu,select:** update layout tokens to latest values and fix targets ([e9ef7ec](https://github.com/material-components/material-web/commit/e9ef7ec5b450b7126ff4a6f01f98720826c6b51f))\n* **list:** rename \"lib\" directory to \"internal\" ([c6e6f65](https://github.com/material-components/material-web/commit/c6e6f65445f8436ed1f27830624dfaaea144d132))\n* **menu:** rename \"lib\" directory to \"internal\" ([a8c2fa9](https://github.com/material-components/material-web/commit/a8c2fa9a8b2b591aed88babf1c65d8c89e181a4f))\n* **progress:** add shared class ([75058ca](https://github.com/material-components/material-web/commit/75058ca2be558ac19c35f3b56f6c211cefa4027a))\n* **progress:** remove circular progress slots ([aea4d5e](https://github.com/material-components/material-web/commit/aea4d5e4fd60b061183c2f8219b7ece5cc581372))\n* **progress:** remove circular progress will-change CSS ([0f7e881](https://github.com/material-components/material-web/commit/0f7e881ee7612951cccaf360d49c51e3c965f3d8))\n* **progress:** rename `progress` property to `value` ([a2b4f61](https://github.com/material-components/material-web/commit/a2b4f6152d7b284f291e494f120aad98c54dbb16))\n* **progress:** squash linearprogress and circular progress into progress ([15df1d5](https://github.com/material-components/material-web/commit/15df1d5f1a82dd508b44cf8988c46ad4013db491))\n* **progress:** update circular demos ([c1aac11](https://github.com/material-components/material-web/commit/c1aac1174c1da3022e8447c494b006f2d3d49f86))\n* rename \"lib\" directory to \"internal\" ([6ec3f06](https://github.com/material-components/material-web/commit/6ec3f06429b2cd54382780ee74bb4bcf0ed0b5b6))\n* **textfield:** rename container-padding-horizontal token ([447886d](https://github.com/material-components/material-web/commit/447886da2e5c648837704a3fc7a4552b5ba6e80a))\n* **textfield:** rename container-padding-vertical tokens ([86aba33](https://github.com/material-components/material-web/commit/86aba33dea126463fe51498196b844f2f41c807b))\n* **textfield:** rename prefix/suffix padding tokens ([53966af](https://github.com/material-components/material-web/commit/53966af32da0d269b3e8d7cd74102e168dcede53))\n* **textfield:** rename supporting-text-padding tokens ([4f37b44](https://github.com/material-components/material-web/commit/4f37b4474fbca2b8aa6b2ce1f06f832bf9e11fd9))\n\n\n### Miscellaneous Chores\n\n* update next version ([4596c4a](https://github.com/material-components/material-web/commit/4596c4a2bcb098093afed3cfcfd56dd23c73c35a))\n\n## [1.0.0-pre.13](https://github.com/material-components/material-web/compare/v1.0.0-pre.12...v1.0.0-pre.13) (2023-07-10)\n\n\n### ⚠ BREAKING CHANGES\n\n* **segmentedbutton:** remove with-* token prefixes\n* **button:** remove with-* prefix from tokens\n* **dialog:** remove with-icon prefix from with-icon-icon-color and with-icon-icon-size\n* **textfield:** remove autocomplete-specific features for now\n\n### Features\n\n* **field:** add supporting/error text logic ([b4b3e67](https://github.com/material-components/material-web/commit/b4b3e67ae6681210d38f5079ff876896f0c20fe2))\n\n\n### Bug Fixes\n\n* **button:** remove with-* prefix from tokens ([25be982](https://github.com/material-components/material-web/commit/25be9825685df91a6fc3e66c2dd7c9537a0a7829))\n* **dialog:** fire a change event when using arrow keys. ([65d31a6](https://github.com/material-components/material-web/commit/65d31a68c1c5904ebd258f00d531b6d46f31461a))\n* **dialog:** fix two close icons in demo ([dc0ac97](https://github.com/material-components/material-web/commit/dc0ac971ac52b9d47edcb1ce722d7fd8ec94f3e1))\n* **dialog:** remove with-icon prefix from with-icon-icon-color and with-icon-icon-size ([1893e08](https://github.com/material-components/material-web/commit/1893e08f545606d6e3112d25913bf4d52d0d4bb3))\n* **dialog:** use dialog-action and dialog-focus in demo ([332836c](https://github.com/material-components/material-web/commit/332836cacb5ad47af9561579753e040a8ba42a16))\n* **segmentedbutton:** remove with-* token prefixes ([cc786d1](https://github.com/material-components/material-web/commit/cc786d1f73950b324549392218177f3eb30a4a0f))\n* supported tokens were not being verified ([2922914](https://github.com/material-components/material-web/commit/292291426385c5114664c7759b095823ec43f549))\n* **tab:** add closure conformance types ([d80b7b5](https://github.com/material-components/material-web/commit/d80b7b55e92650eacc3aa31bdf343aba7c7196b7))\n* **textfield:** make label strict string type ([6762b00](https://github.com/material-components/material-web/commit/6762b0058871e2502626dc842a03efba047f3e31))\n* **textfield:** remove autocomplete-specific features for now ([8fee0a7](https://github.com/material-components/material-web/commit/8fee0a7ebd3081730d556488ff29fc5e2d416143))\n\n\n### Miscellaneous Chores\n\n* update next version ([b1077d8](https://github.com/material-components/material-web/commit/b1077d856bf8ec710b19c3027a030f9c63d75f37))\n\n## [1.0.0-pre.12](https://github.com/material-components/material-web/compare/v1.0.0-pre.11...v1.0.0-pre.12) (2023-06-28)\n\n\n### ⚠ BREAKING CHANGES\n\n* **button:** remove unnecessary property preventClickDefault\n* **slider:** change compound attribute names to kebab-case\n* **iconbutton:** rename attribute flipiconinrtl to flip-icon-in-rtl\n* **menu:** rename typeaheadBufferDelay and list-tab-index for consistency\n* **select:** change compound attribute names to kebab-case\n* **dialog:** change compound attribute names to kebab-case\n* **list:** change compound attribute names to kebab-case\n* **field:** change compound attribute names to kebab-case\n* **button:** normalize compound properties to have kebab-cased attributes\n* **textfield:** compound properties should have kebab-case attributes\n* **tabs:** change compound attribute names to kebab case\n* **switch:** change showonlyselectedicon to show-only-selected-icon\n\n### Features\n\n* **chips:** add high contrast support ([950cd4f](https://github.com/material-components/material-web/commit/950cd4ffc3efcb3a9e4a0d0c16ea97324d8ac69f))\n* **dialog:** redispatch the native cancel event ([826262f](https://github.com/material-components/material-web/commit/826262fb727c65f787a913ae41adb8c0612af542)), closes [#1583](https://github.com/material-components/material-web/issues/1583)\n* **fab:** add label only mode ([0fd4f45](https://github.com/material-components/material-web/commit/0fd4f45241cb67ae96e994b655ec95a9f022368a))\n* **fab:** set aria hidden on the icon slot if element has aria-label or label ([fb4d9c8](https://github.com/material-components/material-web/commit/fb4d9c8008e863f48feea91ef1f5b4c3c004dc3c))\n* **list,menu:** expose activate next and prev items ([30937ac](https://github.com/material-components/material-web/commit/30937acd18cba9376ea2745b6dfc4099ddbaeae3))\n\n\n### Bug Fixes\n\n* **button:** normalize compound properties to have kebab-cased attributes ([1a6fc29](https://github.com/material-components/material-web/commit/1a6fc291745f827dd055c9ac84ec432b09bcc071))\n* **button:** remove unnecessary property preventClickDefault ([9244524](https://github.com/material-components/material-web/commit/9244524471093a9727750a964d1ad1436737d22f))\n* **chips:** incorrect input leading icon color ([b13271b](https://github.com/material-components/material-web/commit/b13271b785224408173e0361bb91c929cab11e41))\n* **chips:** incorrect rtl up/down behavior and add unit tests ([2cd235d](https://github.com/material-components/material-web/commit/2cd235dcb4e65fb593197aaf43b839cb326a2524))\n* **dialog:** change compound attribute names to kebab-case ([82d17ca](https://github.com/material-components/material-web/commit/82d17ca172f009599f6863e9109bb7cbb0d68be5))\n* **dialog:** focus before animation to fix a11y ([61e5e87](https://github.com/material-components/material-web/commit/61e5e87106d09fd43ae82828f6645e0444ae1b10))\n* **field:** change compound attribute names to kebab-case ([2937aef](https://github.com/material-components/material-web/commit/2937aefa23c8b050b5c9f66b9b29432dae87be09))\n* **iconbutton:** rename attribute flipiconinrtl to flip-icon-in-rtl ([a5e4354](https://github.com/material-components/material-web/commit/a5e4354ed64e646b24b2f1a0ea1fe36807ae490a))\n* **labs:** compound properties should have kebab-case attributes ([28f897b](https://github.com/material-components/material-web/commit/28f897b5ea2d9a49d9754cd34d56720f79770bfc))\n* **list:** change compound attribute names to kebab-case ([0e3fe72](https://github.com/material-components/material-web/commit/0e3fe72f8f69413085170291e1f4a50607e3b5ca))\n* **menu:** close menu when escape is pressed on list root ([d5035db](https://github.com/material-components/material-web/commit/d5035db0c42d3e80f4ac61710109059a469d4666))\n* **menu:** rename typeaheadBufferDelay and list-tab-index for consistency ([3f22ed0](https://github.com/material-components/material-web/commit/3f22ed039120b39563d2566e0442f45867312151))\n* **repo:** remove \".\" from workspace config ([d436c8f](https://github.com/material-components/material-web/commit/d436c8fe5e31494654e2875215b7c0e52ae0ee91))\n* **select:** change compound attribute names to kebab-case ([224a73b](https://github.com/material-components/material-web/commit/224a73b0387160c9810899d55f647e8b1da9fc48))\n* **select:** fixed menu select not 100% window width ([a968759](https://github.com/material-components/material-web/commit/a968759b2747404ef0625f2c6d34e36899a599f9))\n* **slider:** change compound attribute names to kebab-case ([83d9ede](https://github.com/material-components/material-web/commit/83d9edea79c08fb068f04fe6410273e12ae26387))\n* **switch:** change showonlyselectedicon to show-only-selected-icon ([a8e489e](https://github.com/material-components/material-web/commit/a8e489e2d8c26cd35849b3f5d94ff7f58ea7016f))\n* **tabs:** change compound attribute names to kebab case ([a9d030a](https://github.com/material-components/material-web/commit/a9d030ad4252d3a14738b24a60eec060824b4d1c))\n* **textfield:** compound properties should have kebab-case attributes ([34dfcb4](https://github.com/material-components/material-web/commit/34dfcb4db1657db0fc13f23a5014fef234795a46))\n* wireit sass watch memory leak ([8b1507e](https://github.com/material-components/material-web/commit/8b1507e0b73298b02a8ce6d2023d8a82d305d25d))\n\n\n### Miscellaneous Chores\n\n* update next version ([399fa07](https://github.com/material-components/material-web/commit/399fa07eacc80678d522896cdc7161dffbe4e214))\n* update next version ([7dd2f3d](https://github.com/material-components/material-web/commit/7dd2f3d91ca548b2f5819c4b02fe24aded147a1b))\n\n## [1.0.0-pre.11](https://github.com/material-components/material-web/compare/v1.0.0-pre.10...v1.0.0-pre.11) (2023-06-16)\n\n\n### Features\n\n* **chips:** add basic chip set component ([919a9d3](https://github.com/material-components/material-web/commit/919a9d3e9152dcdbb9be09c7f898dcc5168da543))\n* **chips:** add multi-action chip navigation ([2444734](https://github.com/material-components/material-web/commit/24447343a5fa240967ea32a53f625da173cb9557))\n* **chips:** add scrolling chip set example ([938bf38](https://github.com/material-components/material-web/commit/938bf384a488addf0acf576cf6e2b3556b80e2ff))\n* **chips:** add single select filter chip set ([f8bb2f1](https://github.com/material-components/material-web/commit/f8bb2f18f0141f1e2d4ef5ca0b18fc569fb6276f))\n* **list:** expose list item role ([2be1b78](https://github.com/material-components/material-web/commit/2be1b7824159760c91f577cea68905b3791a2831))\n\n\n### Bug Fixes\n\n* **chips:** add aria grid/listbox models to chip set ([fcdb126](https://github.com/material-components/material-web/commit/fcdb126f2fcccf696e199e617c5df3f696e79c4b))\n* **chips:** misaligned trailing action ripple ([9c0336a](https://github.com/material-components/material-web/commit/9c0336aa12405bd3a926109d2ae29a418bb97e03))\n* **chips:** remove selected event from input chips ([a33fcbb](https://github.com/material-components/material-web/commit/a33fcbb3771fe1f77664f501aa25d76e292db099))\n* **slider:** default values to between min and max to better match native input ([2ef3606](https://github.com/material-components/material-web/commit/2ef3606bfe66fd700d803812b524b95c22ea4028))\n* **slider:** fix slider focus ring inheritance weakness ([e44c903](https://github.com/material-components/material-web/commit/e44c903484d1beb351dfc5ff9e9ea653cc35f6ba))\n* **testing:** use sys-color-* theming for dark mode tests ([b1172d8](https://github.com/material-components/material-web/commit/b1172d8470c33124556b71c93ba84b7b3b906dcf))\n\n\n### Miscellaneous Chores\n\n* update next version ([3d7612e](https://github.com/material-components/material-web/commit/3d7612e7617e1496641ada9ce7a97d03ac5a1842))\n\n## [1.0.0-pre.10](https://github.com/material-components/material-web/compare/v1.0.0-pre.9...v1.0.0-pre.10) (2023-06-05)\n\n\n### ⚠ BREAKING CHANGES\n\n* **ripple:** Remove ripple directives and attach like focus rings (parent, `for` attribute, or with `.attach()`\n* **all:** Remove any *-focus-state-layer-* custom properties (they don't do anything)\n* **ripple:** Set `border-radius: 50%` and remove `unbounded` attribute\n\n### Features\n\n* add labs and internal folders for non-client code ([4b0c98c](https://github.com/material-components/material-web/commit/4b0c98c1aaf1166c1d12734097812b123e48da4e))\n* **button:** adds `type` property to support form submit and reset ([545ce0d](https://github.com/material-components/material-web/commit/545ce0d8959ae408dd3d84ae459d7e994532cee7))\n* **ripple:** add semantic and imperative attaching ([d65327d](https://github.com/material-components/material-web/commit/d65327d21b6e7f930eb45a9a40f177a6e2de2da2))\n* **slider:** add full form association support ([ae70f1e](https://github.com/material-components/material-web/commit/ae70f1ea05f1f93b482f37dc2a94a5ca5c99d83a))\n* **textfield:** add form association support ([e842f79](https://github.com/material-components/material-web/commit/e842f793115b3b65a650d9cb49caf02575a69a91))\n\n\n### Bug Fixes\n\n* **all:** remove focus state layer tokens ([933fc2e](https://github.com/material-components/material-web/commit/933fc2e0131393e96883ff21fb7475ecd7e45ed7))\n* **focus:** split attachable logic into separate controller ([fbd680a](https://github.com/material-components/material-web/commit/fbd680a9fe7d6021f668716f746a080b6e2e8f30))\n* **radio:** checked styles not displaying ([8fb5cd8](https://github.com/material-components/material-web/commit/8fb5cd8ae8221a9362cb80edc92b1b5cc0b2ab55)), closes [#4347](https://github.com/material-components/material-web/issues/4347)\n* **ripple:** remove ripple directive ([33daf19](https://github.com/material-components/material-web/commit/33daf19c73ae1599a10286dada80edf288b52011))\n* **ripple:** remove unbounded ([b69e242](https://github.com/material-components/material-web/commit/b69e24241e490ca3e83ca605b404cb20f74b02df))\n* **ripple:** restrict manually controllable methods ([ea2f04a](https://github.com/material-components/material-web/commit/ea2f04a9e99c2c6d3020590321c23ee9ea8e0f5e))\n* **ripple:** wrong start point for pressing unbounded ripples ([88b5cfe](https://github.com/material-components/material-web/commit/88b5cfeb21fcacc49f745dde00cfef459a4b5df6))\n* **select:** inherit width of the host ([086565c](https://github.com/material-components/material-web/commit/086565cc8c0e6463a6be60162a22014955b23adb))\n* **slider:** improve step support for non-integer values and stepping from min ([68c2721](https://github.com/material-components/material-web/commit/68c27212a12d3082a73029e63f24daf4eb6435d7))\n* **slider:** prevent lower handle moving beyond upper and visa versa ([f9da935](https://github.com/material-components/material-web/commit/f9da93553bd64e7e8475f8acb8ee12206af12ac4))\n* **slider:** renames `withTickMarks` to `tickmarks` and `withLabel` to `labeled` ([0e94e28](https://github.com/material-components/material-web/commit/0e94e286568492d9917bb1594c9cc1ebbb25d2f8))\n* **ssr:** make \"for\" attribute watcher SSR compatible ([f47bdc3](https://github.com/material-components/material-web/commit/f47bdc39258fe4ba38a4cdebe1810e2385f72811))\n\n\n### Miscellaneous Chores\n\n* update next version ([25ee94b](https://github.com/material-components/material-web/commit/25ee94b1a7f95374ec5e27dfcf9da85a0ffb71e9))\n\n## [1.0.0-pre.9](https://github.com/material-components/material-web/compare/v1.0.0-pre.8...v1.0.0-pre.9) (2023-05-25)\n\n\n### ⚠ BREAKING CHANGES\n\n* **ripple:** Use `border-radius` instead of `--md-ripple-shape`\n* **focus:** inward focus rings must be specified with `inward` rather than a negative offset.\n* **textfield:** Explicit \"defaultValue\" has been removed. Set the 'value' attribute to communicate a default value for resetting (similar to native <input>)\n* **iconbutton:** font icons require using <md-icon> directly\n\n### Features\n\n* **checkbox:** add full form association support ([a61f79c](https://github.com/material-components/material-web/commit/a61f79ceb2a169ea8397132505a1ad61ffd84bc8))\n* **chips:** add input chips ([d029b63](https://github.com/material-components/material-web/commit/d029b634c7392947f4edfa27f6218be486447de5))\n* **chips:** add removable filter chips ([748d70e](https://github.com/material-components/material-web/commit/748d70eceffd6879329435621d65a415a94c8120))\n* **iconbutton:** add disabled container opacity tokens ([d84d48c](https://github.com/material-components/material-web/commit/d84d48c2992187788ff54965433b96b21338c649))\n* **iconbutton:** add disabled-icon-opacity token ([7403ce1](https://github.com/material-components/material-web/commit/7403ce1a9ebde15efebb5172bbdf22fe2b83b2e1))\n* **listitem:** add noninteractive to list item ([57f7ae2](https://github.com/material-components/material-web/commit/57f7ae23303f5bf1fae4618d934582b1954e3a1f))\n* **radio:** add full form association support ([9dc8613](https://github.com/material-components/material-web/commit/9dc86130671ad9d6151f397be4d5ea53212be515))\n* **slider:** adds explicit multi-value support via range=true, valueStart, valueEnd ([7ab37e4](https://github.com/material-components/material-web/commit/7ab37e4bff51498e83c7d4f7c8f2c19d9719e37b))\n* **switch:** add disabled handle opacity tokens ([c623c94](https://github.com/material-components/material-web/commit/c623c941df5b0492fec82270c07ba41fd7c6192d))\n* **switch:** add disabled icon opacity tokens ([61550d2](https://github.com/material-components/material-web/commit/61550d2baa512034d860ab44941bfb27a2f88109))\n* **switch:** add disabled track tokens ([a2045f5](https://github.com/material-components/material-web/commit/a2045f54440641df5c580ae3ec81f5083d729f2c))\n* **switch:** add full form association support ([921a905](https://github.com/material-components/material-web/commit/921a905758d72f9c016eb3075cd42798d4d60d08))\n* **tabs:** adds tabs and tab element ([cbb24df](https://github.com/material-components/material-web/commit/cbb24dfbc3e30ff05040e77dd0564d0c9b4b56aa))\n* **tabs:** improves support for dynamically adding/removing tabs ([dd5f3f0](https://github.com/material-components/material-web/commit/dd5f3f07a4dc1bb963495fe2197933dc7185c3a1))\n\n\n### Bug Fixes\n\n* **button:** theme mixin not validating ([c566a64](https://github.com/material-components/material-web/commit/c566a64ef79daec2e6de64fdc91aa1962834b322))\n* **chips:** add touch target ([55c9701](https://github.com/material-components/material-web/commit/55c9701d8c8428f846e75b70bdaa379cc3dfdf5d))\n* **chips:** incorrect shape custom property names ([6fa8243](https://github.com/material-components/material-web/commit/6fa8243439dced22e4a9bafbb035f68c1e76113a))\n* **demo:** fix demos in internal catalog and fix some broken stories in catalog ([2c5e2b9](https://github.com/material-components/material-web/commit/2c5e2b96c29866e24f84d108699cb6c3d60887ae))\n* **focus:** corrected outward/inward animations ([26d69c2](https://github.com/material-components/material-web/commit/26d69c271eef5b5a7c57c94041c5aad61c1a3e54))\n* formAssociated being stripped from closure ([c1ba0fb](https://github.com/material-components/material-web/commit/c1ba0fb3b60e8c516ff1eec52c1b42f2ab33e7aa))\n* **ripple:** remove shape token and will-change ([a6c988b](https://github.com/material-components/material-web/commit/a6c988beddccf6101ab7ba43ed392f30bb58eb57))\n* **switch:** add missing tokens ([b1e9c4a](https://github.com/material-components/material-web/commit/b1e9c4abb3123714469d271c0446ee542f7944fa))\n* **tabs:** adds a11y roles for tablist/tab ([0da80a0](https://github.com/material-components/material-web/commit/0da80a01d2a8cfce6d27bb0151f5228b84110bd8))\n* **tabs:** high contrast and reduced motion styling; improve tab marshaling ([6116c34](https://github.com/material-components/material-web/commit/6116c347e9b21d8147a982a0cf33382d132cccb0))\n* **textfield:** remove defaultValue ([2317c5a](https://github.com/material-components/material-web/commit/2317c5af63c56ccdc4aaf5b3f4ea94860e50e987))\n\n\n### Miscellaneous Chores\n\n* update next version ([8d31bd9](https://github.com/material-components/material-web/commit/8d31bd9bb95f68784bc7e6a47832df18bd8052ab))\n\n\n### Code Refactoring\n\n* **iconbutton:** remove &lt;md-icon&gt; ([ec47f9b](https://github.com/material-components/material-web/commit/ec47f9bcc4898fb1af783c61c4d810222dadc0a4))\n\n## [1.0.0-pre.8](https://github.com/material-components/material-web/compare/v1.0.0-pre.7...v1.0.0-pre.8) (2023-05-08)\n\n\n### Features\n\n* **focus:** improve usability ([34d8db0](https://github.com/material-components/material-web/commit/34d8db09aa196507fca73c452b0bedc864bc2ccd))\n\n\n### Bug Fixes\n\n* **checkbox:** incorrect logical shape var names ([c2ca4f8](https://github.com/material-components/material-web/commit/c2ca4f8795b1a3f7f489bed02431a66ba13ea3ba))\n* **checkbox:** support logical shapes ([e62b16b](https://github.com/material-components/material-web/commit/e62b16b9a60402c92f732fa4d744fe3602c380cc))\n* **chips:** incorrect shape custom property names ([7ce0e25](https://github.com/material-components/material-web/commit/7ce0e256b2432f3a5f696d75fa64010786bd79d7))\n* **focus:** control not working when `for` reflects as empty ([f83db36](https://github.com/material-components/material-web/commit/f83db369c22dba754733bc605394f24a6aa87641))\n* **focus:** update focus-ring tokens ([5934de0](https://github.com/material-components/material-web/commit/5934de06037203b01dc7dd532abe2ee89fec109a))\n* **listitem:** hide android tap color since we have ripple ([0d3d032](https://github.com/material-components/material-web/commit/0d3d032a4c0869346f06b2182c29d59ea7b46cde))\n* **menu:** fix submenu closing when already opened and all menus closing when hovering over menuitem ([f6d72f9](https://github.com/material-components/material-web/commit/f6d72f9c3ff141389f5116a95e6393e410644978))\n* **ripple:** ensure ripple occurs when a keyboard generated click happens after a pointer click ([016b851](https://github.com/material-components/material-web/commit/016b8513e71bff04e2ec41a07f1d05cfd1d2762d))\n* **slider:** disabled slider no longer displays pressed handle color when pressed ([4c229d9](https://github.com/material-components/material-web/commit/4c229d98727a0ebc6dad4cb5efc77a487dd2710d))\n* **testing:** don't fire focus events twice ([04d3496](https://github.com/material-components/material-web/commit/04d3496a71e9fcc838eb496c3572d6ab57dd4503))\n* **tokens:** bugs with component values() functions ([beb5f81](https://github.com/material-components/material-web/commit/beb5f816eaa5fe364d7563596f9bd82006d7c1d1))\n\n\n### Miscellaneous Chores\n\n* update next version ([2b961f3](https://github.com/material-components/material-web/commit/2b961f363ec91e3437a1a6a03285814460b53f95))\n* update next version ([a27290a](https://github.com/material-components/material-web/commit/a27290addc3078fef008addcc6951a4616a4a981))\n* update next version ([60afab6](https://github.com/material-components/material-web/commit/60afab619ed9a8dff567b9ae21261501ab9998e9))\n\n## [1.0.0-pre.7](https://github.com/material-components/material-web/compare/v1.0.0-pre.6...v1.0.0-pre.7) (2023-04-24)\n\n\n### ⚠ BREAKING CHANGES\n\n* **button:** remove label property\n\n### Features\n\n* **aria:** add aria delegation ([e0bbe38](https://github.com/material-components/material-web/commit/e0bbe3850cd5c0d03c8da5697ffc0f723f238e6a))\n* **chips:** add filter chips ([ae91366](https://github.com/material-components/material-web/commit/ae913666011ff1f885e9c044a6e842f60b2f906b))\n* **circular-progress:** adds screenshot tests for circular-progress element ([e4a29c6](https://github.com/material-components/material-web/commit/e4a29c6e3150e44d2cdef17164dfd4cd3ef165dd))\n* **linear-progress:** adds linear-progress element ([1c7fcf3](https://github.com/material-components/material-web/commit/1c7fcf39a502c2a1142de10efa0e59838dc8aba3))\n* **linear-progress:** adds linear-progress screenshot tests ([212601d](https://github.com/material-components/material-web/commit/212601d4dfe132f6c3a9cb5e31f1de0d68fd8497))\n* **select:** implement select ([9c202f5](https://github.com/material-components/material-web/commit/9c202f5546deac424d164cd1f657626e6741a350))\n\n\n### Bug Fixes\n\n* **actionelement:** remove actionelement ([b7af8ec](https://github.com/material-components/material-web/commit/b7af8ecda1ba6ecb248652250c299fc42a0de1bb))\n* **button:** closure conformance issue ([9e23477](https://github.com/material-components/material-web/commit/9e234770b55e2e6901a1fa6e3ef2822f130c7083))\n* **button:** fix template typo ([a44bc3a](https://github.com/material-components/material-web/commit/a44bc3a87c496ef808357e59d20b737ab1306dda))\n* **button:** remove label property ([e398099](https://github.com/material-components/material-web/commit/e39809969f5ef14b997bc308b2d6553722ea0a75))\n* **chips:** remove flat prefixes ([4fa83bf](https://github.com/material-components/material-web/commit/4fa83bf2c6a7e8eb031258c36b7862d0865bb04b))\n* **dialog:** fixes [#4080](https://github.com/material-components/material-web/issues/4080): corrects dialog fullscreen height ([b3a6dac](https://github.com/material-components/material-web/commit/b3a6dacb0e857d53bf8734498c52826e309016e2))\n* **elevation:** tidy up tokens and update roadmap ([301eb9a](https://github.com/material-components/material-web/commit/301eb9a18f3044a118fad36fcbccc00f8db1166c))\n* **icon:** hide font ligature overflowing text ([2eb914e](https://github.com/material-components/material-web/commit/2eb914e8879fce6aba41aff19a51bdda8edad09f))\n* **listitem:** border-radius token affects ripple and focus-ring ([c738f92](https://github.com/material-components/material-web/commit/c738f92144c7ca45382920f8358105a084f819f5))\n* **menu,list:** new sys token mismatch between menu and list ([55df403](https://github.com/material-components/material-web/commit/55df403768941438f252c7b825b339340ff047d4))\n* **menu:** submenus will open correctly on click ([9d7b291](https://github.com/material-components/material-web/commit/9d7b2910d721bf43fac80fa0c909d0ddbc951852))\n* **navigationtab:** remove actionelement ([6da677f](https://github.com/material-components/material-web/commit/6da677fbef9567cc915033effac76704be0a40d2))\n* remove [@aria](https://github.com/aria)Property decorator ([7b52c45](https://github.com/material-components/material-web/commit/7b52c4515fa048a772f7d598e948b1d62de11c03))\n* remove role attribute from elements ([0a35ff5](https://github.com/material-components/material-web/commit/0a35ff504230aa1eae200afb6ea56bc3902f81c4))\n* **segmentedbutton:** remove actionelement ([9442df8](https://github.com/material-components/material-web/commit/9442df8239113e674f08805639cb411b5336e6dd))\n* **slider:** ensure scrolling is prevented on mobile browsers ([743451b](https://github.com/material-components/material-web/commit/743451b23fe906faeeb38ab0957996f22953caf6))\n* **slider:** fixes [#4061](https://github.com/material-components/material-web/issues/4061) and reduce use of private custom properties ([9312a24](https://github.com/material-components/material-web/commit/9312a241d1a2e1ac01e85784e2aeffe00fdb829e))\n* **slider:** fixes label focus and ranged handle dragging on Safari ([72b48da](https://github.com/material-components/material-web/commit/72b48da7cc3bc7dc619af3f668f95d68c6c634e5))\n* **slider:** fixes ripple hover state after interaction on Firefox ([356d1bc](https://github.com/material-components/material-web/commit/356d1bc9f86604cdec8a1605dd2500d5985a19da))\n* **ssr:** try to remove event listener calls on server ([5e1fe1c](https://github.com/material-components/material-web/commit/5e1fe1ccc71e15d2ded4540d846cd222be9d593e))\n* **testing:** remove unnecessary type def ([5553da3](https://github.com/material-components/material-web/commit/5553da3a8bc79d93c1041c2ce074f7617d534dc3))\n\n\n### Miscellaneous Chores\n\n* update next version ([c9f2f7d](https://github.com/material-components/material-web/commit/c9f2f7ddd418345c2fdbeb07e9e33620524049ef))\n\n## [1.0.0-pre.6](https://github.com/material-components/material-web/compare/v1.0.0-pre.5...v1.0.0-pre.6) (2023-04-10)\n\n\n### ⚠ BREAKING CHANGES\n\n* **elevation:** remove elevation surfaces\n* **iconbutton:** rename selected aria label property, add documentation\n* **elevation:** remove surface for tonal surface update\n* **iconbutton:** combine button, link, and toggle variants into single components\n* **button:** merge standard and link buttons\n\n### Features\n\n* **all:** use system typography tokens in components ([1bc73d2](https://github.com/material-components/material-web/commit/1bc73d2e489f12d5822f779733a2ff086ddaf778))\n* **circular-progress:** adds circular-progress element ([3adab6a](https://github.com/material-components/material-web/commit/3adab6ae192489db5d5eb1dfd54552f69a0f0ad7))\n* **focus:** export the keydown handler ([d7fdfda](https://github.com/material-components/material-web/commit/d7fdfda16237bc7a51c5ed8fb7a85c170ce3e25f))\n* **focus:** implement focus ring animation ([85232d5](https://github.com/material-components/material-web/commit/85232d5916af04a2cdc96e059ad000cd5cc9515e))\n* **iconbutton:** combine button, link, and toggle variants into single components ([0aa39e8](https://github.com/material-components/material-web/commit/0aa39e81532dc240890f2479f7ac592169ad3070))\n* **iconbutton:** rename selected aria label property, add documentation ([5d3af37](https://github.com/material-components/material-web/commit/5d3af375f0d4a9123a2d5755d0279a2ac1c05165))\n* **list,menu:** implement forced colors ([712aab3](https://github.com/material-components/material-web/commit/712aab3efc2b3102dc089833320b013c0b83f0ed))\n* **tokens:** generate v0.170 ([2b9daea](https://github.com/material-components/material-web/commit/2b9daead7fbab0f7c355a33b10798f4193535ff7))\n* **tokens:** generate v0.172 ([189ef06](https://github.com/material-components/material-web/commit/189ef06018f27d6cd772fd5f53b5e1fd9f0c10f7))\n* **typography:** add system custom properties for typography ([bcfed09](https://github.com/material-components/material-web/commit/bcfed098f3a1f430fb9b2489390731fadd26e183))\n\n\n### Bug Fixes\n\n* **button:** incorrect theme custom properties ([2c1c80d](https://github.com/material-components/material-web/commit/2c1c80d3d65905da1071e240d352baa42508faa4)), closes [#4095](https://github.com/material-components/material-web/issues/4095)\n* **button:** merge standard and link buttons ([acfdbb4](https://github.com/material-components/material-web/commit/acfdbb4f9273fe1a62430ec7a8857cca391674cb))\n* **button:** tonal surface update ([50157e6](https://github.com/material-components/material-web/commit/50157e61a716b3a0f0a2ff0052eb65e4cb781eca))\n* **checkbox:** tonal surface update ([7279356](https://github.com/material-components/material-web/commit/72793562e2aad1e284da021cdb5a94f765dfc903))\n* **chips:** tonal surface update ([60ef2ab](https://github.com/material-components/material-web/commit/60ef2abbe7e3b9d28233c13d7de2cee87f73e073))\n* complete tonal surface update ([7368e2a](https://github.com/material-components/material-web/commit/7368e2a2e23cd4509e27860ef513dd6fc832964a))\n* **dialog:** tonal surface update ([c64f416](https://github.com/material-components/material-web/commit/c64f416ecaabb7f5867527b323abb00377cb99aa))\n* **elevation:** remove elevation surfaces ([d801a5f](https://github.com/material-components/material-web/commit/d801a5f7cdb1cd43a832e2c11d33b97ef7e67ac0))\n* **fab:** tonal surface update ([92a9071](https://github.com/material-components/material-web/commit/92a907142ce39811159c388034e7c3e27e3b6e22))\n* **iconbutton:** tonal surface update ([52b45f1](https://github.com/material-components/material-web/commit/52b45f143545c831c04ed92adaba69f8da953ade))\n* **list:** fix strong focus first keyboard nav ([6398186](https://github.com/material-components/material-web/commit/6398186d051f1b7fa309dad28a04d49ab2b4329e))\n* **menu:** close menu on focusout and make it configurable ([3445b63](https://github.com/material-components/material-web/commit/3445b631febe5d4ab93c45c3ebc1cc35177649cc))\n* **menu:** properly implement selected state ([bfa1bec](https://github.com/material-components/material-web/commit/bfa1bec320b6a73f4a4a89e508223e873920e3ac))\n* **menu:** tonal surface update ([7ccc21e](https://github.com/material-components/material-web/commit/7ccc21e0d2674b8aa16027d1c008fe73885b4530))\n* **navigationbar:** tonal surface update ([ebe666e](https://github.com/material-components/material-web/commit/ebe666eb6ad1298aab7c26d7c7fd1d8cc0c1e1e2))\n* **navigationbar:** tonal surface update ([a5fe8f3](https://github.com/material-components/material-web/commit/a5fe8f30375a56d49b94287bfb3199b0913febb7))\n* **navigationdrawer:** tonal surface update ([4f9df51](https://github.com/material-components/material-web/commit/4f9df513ddbe15219044444b9d94657823570c90))\n* **radio:** tonal surface update ([b5065a6](https://github.com/material-components/material-web/commit/b5065a68a8c3d02fe8a864f14dd6f573023ca1dc))\n* **ripple:** tonal surface update ([f08a9db](https://github.com/material-components/material-web/commit/f08a9db3d8257ceb3202a85fcf0e6c3d50ea8bdb))\n* **slider:** tonal surface update ([9a020b9](https://github.com/material-components/material-web/commit/9a020b96e8f786faad51fe9217984a664954a596))\n* **switch:** tonal surface update ([6ccc759](https://github.com/material-components/material-web/commit/6ccc7595dc4b0cfa956e278ca1901f31dbcade89))\n* **textfield:** tonal surface update ([f15d8ca](https://github.com/material-components/material-web/commit/f15d8ca2faf132a3ab1bf5b67efc9653ffa7ce1a))\n\n\n### Miscellaneous Chores\n\n* **elevation:** remove surface for tonal surface update ([d12ed3e](https://github.com/material-components/material-web/commit/d12ed3e4e3352b4dc548c4e2a34cdaee85b4cb14))\n* update next version ([fba9672](https://github.com/material-components/material-web/commit/fba9672fd997c08de6ee64d1386e049c16d99438))\n* update next version ([58b4df3](https://github.com/material-components/material-web/commit/58b4df3c4f611db6123eb2e6d087012ccddb1afd))\n* update next version ([a878783](https://github.com/material-components/material-web/commit/a878783d8d61dff6293556e67ee3e6cbd435b73f))\n\n## [1.0.0-pre.5](https://github.com/material-components/material-web/compare/v1.0.0-pre.4...v1.0.0-pre.5) (2023-03-21)\n\n\n### ⚠ BREAKING CHANGES\n\n* remove old menusurface, autocomplete, and tokens v0.160\n* **fab:** remove disabled state\n* **iconbutton:** properly size iconbutton to 40x40\n* **focus:** refactor focus ring to better match component shape\n\n### Features\n\n* **button:** add label slot ([24298e6](https://github.com/material-components/material-web/commit/24298e696cb76c58a1482e770cc5548fc7c78cbd))\n* **chips:** add basic assist chip ([27762d8](https://github.com/material-components/material-web/commit/27762d855ce88bf2400082ed4c1f1d2c7d03580a))\n* **chips:** add disabled styles ([324e856](https://github.com/material-components/material-web/commit/324e8568c269271e014c130acd4f8b31aa0efdfc))\n* **chips:** add focus ring ([9eb861f](https://github.com/material-components/material-web/commit/9eb861fc835b81511652c6fd2d47aebc9854176d))\n* **chips:** add icon support ([7e02a15](https://github.com/material-components/material-web/commit/7e02a15ad89df143495b07d1d03f74f5f1077495))\n* **chips:** add link chips ([06bdb86](https://github.com/material-components/material-web/commit/06bdb86803a96e680c35132841b73879e6106434))\n* **chips:** add ripple ([9582e00](https://github.com/material-components/material-web/commit/9582e006c0fb23250a33018fffc20ca01aa2ade4))\n* **chips:** add suggestion chips ([f3fe55e](https://github.com/material-components/material-web/commit/f3fe55ec2bcc7dd3ae57f62b3dd68fbc951e747c))\n* **field,menu:** create a surface client rect api for positioning ([533ae6c](https://github.com/material-components/material-web/commit/533ae6c999558cbc8e03b90f9dd59990cac84784))\n* **icon:** add icon documentation ([912d66e](https://github.com/material-components/material-web/commit/912d66ea3058a1cf849e33024a254e6e21d62a65))\n* **list-item:** expose / override host focus ([d005d72](https://github.com/material-components/material-web/commit/d005d7265e1d980d748c8d7fe3f7f6d9d848cbb2))\n* **list:** add spacing tokens and inherit min-width ([35147b2](https://github.com/material-components/material-web/commit/35147b25b0687ae33c86dc81374d1243e697baa6))\n* **menu:** prepare menu to support md-select ([193b220](https://github.com/material-components/material-web/commit/193b220a73718226ec15171197a393008f040caa))\n\n\n### Bug Fixes\n\n* **button:** enable separate color and opacity tokens ([f90aab2](https://github.com/material-components/material-web/commit/f90aab27b4fa497ab6d320b7caa4c1e569d7d00b))\n* **button:** text button background not transparent ([6700947](https://github.com/material-components/material-web/commit/67009478065f7ac61ad83df12bbcce60bebfa7b6))\n* **dialog:** incorrect elevation layering ([028e44e](https://github.com/material-components/material-web/commit/028e44e8c932d2d7d506a6dccbfdc7957c888d12))\n* **elevation:** disable pointer-events ([6155278](https://github.com/material-components/material-web/commit/615527886b122b6532e9afdbe96ec4768c2494de))\n* **fab:** remove disabled state ([c368e7d](https://github.com/material-components/material-web/commit/c368e7d633ae1bbb560cb169293344a00e6c012f)), closes [#4045](https://github.com/material-components/material-web/issues/4045)\n* **focus:** refactor focus ring to better match component shape ([61ff279](https://github.com/material-components/material-web/commit/61ff27910eae0e0401824d03601ec252489aa83e))\n* **iconbutton:** allow icon button to be asymmetrically sized ([8a37ce2](https://github.com/material-components/material-web/commit/8a37ce2e00e7a0611819f8dadc2ea775b6a047dc))\n* **iconbutton:** properly size iconbutton to 40x40 ([567d340](https://github.com/material-components/material-web/commit/567d3406b07ab1655924a96f52b6877aa9daff08))\n* **menu:** flatten submenu slot query ([ddac76e](https://github.com/material-components/material-web/commit/ddac76e3bce71cc42fe74d4c65a1418a321aeecb))\n* **menu:** incorrect elevation ([427d33d](https://github.com/material-components/material-web/commit/427d33d979a4b41229970e9888a287160b714a64))\n* **testing:** token tests not working in Safari Chrome ([618a505](https://github.com/material-components/material-web/commit/618a505f574099519b66f0f28d231657041b5686))\n* **tokens:** add override files for all tokens ([2623c1d](https://github.com/material-components/material-web/commit/2623c1dd4e5d7a557195edfa33709b7db8993451))\n\n\n### Miscellaneous Chores\n\n* remove old menusurface, autocomplete, and tokens v0.160 ([878b914](https://github.com/material-components/material-web/commit/878b9143e790702a524b7e07b81262748e2d3818))\n* update next version ([405ec53](https://github.com/material-components/material-web/commit/405ec5399ccf2f34f956a7df06a2f39e806621a6))\n\n## [1.0.0-pre.4](https://github.com/material-components/material-web/compare/v1.0.0-pre.3...v1.0.0-pre.4) (2023-03-08)\n\n\n### ⚠ BREAKING CHANGES\n\n* **icon,iconbutton,list:** use material symbols for icons\n\n### Features\n\n* **field:** add resizability ([fd605d5](https://github.com/material-components/material-web/commit/fd605d537ce3584c97ffca375e019615c26b748b))\n* **tokens:** generate tokens v0.161 ([e2cd832](https://github.com/material-components/material-web/commit/e2cd8327b60691f093fd389f7a259d217f1d9b89))\n\n\n### Bug Fixes\n\n* **all:** update non-menu components to v0.161 ([828d7ae](https://github.com/material-components/material-web/commit/828d7aeb4d3144e3a0229cc4fa81e7c7135c4760))\n* **icon,iconbutton,list:** use material symbols for icons ([232982e](https://github.com/material-components/material-web/commit/232982ef034872968924dbb5620f59352c4028c2))\n* **icon:** mark icon and icon button as beta ([ff3d379](https://github.com/material-components/material-web/commit/ff3d379bc874be338c5aa8a9afa1593a879fdefa))\n* **text-field:** apply suffix-color and icon size tokens ([a969fda](https://github.com/material-components/material-web/commit/a969fdadb61e2d3ffedd17ddbc9ebe019d5f054c))\n* **text-field:** remove indicator expansion animation ([d755d10](https://github.com/material-components/material-web/commit/d755d107fa487e9a06c4279dbd76a1074437e369))\n* **textfield:** outlined label jumping horizontally with leading icon ([c98f5e0](https://github.com/material-components/material-web/commit/c98f5e017d2bb74caaf88c94c2866e155b61c98e))\n* update license year and holder ([510a867](https://github.com/material-components/material-web/commit/510a867f0d4e95663a6e311b368bc879fecb8361)), closes [#3073](https://github.com/material-components/material-web/issues/3073)\n\n\n### Miscellaneous Chores\n\n* update next version ([a6176de](https://github.com/material-components/material-web/commit/a6176de68460c3e37aa74e1ffac5457eb093bba3))\n* update next version ([367e76a](https://github.com/material-components/material-web/commit/367e76aecfae9e6e3cd99094fa021e77f2d7b80a))\n* update next version ([9a36b3a](https://github.com/material-components/material-web/commit/9a36b3a9ae0c7d3181b66e36e6f27907c8565656))\n\n## [1.0.0-pre.3](https://github.com/material-components/material-web/compare/v1.0.0-pre.2...v1.0.0-pre.3) (2023-02-22)\n\n\n### ⚠ BREAKING CHANGES\n\n* **slider:** fix ripple end hover state when leaving handle\n* **controller:** fix label activation utility on slotted elements\n* **dialog:** fix exception when opening when compiled with advanced closure settings\n* **ripple:** rename press methods to event handlers\n* **ripple:** rename focus methods to event handlers\n* **ripple:** rename hover methods to event handlers\n* **navigation,badge:** migrate to `-text-type` tokens\n* **fab:** move to `label-text-type` token, shape corners\n* **segementedbutton:** move to `label-text-type` token\n* **list,menu:** move to `-text-type` tokens\n* **dialog:** migrate to `header-type` and `supporting-text-type` tokens\n* **button:** replace label-text-* tokens with label-text-type\n* **field & dependents:** convert to use text-type tokens\n* **all:** checkbox container-width/height tokens have been renamed to container-size\n* **ripple:** remove \"state-layer\" from token names\n* **all:** use shape.resolve-tokens and remove shape.resolve-theme\n\n### Features\n\n* **shape, string-ext:** Allow shape corners to fall back to a single custom property ([1afd925](https://github.com/material-components/material-web/commit/1afd9259adacf4cdf429dd0648b82bd23b3cdad6))\n* **slider:** adds slider element ([f0f5ae5](https://github.com/material-components/material-web/commit/f0f5ae57abee9ee5324bf628b31af091c0751b17))\n* **tokens:** generate v0.160 ([20de321](https://github.com/material-components/material-web/commit/20de321c7449f100187de0663d074b34c03697f2))\n* **typography:** implement resolve-tokens function to use `-text-type` ([1550e8e](https://github.com/material-components/material-web/commit/1550e8e60833687ea7cb059e25aa677e783f14a1))\n\n\n### Bug Fixes\n\n* **all:** update tokens to 0.160 ([9025af3](https://github.com/material-components/material-web/commit/9025af316a0cee7c710e01cedbc8ce58cdd8bcef))\n* **all:** use shape.resolve-tokens and remove shape.resolve-theme ([44a8d74](https://github.com/material-components/material-web/commit/44a8d74f56bfe31a422b93675b4085e0dd4b8876))\n* **button:** replace label-text-* tokens with label-text-type ([69f9a17](https://github.com/material-components/material-web/commit/69f9a17a12fa86e1e2ba04fc35ad9b9f138b68ad))\n* **controller:** fix label activation utility on slotted elements ([8b58f98](https://github.com/material-components/material-web/commit/8b58f98a829fa93e2278ad041bf136cc9ed8b354))\n* **dialog:** fix exception when opening when compiled with advanced closure settings ([c63a1d9](https://github.com/material-components/material-web/commit/c63a1d9caf82f906d19607e46070a0bf73010c66))\n* **dialog:** migrate to `header-type` and `supporting-text-type` tokens ([66948a4](https://github.com/material-components/material-web/commit/66948a49011c30b072e645ba958a2a44ce218a8b))\n* **docs:** fix documentation to show using `-type` tokens ([c955055](https://github.com/material-components/material-web/commit/c955055ae2b1582e467f3b0902281e1724efdf49))\n* **fab:** move to `label-text-type` token, shape corners ([8c01aee](https://github.com/material-components/material-web/commit/8c01aeea08c750f3c25a60a0a2691c571f3a8996))\n* **field & dependents:** convert to use text-type tokens ([cc5a7db](https://github.com/material-components/material-web/commit/cc5a7db27d4a2ee58eab1dcd59da59847b94344c))\n* **list,menu:** move to `-text-type` tokens ([45a6d45](https://github.com/material-components/material-web/commit/45a6d45577b217148bc9d6e008c24710e4845b61))\n* **navigation,badge:** migrate to `-text-type` tokens ([7b86677](https://github.com/material-components/material-web/commit/7b8667711a17cc9f8cf30e2d9fdef61dff6d0bb2))\n* **ripple:** remove \"state-layer\" from token names ([ff84a66](https://github.com/material-components/material-web/commit/ff84a66f3effdd5291781321e11cbbd34001dd26))\n* **ripple:** rename focus methods to event handlers ([6e97717](https://github.com/material-components/material-web/commit/6e977178c5bb41e47e24264c47b08b7b8d3b9833))\n* **ripple:** rename hover methods to event handlers ([cde7ca0](https://github.com/material-components/material-web/commit/cde7ca0e3bbd0edaecf4dcea9226f258dae4070e))\n* **ripple:** rename press methods to event handlers ([0cc7d29](https://github.com/material-components/material-web/commit/0cc7d2959a6aca83942cf37cb95bb0dbc395258b))\n* **segementedbutton:** move to `label-text-type` token ([bd125fe](https://github.com/material-components/material-web/commit/bd125fe4562712da5ecc1b4abd559fd1e737f8cd))\n* **slider:** fix ripple end hover state when leaving handle ([535d889](https://github.com/material-components/material-web/commit/535d8897758aa72bbff41ee5f7c552bec2b4042f))\n* **slider:** use `label-label-text-type` font token ([ad889ea](https://github.com/material-components/material-web/commit/ad889ea31bb069418ab2a42d588bd99309809d0f))\n* **testing:** convert test-table to use `-type` tokens ([2046401](https://github.com/material-components/material-web/commit/20464014bb0873253bcf8f14b0e950543292ce6d))\n* **testing:** remove header-cell-text-tracking ([43ce8c1](https://github.com/material-components/material-web/commit/43ce8c1d31f118eacde8a8aa1a3e898af1dddc4c))\n* **typograph:** remove typography resolver ([2a8ba18](https://github.com/material-components/material-web/commit/2a8ba183607035cceb8776dab030ec311471ebcc))\n\n\n### Miscellaneous Chores\n\n* update next version ([77b4864](https://github.com/material-components/material-web/commit/77b48640e5d53a04ba414de77af0ca22316cccd4))\n\n## [1.0.0-pre.2](https://github.com/material-components/material-web/compare/v1.0.0-pre.1...v1.0.0-pre.2) (2023-02-06)\n\n\n### ⚠ BREAKING CHANGES\n\n* **iconbutton:** Make a few API improvements\n* **textfield:** remove container-height token\n* **iconbutton:** normalize toggle variant API with regular icon button\n* **iconbutton:** remove icon properties, use slots instead\n\n### Features\n\n* **divider:** add divider component ([9431c16](https://github.com/material-components/material-web/commit/9431c1643140969e52ca3a065a9ec1c4fb299b3b))\n* **menu,list:** expose menu theme mixins and remove divider ([e15c4b8](https://github.com/material-components/material-web/commit/e15c4b86d584cfda5dc850cb697bc9b9552e9536))\n* **tokens:** generate tokens v0.152 ([c61f46c](https://github.com/material-components/material-web/commit/c61f46c618c38d45c49e85f809330d40e5de40d3))\n\n\n### Bug Fixes\n\n* **all:** remove `[@requirecss](https://github.com/requirecss)` comments ([80590ae](https://github.com/material-components/material-web/commit/80590ae88dab9944335e78862da048ff92fee99f))\n* **forms:** fix form association for switch, checkbox, and radio, including label activation ([1ddba0c](https://github.com/material-components/material-web/commit/1ddba0ca3cfa7d9964ffd24a0e5aab488a83179e))\n* **switch:** update to latest animations, and implement sizing tokens ([9e9bf84](https://github.com/material-components/material-web/commit/9e9bf845be82ce1753ffb0d3bf7fec7947f09428))\n\n\n### Miscellaneous Chores\n\n* update next version ([a539286](https://github.com/material-components/material-web/commit/a539286c3f5f34b7c2969b963b3859ed633a74ef))\n\n\n### Code Refactoring\n\n* **iconbutton:** Make a few API improvements ([c72e7fd](https://github.com/material-components/material-web/commit/c72e7fd6f74ecd257d9542f9ef1ec2a64e02b1bf))\n* **iconbutton:** normalize toggle variant API with regular icon button ([31391eb](https://github.com/material-components/material-web/commit/31391eb610f987a3f66ca07722a8ebca6a0b0a78))\n* **iconbutton:** remove icon properties, use slots instead ([36f1a1a](https://github.com/material-components/material-web/commit/36f1a1a0b34dba43d4a859a19d30070b9998ca9a))\n* **textfield:** remove container-height token ([1d81416](https://github.com/material-components/material-web/commit/1d81416863a2682fc123b6219c155998db574da7))\n\n## [1.0.0-pre.1](https://github.com/material-components/material-web/compare/v1.0.0-pre.0...v1.0.0-pre.1) (2023-01-09)\n\n\n### ⚠ BREAKING CHANGES\n\n* **button:** Remove icon property from Button, require slotted icons\n\n### Bug Fixes\n\n* **button:** remove icon property from Button, require slotted icons ([d3b517a](https://github.com/material-components/material-web/commit/d3b517ad0054b8d12ca7bc27e19ad40db987ba4b))\n* **icon, iconbutton:** Cleanup styling ([12c9364](https://github.com/material-components/material-web/commit/12c93641a550c594561883943fa5556d1cc40ca7))\n* **icon:** Remove fixed left-to-right direction to fix RTL styling ([5a27f05](https://github.com/material-components/material-web/commit/5a27f05cd7534d7c2118b8d205f78ab0eb307b94))\n* **radio:** update motion to current spec ([95897b3](https://github.com/material-components/material-web/commit/95897b3e25ef3915c6047239b1794172822b1b35))\n\n\n### Miscellaneous Chores\n\n* update next version ([ea33cb8](https://github.com/material-components/material-web/commit/ea33cb81224eb46cde33201e331d59e07046f29a))\n\n## [1.0.0-pre.0](https://github.com/material-components/material-web/compare/v0.1.0-alpha.2...v1.0.0-pre.0) (2023-01-09)\n\n\n### ⚠ BREAKING CHANGES\n\n* **focus-ring, button:** Button shape properties are now of the form `--md-text-button-container-shape-start-start`\n* **formfield:** Removed Formfield. The <label> element can now be used, e.g. `<label>Checkbox <md-checkbox></md-checkbox></label>`.\n* **checkbox:** Removed reducedTouchTarget. Instead, set the width and height on the checkbox.\n\n### Features\n\n* add _focus-ring.scss partial to expose theming the focus ring ([c47f800](https://github.com/material-components/material-web/commit/c47f8004ac14ac15b19a61e3fe373300c5312f5c))\n* add filled-tonal-icon-button sass partial ([30d9c33](https://github.com/material-components/material-web/commit/30d9c33162b08a769ae452079b4911c9080c5c1a))\n* add more detail to error message on sass color function. ([c293a8d](https://github.com/material-components/material-web/commit/c293a8dfffdbd73b6902bb9e27075c11f8415328))\n* **all:** Implement stubs for lit-localize support ([e72ca03](https://github.com/material-components/material-web/commit/e72ca03799aad6fd688ba5888eda21a4f4f98367))\n* **autocomplete:** Add base render functions ([c289678](https://github.com/material-components/material-web/commit/c28967839a834197714a143bc1f1f6852dd57cee))\n* **autocomplete:** Add example in demo on how to filter items ([75d6b82](https://github.com/material-components/material-web/commit/75d6b82485a96f8d70f06f131c37742b55c19522))\n* **autocomplete:** Add filled autocomplete theming api support ([ef9bdd1](https://github.com/material-components/material-web/commit/ef9bdd196629b15867bd9d9e481631e03393f8d4))\n* **autocomplete:** Add keyboard support ([d2ea3ce](https://github.com/material-components/material-web/commit/d2ea3ce0b623801d36c306a2f1f6d803218bad2a))\n* **autocomplete:** Add opening and closing upon interaction ([530b6d3](https://github.com/material-components/material-web/commit/530b6d336e5b9ecbe5b64b932e4c16e93037ac14))\n* **autocomplete:** Create autocomplete item and connect action to fill value ([c3aa552](https://github.com/material-components/material-web/commit/c3aa5525c1cdd5975e0b2691e3ac532205683e84))\n* **autocomplete:** Create MdAutocompleteList to unset min-width. ([e77d472](https://github.com/material-components/material-web/commit/e77d4726faacf3e7cde6f0d92be2fa7ee5e4611b))\n* **autocomplete:** Create MdAutocompleteSurface to adjust width ([cc4603e](https://github.com/material-components/material-web/commit/cc4603e99e3adbbe2b386e07dc627a718bf741c4))\n* **button:** Add outlines in high contrast mode (HCM) to Button ([9ec33ba](https://github.com/material-components/material-web/commit/9ec33ba879836bb68db367c6f0a75f76b620ca3f))\n* **checkbox:** Checkbox now supports form submission and label activation by using FormController and setting formAssociated. ([7b84fca](https://github.com/material-components/material-web/commit/7b84fca5b810a56d473e36dd962b75f3777c6529))\n* **checkbox:** refactor and simplify rendering/style logic ([27f7ea8](https://github.com/material-components/material-web/commit/27f7ea89cee0d1a31e50b81e5db994b97bba7748))\n* **controller:** add label activation support to FormController ([4e3054b](https://github.com/material-components/material-web/commit/4e3054bab3a1fe5e462ab812ccc1895312a11176))\n* **controller:** add stringConverter for empty reflecting attributes ([2a0d563](https://github.com/material-components/material-web/commit/2a0d563338aa84b8038a969f9f0245a245bd78ba))\n* **elevation:** create md-elevation component ([9eb7bf0](https://github.com/material-components/material-web/commit/9eb7bf081fa365b853cfc7044c62ed05f969552a))\n* **field:** add leading/trailing content styles ([dc7d949](https://github.com/material-components/material-web/commit/dc7d9494f7801634eed6e371e5da879b4f132c59))\n* **focus-ring, button:** Match focus ring shape to button shape ([7fad3a5](https://github.com/material-components/material-web/commit/7fad3a56d9888f7d29fd096d683840d8d2217456))\n* **form-field:** Added theme styles to form field ([17075f4](https://github.com/material-components/material-web/commit/17075f485544d186e82c1d93bd441a658f0ccf49))\n* **icon-button:** Implement isRTL helper library, and refactor icon-button to use it. ([5dd43fa](https://github.com/material-components/material-web/commit/5dd43faffb15d3d386d717239ee9102988433938))\n* **iconbutton:** Add internal `linkAttributes` ([10cf00b](https://github.com/material-components/material-web/commit/10cf00bde4250d171d621d9ec051503684677646))\n* **icon:** Implement tokens for md-icon ([0327283](https://github.com/material-components/material-web/commit/0327283b7b0da6174a255b3e1434354ac360ab52))\n* **list-item:** Added isActive() method to check active status and minor fixes to keyboard navigation ([9f410f6](https://github.com/material-components/material-web/commit/9f410f6248c177885166d1e79e85fc8ce2e72161))\n* **list:** Add basic keyboard navigation to M3 list ([ee35bfe](https://github.com/material-components/material-web/commit/ee35bfe7f1aea803f0410a032d41a83026109d42))\n* **list:** Add component styles to match spec layout ([a6ddbaa](https://github.com/material-components/material-web/commit/a6ddbaa48cd5aef32228100d9926bb117fb1c7e8))\n* **list:** Add customizable `aria-label`/`role` attributes to list, and customizable `role` to list item. ([8f63406](https://github.com/material-components/material-web/commit/8f63406cdc55c0bb6d1edd6407fc954a10c8e02f))\n* **list:** Add list elevation overlay and overlay color/opacity to theme API. ([ebb9a4b](https://github.com/material-components/material-web/commit/ebb9a4b360e0690a0c41eee5d198458a14490de5))\n* **list:** Add listId property ([78f125d](https://github.com/material-components/material-web/commit/78f125dcbb9b8f664bada5fa8018d599b5dc0a34))\n* **list:** Add ripple to M3 list ([4d292f4](https://github.com/material-components/material-web/commit/4d292f4cc63ce1b354d7ddc7f66a8da87a4751c9))\n* **list:** Add support for aria active descendant, id ([d9b1deb](https://github.com/material-components/material-web/commit/d9b1deb2f8b3749cfe15f619b8fe40d867db915f))\n* **list:** Add support for fetching list items. ([4b79baa](https://github.com/material-components/material-web/commit/4b79baa980388a07a6d6f4cfe5593b0be6949b80))\n* **list:** Added aria-checked attribute support to list item. ([2c06c2e](https://github.com/material-components/material-web/commit/2c06c2ed9b35d76a30b75d198cdf41e3e3bb8663))\n* **list:** Added avatar web component to list ([899a4e6](https://github.com/material-components/material-web/commit/899a4e6835ecb9d1afc9979ae9539b6b02a26771))\n* **list:** Added focus ring to list item ([2d2b3bb](https://github.com/material-components/material-web/commit/2d2b3bbedabed59046e2b4cbcda7fa0f52b9365b))\n* **list:** Added image web component to list ([4587cbc](https://github.com/material-components/material-web/commit/4587cbc33b975b42526bc7660a38f5470b6076ea))\n* **list:** Added list divider web component ([d2a1b2e](https://github.com/material-components/material-web/commit/d2a1b2ea18724b117650f50a8f96b8238c14b9c7))\n* **list:** Added options list to M3 list ([74704d7](https://github.com/material-components/material-web/commit/74704d7cf23fc80053171ae83076be9a3629e82a))\n* **list:** Added soy template annotations for image classes slot ([c277252](https://github.com/material-components/material-web/commit/c27725234d3ceb64c8daaf8c87c1d4759997eee1))\n* **list:** Added test harnesses to list ([bf29bc3](https://github.com/material-components/material-web/commit/bf29bc36e548b3b0ad4fbe7b844df4949e9f0af0))\n* **list:** Added video web component to list ([261b6ef](https://github.com/material-components/material-web/commit/261b6efc0c56768abc233b48ca1a2591eeea0fcc))\n* **list:** Created a separate style module for icon web component in list ([e64cdbe](https://github.com/material-components/material-web/commit/e64cdbeb35f530eee78d1bf15129af9881e49931))\n* **menu:** Add `aria-label` support in menu, and set `role=menu/menuitem` for menu and menu item components. ([7e35820](https://github.com/material-components/material-web/commit/7e35820536608a24f60cd411860d4b0f05da6d31))\n* **menu:** Add initial menu base component class. ([60c4a41](https://github.com/material-components/material-web/commit/60c4a413d38e0cb5d14caa48f03b5e09ab9c3e6a))\n* **menu:** Add menu button component. This manages focus automatically on menu open, setting focus to menu item (rather than menu root) if the menu open originated from a keyboard event. ([a29ac8b](https://github.com/material-components/material-web/commit/a29ac8bebbf74b2239d431af629435979ebb9cdd))\n* **menu:** Add menu foundation/adapter and Sass (forked from MDC). ([de29937](https://github.com/material-components/material-web/commit/de2993744d6f83850d0c80cf56a9ff245cbc4168))\n* **menu:** Fix menu closing on menu item click. ([d37e23d](https://github.com/material-components/material-web/commit/d37e23de0dd24dc489c8cce58bf41c9b6be18f6b))\n* **menu:** Implement menu theming API. Use menu surface/list/list item `theme()` mixins to style subcomponents. ([f305806](https://github.com/material-components/material-web/commit/f3058069559df80d29cdc807e2e0fdcf6eb3b9bd))\n* **menusurface:** Add `flipMenuHorizontally` property, add unit tests. ([884c3a2](https://github.com/material-components/material-web/commit/884c3a204b0302434497945443008657ebaf0d7d))\n* **menusurface:** Add menu surface theming API. ([5e70115](https://github.com/material-components/material-web/commit/5e7011559ac376616f18589faa64df8e42bd8c8b))\n* **menusurface:** Add menusurface class (forked from MWC/MDC). ([5f51f26](https://github.com/material-components/material-web/commit/5f51f26bf9e4c0354a99ecdb5a4cb1786f21cb7f))\n* **radio:** change SingleSelectionController to a ReactiveController ([b0e87c5](https://github.com/material-components/material-web/commit/b0e87c538acc7d6110e2c4bf3807829e5c128398))\n* **ripple:** Create a ripple directive ([6746d0f](https://github.com/material-components/material-web/commit/6746d0f685734369d16f8a22ae24af2c659b6b78))\n* **sass:** Added pick() function to map-ext ([10c506c](https://github.com/material-components/material-web/commit/10c506c7183d38e4b18e6b6c0ffe6a8994bcc064))\n* **switch:** add ripple to switch ([4a8c333](https://github.com/material-components/material-web/commit/4a8c33362511c70da2a25322b4b445fa97a72d0e))\n* **switch:** add warning for `handle-height` and `handle-width` which are not yet implmented. ([e2f3c28](https://github.com/material-components/material-web/commit/e2f3c28bbf4e0d6f36e7533769c1fdbc0da0475f))\n* **switch:** added action-element to fire event on press. ([85e85b2](https://github.com/material-components/material-web/commit/85e85b21ba7bf2563ad41036a7170124949c8d82))\n* **switch:** mark opacity tokens as hardcoded. ([ad1db85](https://github.com/material-components/material-web/commit/ad1db85d4f4bcc08f15c0a452a0a36470c29280b))\n* **switch:** Switch now supports label activation by setting formAssociated. ([7473f46](https://github.com/material-components/material-web/commit/7473f4647d155b0680fde236d97f14fbfacc78d5))\n* **switch:** use tokens to shape the focus ring ([ed58af1](https://github.com/material-components/material-web/commit/ed58af19c7540bdf950011a966e0fb5d9407cd00))\n* **text-field:** add blur and jsdoc ([5241b76](https://github.com/material-components/material-web/commit/5241b76dcabfe4a0d9a1010d90aaed65e3875c04))\n* **text-field:** add character counter ([1cc64f5](https://github.com/material-components/material-web/commit/1cc64f543a9e1284c126129c788d954f7ce2c9ed))\n* **text-field:** add error text ([58848f6](https://github.com/material-components/material-web/commit/58848f61c94f8c20c941af0ead82ea461f34a0ef))\n* **text-field:** add icons ([424596e](https://github.com/material-components/material-web/commit/424596edce10c6caa4e64446742343668a80f557))\n* **text-field:** add min, max, and step ([c73b59c](https://github.com/material-components/material-web/commit/c73b59cea428bf1b59bf04c13704cd79bcce8703))\n* **text-field:** add minLength and maxLength ([0c8a91f](https://github.com/material-components/material-web/commit/0c8a91fc8fa83076e467c6db25e5b024b31e560e))\n* **text-field:** add native validation APIs ([e2e2c9d](https://github.com/material-components/material-web/commit/e2e2c9d8a58b2487ce33fe05da4cf0ae35ac7d69))\n* **text-field:** add pattern ([810a9a4](https://github.com/material-components/material-web/commit/810a9a4101418abbd640ceafb5537d725a61af50))\n* **text-field:** add placeholder color tokens ([b945f30](https://github.com/material-components/material-web/commit/b945f30e75fa58bc883048632dd03d68e0ea551c))\n* **text-field:** add prefix and suffix ([8e68857](https://github.com/material-components/material-web/commit/8e688579d122eed0f9b8d95786828fc9c824de81))\n* **text-field:** add selection APIs ([091a124](https://github.com/material-components/material-web/commit/091a124eafec6e8422bb622165380cd7e21d94a7))\n* **text-field:** add SSR ariaLabelledBy property ([e0386ac](https://github.com/material-components/material-web/commit/e0386acda96de375486b93d87fac09b2b7ea9b34))\n* **text-field:** add support for text-align: end ([bf3cb81](https://github.com/material-components/material-web/commit/bf3cb81160412ab5ac04df49aa803d24927c2713))\n* **text-field:** add supporting text ([77cc80e](https://github.com/material-components/material-web/commit/77cc80e63495a39284a855121b93ac1a725084a7))\n* **text-field:** add textDirection ([4bab4b5](https://github.com/material-components/material-web/commit/4bab4b587465839db58d62b2f9bc763c422133fa))\n* **text-field:** add valueAsNumber and valueAsDate ([7792ae1](https://github.com/material-components/material-web/commit/7792ae1b094f03a44c6fda868a1f8563a2b702c9))\n* **text-field:** announce error messages ([973a982](https://github.com/material-components/material-web/commit/973a98250bef8ebdef9909b4743d2322fe7b7871))\n* **text-field:** error/errorText will override reportValidity ([c757bfa](https://github.com/material-components/material-web/commit/c757bfac45b8c4ab44f46da2769faf7e24fb677f))\n* **theming:** add theming by color-scheme mixin. ([6ea69ec](https://github.com/material-components/material-web/commit/6ea69ecb0c94598c8a1d35d08e1af3165f20ce95))\n\n\n### Bug Fixes\n\n* **button, fab:** Ensure elevation is correct when focused and hovering ([6e0775d](https://github.com/material-components/material-web/commit/6e0775ded3e90aa56f6e38903b2e15f68b7a4de4))\n* **button:** Move event listeners to anchor to fix focus ring ([e8ba229](https://github.com/material-components/material-web/commit/e8ba229dd09d98a3ab68d667bf8c7f0df69daa53))\n* **button:** Remove `aria-label` and `aria-haspopup` attributes from Button HTML if not set ([5e2a46e](https://github.com/material-components/material-web/commit/5e2a46e9a75b6e98fe228b14c36f95d495bd75eb))\n* **button:** Replace `&lt;mwc-icon&gt;` with `<md-icon>` ([8720a77](https://github.com/material-components/material-web/commit/8720a7765a0e84ed97da1610f774abd423c56529))\n* **button:** Use correct padding for Text Button ([61eb08e](https://github.com/material-components/material-web/commit/61eb08e7b1d95610fec5de7488c800d25cc22b0c))\n* **button:** use new elevation component ([2f1a8df](https://github.com/material-components/material-web/commit/2f1a8dfc417605859bab7695a9fb6392acabf25a))\n* **button:** use new elevation component ([545c2eb](https://github.com/material-components/material-web/commit/545c2eb494feffcdba1cc3ea80df16449adc5f0c))\n* **checkbox:** Fixes incorrect styling of native input which also caused tapping to check to sometimes fail. ([dd6a56b](https://github.com/material-components/material-web/commit/dd6a56bacecef773b9d69ee0bbacdcabf5657b98))\n* **checkbox:** Make focus ring circular ([f330c51](https://github.com/material-components/material-web/commit/f330c51d1765982379c1cba7a50f3d5c2627c74f))\n* **checkbox:** Remove unused methods and cleanup styles ([9152fed](https://github.com/material-components/material-web/commit/9152fed0b934ff1aef999b61c8577113fe5ac527))\n* **checkbox:** Update checkbox to use property bindings for `disabled` and `checked` on internal input element. ([73ed7a0](https://github.com/material-components/material-web/commit/73ed7a0233955d1a5df206ebe5c5f642f69e1aec))\n* **chips:** Remove unused import ([e65ebd8](https://github.com/material-components/material-web/commit/e65ebd8ef107013d843f800945f308f8cf24467e))\n* **decorators:** ariaProperty not triggering re-renders from data changes ([a171c8f](https://github.com/material-components/material-web/commit/a171c8fff375f2fe8886f6edfe0b9acf34d103d3))\n* **field:** content not expanding ([d0d5340](https://github.com/material-components/material-web/commit/d0d5340d07c10d470a5ef77cc5cc6cd523b176c3))\n* **field:** supporting text typography not resolving ([a96664b](https://github.com/material-components/material-web/commit/a96664b835e044dddcf0feaf44697f6ee751d80f))\n* **focus:** Update focus ring to new design ([601c331](https://github.com/material-components/material-web/commit/601c331d37d73620f1a9f7bdc85181be607d0fa5))\n* **formfield:** fix broken import ([b4bcf4e](https://github.com/material-components/material-web/commit/b4bcf4efff02168c195f0dbbd1c32756ae4c9994))\n* **formfield:** Removed Formfield. ([753a03b](https://github.com/material-components/material-web/commit/753a03be963f7b5242e98b73d1309abbe9f5bf51))\n* **list,textfield:** Fix TS 4.9 compliation of role property override. ([c70198a](https://github.com/material-components/material-web/commit/c70198a5670bc372140315cec20cbca0ed576115))\n* **list:** Changed Headline text from slot content to text property of list item ([62092b7](https://github.com/material-components/material-web/commit/62092b7c9b03d72b24369d991d3dd08120854166))\n* **list:** Fixed layout of list variants. ([a885a1f](https://github.com/material-components/material-web/commit/a885a1faffc71b30d5adf0da935e08efda7e0dcf))\n* **list:** Fixed list item icon padding ([07aaa8a](https://github.com/material-components/material-web/commit/07aaa8a7633a5dc499ce6d7f426b085963ac2bc4))\n* **list:** Modify list focus ring horizontal offset to prevent horizontal overflow. ([a88be95](https://github.com/material-components/material-web/commit/a88be95da7b1bf9b8b380bfbf47c0fbe25c2f2d3))\n* **list:** Removed unnecessary options list variant ([6b6d651](https://github.com/material-components/material-web/commit/6b6d651714eef8283060d3d44f9b82447e63974a))\n* **list:** use new elevation component ([527b273](https://github.com/material-components/material-web/commit/527b273d8f8b9b931b0b0f4c9de0623efd57f213))\n* **menu:** Fix focus management bugs (TAB on menu item closes menu without restoring focus to anchor element, on menu open, menu respects focusState option (first item, last item, or list root). ([305b790](https://github.com/material-components/material-web/commit/305b790faa91e1cb7f1d80e5b7f3761acd38c302))\n* **menu:** use new elevation component ([563518b](https://github.com/material-components/material-web/commit/563518b59fac92ade3da73b64a6323e81f7b8aa5))\n* **navigationdrawer:** use new elevation component ([c2fe5e1](https://github.com/material-components/material-web/commit/c2fe5e1d1b14c0f6d7a585676d3dfbad108eaf8f))\n* **radio:** Radio supports form association and label activation by using FormController and setting `formAssociated`. ([91c2425](https://github.com/material-components/material-web/commit/91c24255c243a97d01a873854046ad3a57033352))\n* **radio:** update rendering and styles ([3aff084](https://github.com/material-components/material-web/commit/3aff08429715f49de9296e5efb7b3ebd4d0d804b))\n* **ripple:** Improves fix for Safari ripple overflow due to https://bugs.webkit.org/show_bug.cgi?id=247546 to handle hover and pressed states. ([8a35672](https://github.com/material-components/material-web/commit/8a35672c4a10a99a8b7e5bfcc9ea6e6a1a1e48cb))\n* **styling:** Removes tap highlight color visible on mobile Safari for checkbox, radio, iconbutton, and textfield. ([eec25b3](https://github.com/material-components/material-web/commit/eec25b393eb4ce84d207d27c7d84a2695fe50c8a))\n* **tab:** Fixes how tabs renders icons. ([f7e1bbb](https://github.com/material-components/material-web/commit/f7e1bbb7aee4230c1fd324ececf0d872c16f5bbb))\n* **text-field:** container-shape not working for outlined variant ([6b25914](https://github.com/material-components/material-web/commit/6b25914f60a79987506a5ba3d8f7e12dec282486))\n* **text-field:** correctly resizes when setting width ([7285b3a](https://github.com/material-components/material-web/commit/7285b3a2dbfa6f03f178168f0779abb506f951dd))\n* **text-field:** ensure `value` can overwrite `defaultValue` ([58ae98c](https://github.com/material-components/material-web/commit/58ae98cbc8c2b95138994e6976ea4c8694da627a))\n* **text-field:** fixed setting width to less than &lt;input&gt; width ([a5849b9](https://github.com/material-components/material-web/commit/a5849b95466b5b22a094757f83fe7f7f823d493d))\n* **text-field:** label floating after type changes ([17d92f6](https://github.com/material-components/material-web/commit/17d92f6b4b06ec376df8ac90f55828b2abb8bf20))\n* **text-field:** rename readonly to readOnly ([4e6f01d](https://github.com/material-components/material-web/commit/4e6f01d422d9d1a612eeabd0ad649de1a8f7b0fa))\n\n\n### Miscellaneous Chores\n\n* update release-please ([0b5283d](https://github.com/material-components/material-web/commit/0b5283dadf5889846132d97e86fd21adb72209ed))\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n*   Demonstrating empathy and kindness toward other people\n*   Being respectful of differing opinions, viewpoints, and experiences\n*   Giving and gracefully accepting constructive feedback\n*   Accepting responsibility and apologizing to those affected by our mistakes,\n    and learning from the experience\n*   Focusing on what is best not just for us as individuals, but for the overall\n    community\n\nExamples of unacceptable behavior include:\n\n*   The use of sexualized language or imagery, and sexual attention or advances\n    of any kind\n*   Trolling, insulting or derogatory comments, and personal or political\n    attacks\n*   Public or private harassment\n*   Publishing others' private information, such as a physical or email address,\n    without their explicit permission\n*   Other conduct which could reasonably be considered inappropriate in a\n    professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders 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, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nmaterial-web-contact@google.com. All complaints will be reviewed and\ninvestigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of\nactions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or permanent\nban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within the\ncommunity.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by\n[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\nThank you for your interest in contributing! The following sections describe\nways to get involved.\n\n## Code of conduct\n\nPlease review and follow our [code of conduct](CODE_OF_CONDUCT.md).\n\n## Feedback\n\nUser feedback is the most valuable to us. It's a great way to start\ncontributing!\n\n-   [File new issues](https://github.com/material-components/material-web/issues/new/choose)\n    for bugs you run into or feature requests you have.\n\n-   [Create a discussion](https://github.com/material-components/material-web/discussions/new/choose)\n    for help, feedback on changes, or feature proposals.\n\n## Discord\n\nJoin the `#material` channel on [Lit's Discord](https://lit.dev/discord) to chat\ndirectly with the team and other users.\n\n## Pull requests\n\nPull requests are welcome! Keep a few things in mind:\n\n-   Create an\n    [issue](https://github.com/material-components/material-web/issues/new/choose)\n    or\n    [discussion](https://github.com/material-components/material-web/discussions/new/choose)\n    before opening a pull request.\n-   Trivial changes, such as documentation, don't need an issue.\n-   Create draft PRs in the `@material/web/labs` folder for new features.\n-   Please be patient! It may take a while for the team to review. Keep changes\n    small and scoped to speed things up.\n\n### New components\n\nPlease understand that new component implementations are difficult for us to\ndirectly accept. They need to complete several engineer, design, and\naccessibility reviews that are not easy with our externally available workflows.\n\nIf you want to help build a new component, create a\n[new discussion](https://github.com/material-components/material-web/discussions/new/choose).\nAdd any design docs, code samples, reference implementations in draft PRs, and\nget community feedback.\n\n### Contributor License Agreement\n\nCode contributions must\n[sign Google's CLA](https://cla.developers.google.com/clas). When you open a\npull request, our friendly bot will check and provide help if you haven't\nsigned.\n\n[Set your email in git](https://help.github.com/articles/setting-your-email-in-git/)\nto the same email used to sign the CLA.\n"
  },
  {
    "path": "LICENSE",
    "content": "\n                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright 2018-2023 Google, Inc.\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n"
  },
  {
    "path": "README.md",
    "content": "# Material Web\n\n<img src=\"./docs/images/material-web.gif\"\n  title=\"Material web components\"\n  alt=\"A collection of Material web components\"\n  style=\"border-radius: 32px\">\n\n[![Published on npm](https://img.shields.io/npm/v/%40material%2Fweb)](https://www.npmjs.com/package/@material/web)\n[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff&label=%23material)](https://lit.dev/discord/)\n[![Test status](https://github.com/material-components/material-web/actions/workflows/test.yml/badge.svg)](https://github.com/material-components/material-web/actions/workflows/test.yml)\n[![npm Downloads](https://img.shields.io/npm/dm/%40material%2Fweb?label=npm%20downloads)](https://npm-stat.com/charts.html?package=%40material%2Fweb)\n[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/%40material%2Fweb)](https://www.jsdelivr.com/package/npm/@material/web?tab=stats)\n\n`@material/web` is a library of\n[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)<!-- {.external} -->\nthat helps build beautiful and accessible web applications. It uses\n[Material 3](https://m3.material.io/)<!-- {.external} -->, the latest version of Google's\nopen-source design system.\n\n**Note:\n[MWC is in maintenance mode pending new maintainers](https://github.com/material-components/material-web/discussions/5642).**\n\n## Resources\n\n-   [Introduction](./docs/intro.md)\n-   [Roadmap](./docs/roadmap.md)\n-   [Component docs](./docs/components/)\n-   [Bundle size](./docs/size.md)\n-   [Browser support and FAQ](./docs/support.md)\n\n## Quick start\n\n> Tip: Using Angular? We recommend using\n> [Angular Material](https://material.angular.io/)<!-- {.external} --> components\n> instead.\n\nThis code snippet is a buildless example that loads `@material/web` from a CDN.\nCheck out the [quick start](./docs/quick-start.md) guide to install and build\nfor production.\n\n<!-- LINT.IfChange -->\n\n```html\n<head>\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <script type=\"importmap\">\n    {\n      \"imports\": {\n        \"@material/web/\": \"https://esm.run/@material/web/\"\n      }\n    }\n  </script>\n  <script type=\"module\">\n    import '@material/web/all.js';\n    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\n\n    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);\n  </script>\n</head>\n<body>\n  <h1 class=\"md-typescale-display-medium\">Hello Material!</h1>\n  <form>\n    <p class=\"md-typescale-body-medium\">Check out these controls in a form!</p>\n    <md-checkbox></md-checkbox>\n    <div>\n      <md-radio name=\"group\"></md-radio>\n      <md-radio name=\"group\"></md-radio>\n      <md-radio name=\"group\"></md-radio>\n    </div>\n\n    <md-outlined-text-field label=\"Favorite color\" value=\"Purple\"></md-outlined-text-field>\n\n    <md-outlined-button type=\"reset\">Reset</md-outlined-button>\n  </form>\n  <style>\n    form {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 16px;\n    }\n  </style>\n</body>\n```\n\n<!-- LINT.ThenChange(./g3doc/docs/quick-start.md) -->\n"
  },
  {
    "path": "SECURITY.md",
    "content": "# Security Policy\n\n## Supported Versions\n\nSecurity updates are only applied to the latest published version.\n\n## Reporting a Vulnerability\n\nReport vulnerabilities in a private\n[GitHub security advisory](https://github.com/material-components/material-web/security/advisories/new).\n\n**Please do not disclose security vulnerabilities in public issues.**\n"
  },
  {
    "path": "all.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes all components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * Import only the individual components used for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/elevated-button.js';\nimport './button/filled-button.js';\nimport './button/filled-tonal-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/chip-set.js';\nimport './chips/filter-chip.js';\nimport './chips/input-chip.js';\nimport './chips/suggestion-chip.js';\nimport './dialog/dialog.js';\nimport './divider/divider.js';\nimport './elevation/elevation.js';\nimport './fab/branded-fab.js';\nimport './fab/fab.js';\nimport './field/filled-field.js';\nimport './field/outlined-field.js';\nimport './focus/md-focus-ring.js';\nimport './icon/icon.js';\nimport './iconbutton/filled-icon-button.js';\nimport './iconbutton/filled-tonal-icon-button.js';\nimport './iconbutton/icon-button.js';\nimport './iconbutton/outlined-icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './ripple/ripple.js';\nimport './select/filled-select.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './slider/slider.js';\nimport './switch/switch.js';\nimport './tabs/primary-tab.js';\nimport './tabs/secondary-tab.js';\nimport './tabs/tabs.js';\nimport './textfield/filled-text-field.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/elevated-button.js';\nexport * from './button/filled-button.js';\nexport * from './button/filled-tonal-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/chip-set.js';\nexport * from './chips/filter-chip.js';\nexport * from './chips/input-chip.js';\nexport * from './chips/suggestion-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './divider/divider.js';\nexport * from './elevation/elevation.js';\nexport * from './fab/branded-fab.js';\nexport * from './fab/fab.js';\nexport * from './field/filled-field.js';\nexport * from './field/outlined-field.js';\nexport * from './focus/md-focus-ring.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/filled-icon-button.js';\nexport * from './iconbutton/filled-tonal-icon-button.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './iconbutton/outlined-icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './ripple/ripple.js';\nexport * from './select/filled-select.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './slider/slider.js';\nexport * from './switch/switch.js';\nexport * from './tabs/primary-tab.js';\nexport * from './tabs/secondary-tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/filled-text-field.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"
  },
  {
    "path": "button/_elevated-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/elevated-button' show theme;\n"
  },
  {
    "path": "button/_filled-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-button' show theme;\n"
  },
  {
    "path": "button/_filled-tonal-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-tonal-button' show theme;\n"
  },
  {
    "path": "button/_outlined-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/outlined-button' show theme;\n"
  },
  {
    "path": "button/_text-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/text-button' show theme;\n"
  },
  {
    "path": "button/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Button',\n  [\n    new Knob('label', {ui: textInput(), defaultValue: ''}),\n    new Knob('disabled', {ui: boolInput(), defaultValue: false}),\n    new Knob('softDisabled', {ui: boolInput(), defaultValue: false}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});\n"
  },
  {
    "path": "button/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "button/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/elevated-button.js';\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/filled-tonal-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/icon/icon.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for button stories. */\nexport interface StoryKnobs {\n  label: string;\n  disabled: boolean;\n  softDisabled: boolean;\n}\n\nconst styles = css`\n  .column {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    max-width: 600px;\n  }\n\n  .row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n`;\n\nconst buttons: MaterialStoryInit<StoryKnobs> = {\n  name: 'Button variants',\n  styles,\n  render({label, disabled, softDisabled}) {\n    return html`\n      <div class=\"column\">\n        <div class=\"row\">\n          <md-filled-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            ${label || 'Filled'}\n          </md-filled-button>\n\n          <md-outlined-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            ${label || 'Outlined'}\n          </md-outlined-button>\n\n          <md-elevated-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            ${label || 'Elevated'}\n          </md-elevated-button>\n\n          <md-filled-tonal-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            ${label || 'Tonal'}\n          </md-filled-tonal-button>\n\n          <md-text-button ?disabled=${disabled} ?soft-disabled=${softDisabled}>\n            ${label || 'Text'}\n          </md-text-button>\n        </div>\n        <div class=\"row\">\n          <md-filled-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            aria-label=\"${label || 'Filled'} button with icon\">\n            <md-icon slot=\"icon\">upload</md-icon>\n            ${label || 'Filled'}\n          </md-filled-button>\n\n          <md-outlined-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            aria-label=\"${label || 'Outlined'} button with icon\">\n            <md-icon slot=\"icon\">upload</md-icon>\n            ${label || 'Outlined'}\n          </md-outlined-button>\n\n          <md-elevated-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            aria-label=\"${label || 'Elevated'} button with icon\">\n            <md-icon slot=\"icon\">upload</md-icon>\n            ${label || 'Elevated'}\n          </md-elevated-button>\n\n          <md-filled-tonal-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            aria-label=\"${label || 'Tonal'} button with icon\">\n            <md-icon slot=\"icon\">upload</md-icon>\n            ${label || 'Tonal'}\n          </md-filled-tonal-button>\n\n          <md-text-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            aria-label=\"${label || 'Text'} button with icon\">\n            <md-icon slot=\"icon\">upload</md-icon>\n            ${label || 'Text'}\n          </md-text-button>\n        </div>\n      </div>\n    `;\n  },\n};\n\nconst links: MaterialStoryInit<StoryKnobs> = {\n  name: 'Links',\n  styles,\n  render({label, disabled, softDisabled}) {\n    return html`\n      <div class=\"column\">\n        <div class=\"row\">\n          <md-filled-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            ${label || 'Filled'}\n          </md-filled-button>\n\n          <md-outlined-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            ${label || 'Outlined'}\n          </md-outlined-button>\n\n          <md-elevated-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            ${label || 'Elevated'}\n          </md-elevated-button>\n\n          <md-filled-tonal-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            ${label || 'Tonal'}\n          </md-filled-tonal-button>\n\n          <md-text-button\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            ${label || 'Text'}\n          </md-text-button>\n        </div>\n        <div class=\"row\">\n          <md-filled-button\n            aria-label=\"${label || 'Filled'} link with trailing icon\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            <md-icon slot=\"icon\">open_in_new</md-icon>\n            ${label || 'Filled'}\n          </md-filled-button>\n\n          <md-outlined-button\n            aria-label=\"${label || 'Outlined'} link with trailing icon\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            <md-icon slot=\"icon\">open_in_new</md-icon>\n            ${label || 'Outlined'}\n          </md-outlined-button>\n\n          <md-elevated-button\n            aria-label=\"${label || 'Elevated'} link with trailing icon\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            <md-icon slot=\"icon\">open_in_new</md-icon>\n            ${label || 'Elevated'}\n          </md-elevated-button>\n\n          <md-filled-tonal-button\n            aria-label=\"${label || 'Tonal'} link with trailing icon\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            <md-icon slot=\"icon\">open_in_new</md-icon>\n            ${label || 'Tonal'}\n          </md-filled-tonal-button>\n\n          <md-text-button\n            aria-label=\"${label || 'Text'} link with trailing icon\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}\n            href=\"https://google.com\"\n            target=\"_blank\"\n            trailing-icon>\n            <md-icon slot=\"icon\">open_in_new</md-icon>\n            ${label || 'Text'}\n          </md-text-button>\n        </div>\n      </div>\n    `;\n  },\n};\n\n/** Button stories. */\nexport const stories = [buttons, links];\n"
  },
  {
    "path": "button/elevated-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {ElevatedButton} from './internal/elevated-button.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.js';\nimport {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-button': MdElevatedButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter\n * background color and a shadow. To prevent shadow creep, only use them when\n * absolutely necessary, such as when the button requires visual separation from\n * a patterned background.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-button')\nexport class MdElevatedButton extends ElevatedButton {\n  static override styles: CSSResultOrNative[] = [\n    sharedStyles,\n    sharedElevationStyles,\n    elevatedStyles,\n  ];\n}\n"
  },
  {
    "path": "button/elevated-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdElevatedButton} from './elevated-button.js';\n\ndescribe('<md-elevated-button>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdElevatedButton.styles);\n  });\n});\n"
  },
  {
    "path": "button/filled-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledButton} from './internal/filled-button.js';\nimport {styles as filledStyles} from './internal/filled-styles.js';\nimport {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-button': MdFilledButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The filled button’s contrasting surface color makes it the\n * most prominent button after the FAB. It’s used for final or unblocking\n * actions in a flow.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-button')\nexport class MdFilledButton extends FilledButton {\n  static override styles: CSSResultOrNative[] = [\n    sharedStyles,\n    sharedElevationStyles,\n    filledStyles,\n  ];\n}\n"
  },
  {
    "path": "button/filled-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilledButton} from './filled-button.js';\n\ndescribe('<md-filled-button>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledButton.styles);\n  });\n});\n"
  },
  {
    "path": "button/filled-tonal-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledTonalButton} from './internal/filled-tonal-button.js';\nimport {styles as tonalStyles} from './internal/filled-tonal-styles.js';\nimport {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-button': MdFilledTonalButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Filled tonal buttons have a lighter background color and\n * darker label color, making them less visually prominent than a regular,\n * filled button. They’re still used for final or unblocking actions in a flow,\n * but do so with less emphasis.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-tonal-button')\nexport class MdFilledTonalButton extends FilledTonalButton {\n  static override styles: CSSResultOrNative[] = [\n    sharedStyles,\n    sharedElevationStyles,\n    tonalStyles,\n  ];\n}\n"
  },
  {
    "path": "button/filled-tonal-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilledTonalButton} from './filled-tonal-button.js';\n\ndescribe('<md-filled-tonal-button>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledTonalButton.styles);\n  });\n});\n"
  },
  {
    "path": "button/harness.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Button} from './internal/button.js';\n\n/**\n * Test harness for buttons.\n */\nexport class ButtonHarness extends Harness<Button> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.button') as HTMLElement;\n  }\n}\n"
  },
  {
    "path": "button/internal/_elevated-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-elevated-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-elevated-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-elevated-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "button/internal/_elevation.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../elevation/elevation';\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n\n@mixin styles() {\n  md-elevation {\n    // TODO: replace duration with animation tokens\n    transition-duration: 280ms;\n    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');\n  }\n\n  :host(:is([disabled], [soft-disabled])) md-elevation {\n    transition: none;\n  }\n\n  md-elevation {\n    @include elevation.theme(\n      (\n        'level': var(--_container-elevation),\n        'shadow-color': var(--_container-shadow-color),\n      )\n    );\n  }\n\n  // apply elevation in order of focused, hovered, pressed, disabled\n  // this ensures a button will have hover elevation after being focused\n  :host(:focus-within) md-elevation {\n    @include elevation.theme(\n      (\n        'level': var(--_focus-container-elevation),\n      )\n    );\n  }\n\n  :host(:hover) md-elevation {\n    @include elevation.theme(\n      (\n        'level': var(--_hover-container-elevation),\n      )\n    );\n  }\n\n  :host(:active) md-elevation {\n    @include elevation.theme(\n      (\n        'level': var(--_pressed-container-elevation),\n      )\n    );\n  }\n\n  :host(:is([disabled], [soft-disabled])) md-elevation {\n    @include elevation.theme(\n      (\n        'level': var(--_disabled-container-elevation),\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "button/internal/_filled-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filled-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-filled-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "button/internal/_filled-tonal-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filled-tonal-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-filled-tonal-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-tonal-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "button/internal/_icon.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles() {\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 to ensure overrides apply.\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    position: relative;\n    writing-mode: horizontal-tb;\n    fill: currentColor;\n    flex-shrink: 0;\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    inline-size: var(--_icon-size);\n    block-size: var(--_icon-size);\n  }\n\n  :host(:hover) ::slotted([slot='icon']) {\n    color: var(--_hover-icon-color);\n  }\n\n  :host(:focus-within) ::slotted([slot='icon']) {\n    color: var(--_focus-icon-color);\n  }\n\n  :host(:active) ::slotted([slot='icon']) {\n    color: var(--_pressed-icon-color);\n  }\n\n  :host(:is([disabled], [soft-disabled])) ::slotted([slot='icon']) {\n    color: var(--_disabled-icon-color);\n    opacity: var(--_disabled-icon-opacity);\n  }\n}\n"
  },
  {
    "path": "button/internal/_outlined-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-outlined-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-outlined-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    --_container-color: none;\n    --_disabled-container-color: none;\n    --_disabled-container-opacity: 0;\n  }\n\n  .outline {\n    inset: 0;\n    border-style: solid;\n    position: absolute;\n    box-sizing: border-box;\n    border-color: var(--_outline-color);\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n    border-end-end-radius: var(--_container-shape-end-end);\n  }\n\n  :host(:active) .outline {\n    border-color: var(--_pressed-outline-color);\n  }\n\n  :host(:is([disabled], [soft-disabled])) .outline {\n    border-color: var(--_disabled-outline-color);\n    opacity: var(--_disabled-outline-opacity);\n  }\n\n  @media (forced-colors: active) {\n    :host(:is([disabled], [soft-disabled])) .background {\n      // Only outlined buttons change their border when disabled to distinguish\n      // them from other buttons that add a border for increased visibility in\n      // HCM.\n      border-color: GrayText;\n    }\n\n    :host(:is([disabled], [soft-disabled])) .outline {\n      opacity: 1;\n    }\n  }\n\n  .outline,\n  md-ripple {\n    border-width: var(--_outline-width);\n  }\n\n  md-ripple {\n    inline-size: calc(100% - 2 * var(--_outline-width));\n    block-size: calc(100% - 2 * var(--_outline-width));\n    border-style: solid;\n    border-color: transparent;\n  }\n}\n"
  },
  {
    "path": "button/internal/_shared.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n@use '../../ripple/ripple';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n    border-end-end-radius: var(--_container-shape-end-end);\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-flex;\n    gap: 8px;\n    // min-height instead of height so that label can wrap and expand height\n    min-height: var(--_container-height);\n    outline: none;\n    // Add extra space between label and the edge for if the label text wraps.\n    // The padding added should be relative to the height of the container and\n    // the height of its content on a single line (label or icon, whichever is\n    // bigger).\n    $single-line-height: max(var(--_label-text-line-height), var(--_icon-size));\n    padding-block: calc((var(--_container-height) - $single-line-height) / 2);\n    padding-inline-start: var(--_leading-space);\n    padding-inline-end: var(--_trailing-space);\n    place-content: center;\n    place-items: center;\n    position: relative;\n    font-family: var(--_label-text-font);\n    font-size: var(--_label-text-size);\n    line-height: var(--_label-text-line-height);\n    font-weight: var(--_label-text-weight);\n    // Long labels are cut off with ellipsis by default. `text-overflow` and\n    // `text-wrap` can customize this.\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    // Override vertical-align with shortest value \"top\". Vertical-align's\n    // default \"baseline\" value causes buttons to be misaligned next to each\n    // other if one button has an icon and the other does not.\n    vertical-align: top;\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_hover-state-layer-color),\n        pressed-color: var(--_pressed-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape-start-start': var(--_container-shape-start-start),\n        'shape-start-end': var(--_container-shape-start-end),\n        'shape-end-end': var(--_container-shape-end-end),\n        'shape-end-start': var(--_container-shape-end-start),\n      )\n    );\n  }\n\n  :host(:is([disabled], [soft-disabled])) {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button {\n    border-radius: inherit;\n    cursor: inherit;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    outline: none;\n    -webkit-appearance: none;\n    vertical-align: middle;\n    background: transparent;\n    text-decoration: none;\n    // Buttons have a default min-width of 64px. This can be overridden by\n    // setting a smaller min-width on the host. The 64px button will be centered\n    // within the bounds of the smaller host element.\n    min-width: calc(64px - var(--_leading-space) - var(--_trailing-space));\n    width: 100%;\n    z-index: 0; // Place content on top of elevation and ripple\n    height: 100%;\n    font: inherit;\n    color: var(--_label-text-color);\n    padding: 0;\n    gap: inherit;\n    // Override the user-agent text-transform: none of <button> and <a>\n    text-transform: inherit;\n\n    &::-moz-focus-inner {\n      padding: 0;\n      border: 0;\n    }\n  }\n\n  :host(:hover) .button {\n    color: var(--_hover-label-text-color);\n  }\n\n  :host(:focus-within) .button {\n    color: var(--_focus-label-text-color);\n  }\n\n  :host(:active) .button {\n    color: var(--_pressed-label-text-color);\n  }\n\n  .background {\n    // Background color. Separate node for disabled opacity styles.\n    background: var(--_container-color);\n    border-radius: inherit;\n    inset: 0;\n    position: absolute;\n  }\n\n  .label {\n    overflow: hidden;\n  }\n\n  // Inherit text-overflow down through label and slotted content so that it\n  // can be customized on the host.\n  :is(.button, .label, .label slot),\n  .label ::slotted(*) {\n    text-overflow: inherit;\n  }\n\n  :host(:is([disabled], [soft-disabled])) .label {\n    color: var(--_disabled-label-text-color);\n    opacity: var(--_disabled-label-text-opacity);\n  }\n\n  :host(:is([disabled], [soft-disabled])) .background {\n    background: var(--_disabled-container-color);\n    opacity: var(--_disabled-container-opacity);\n  }\n\n  @media (forced-colors: active) {\n    .background {\n      // Use CanvasText to increase visibility of buttons when the background\n      // is not rendered. Buttons that use outlines by default should change The\n      // outline color to GrayText when disabled.\n      border: 1px solid CanvasText;\n    }\n\n    :host(:is([disabled], [soft-disabled])) {\n      --_disabled-icon-color: GrayText;\n      --_disabled-icon-opacity: 1;\n      --_disabled-container-opacity: 1;\n      --_disabled-label-text-color: GrayText;\n      --_disabled-label-text-opacity: 1;\n    }\n  }\n\n  :host([has-icon]:not([trailing-icon])) {\n    padding-inline-start: var(--_with-leading-icon-leading-space);\n    padding-inline-end: var(--_with-leading-icon-trailing-space);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline-start: var(--_with-trailing-icon-leading-space);\n    padding-inline-end: var(--_with-trailing-icon-trailing-space);\n  }\n}\n"
  },
  {
    "path": "button/internal/_text-button.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-text-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-text-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-text-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    --_container-color: none;\n    --_disabled-container-color: none;\n    --_disabled-container-opacity: 0;\n  }\n}\n"
  },
  {
    "path": "button/internal/_touch-target.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles() {\n  .touch {\n    position: absolute;\n    top: 50%;\n    height: 48px;\n    left: 0;\n    right: 0;\n    transform: translateY(-50%);\n  }\n\n  :host([touch-target='wrapper']) {\n    margin: max(0px, (48px - var(--_container-height)) / 2) 0;\n  }\n\n  :host([touch-target='none']) .touch {\n    display: none;\n  }\n}\n"
  },
  {
    "path": "button/internal/button.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\n// Separate variable needed for closure.\nconst buttonBaseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A button component.\n */\nexport abstract class Button extends buttonBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  declare disabled: boolean; // for jsdoc until lit-analyzer is updated\n\n  /**\n   * Whether or not the button is \"soft-disabled\" (disabled but still\n   * focusable).\n   *\n   * Use this when a button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the button is used as a link (`href` is set).\n   */\n  @property() download = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true})\n  trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =\n    false;\n\n  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleClick.bind(this));\n    }\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected override render() {\n    const isRippleDisabled = this.disabled || this.softDisabled;\n    const buttonOrLink = this.href ? this.renderLink() : this.renderButton();\n    // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use\n    // the same ID for different elements, so we change the ID instead.\n    const buttonId = this.href ? 'link' : 'button';\n    return html`\n      ${this.renderElevationOrOutline?.()}\n      <div class=\"background\"></div>\n      <md-focus-ring part=\"focus-ring\" for=${buttonId}></md-focus-ring>\n      <md-ripple\n        part=\"ripple\"\n        for=${buttonId}\n        ?disabled=\"${isRippleDisabled}\"></md-ripple>\n      ${buttonOrLink}\n    `;\n  }\n\n  // Buttons can override this to add elevation or an outline. Use this and\n  // return `<md-elevation>` (for elevated, filled, and tonal buttons)\n  // or `<div class=\"outline\">` (for outlined buttons).\n  // Text buttons that have neither do not need to implement this.\n  protected renderElevationOrOutline?(): unknown;\n\n  private renderButton() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<button\n      id=\"button\"\n      class=\"button\"\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled || nothing}\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\">\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\"\n      aria-disabled=${this.disabled || this.softDisabled || nothing}\n      tabindex=\"${this.disabled && !this.softDisabled ? -1 : nothing}\"\n      href=${this.href}\n      download=${this.download || nothing}\n      target=${this.target || nothing}\n      >${this.renderContent()}\n    </a>`;\n  }\n\n  private renderContent() {\n    const icon = html`<slot\n      name=\"icon\"\n      @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n    return html`\n      <span class=\"touch\"></span>\n      ${this.trailingIcon ? nothing : icon}\n      <span class=\"label\"><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private handleClick(event: MouseEvent) {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href)) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  }\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"
  },
  {
    "path": "button/internal/button_test.ts",
    "content": "/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {ButtonHarness} from '../harness.js';\nimport {Button} from './button.js';\n\n@customElement('test-button')\nclass TestButton extends Button {}\n\ndescribe('Button', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const button = new TestButton();\n    env.render(html`${button}`);\n    await env.waitForStability();\n    return {button, harness: new ButtonHarness(button)};\n  }\n\n  it('should not be focusable when disabled', async () => {\n    // Arrange\n    const {button} = await setupTest();\n    button.disabled = true;\n    await env.waitForStability();\n\n    // Act\n    button.focus();\n\n    // Assert\n    expect(document.activeElement)\n      .withContext('disabled button should not be focused')\n      .not.toBe(button);\n  });\n\n  it('should be focusable when soft-disabled', async () => {\n    // Arrange\n    const {button} = await setupTest();\n    button.softDisabled = true;\n    await env.waitForStability();\n\n    // Act\n    button.focus();\n\n    // Assert\n    expect(document.activeElement)\n      .withContext('soft-disabled button should be focused')\n      .toBe(button);\n  });\n\n  it('should not be clickable when disabled', async () => {\n    // Arrange\n    const clickListener = jasmine.createSpy('clickListener');\n    const {button} = await setupTest();\n    button.disabled = true;\n    button.addEventListener('click', clickListener);\n    await env.waitForStability();\n\n    // Act\n    button.click();\n\n    // Assert\n    expect(clickListener).not.toHaveBeenCalled();\n  });\n\n  it('should not be clickable when soft-disabled', async () => {\n    // Arrange\n    const clickListener = jasmine.createSpy('clickListener');\n    const {button} = await setupTest();\n    button.softDisabled = true;\n    button.addEventListener('click', clickListener);\n    await env.waitForStability();\n\n    // Act\n    button.click();\n\n    // Assert\n    expect(clickListener).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "button/internal/elevated-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html} from 'lit';\n\nimport {Button} from './button.js';\n\n/**\n * An elevated button component.\n */\nexport class ElevatedButton extends Button {\n  protected override renderElevationOrOutline() {\n    return html`<md-elevation part=\"elevation\"></md-elevation>`;\n  }\n}\n"
  },
  {
    "path": "button/internal/elevated-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './elevated-button';\n// go/keep-sorted end\n\n@include elevated-button.styles;\n"
  },
  {
    "path": "button/internal/filled-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html} from 'lit';\n\nimport {Button} from './button.js';\n\n/**\n * A filled button component.\n */\nexport class FilledButton extends Button {\n  protected override renderElevationOrOutline() {\n    return html`<md-elevation part=\"elevation\"></md-elevation>`;\n  }\n}\n"
  },
  {
    "path": "button/internal/filled-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filled-button';\n// go/keep-sorted end\n\n@include filled-button.styles;\n"
  },
  {
    "path": "button/internal/filled-tonal-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html} from 'lit';\n\nimport {Button} from './button.js';\n\n/**\n * A filled tonal button component.\n */\nexport class FilledTonalButton extends Button {\n  protected override renderElevationOrOutline() {\n    return html`<md-elevation part=\"elevation\"></md-elevation>`;\n  }\n}\n"
  },
  {
    "path": "button/internal/filled-tonal-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filled-tonal-button';\n// go/keep-sorted end\n\n@include filled-tonal-button.styles;\n"
  },
  {
    "path": "button/internal/outlined-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Button} from './button.js';\n\n/**\n * An outlined button component.\n */\nexport class OutlinedButton extends Button {\n  protected override renderElevationOrOutline() {\n    return html`<div class=\"outline\"></div>`;\n  }\n}\n"
  },
  {
    "path": "button/internal/outlined-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './outlined-button';\n// go/keep-sorted end\n\n@include outlined-button.styles;\n"
  },
  {
    "path": "button/internal/shared-elevation-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './elevation';\n// go/keep-sorted end\n\n@include elevation.styles;\n"
  },
  {
    "path": "button/internal/shared-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './icon';\n@use './shared';\n@use './touch-target';\n// go/keep-sorted end\n\n@include shared.styles;\n@include icon.styles;\n@include touch-target.styles;\n"
  },
  {
    "path": "button/internal/text-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Button} from './button.js';\n\n/**\n * A text button component.\n */\nexport class TextButton extends Button {}\n"
  },
  {
    "path": "button/internal/text-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './text-button';\n// go/keep-sorted end\n\n@include text-button.styles;\n"
  },
  {
    "path": "button/outlined-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedButton} from './internal/outlined-button.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-button': MdOutlinedButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Use an outlined button for actions that need attention but\n * aren’t the primary action, such as “See all” or “Add to cart.” This is also\n * the button to use for giving someone the opportunity to change their mind or\n * escape a flow.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-button')\nexport class MdOutlinedButton extends OutlinedButton {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"
  },
  {
    "path": "button/outlined-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdOutlinedButton} from './outlined-button.js';\n\ndescribe('<md-outlined-button>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdOutlinedButton.styles);\n  });\n});\n"
  },
  {
    "path": "button/text-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as sharedStyles} from './internal/shared-styles.js';\nimport {TextButton} from './internal/text-button.js';\nimport {styles as textStyles} from './internal/text-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-button': MdTextButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence\n *\n * __Rationale:__ Text buttons have less visual prominence, so should be used\n * for low emphasis actions, such as an alternative option.\n *\n * __Example usages:__\n * - Learn more\n * - View all\n * - Change account\n * - Turn on\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-text-button')\nexport class MdTextButton extends TextButton {\n  static override styles: CSSResultOrNative[] = [sharedStyles, textStyles];\n}\n"
  },
  {
    "path": "button/text-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdTextButton} from './text-button.js';\n\ndescribe('<md-text-button>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdTextButton.styles);\n  });\n});\n"
  },
  {
    "path": "catalog/.firebaserc",
    "content": "{\n  \"projects\": {\n    \"default\": \"material-web-catalog\"\n  }\n}\n"
  },
  {
    "path": "catalog/eleventy-helpers/filters/filter-sort.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A filter that sorts and filters an array based on truthyness and sorts the\n * filtered array.\n *\n * This filter takes the following arguments:\n * - arr: (required) The array to filter-sort.\n * - attr: (required) The attribute to filter and sort by.\n *\n * @example\n * ```html\n * <!--\n *   Will generate an array of anchor tags based on the array of entries in the\n *   \"component\" 11ty collection. The anchor tags are sorted alphabetically by\n *   `data.name` and will not be rendered if `data.name` is not defined.\n * -->\n * {% for component in collections.component|filtersort('data.name') %}\n *   <a href={{ component.url }}>{{ component.data.name }}</a>\n * {% endfor %}\n * ```\n *\n * @param eleventyConfig The 11ty config in which to attach this filter.\n */\nfunction filterSort (eleventyConfig) {\n  eleventyConfig.addFilter(\"filtersort\", function(arr, attr) {\n    // get the parts of the attribute to look up\n    const attrParts = attr.split(\".\");\n\n    const array = arr.filter(item => {\n      let value = item;\n\n      // get the deep attribute\n      for (const part of attrParts) {\n        value = value[part];\n      }\n\n      return !!value;\n    });\n\n    array.sort((a, b) => {\n      let aVal = a;\n      let bVal = b;\n\n      // get the deep attributes of each a and b\n      for (const part of attrParts) {\n        aVal = aVal[part];\n        bVal = bVal[part];\n      }\n\n      if (aVal < bVal) {\n        return -1;\n      } else if (aVal > bVal) {\n        return 1;\n      }\n\n      return 0;\n    });\n\n    return array;\n  });\n};\n\nmodule.exports = filterSort;"
  },
  {
    "path": "catalog/eleventy-helpers/filters/filter-toc.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A filter that sanitizes <md-*> tags in a string so that they can be rendered\n * as text in the TOC.\n *\n * @example\n * ```html\n * <!--\n *   Will filter out a TOC that has <md-*> tags in it\n * -->\n * {{ toc | filterToc | safe }}\n * ```\n *\n * @param eleventyConfig The 11ty config in which to attach this filter.\n */\nfunction filterToc(eleventyConfig) {\n  eleventyConfig.addFilter('filterToc', function (text) {\n    const mdTagName = /<(md-.+?)>/g;\n    return text.replace(mdTagName, function (match, tagName) {\n      return `&lt;${tagName}&gt;`;\n    });\n  });\n}\n\nmodule.exports = filterToc;\n"
  },
  {
    "path": "catalog/eleventy-helpers/filters/md-markdown.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nconst cheerio = require('cheerio');\n\n/**\n * Fixes links and applies redirects to markdown files filtered by this filter.\n * It ignores external links, applies redirects, removes .md extendsions, and\n * adds trailing slashes.\n *\n * @param {import('cheerio').CheerioAPI} $ Cheerio instance\n * @param {[RegExp|string, string,(match: string, ...pattern: string[]) => string]} redirects Any redirects we want to apply\n */\nfunction fixLinks($, redirects) {\n  const anchors = $('a');\n\n  for (const anchor of anchors) {\n    const href = $(anchor).attr('href');\n    if (!href) continue;\n\n    const isExternal = href.startsWith('http');\n    if (isExternal) continue;\n\n    let [path, hash] = href.split('#');\n\n    // it's probably a href=\"#section\" link\n    if (path.length === 0) {\n      continue;\n    }\n\n    for (const [pattern, replacement] of redirects) {\n      const regex = new RegExp(pattern);\n      path = path.replace(regex, replacement);\n    }\n    const endsWithMd = path.endsWith('.md');\n\n    if (endsWithMd) {\n      path = path.replace(/\\.md$/, '/');\n    }\n    const endsWithSlash = path.endsWith('/');\n    if (!endsWithSlash) {\n      path += '/';\n    }\n\n    const newHref = path + (hash ? `#${hash}` : '');\n    $(anchor).attr('href', newHref);\n  }\n}\n\n/**\n * Reformats blockquotes to add an icon and format it.\n *\n * @param {import('cheerio').CheerioAPI} $ Cheerio instance\n */\nfunction blockquote($) {\n  const blockquotes = $('blockquote');\n\n  for (const blockquote of blockquotes) {\n    const $blockquote = $(blockquote);\n    const $first = $blockquote.children().first();\n    const text = $first.text().trim();\n    const iconRegex = /^(tip|important|note|warning):\\s*/i;\n    const match = text.match(iconRegex);\n    const hasIcon = match;\n\n    if (!hasIcon) {\n      $blockquote.addClass('none');\n      continue;\n    }\n\n    let newText = text.replace(iconRegex, '');\n    $first.text(newText);\n\n    const type = match[1].toLowerCase();\n    let icon = '';\n    switch (type) {\n      case 'tip':\n        $blockquote.addClass('tip');\n        icon = 'star';\n        break;\n      case 'important':\n        $blockquote.addClass('important');\n        icon = 'priority_high';\n        break;\n      case 'warning':\n        $blockquote.addClass('warning');\n        icon = 'warning';\n        break;\n      case 'note':\n        $blockquote.addClass('note');\n        icon = 'bookmark';\n        break;\n    }\n\n    $blockquote.wrapInner('<div class=\"content\"></div>');\n    $blockquote.prepend(`<div class=\"icon\"><md-icon>${icon}</md-icon></div>`);\n  }\n}\n\n/**\n * A filter that applies our set of transforms to markdown output such as fixing\n * links, and adding icons to blockquotes.\n *\n * @example\n * ```html\n * <!--\n *   Will fix links and apply blockquote styling.\n * -->\n * {{ content | mdMarkdown | safe }}\n * ```\n *\n * @param eleventyConfig The 11ty config in which to attach this filter.\n * @param {[RegExp|string, string,(match: string, ...pattern: string[]) => string]} redirects Any redirects we want to apply\n */\nfunction mdMarkdown(eleventyConfig, redirects) {\n  eleventyConfig.addFilter('mdMarkdown', function (html) {\n    const $ = cheerio.load(html);\n\n    fixLinks($, redirects);\n    blockquote($);\n\n    return $.html();\n  });\n}\n\nmodule.exports = mdMarkdown;\n"
  },
  {
    "path": "catalog/eleventy-helpers/plugins/copy-code-button.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Renders a copy-code-button component around the original markdown code block\n * if the codeblock is not empty.\n *\n * @param originalRule The original markown-it rule to modilfy.\n * @return A modified markdownit render rule that injects a copy-code-button island\n */\nfunction renderCode(originalRule) {\n  return (...args) => {\n    const [tokens, idx] = args;\n    // Escape quotes and apostrophes so that they don't break the HTML.\n    const codeblockContent = tokens[idx].content\n      .replaceAll('\"', '&quot;')\n      .replaceAll(\"'\", \"&apos;\");\n\n    const originalHTMLContent = originalRule(...args);\n\n    if (codeblockContent.length === 0) {\n      return originalHTMLContent;\n    }\n\n    return `\n<lit-island\n    import=\"/js/hydration-entrypoints/copy-code-button.js\"\n    on:interaction=\"focusin,pointerenter,touchstart\">\n  <copy-code-button>\n    ${originalHTMLContent}\n  </copy-code-button>\n</lit-island>\n`;\n  };\n}\n\n/**\n * Adds a copy code button to code blocks.\n *\n * @param markdownIt The markdown-it instance to use.\n */\nfunction copyCodeButtonPlugin(markdownIt) {\n  markdownIt.use(() => {\n    markdownIt.renderer.rules.code_block = renderCode(markdownIt.renderer.rules.code_block);\n    markdownIt.renderer.rules.fence = renderCode(markdownIt.renderer.rules.fence);\n  });\n}\n\nmodule.exports = copyCodeButtonPlugin;"
  },
  {
    "path": "catalog/eleventy-helpers/plugins/permalinks.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nconst markdownItAnchor = require('markdown-it-anchor');\nconst slugifyLib = require('slugify');\n\n/**\n * An 11ty plugin that integrates `markdown-it-anchor` to 11ty's markdown\n * engine. This allows us to inject an <a> around our <h*> elements.\n *\n * @param markdownIt The markdown-it instance to use.\n */\nfunction permalinks(markdownIt) {\n  // Use the same slugify as 11ty for markdownItAnchor.\n  const slugify = (s) => slugifyLib(s, { lower: true });\n\n  const linkAfterHeaderBase = markdownItAnchor.permalink.linkAfterHeader({\n    style: 'visually-hidden',\n    class: 'anchor',\n    visuallyHiddenClass: 'offscreen',\n    assistiveText: (title) => `Link to “${title}”`,\n  });\n\n  /**\n   * Wraps the link with a div so that it's more accessible. Implementation\n   * taken from lit.dev\n   *\n   * https://github.com/lit/lit.dev/blob/18d86901c2814913a35b201d78e95ba8735c42e7/packages/lit-dev-content/.eleventy.js#L105-L134\n   */\n  const linkAfterHeaderWithWrapper = (slug, opts, state, idx) => {\n    const headingTag = state.tokens[idx].tag;\n    if (!headingTag.match(/^h[123456]$/)) {\n      throw new Error(`Expected token to be a h1-6: ${headingTag}`);\n    }\n\n    // Using markdownit's token system to inject a div wrapper so that we can\n    // have:\n    // <div class=\"heading h2\">\n    //   <h2 id=\"interactive-demo\">Interactive Demo<h2>\n    //   <a class=\"anchor\" href=\"#interactive-demo\">\n    //     <span class=\"offscreen\">Permalink to \"Interactive Demo\"</span>\n    //   </a>\n    // </div>\n    state.tokens.splice(\n      idx,\n      0,\n      Object.assign(new state.Token('div_open', 'div', 1), {\n        attrs: [['class', `heading ${headingTag}`]],\n        block: true,\n      })\n    );\n    state.tokens.splice(\n      idx + 4,\n      0,\n      Object.assign(new state.Token('div_close', 'div', -1), {\n        block: true,\n      })\n    );\n    linkAfterHeaderBase(slug, opts, state, idx + 1);\n  };\n\n  // Apply the anchor plugin to markdownit\n  markdownIt.use(markdownItAnchor, {\n    slugify,\n    permalink: linkAfterHeaderWithWrapper,\n    permalinkClass: 'anchor',\n    permalinkSymbol: '#',\n    level: [2, 3, 4], // only apply to h2 h3 and h4\n  });\n}\n\nmodule.exports = permalinks;\n"
  },
  {
    "path": "catalog/eleventy-helpers/shortcodes/inline-css.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nconst CleanCSS = require('clean-css');\n\n/**\n * Bundle, minify, and inline a CSS file. Path is relative to ./site/css/.\n *\n * In dev mode, instead import the CSS file directly.\n *\n * This filter takes the following arguments:\n * - path: (required) The path of the file to minify and inject relative to\n *         /site/css\n *\n * @example\n * ```html\n * <!--\n *   In prod will minify and inline the file at site/css/global.css into the\n *   page to prevent a new network request. In dev will inject a <link> tag for\n *   a faster build.\n * -->\n * <head>\n *   {% inlinecss \"global.css\" %}\n * </head>\n * ```\n *\n * @param eleventyConfig The 11ty config in which to attach this shortcode.\n * @param isDev {boolean} Whether or not the build is in development mode.\n */\nfunction inlineCSS(eleventyConfig, isDev) {\n  eleventyConfig.addShortcode('inlinecss', (path) => {\n    if (isDev) {\n      return `<link rel=\"stylesheet\" href=\"/css/${path}\">`;\n    }\n    const result = new CleanCSS({ inline: ['local'] }).minify([\n      `./site/css/${path}`,\n    ]);\n    if (result.errors.length > 0 || result.warnings.length > 0) {\n      throw new Error(\n        `CleanCSS errors/warnings on file ${path}:\\n\\n${[\n          ...result.errors,\n          ...result.warnings,\n        ].join('\\n')}`\n      );\n    }\n    return `<style>${result.styles}</style>`;\n  });\n}\n\nmodule.exports = inlineCSS;\n"
  },
  {
    "path": "catalog/eleventy-helpers/shortcodes/inline-js.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nconst fsSync = require('fs');\n\n/**\n * Inline the Rollup-bundled version of a JavaScript module. Path is relative\n * to ./lib or ./build aliased to /js by 11ty\n *\n * In dev mode, instead directly import the module in a\n * script[type=module][src=/js/...], which has already been symlinked directly\n * to the 11ty JS output directory.\n *\n * This filter takes the following arguments:\n * - path: (required) The path of the file to minify and inject relative to\n *         ./lib, ./build, or ./js folders depending on dev mode.\n *\n * @example\n * ```html\n * <!--\n *   In prod will inline the file at /build/ssr-utils/dsd-polyfill in a\n *   synchronous script tag. In dev it will externally load the file in a\n *   module script for faster build.\n * -->\n * <body dsd-pending>\n *   {% inlinejs \"ssr-utils/dsd-polyfill.js\" %}\n * </body>\n * ```\n *\n * @param eleventyConfig The 11ty config in which to attach this shortcode.\n * @param isDev {boolean} Whether or not the build is in development mode.\n * @param config {{jsdir: string}} Configuration options to set the JS directory\n */\nfunction inlineJS(eleventyConfig, isDev, {jsDir}) {\n  eleventyConfig.addShortcode('inlinejs', (path) => {\n    // script type module\n    if (isDev) {\n      return `<script type=\"module\" src=\"/js/${path}\"></script>`;\n    }\n    const script = fsSync.readFileSync(`${jsDir}/${path}`, 'utf8').trim();\n    return `<script>${script}</script>`;\n  });\n}\n\nmodule.exports = inlineJS;\n"
  },
  {
    "path": "catalog/eleventy-helpers/shortcodes/playground-example.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Will render a playground example with a project.json in the\n * `/catalog/stories/${dirname}/` directory.\n *\n * This shorcode takes the following arguments:\n * - dirname: (required) The name of the directory where the project.json is\n *   located\n * - id: (optional) The id of the project. This is used to identify the project on pages\n *   with multiple playground examples.\n * - previewHeight: (optional) The height of the preview window. Defaults to `400`.\n * - editorHeight: (optional) The height of the editor window. Defaults to `500`.\n *\n * @example\n * ```html\n * <!--\n *   Will generate a playground example located at\n *   /catalog/stories/checkbox/project.json\n *   and give the project the id \"example1\"\n * -->\n * {% playgroundexample dirname=\"checkbox\", id=\"example2\", previewHeight=\"400\", editorHeight=\"500\" %}\n * ```\n *\n * @param eleventyConfig The 11ty config in which to attach this shortcode.\n */\nfunction playgroundExample(eleventyConfig) {\n  eleventyConfig.addShortcode('playgroundexample', (config) => {\n    let { id, dirname } = config;\n    if (!dirname) {\n      throw new Error('No dirname provided to playgroundexample shortcode');\n    }\n\n    id ||= 'project';\n\n    const previewHeight = config.previewHeight\n      ? `height: ${config.previewHeight}px`\n      : 'height: 400px;';\n    const editorHeight = config.editorHeight\n      ? `height: ${config.editorHeight}px`\n      : 'height: 500px;';\n\n    return `\n      <details>\n        <summary>\n          <md-outlined-icon-button toggle tabindex=\"-1\" aria-hidden=\"true\">\n            <md-icon aria-hidden=\"true\">expand_more</md-icon>\n            <md-icon aria-hidden=\"true\" slot=\"selected\">expand_less</md-icon>\n          </md-outlined-icon-button>\n          View interactive demo inline.\n        </summary>\n        <lit-island on:visible import=\"/js/hydration-entrypoints/playground-elements.js\" class=\"example\" aria-hidden=\"true\">\n          <playground-project\n              id=\"${id}\" project-src=\"/assets/stories/${dirname}/project.json\">\n          <playground-preview\n              style=\"${previewHeight}\"\n              project=\"${id}\"\n          ><md-circular-progress indeterminate></md-circular-progress></playground-preview>\n          <playground-file-editor\n            style=\"${editorHeight}\"\n            project=\"${id}\"\n            filename=\"stories.ts\"\n            line-numbers\n          ><md-circular-progress indeterminate></md-circular-progress></playground-file-editor>\n        </lit-island>\n      </details>\n      <p><a href=\"./stories/\" target=\"_blank\">Open interactive demo in new tab.</a></p>\n    `;\n  });\n}\n\nmodule.exports = playgroundExample;\n"
  },
  {
    "path": "catalog/eleventy-helpers/transforms/minify-html.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nconst htmlMinifier = require('html-minifier');\n\n/**\n * Minifies HTML in production mode. Does nothing in dev mode for a faster build\n * and debuggability\n *\n * @param eleventyConfig The 11ty config in which to attach this transform.\n * @param isDev {boolean} Whether or not the build is in development mode.\n */\nfunction minifyHTML(eleventyConfig, isDev) {\n  eleventyConfig.addTransform('htmlMinify', function (content, outputPath) {\n    // return the normal content in dev moe.\n    if (isDev || !outputPath.endsWith('.html')) {\n      return content;\n    }\n    // minify the html in Prod mode\n    const minified = htmlMinifier.minify(content, {\n      useShortDoctype: true,\n      removeComments: true,\n      collapseWhitespace: true,\n    });\n    return minified;\n  });\n}\n\nmodule.exports = minifyHTML;\n"
  },
  {
    "path": "catalog/eleventy.config.cjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nconst litPlugin = require('@lit-labs/eleventy-plugin-lit');\nconst inlineCss = require('./eleventy-helpers/shortcodes/inline-css.cjs');\nconst inlineJS = require('./eleventy-helpers/shortcodes/inline-js.cjs');\nconst playgroundExample = require('./eleventy-helpers/shortcodes/playground-example.cjs');\nconst minifyHTML = require('./eleventy-helpers/transforms/minify-html.cjs');\nconst syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');\nconst pluginTOC = require('eleventy-plugin-nesting-toc');\nconst permalinks = require('./eleventy-helpers/plugins/permalinks.cjs');\nconst filterToc = require('./eleventy-helpers/filters/filter-toc.cjs');\nconst filterSort = require('./eleventy-helpers/filters/filter-sort.cjs');\nconst mdMarkdown = require('./eleventy-helpers/filters/md-markdown.cjs');\nconst copyCodeButtonPlugin = require('./eleventy-helpers/plugins/copy-code-button.cjs');\nconst markdownIt = require('markdown-it');\nconst { compress } = require('eleventy-plugin-compress');\n\n// dev mode build\nconst DEV = process.env.NODE_ENV === 'DEV';\n// where the JS files are outputted\nconst jsDir = DEV ? 'lib' : 'build';\n// where to output 11ty output\nconst outputFolder = DEV ? '_dev' : '_prod';\n\nmodule.exports = function (eleventyConfig) {\n  // copy folders to the 11ty output folder\n  eleventyConfig\n    .addPassthroughCopy({ [`${jsDir}/`]: 'js/' })\n    .addPassthroughCopy('site/css')\n    .addPassthroughCopy('site/fonts')\n    .addPassthroughCopy('site/images')\n    // Most of the stories files are generated by the wireit script that copies\n    // the stories files in the source to this directory\n    .addPassthroughCopy({ 'stories/': 'assets/stories/' })\n    // These images are generated by the docs copy step in wireit\n    .addPassthroughCopy('site/components/images')\n    .addPassthroughCopy('site/theming/images')\n    .addPassthroughCopy('site/about/images');\n\n  // add the lit-ssr plugin\n  eleventyConfig.addPlugin(litPlugin, {\n    mode: 'worker',\n    componentModules: [`./${jsDir}/ssr.js`],\n  });\n\n  // Add this for 11ty's --watch flag\n  eleventyConfig.addWatchTarget(`./${jsDir}/**/*.js`);\n\n  // install shortcodes\n  inlineCss(eleventyConfig, DEV);\n  inlineJS(eleventyConfig, DEV, { jsDir });\n  playgroundExample(eleventyConfig);\n\n  // install filters\n  filterSort(eleventyConfig);\n  filterToc(eleventyConfig);\n  // list of our transforms that we want to apply to markdown links.\n  mdMarkdown(eleventyConfig, [\n    ['../theming/README.md', '/theming/material-theming/'],\n    ['./list', '/components/list'],\n    [/theming\\/README/, '/theming/'],\n    [/^typography\\.md/, '/theming/typography/'],\n    [/^color\\.md/, '/theming/color/'],\n    [/^color\\.md/, '/theming/color/'],\n    [/^components\\//, '/components/button/'],\n  ]);\n\n  // install transforms\n  minifyHTML(eleventyConfig, DEV);\n\n  // install code syntax highlighting\n  eleventyConfig.addPlugin(syntaxHighlight);\n\n  const md = markdownIt({\n    html: true,\n    breaks: false, // 2 newlines for paragraph break instead of 1\n    linkify: true,\n  });\n\n  // permalink markdown plugin\n  permalinks(md);\n\n  // copy code button plugin\n  copyCodeButtonPlugin(md);\n\n  eleventyConfig.setLibrary('md', md);\n\n  // Add a TOC plugin (implementation is wip for now)\n  eleventyConfig.addPlugin(pluginTOC, {\n    tags: ['h2', 'h3', 'h4'],\n    wrapper: 'div',\n  });\n\n  eleventyConfig.addPlugin(compress, {\n    enabled: !DEV,\n  });\n\n  // set output folders and use nunjucks for html templating engine. see\n  // nunjucks docs and 11ty docs for more info on nunjucks templating\n  return {\n    htmlTemplateEngine: 'njk',\n    markdownTemplateEngine: 'njk',\n    dir: {\n      input: 'site',\n      output: outputFolder,\n    },\n  };\n};\n"
  },
  {
    "path": "catalog/esbuild.config.mjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport gzipPlugin from '@luncheon/esbuild-plugin-gzip';\nimport esbuild from 'esbuild';\nimport {copyFileSync} from 'fs';\nimport {createRequire} from 'node:module';\nimport {join} from 'path';\nimport tinyGlob from 'tiny-glob';\n\n// dev mode build\nconst DEV = process.env.NODE_ENV === 'DEV';\n// Output folder for TS files\nconst jsFolder = DEV ? 'lib' : 'build';\n\n// can use glob syntax. this will create a bundle for those specific files.\n// you want to add SSR'd files here so that you can hydrate them later with\n// <lit-island import=\"js/components/element-definition.js\"></lit-island>\nconst tsEntrypoints = [\n  // entrypoints for hydrating lit-islands\n  './src/hydration-entrypoints/**/*.ts',\n  // also include a bundle for each individual page\n  './src/pages/*.ts',\n  // SSR stuff\n  './src/ssr-utils/lit-hydrate-support.ts',\n  './src/ssr-utils/lit-island.ts',\n];\nconst filesPromises = tsEntrypoints.map(async (entry) => tinyGlob(entry));\nconst entryPoints = (await Promise.all(filesPromises)).flat();\n\n// Shared esbuild config values\nlet config = {\n  bundle: true,\n  outdir: jsFolder,\n  minify: false,\n  format: 'esm',\n  treeShaking: true,\n  write: true,\n  sourcemap: true,\n  splitting: true,\n};\n\nlet componentsBuild = Promise.resolve();\n\n// development build\nif (DEV) {\n  componentsBuild = esbuild\n                        .build({\n                          ...config,\n                          entryPoints,\n                        })\n                        .catch(() => process.exit(1));\n\n  // production build\n} else {\n  // config must be same for SSR and client builds to prevent hydration template\n  // mismatches because we minify the templates in prod\n  config = {\n    bundle: true,\n    outdir: jsFolder,\n    minify: true,\n    format: 'esm',\n    treeShaking: true,\n    legalComments: 'external',\n    plugins: [\n      // This plugin currently breaks certain css props for SVGs\n      // (circularprogress) minifyHTMLLiteralsPlugin({\n      //   shouldMinify: (template) => {\n      //     const tag = template.tag && template.tag.toLowerCase();\n      //     return (\n      //       !!tag &&\n      //       (tag.includes('html') || tag.includes('svg')) &&\n      //       // tag name interpolations break\n      //       tag !== 'statichtml'\n      //     );\n      //   },\n      // }),\n      gzipPlugin({\n        gzip: true,\n      }),\n    ],\n    // Needs to be off per the gzipPlugin docs\n    write: false,\n    splitting: true,\n  };\n\n  componentsBuild = esbuild\n                        .build({\n                          ...config,\n                          entryPoints,\n                        })\n                        .catch(() => process.exit(1));\n}\n\n// seperate build so that the SSR bundle doesn't affect bundling for the\n// frontend\nconst ssrBuild = esbuild\n                     .build({\n                       ...config,\n                       format: 'iife',\n                       splitting: false,\n                       conditions: ['node'],\n                       entryPoints: ['src/ssr.ts'],\n                     })\n                     .catch(() => process.exit(1));\n\n// Glob of files that will be inlined on the page in <script> tags\nconst tsInlineEntrypoints = [\n  './src/ssr-utils/dsd-polyfill.ts',\n  // Anything in this directory will be inlined\n  './src/inline/*.ts',\n];\nconst inlineFilesPromises =\n    tsInlineEntrypoints.map(async (entry) => tinyGlob(entry));\nconst inlineEntryPoints = (await Promise.all(inlineFilesPromises)).flat();\n\n// this code is inlined into the HTML because it is performance-sensitive\nconst inlineBuild = esbuild\n                        .build({\n                          ...config,\n                          format: 'iife',\n                          splitting: false,\n                          entryPoints: inlineEntryPoints,\n                        })\n                        .catch(() => process.exit(1));\n\nawait Promise.all([componentsBuild, ssrBuild, inlineBuild]);\n\n// Copy the playground-elements worker to the build folder\nconst require = createRequire(import.meta.url);\ncopyFileSync(\n    require.resolve('playground-elements/playground-typescript-worker.js'),\n    join(jsFolder, 'hydration-entrypoints/playground-typescript-worker.js'));\n\nprocess.exit(0);\n"
  },
  {
    "path": "catalog/firebase.json",
    "content": "{\n  \"hosting\": {\n    \"public\": \"_prod\",\n    \"ignore\": [\n      \"firebase.json\",\n      \"**/.*\",\n      \"**/node_modules/**\",\n      \"_dev/**\",\n      \"site/**\",\n      \"src/**\",\n      \"stories/**\",\n      \"build/**\"\n    ],\n    \"headers\": [\n      {\n        \"source\": \"**/*.*\",\n        \"headers\": [\n          {\n            \"key\": \"Cache-Control\",\n            \"value\": \"max-age=604800\"\n          }\n        ]\n      },\n      {\n        \"source\": \"**/[!chunk-]*.js\",\n        \"headers\": [\n          {\n            \"key\": \"Cache-Control\",\n            \"value\": \"max-age=3600\"\n          }\n        ]\n      },\n      {\n        \"source\": \"**/@(*.woff2|playground-typescript-worker.js)\",\n        \"headers\": [\n          {\n            \"key\": \"Cache-Control\",\n            \"value\": \"max-age=31536000\"\n          }\n        ]\n      }\n    ]\n  }\n}\n"
  },
  {
    "path": "catalog/package.json",
    "content": "{\n  \"name\": \"material-web-catalog\",\n  \"version\": \"0.0.1\",\n  \"description\": \"The Material Web Catalog.\",\n  \"main\": \"_prod/index.html\",\n  \"engines\": {\n    \"node\": \"20.x.x\"\n  },\n  \"scripts\": {\n    \"start\": \"npm run serve\",\n    \"dev\": \"npm run serve:dev --watch\",\n    \"serve\": \"wireit\",\n    \"serve:dev\": \"wireit\",\n    \"build:dev\": \"wireit\",\n    \"build:dev:eleventy\": \"wireit\",\n    \"build:dev:ts\": \"wireit\",\n    \"build:type-check\": \"wireit\",\n    \"build:prod\": \"wireit\",\n    \"build:prod:eleventy\": \"wireit\",\n    \"build:prod:ts\": \"wireit\",\n    \"build:copy-docs\": \"wireit\",\n    \"build:copy-stories\": \"wireit\"\n  },\n  \"wireit\": {\n    \"build:dev\": {\n      \"dependencies\": [\n        \"build:dev:eleventy\",\n        \"build:dev:ts\",\n        \"build:type-check\"\n      ]\n    },\n    \"build:dev:eleventy\": {\n      \"command\": \"NODE_ENV=DEV eleventy\",\n      \"files\": [\n        \"site\",\n        \"lib\",\n        \"eleventy-helpers\",\n        \"eleventy.config.cjs\",\n        \"stories\"\n      ],\n      \"output\": [\n        \"_dev\"\n      ],\n      \"dependencies\": [\n        \"build:dev:ts\",\n        \"build:copy-docs\",\n        \"build:copy-stories\"\n      ]\n    },\n    \"build:dev:ts\": {\n      \"command\": \"NODE_ENV=DEV node esbuild.config.mjs\",\n      \"files\": [\n        \"src\",\n        \"tsconfig.json\",\n        \"esbuild.config.mjs\"\n      ],\n      \"output\": [\n        \"lib\"\n      ],\n      \"dependencies\": [\n        \"..:build\"\n      ]\n    },\n    \"build:type-check\": {\n      \"command\": \"tsc -p tsconfig.json --pretty --incremental\",\n      \"files\": [\n        \"src\",\n        \"tsconfig.json\"\n      ],\n      \"clean\": \"if-file-deleted\",\n      \"output\": [\n        \"tsconfig.tsbuildinfo\"\n      ],\n      \"dependencies\": [\n        \"..:build\"\n      ]\n    },\n    \"build:prod\": {\n      \"dependencies\": [\n        \"build:prod:eleventy\",\n        \"build:prod:ts\",\n        \"build:type-check\"\n      ]\n    },\n    \"build:prod:eleventy\": {\n      \"command\": \"NODE_ENV=PROD eleventy\",\n      \"files\": [\n        \"site\",\n        \"build\",\n        \"eleventy-helpers\",\n        \"eleventy.config.cjs\",\n        \"stories/\"\n      ],\n      \"output\": [\n        \"_prod/\"\n      ],\n      \"dependencies\": [\n        \"build:prod:ts\",\n        \"build:copy-docs\",\n        \"build:copy-stories\"\n      ]\n    },\n    \"build:prod:ts\": {\n      \"command\": \"NODE_ENV=PROD node esbuild.config.mjs\",\n      \"files\": [\n        \"src\",\n        \"tsconfig.json\",\n        \"esbuild.config.mjs\"\n      ],\n      \"output\": [\n        \"build\"\n      ],\n      \"dependencies\": [\n        \"..:build\"\n      ]\n    },\n    \"build:copy-docs\": {\n      \"command\": \"node scripts/copy-docs.mjs\",\n      \"files\": [\n        \"../docs/components\",\n        \"../docs/theming\",\n        \"../docs/*.md\",\n        \"../docs/images/\",\n        \"scripts/copy-docs.mjs\"\n      ],\n      \"output\": [\n        \"site/components/**/*.md\",\n        \"site/components/images\",\n        \"site/theming/**/*.md\",\n        \"site/theming/images\",\n        \"site/about/**/*.md\",\n        \"site/about/images\"\n      ]\n    },\n    \"serve:dev\": {\n      \"command\": \"wds --watch --root-dir _dev --open\",\n      \"service\": true,\n      \"dependencies\": [\n        {\n          \"script\": \"build:dev\",\n          \"cascade\": false\n        }\n      ]\n    },\n    \"serve\": {\n      \"command\": \"wds --watch --root-dir _prod\",\n      \"service\": true,\n      \"dependencies\": [\n        {\n          \"script\": \"build:prod\",\n          \"cascade\": false\n        }\n      ]\n    },\n    \"build:copy-stories\": {\n      \"command\": \"node scripts/copy-stories.mjs\",\n      \"files\": [\n        \"scripts/copy-stories.mjs\",\n        \"../*/demo\",\n        \"!node_modules\",\n        \"!../node_modules\"\n      ],\n      \"output\": [\n        \"stories/*/**/*\",\n        \"!stories/components\"\n      ]\n    }\n  },\n  \"license\": \"Apache-2.0\",\n  \"dependencies\": {\n    \"@11ty/is-land\": \"^3.0.0\",\n    \"@lit-labs/ssr-client\": \"^1.1.1\",\n    \"@material/material-color-utilities\": \"^0.2.7\",\n    \"@material/mwc-drawer\": \"^0.27.0\",\n    \"@material/web\": \"*\",\n    \"@preact/signals-core\": \"^1.3.0\",\n    \"lit\": \"^2.8.0\",\n    \"playground-elements\": \"^0.17.0\",\n    \"postdoc-lib\": \"^1.0.3\"\n  },\n  \"devDependencies\": {\n    \"@11ty/eleventy\": \"^2.0.1\",\n    \"@11ty/eleventy-plugin-syntaxhighlight\": \"^5.0.0\",\n    \"@lit-labs/eleventy-plugin-lit\": \"^1.0.0\",\n    \"@lit-labs/motion\": \"^1.0.3\",\n    \"@luncheon/esbuild-plugin-gzip\": \"^0.1.0\",\n    \"@web/dev-server\": \"^0.1.35\",\n    \"@webcomponents/template-shadowroot\": \"^0.2.1\",\n    \"cheerio\": \"^1.0.0-rc.12\",\n    \"clean-css\": \"^5.3.1\",\n    \"eleventy-plugin-compress\": \"^1.0.5\",\n    \"eleventy-plugin-nesting-toc\": \"^1.3.0\",\n    \"esbuild\": \"^0.25.0\",\n    \"esbuild-plugin-minify-html-literals\": \"^1.0.1\",\n    \"html-minifier\": \"^4.0.0\",\n    \"markdown-it\": \"^13.0.1\",\n    \"markdown-it-anchor\": \"^8.6.7\",\n    \"slugify\": \"^1.6.6\",\n    \"tiny-glob\": \"^0.2.9\",\n    \"typescript\": \"5.8.2\",\n    \"wireit\": \"^0.13.0\"\n  }\n}\n"
  },
  {
    "path": "catalog/scripts/copy-docs.mjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {cp, readFile, writeFile} from 'fs/promises';\nimport {dirname, join, relative} from 'path';\nimport tinyGlob from 'tiny-glob';\n\n/**\n * Recursively copies the images from\n *\n * /docs/${path}/images\n * to\n * /catalog/site/${includedPath}/${path}/images\n *\n * @param {string?} path The directory from which to copy the `images/`\n *     directory\n * @param {string?} includedPath A path to include to the beginning of the\n *     destination in the `site` directory\n */\nasync function copyImages(path = '', includePath = '') {\n  const origin = join('..', 'docs', path, 'images');\n  const desination = join('site', includePath, path, 'images');\n\n  console.log(`Copying images from ${origin} to ${desination}...`);\n  await cp(origin, desination, {recursive: true}, (err) => {\n    if (err) throw err;\n  });\n\n  console.log(`Copied images from ${origin} to ${desination}!`);\n}\n\n/**\n * Finds and returns all the filepaths of markdown files in\n * /docs/components/\n *\n * @return A promise of all the markdwon filepaths in /docs/components/\n */\nasync function getReadmeFiles(path = '', deep = false) {\n  const readmeFilesGlob = [join('../docs', path, deep ? '/**/' : '', '*.md')];\n  const readmeFiles = readmeFilesGlob.map(async (entry) => tinyGlob(entry));\n  return (await Promise.all(readmeFiles)).flat();\n}\n\n/**\n * Transforms to apply to the markdown files\n */\nconst transforms = [\n  // catalog-only code comments are removed\n  {\n    before: /<!-- catalog-only-start -->(\\n)*?<!--\\s*/gm,\n    after: '',\n  },\n  {\n    before: /\\s*-->(\\n)*?<!-- catalog-only-end -->/gm,\n    after: '',\n  },\n  // removes everything in between github-only-start and github-only-end\n  // comments\n  {\n    before: /\\s*<!-- no-catalog-start -->(.|\\n)*?<!-- no-catalog-end -->\\s*/gm,\n    after: '\\n\\n',\n  },\n  // eleventy pages end with `/` so `components/checkbox.md` will turn into the\n  // url `/components/checkbox`. Thus we need to transform the relative\n  // `./images` links to `../images`.\n  {\n    before: /images\\//gm,\n    after: '../images/',\n  },\n];\n\n/**\n * Executes the `<!-- catalog-include \"...\" -->` file transform by fetching the\n * file in quotes and simply injecting its contents into the Markdown.\n *\n * @param {string} filepath The filepath of the markdown file to transform. Used\n *     for determining relative URLs.\n * @param {string} fileContents The contents of the markdown filepath to\n *     transform.\n * @return The stringified transformed contents of the markdown file.\n */\nasync function fileIncludeTransform(filepath, fileContents) {\n  const catalogIncludeRegex = /<!--\\s?catalog-include \"(.+)\"\\s?-->/g;\n  const matches = [];\n  let match = catalogIncludeRegex.exec(fileContents);\n\n  // Collect all the regex matches\n  while (match) {\n    matches.push(match);\n    match = catalogIncludeRegex.exec(fileContents);\n  }\n\n  const fileDir = dirname(filepath);\n\n  // Iterate through the regex matches backward and splice in the file contents.\n  // Iterating backwards so that injecting won't affect match string indices.\n  for (let i = matches.length - 1; i >= 0; i--) {\n    const match = matches[i];\n    const matchedString = match[0];\n    const includePath = match[1];\n\n    console.log(`Injecting ${includePath} file contents into ${filepath}...`);\n    const includeContents = await readFile(join(fileDir, includePath), 'utf8');\n\n    fileContents = fileContents.slice(0, match.index) + includeContents +\n        fileContents.slice(match.index + matchedString.length);\n  }\n\n  return fileContents;\n}\n\n/**\n * Applies the transforms to readme files at the given filepaths and outputs the\n * result to /catalog/site/components/<component-name>.md\n *\n * @param {Array<string>} filepaths The readme file paths to transform.\n * @param {[string|RegExp, string|(match: string, ...patterns: string[])][]}\n *     replacements File path transforms to apply to output.\n */\nasync function transformReadmes(filepaths, outdir = '', replacements = []) {\n  const readmePromises = filepaths.map(async (entry) => {\n    let readme = await readFile(entry, 'utf8');\n    console.log(`Transforming ${entry}`);\n\n    transforms.forEach((transform) => {\n      readme = readme.replaceAll(transform.before, transform.after);\n    });\n\n    readme = await fileIncludeTransform(entry, readme);\n\n    // The `components/<component-name>.md` path.\n    let localPath = relative(join('..', 'docs'), entry);\n\n    for (const [pattern, replacement] of replacements) {\n      const regex = new RegExp(pattern);\n      localPath = localPath.replace(regex, replacement);\n    }\n\n\n    // The output path at\n    // /catalog/site/components/<?local path>/<component name>.md\n    const outputPath = join('site', outdir, localPath);\n\n    console.log(`Writing trasnformed file to: ${outputPath}`);\n    return writeFile(outputPath, readme);\n  });\n\n  await Promise.all(readmePromises);\n}\n\nconst aboutFiles = await getReadmeFiles('.');\nconst componentsReadmes = await getReadmeFiles('components', true);\nconst themingFiles = await getReadmeFiles('theming', true);\n\nconsole.log('Copying images...');\nawait copyImages('.', 'about');\nawait copyImages('components');\nawait copyImages('theming');\nconsole.log('Images copied!');\nconsole.log('Transforming readmes...');\nawait transformReadmes(aboutFiles, 'about');\nawait transformReadmes(componentsReadmes);\nawait transformReadmes(themingFiles, '', [\n  ['README', 'material-theming'],\n]);\nconsole.log('Transformations complete!');\n"
  },
  {
    "path": "catalog/scripts/copy-stories.mjs",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {cp} from 'fs/promises';\nimport {join, parse} from 'path';\nimport tinyGlob from 'tiny-glob';\n\n// Glob(s) from which to copy story files\nconst storyDirectories = ['../*/demo'];\nconst dirPromises = storyDirectories.map(async (entry) => tinyGlob(entry));\nconst directories = (await Promise.all(dirPromises)).flat();\n\nconst parsedDirectories = directories.map((entry) => {\n  // get the component name from the directory name\n  const componentName = parse(parse(entry).dir).base;\n  // set the destination to /catalog/stories/<component name>\n  const destination = join('.', 'stories', componentName);\n\n  console.log(`Copying ${entry} to ${destination}`);\n\n  // recursively copy the files\n  return cp(entry, destination, {recursive: true}, (err) => {\n    if (err) throw err;\n  });\n});\n\nawait Promise.all(parsedDirectories);\n"
  },
  {
    "path": "catalog/site/_includes/default.html",
    "content": "<!DOCTYPE html>\n\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes\"\n    />\n    {% if isComponent %}\n      {% set pageTitle = title or name %}\n    {% else %}\n      {% set pageTitle = title %}\n    {% endif %}\n    <!-- Use the 11ty data system to set the title -->\n    <title>Material Web{% if pageTitle %} - {{ pageTitle }}{% endif %}</title>\n    <!-- Set the color of the url bar on mobile to match theme -->\n    <meta name=\"theme-color\" content=\"#251f16\" />\n    <link href=\"/images/favicon.svg\" rel=\"icon\" sizes=\"any\" type=\"image/svg+xml\">\n    <!-- Inlines the global css in site/css/global.css -->\n    {% inlinecss \"global.css\" %}\n    <!-- MUST be loaded before any lit bundle. allows hydration of SSRd components -->\n    <script type=\"module\" src=\"/js/ssr-utils/lit-hydrate-support.js\"></script>\n    <!-- Loads definition for <lit-island>. See docs for @11ty/is-land for usage -->\n    <script type=\"module\" src=\"/js/ssr-utils/lit-island.js\"></script>\n    <!-- Inlines the material theming logic since we want to prevent FOUC -->\n    {% inlinejs \"inline/apply-saved-theme.js\" %}\n    <script type=\"module\" src=\"/js/pages/global.js\"></script>\n    <noscript>\n      <link rel=\"stylesheet\" href=\"/css/no-js.css\" />\n    </noscript>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap\"\n    />\n    <!-- dsd-pending hides body until the polyfill has run on browsers that do not support DSD -->\n    <style>\n      body[dsd-pending] {\n        display: none;\n      }\n    </style>\n    <!-- If JS is disabled just show the contents without the polyfill -->\n    <noscript\n      ><style>\n        body[dsd-pending] {\n          display: block !important;\n        }\n      </style>\n    </noscript>\n    <!-- Allows sub-templates to insert into the head -->\n    {% block head %}{% endblock %}\n  </head>\n  <body dsd-pending>\n    <!-- Inlines the declarative shadow dom polyfill for FF since it's performance sensitive -->\n    {% inlinejs \"ssr-utils/dsd-polyfill.js\" %}\n    <lit-island on:idle import=\"/js/hydration-entrypoints/navigation.js\">\n      <nav-drawer page-title=\"{{name}}\" {% if hasToc %}has-toc{% endif %}>\n        <top-app-bar slot=\"top-app-bar\" baseURI=\"/\">\n          {% block topappbar %}{{ topappbar | safe }}{% endblock %}\n        </top-app-bar>\n\n        {% if hasToc %}\n          <section slot=\"toc\">{% block toc %}{% endblock %}</section>\n        {% endif %}\n\n        <main id=\"main-content\" slot=\"app-content\" tabindex=\"0\">\n          <!-- this is the content of the page -->\n          <!-- unrelated change to components -->\n          {% block content %}{{ content | mdMarkdown | safe }}{% endblock %}\n        </main>\n        <md-list\n            aria-label=\"List of pages and components\"\n            role=\"menubar\"\n            class=\"nav\">\n          <!-- About section -->\n          <md-item><div slot=\"headline\">About</div></md-item>\n          {% for file in collections.about|filtersort('data.order') %}\n            <md-list-item\n              href=\"{{ file.url }}\"\n              role=\"menuitem\"\n              {% if file.url == page.url %}selected{% endif %}\n              type=\"link\"\n              tabindex=\"{% if file.url == page.url %}0{% else %}-1{% endif %}\"\n            >{{ file.data.name }}</md-list-item>\n          {% endfor %}\n          <md-divider role=\"separator\"></md-divider>\n          <!-- Theming section -->\n          <md-item><div slot=\"headline\">Theming</div></md-item>\n          {% for file in collections.theming|filtersort('data.order') %}\n            <md-list-item\n              href=\"{{ file.url }}\"\n              type=\"menuitem\"\n              {% if file.url == page.url %}selected{% endif %}\n              type=\"link\"\n              tabindex=\"{% if file.url == page.url %}0{% else %}-1{% endif %}\"\n            >{{ file.data.name }}</md-list-item>\n          {% endfor %}\n          <md-divider role=\"separator\"></md-divider>\n          <!-- Components section -->\n          <md-item><div slot=\"headline\">Components</div></md-item>\n          {% for file in collections.component|filtersort('data.name') %}\n            <md-list-item\n              href=\"{{ file.url }}\"\n              role=\"menuitem\"\n              {% if file.url == page.url %}selected{% endif %}\n              type=\"link\"\n              tabindex=\"{% if file.url == page.url %}0{% else %}-1{% endif %}\"\n            >{{ file.data.name }}</md-list-item>\n          {% endfor %}\n        </md-list>\n      </nav-drawer>\n    </lit-island>\n  </body>\n</html>\n"
  },
  {
    "path": "catalog/site/_includes/layouts/components.html",
    "content": "{% extends 'default.html' %}\n\n{% block head %}\n  <script type=\"module\" src=\"/js/pages/components.js\"></script>\n  <link rel=\"stylesheet\" href=\"/css/md-layout.css\" />\n  <link rel=\"stylesheet\" href=\"/css/syntax-highlight.css\" />\n{% endblock %}\n\n{% block toc%}\n{{ content | toc | filterToc | safe }}\n{% endblock %}\n\n{% block content %}\n{% if not ssrOnly %}\n  <!-- Loads page JS on idle callback at src/hydration-entrypoints/components/md-file-name.ts -->\n  <lit-island\n      on:idle\n      import=\"/js/hydration-entrypoints{{ page.filePathStem }}.js\">\n    {{ content | mdMarkdown | safe }}\n  </lit-island>\n{% else %}\n  {{ content | mdMarkdown | safe }}\n{% endif %}\n{% endblock %}"
  },
  {
    "path": "catalog/site/_includes/layouts/docs.html",
    "content": "{% extends 'default.html' %}\n\n{% block head %}\n  <link rel=\"stylesheet\" href=\"/css/md-layout.css\" />\n  <link rel=\"stylesheet\" href=\"/css/syntax-highlight.css\" />\n{% endblock %}\n\n{% block toc%}\n{{ content | toc | filterToc | safe }}\n{% endblock %}\n\n{% block content %}\n{{ content | mdMarkdown | safe }}\n{% endblock %}"
  },
  {
    "path": "catalog/site/about/about.json",
    "content": "{\n  \"layout\": \"layouts/docs.html\",\n  \"tags\": [\"about\"],\n  \"hasToc\": true\n}\n"
  },
  {
    "path": "catalog/site/components/components.json",
    "content": "{\n  \"layout\": \"layouts/components.html\",\n  \"tags\": [\"component\"],\n  \"hasToc\": true,\n  \"isComponent\": true\n}\n"
  },
  {
    "path": "catalog/site/css/global.css",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* latin */\n@font-face {\n  font-family: 'Google Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(/fonts/google-sans/regular.woff2) format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,\n    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,\n    U+FEFF, U+FFFD;\n}\n\n/* latin -mono */\n@font-face {\n  font-family: 'Google Sans Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(/fonts/google-sans/mono.woff2) format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,\n    U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,\n    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n:root {\n  font-family: 'Google Sans', Roboto, system-ui;\n  --md-ref-typeface-plain: 'Google Sans', Roboto, system-ui;\n  background-color: var(--md-sys-color-surface-container);\n  color: var(--md-sys-color-on-surface);\n  /* These values are copied from mio */\n  --catalog-display-xl-font-size: 88px;\n  --catalog-display-m-font-size: 45px;\n  --catalog-title-l-font-size: 22px;\n  --catalog-title-m-font-size: 16px;\n  --catalog-title-s-font-size: 14px;\n  --catalog-body-l-font-size: 16px;\n  --catalog-body-m-font-size: 14px;\n  --catalog-headline-s-font-size: 24px;\n  --catalog-label-s-font-size: 11px;\n  --catalog-shape-xl: 28px;\n  --catalog-shape-l: 16px;\n  --catalog-shape-m: 12px;\n  --catalog-shape-s: 8px;\n  --catalog-shape-xs: 4px;\n  --catalog-spacing-xl: 28px;\n  --catalog-spacing-l: 16px;\n  --catalog-spacing-m: 12px;\n  --catalog-spacing-s: 8px;\n  --catalog-top-app-bar-height: calc(48px + 2 * var(--catalog-spacing-m));\n  scroll-padding-block-start: calc(\n    var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) *\n      2\n  );\n}\n\n@media screen and (max-width: 600px) {\n  :root {\n    --catalog-display-xl-font-size: 55px;\n    --catalog-title-l-font-size: 16px;\n    --catalog-body-l-font-size: 14px;\n    --catalog-body-m-font-size: 12px;\n    /* Mostly to accommodate content padding on small screens */\n    --catalog-spacing-xl: 16px;\n    --catalog-spacing-l: 12px;\n  }\n}\n\nstrong {\n  -webkit-font-smoothing: antialiased;\n}\n\nbody {\n  margin: 0;\n  font-size: var(--catalog-body-l-font-size);\n}\n\na {\n  color: var(--md-sys-color-primary);\n  text-decoration: none;\n}\n\na:hover,\na:focus-visible {\n  text-decoration: underline;\n}\n\nnav-drawer md-list.nav md-list-item[href][selected] {\n  background-color: var(--md-sys-color-surface-container-highest);\n}\n\nnav-drawer md-list.nav md-list-item::part(focus-ring) {\n  --md-focus-ring-shape: var(--catalog-shape-xl);\n}\n\n@media (forced-colors: active) {\n  nav-drawer md-list.nav md-list-item[href][selected] {\n    border: 4px double CanvasText;\n  }\n\n  nav-drawer md-list.nav md-list-item[href] {\n    border-radius: var(--catalog-shape-xl);\n    border: 1px solid CanvasText;\n  }\n}\n\nnav-drawer md-list.nav {\n  --md-list-container-color: transparent;\n  display: block;\n  margin-inline: var(--catalog-spacing-m);\n  min-width: unset;\n}\n\nnav-drawer md-list.nav md-list-item[href] {\n  margin-block: var(--catalog-spacing-m);\n  display: block;\n  --md-focus-ring-shape: var(--catalog-shape-xl);\n  border-radius: var(--catalog-shape-xl);\n}\n\nnav-drawer md-list.nav md-item [slot=\"headline\"] {\n  /* shadow root slot has overflow:hidden, it's cutting some text off */\n  padding-block: 2px;\n}\n\nnav-drawer md-list.nav md-item:first-of-type {\n  padding-block: 0;\n}\n\nnav-drawer md-list.nav md-item {\n  font-size: var(--catalog-headline-s-font-size);\n  padding-block-end: 0;\n}\n\nnav-drawer md-list.nav md-item + md-list-item[href] {\n  margin-block-start: 0;\n}\n\nh1 {\n  font-size: var(--catalog-display-xl-font-size);\n}\n\n.toc ol {\n  list-style-type: none;\n  font-size: var(--catalog-body-m-font-size);\n}\n\n.toc > ol {\n  padding: 0;\n}\n\n.toc > ol ol {\n  list-style-type: circle;\n  padding-inline-start: var(--catalog-spacing-xl);\n}\n\n.toc ol li {\n  margin-block: var(--catalog-spacing-m);\n}\n"
  },
  {
    "path": "catalog/site/css/home-page.css",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n h1,\n.subtitle {\n  text-align: center;\n  margin-block-start: 0;\n}\n"
  },
  {
    "path": "catalog/site/css/md-layout.css",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:root {\n  --catalog-image-border-radius: 22px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  overflow-y: hidden;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\ndetails[open] summary {\n  margin-block-end: 16px;\n}\n\ndetails summary md-outlined-icon-button {\n  margin-inline-end: 8px;\n}\n\ndetails:not([open]) #top-app-bar-nav {\n  display: contents;\n}\n\nmain > * {\n  max-width: 1760px;\n}\n\nmain > p img,\nmain > img {\n  max-width: 100%;\n}\n\nimg:not(figure *),\nfigure {\n  border-radius: var(--catalog-image-border-radius);\n  min-height: 56px;\n  object-fit: cover;\n}\n\ncatalog-component-header img {\n  height: var(--catalog-header-image-height, 50%);\n}\n\n.figure-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\nfigure {\n  border: 1px solid var(--md-sys-color-outline);\n  display: inline-flex;\n  padding-inline: 28px;\n  align-items: center;\n}\n\ndiv:has(> table) {\n  display: flex;\n  justify-content: center;\n}\n\np:has(> img) {\n  display: flex;\n  justify-content: center;\n}\n\nmain > :not(catalog-component-header) {\n  margin-inline: auto;\n  box-sizing: border-box;\n  overflow-x: auto;\n  display: block;\n}\n\nmain > :not(catalog-component-header, details),\nmain > details > summary {\n  max-width: min(100%, 980px);\n  margin-inline: auto;\n}\n\nmain > table {\n  max-width: max-content;\n}\n\ntable {\n  border-spacing: 0;\n}\n\ntd,\nth {\n  border-block-start: 1px solid var(--md-sys-color-outline-variant);\n  border-inline-start: 1px solid var(--md-sys-color-outline-variant);\n  padding: 8px 16px;\n}\n\ntr:last-of-type td,\ntr:last-of-type th {\n  border-block-end: 1px solid var(--md-sys-color-outline-variant);\n}\n\ntr td:last-of-type,\ntr th:last-of-type {\n  border-inline-end: 1px solid var(--md-sys-color-outline-variant);\n}\n\nth {\n  background-color: var(--md-sys-color-surface-container);\n  text-shadow: 0 1px 1px var(--md-sys-color-surface-container-lowest);\n  color: var(--md-sys-color-on-surface);\n  font-size: 1.25em;\n}\n\n:not(pre) > code {\n  display: inline-flex;\n  background-color: var(--md-sys-color-surface-variant);\n  text-shadow: 0 1px 1px var(--md-sys-color-surface-variant);\n  color: var(--md-sys-color-on-surface);\n  padding: 4px;\n  border-radius: 8px;\n}\n\ntr th:first-of-type {\n  border-start-start-radius: var(--catalog-shape-xl);\n}\n\ntr th:last-of-type {\n  border-start-end-radius: var(--catalog-shape-xl);\n}\n\ntr:last-of-type td:first-of-type {\n  border-end-start-radius: var(--catalog-shape-xl);\n}\n\ntr:last-of-type td:last-of-type {\n  border-end-end-radius: var(--catalog-shape-xl);\n}\n\n/* Hides offscreen accesible text for h1,2,3 hover links. */\na .offscreen {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.heading {\n  align-items: center;\n  position: relative;\n  overflow-x: visible;\n}\n\n.heading.h2 {\n  font-size: var(--catalog-title-l-font-size);\n}\n\n.heading.h3 {\n  font-size: var(--catalog-title-m-font-size);\n}\n\n.heading.h4 {\n  font-size: var(--catalog-title-s-font-size);\n}\n\n.heading a {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  inset: 0;\n  inset-inline-start: calc(-1 * var(--catalog-spacing-xl) + 4px);\n  opacity: 0;\n  font-size: calc(1.5em - 4px);\n  transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);\n}\n\n.heading:hover a,\n.heading:focus-within a {\n  text-decoration: none;\n  opacity: 1;\n}\n\n.example *:defined > md-circular-progress {\n  display: none;\n}\n\n.example :is(playground-preview, playground-file-editor):not(:defined) {\n  display: flex;\n  box-sizing: border-box;\n  background-color: var(--md-sys-color-surface-variant);\n  justify-content: center;\n  align-items: center;\n}\n\nblockquote {\n  margin: var(--catalog-spacing-l);\n}\n\nmain > blockquote:not(catalog-component-header, details) {\n  padding: var(--catalog-spacing-l);\n  border-radius: var(--catalog-shape-l);\n  background-color: var(--md-sys-color-secondary-container);\n  display: flex;\n  gap: var(--catalog-spacing-s);\n}\n\nmain > blockquote:not(catalog-component-header, details) .content {\n  flex-grow: 1;\n}\n\nblockquote .content > *:first-child {\n  margin-block-start: 4px;\n}\n\nblockquote .content > *:last-child {\n  margin-block-end: 0;\n}\n\nblockquote,\nblockquote a {\n  color: var(--md-sys-color-on-secondary-container);\n}\n\nblockquote a {\n  text-decoration: underline;\n  font-weight: 700;\n}\n\nblockquote.important {\n  background-color: var(--md-sys-color-primary-container);\n}\n\nblockquote.important,\nblockquote.important a {\n  color: var(--md-sys-color-on-primary-container);\n}\n\nblockquote.warning {\n  background-color: var(--md-sys-color-error-container);\n}\n\nblockquote.warning,\nblockquote.warning a {\n  color: var(--md-sys-color-on-error-container);\n}\n"
  },
  {
    "path": "catalog/site/css/no-js.css",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:root,\n:host :root,\n:host {\n  --md-sys-color-background: #fff8f3;\n  --md-sys-color-on-background: #201b12;\n  --md-sys-color-surface: #fff8f3;\n  --md-sys-color-surface-dim: #e4d8cb;\n  --md-sys-color-surface-bright: #fff8f3;\n  --md-sys-color-surface-container-lowest: #ffffff;\n  --md-sys-color-surface-container-low: #fef2e4;\n  --md-sys-color-surface-container: #f8ecde;\n  --md-sys-color-surface-container-high: #f3e6d8;\n  --md-sys-color-surface-container-highest: #ede1d3;\n  --md-sys-color-on-surface: #201b12;\n  --md-sys-color-surface-variant: #f2e0c9;\n  --md-sys-color-on-surface-variant: #504534;\n  --md-sys-color-inverse-surface: #362f26;\n  --md-sys-color-inverse-on-surface: #fbefe1;\n  --md-sys-color-outline: #837562;\n  --md-sys-color-outline-variant: #d5c4ae;\n  --md-sys-color-shadow: #000000;\n  --md-sys-color-scrim: #000000;\n  --md-sys-color-surface-tint: #7f5700;\n  --md-sys-color-primary: #7f5700;\n  --md-sys-color-on-primary: #ffffff;\n  --md-sys-color-primary-container: #f7b337;\n  --md-sys-color-on-primary-container: #442d00;\n  --md-sys-color-inverse-primary: #ffba3e;\n  --md-sys-color-secondary: #765a2b;\n  --md-sys-color-on-secondary: #ffffff;\n  --md-sys-color-secondary-container: #ffdca9;\n  --md-sys-color-on-secondary-container: #5c4316;\n  --md-sys-color-tertiary: #566500;\n  --md-sys-color-on-tertiary: #ffffff;\n  --md-sys-color-tertiary-container: #b6ca54;\n  --md-sys-color-on-tertiary-container: #2d3600;\n  --md-sys-color-error: #ba1a1a;\n  --md-sys-color-on-error: #ffffff;\n  --md-sys-color-error-container: #ffdad6;\n  --md-sys-color-on-error-container: #410002\n}\n\n@media (prefers-color-scheme: dark) {\n  :root,\n  :host :root,\n  :host {\n    --md-sys-color-background: #18130b;\n    --md-sys-color-on-background: #ede1d3;\n    --md-sys-color-surface: #18130b;\n    --md-sys-color-surface-dim: #18130b;\n    --md-sys-color-surface-bright: #3f382f;\n    --md-sys-color-surface-container-lowest: #120d06;\n    --md-sys-color-surface-container-low: #201b12;\n    --md-sys-color-surface-container: #251f16;\n    --md-sys-color-surface-container-high: #2f2920;\n    --md-sys-color-surface-container-highest: #3b342a;\n    --md-sys-color-on-surface: #ede1d3;\n    --md-sys-color-surface-variant: #504534;\n    --md-sys-color-on-surface-variant: #d5c4ae;\n    --md-sys-color-inverse-surface: #ede1d3;\n    --md-sys-color-inverse-on-surface: #362f26;\n    --md-sys-color-outline: #9d8f7b;\n    --md-sys-color-outline-variant: #504534;\n    --md-sys-color-shadow: #000000;\n    --md-sys-color-scrim: #000000;\n    --md-sys-color-surface-tint: #ffba3e;\n    --md-sys-color-primary: #ffd28d;\n    --md-sys-color-on-primary: #432c00;\n    --md-sys-color-primary-container: #e5a427;\n    --md-sys-color-on-primary-container: #342100;\n    --md-sys-color-inverse-primary: #7f5700;\n    --md-sys-color-secondary: #e6c188;\n    --md-sys-color-on-secondary: #432c02;\n    --md-sys-color-secondary-container: #543b0f;\n    --md-sys-color-on-secondary-container: #f5cf95;\n    --md-sys-color-tertiary: #cee36a;\n    --md-sys-color-on-tertiary: #2c3400;\n    --md-sys-color-tertiary-container: #a5b945;\n    --md-sys-color-on-tertiary-container: #212800;\n    --md-sys-color-error: #ffb4ab;\n    --md-sys-color-on-error: #690005;\n    --md-sys-color-error-container: #93000a;\n    --md-sys-color-on-error-container: #ffdad6\n  }\n}\n"
  },
  {
    "path": "catalog/site/css/stories.css",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n#dragbar {\n  max-width: 100%;\n  max-height: 100%;\n}\n\n#editor {\n  margin-block: 0;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n#editor-wrapper {\n  height: 100%;\n  overflow: hidden;\n}\n\nbody {\n  height: 100dvh;\n}\n\n#preview {\n  position: relative;\n}\n\n#preview md-circular-progress {\n  inset: 50%;\n  transform: translate(-50%, -50%);\n}\n"
  },
  {
    "path": "catalog/site/css/syntax-highlight.css",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview This file handles syntax highlighting for markdown-it /\n * highlight.js formatted codeblocks as well as playground-elements and anything\n * else related to code styles.\n */\n\n :root {\n  --__code-block-font-size: var(--catalog-body-m-font-size);\n  --playground-highlight-color: var(--md-sys-color-primary);\n  --playground-code-font-size: var(--__code-block-font-size);\n  --playground-code-background: var(--md-sys-color-surface-variant);\n  --playground-code-default-color: var(--md-sys-color-on-surface-variant);\n  --playground-code-font-family: 'Google Sans Mono', Menlo, Monaco,\n    'Courier New', monospace;\n  --playground-code-callee-color: var(--md-sys-color-primary);\n  --playground-code-comment-color: var(--md-sys-color-on-surface-dim);\n  --playground-code-operator-color: var(--md-sys-color-on-surface);\n  --playground-code-tag-color: var(--md-sys-color-primary);\n  --playground-code-number-color: var(--md-sys-color-primary);\n  --playground-code-atom-color: var(--md-sys-color-primary);\n  --playground-code-string-color: var(--md-sys-color-secondary);\n  --playground-code-attribute-color: var(--md-sys-color-tertiary);\n  --playground-code-string-2-color: var(--md-sys-color-on-surface-variant);\n  --playground-code-keyword-color: var(--md-sys-color-tertiary);\n  --playground-code-variable-2-color: var(--md-sys-color-secondary);\n  --playground-code-def-color: var(--md-sys-color-on-surface-variant);\n  --playground-code-property-color: var(--md-sys-color-on-surface-variant);\n  --playground-code-variable-color: var(--md-sys-color-on-surface-variant);\n  --playground-code-type-color: var(--md-sys-color-error);\n  --playground-code-linenumber-color: var(--md-sys-color-outline);\n  --playground-code-qualifier-color: var(--md-sys-color-tertiary);\n  --playground-code-cursor-color: var(--md-sys-color-on-surface-variant);\n  --playground-preview-toolbar-background: var(\n    --md-sys-color-surface-container-high\n  );\n  --playground-preview-toolbar-foreground-color: var(--md-sys-color-on-surface);\n\n  /* perfect circle of one line is (padding-block * 2 + (line-height: 1.5x font size)) / 2 */\n  --catalog-code-block-border-radius: calc(\n    (2 * var(--__code-block-font-size) + 1.5 * var(--__code-block-font-size)) /\n      2\n  );\n}\n\n/* Formats the code boxes themselves */\n.example playground-file-editor,\nplayground-file-editor,\npre[class*='language-'] {\n  padding: var(--__code-block-font-size);\n  /* Remove the extra hard coded 3px from line number padding. */\n  padding-inline-start: calc(var(--__code-block-font-size) - 3px);\n  border-radius: var(--catalog-code-block-border-radius);\n}\n\nplayground-file-editor {\n  margin-block: 1em;\n  background-color: var(--md-sys-color-surface-variant);\n  text-shadow: 0 1px 1px var(--md-sys-color-surface-variant);\n}\n\ncode,\ncode[class*='language-'],\npre[class*='language-'] {\n  color: var(--md-sys-color-on-surface-variant);\n  text-shadow: 0 1px 1px var(--md-sys-color-surface);\n  font-family: 'Google Sans Mono', Menlo, Monaco, 'Courier New', monospace;\n  direction: ltr;\n  text-align: left;\n  word-spacing: normal;\n  white-space: pre;\n  word-wrap: normal;\n  line-height: 1.5;\n  font-size: var(--__code-block-font-size);\n  background: none;\n  border: 0;\n  tab-size: 2;\n  hyphens: none;\n}\n\npre[class*='language-'],\n:not(pre) > code[class*='language-'] {\n  background: var(--md-sys-color-surface-container);\n  border: 1px solid var(--md-sys-color-outline);\n}\n\n/* Code blocks */\npre[class*='language-'] {\n  overflow: auto;\n  scrollbar-width: none;\n}\n\n/* Inline code */\n:not(pre) > code[class*='language-'] {\n  padding: 5px 10px;\n  line-height: 1;\n  border-radius: 3px;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n  color: var(--md-sys-color-on-surface-dim);\n}\n\n.token.selector,\n.token.operator,\n.token.punctuation {\n  color: var(--md-sys-color-on-surface-bright);\n}\n\n.token.namespace {\n  opacity: 0.7;\n}\n\n.token.tag,\n.token.boolean,\n.token.number {\n  color: var(--md-sys-color-primary);\n}\n\n.token.atrule,\n.token.attr-value,\n.token.hex,\n.token.string {\n  color: var(--md-sys-color-secondary);\n}\n\n.token.property,\n.token.entity,\n.token.url,\n.token.attr-name,\n.token.keyword {\n  color: var(--md-sys-color-tertiary);\n}\n\n.token.regex {\n  color: var(--md-sys-color-on-tertiary-container);\n}\n\n.token.entity {\n  cursor: help;\n}\n\n.token.function,\n.token.constant {\n  color: var(--md-sys-color-error);\n}\n\n.token.important,\n.token.deliminator {\n  color: var(--md-sys-color-error);\n}\n"
  },
  {
    "path": "catalog/site/index.html",
    "content": "{% extends 'default.html' %}\n\n{% block head %}\n  <script type=\"module\" src=\"/js/pages/home-page.js\"></script>\n  <link rel=\"stylesheet\" href=\"/css/home-page.css\">\n{% endblock %}\n\n{% block content %}\n\n<h1>Material Web</h1>\n<div class=\"subtitle\">\n  <p>\n    <code>@material/web</code> is a library of\n    <a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components\" target=\"_blank\">web components</a>\n    that helps build beautiful and accessible web applications.\n  </p>\n\n  <p>\n    <a href=\"https://github.com/material-components/material-web/discussions/5642\" target=\"_blank\">\n      <strong>Note: MWC is in maintenance mode pending new maintainers.</strong>\n    </a>\n  </p>\n</div>\n\n{% endblock %}\n"
  },
  {
    "path": "catalog/site/stories/stories.html",
    "content": "---js\n{\n  pagination: {\n    data: \"collections.component\",\n    size: 1,\n    alias: \"component\",\n    before: components => {\n      // remove any components that don't have a dirname\n      return components.filter(component => component.data.dirname)\n    }\n  },\n  permalink: \"components/{{component.data.page.fileSlug}}/stories/index.html\",\n  fullHeightContent: \"true\",\n  collections: [\"stories\"],\n  eleventyComputed: {\n    dirname: ({component}) => component.data.dirname,\n  }\n}\n---\n\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes\"\n    />\n    <title>Material Web - Stories {{component.data.name}}</title>\n    <!-- Set the color of the url bar on mobile to match theme -->\n    <meta name=\"theme-color\" content=\"#251f16\" />\n    <link\n      href=\"/images/favicon.svg\"\n      rel=\"icon\"\n      sizes=\"any\"\n      type=\"image/svg+xml\"\n    />\n    <!-- Inlines the global css in site/css/global.css -->\n    {% inlinecss \"global.css\" %}\n    <!-- MUST be loaded before any lit bundle. allows hydration of SSRd components -->\n    <script type=\"module\" src=\"/js/ssr-utils/lit-hydrate-support.js\"></script>\n    <!-- Inlines the material theming logic since we want to prevent FOUC -->\n    {% inlinejs \"inline/apply-saved-theme.js\" %}\n    <!-- Needed for intializing theme if this is the first page they ever visit -->\n    <script type=\"module\" src=\"/js/pages/global.js\"></script>\n    <noscript>\n      <link rel=\"stylesheet\" href=\"/css/no-js.css\" />\n    </noscript>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap\"\n    />\n    <!-- If JS is disabled just show the contents without the polyfill -->\n    <noscript\n      ><style>\n        body[dsd-pending] {\n          display: block !important;\n        }\n      </style>\n    </noscript>\n    <!-- Syncs theme with playground -->\n    <script type=\"module\" src=\"/js/pages/components.js\"></script>\n    <script type=\"module\" src=\"/js/pages/stories.js\"></script>\n    <script\n      type=\"module\"\n      src=\"/js/hydration-entrypoints/playground-elements.js\"\n    ></script>\n    <link rel=\"stylesheet\" href=\"/css/syntax-highlight.css\" />\n    <link rel=\"stylesheet\" href=\"/css/stories.css\" />\n  </head>\n  <!-- dsd-pending hides body until the polyfill has run on browsers that do not support DSD -->\n  <body dsd-pending>\n    <!-- Inlines the declarative shadow dom polyfill for FF since it's performance sensitive -->\n    {% inlinejs \"ssr-utils/dsd-polyfill.js\" %}\n    <playground-project\n      id=\"project\"\n      project-src=\"/assets/stories/{{dirname}}/project.json\"\n    >\n    </playground-project>\n    <drag-playground id=\"dragbar\">\n      <playground-preview id=\"preview\" project=\"project\" slot=\"preview\">\n        <md-circular-progress indeterminate></md-circular-progress>\n      </playground-preview>\n      <div slot=\"editor\" id=\"editor-wrapper\">\n        <playground-file-editor\n          id=\"editor\"\n          project=\"project\"\n          filename=\"stories.ts\"\n          line-numbers\n          aria-hidden=\"true\"\n        >\n          <md-circular-progress indeterminate></md-circular-progress>\n        </playground-file-editor>\n      </div>\n    </drag-playground>\n  </body>\n</html>\n"
  },
  {
    "path": "catalog/site/theming/theming.json",
    "content": "{\n  \"layout\": \"layouts/docs.html\",\n  \"tags\": [\"theming\"],\n  \"hasToc\": true\n}\n"
  },
  {
    "path": "catalog/src/components/catalog-component-header-title.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, html, LitElement} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\n/**\n * A layout element that lays out the slotted h1 in our component READMEs. This\n * element is never hydrated only SSRd.\n *\n * See component-template.md in internal team docs for usage.\n */\n@customElement('catalog-component-header-title')\nexport class CatalogComponentHeaderTitle extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      border-radius: var(--catalog-image-border-radius);\n      padding: 56px;\n      /* It has no border so we need it to be a different color from the top app\n       * bar and nav drawer.\n       */\n      background-color: var(--md-sys-color-surface-variant);\n      color: var(--md-sys-color-on-surface-variant);\n    }\n\n    slot::slotted(h1) {\n      margin-block-end: 8px;\n      font-weight: 475;\n    }\n\n    slot::slotted(p) {\n      font-size: var(--catalog-title-l-font-size);\n    }\n\n    slot::slotted(*) {\n      margin-block-start: 0;\n    }\n\n    slot::slotted(*:last-child) {\n      margin-block-end: 0;\n    }\n\n    @media screen and (max-width: 600px) {\n      :host {\n        padding: 32px;\n      }\n    }\n  `;\n}\n"
  },
  {
    "path": "catalog/src/components/catalog-component-header.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, html, LitElement} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\n/**\n * A layout element that lays out the\n * catalog-component-header-title[slot=\"title\"] and the header image in our\n * component READMEs. This element is never hydrated only SSRd.\n *\n * See component-template.md in internal team docs for usage.\n */\n@customElement('catalog-component-header')\nexport class CatalogComponentHeader extends LitElement {\n  render() {\n    return html` <div>\n      <slot class=\"title\" name=\"title\"></slot>\n      <slot class=\"image\"></slot>\n    </div>`;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      --catalog-image-border-radius: var(--catalog-shape-xl);\n      container: host / inline-size;\n      position: relative;\n      margin-inline: auto;\n    }\n\n    slot {\n      height: 100%;\n    }\n\n    slot,\n    .image::slotted(*) {\n      display: flex;\n      align-items: start;\n      margin: 0;\n    }\n\n    .end slot,\n    .end .image::slotted(*) {\n      align-items: end;\n    }\n\n    .center slot,\n    .center .image::slotted(*) {\n      align-items: center;\n    }\n\n    .image {\n      /* Color needs to differ from top-app-bar and sidebar */\n      background-color: var(--md-sys-color-surface-variant);\n      border-radius: var(--catalog-image-border-radius);\n      overflow: hidden;\n      margin-block-start: 16px;\n      aspect-ratio: 3 / 2;\n      max-width: 100%;\n    }\n\n    ::slotted(*) {\n      box-sizing: border-box;\n      height: 100%;\n      width: 100%;\n    }\n\n    .image::slotted(*) {\n      --catalog-image-border-radius: 0px;\n      --catalog-header-image-height: 100%;\n      --catalog-header-image-width: auto;\n      display: flex;\n      justify-content: center;\n    }\n\n    /* fit ipad pro at least */\n    @container (width > 1000px) {\n      div {\n        display: grid;\n        grid-gap: 8px;\n        gap: 8px;\n        grid-template-columns: repeat(2, 1fr);\n        grid-auto-flow: row;\n      }\n\n      .image {\n        margin-block-start: 0;\n        aspect-ratio: unset;\n      }\n\n      .image,\n      .image::slotted(*) {\n        min-height: 100%;\n        max-height: 544px;\n      }\n    }\n  `;\n}\n"
  },
  {
    "path": "catalog/src/components/copy-code-button.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\n\nimport {MdIconButton} from '@material/web/iconbutton/icon-button.js';\nimport {css, html, LitElement} from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\n\n/**\n * A custom element that places a copy button at the top right corner of a\n * markdown-it codeblock. Injected into the page by the\n * /catalog/eleventy-helpers/plugins/copy-code-button.cjs markdown-it plugin.\n */\n@customElement('copy-code-button')\nexport class CopyCodeButton extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      --_border-radius: calc(var(--catalog-code-block-border-radius) / 4);\n    }\n\n    md-icon-button {\n      color: red;\n      position: absolute;\n      inset: var(\n        --catalog-copy-code-button-inset,\n        var(--_border-radius) var(--_border-radius) auto auto\n      );\n      --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface);\n      --md-sys-color-primary: var(--md-sys-color-on-surface);\n    }\n  `;\n\n  private timeoutId: number | undefined;\n\n  @state() private showCheckmark = false;\n\n  /**\n   * The aria label for the copy button when it has not been clicked.\n   */\n  @property() label = 'Copy code';\n\n  /**\n   * The aria label for the copy button when it has been clicked and the copy is\n   * successul.\n   */\n  @property({attribute: 'success-label'}) successLabel = 'Copy successful';\n\n  /**\n   * The title to be set on the copy button.\n   */\n  @property({attribute: 'button-title'}) buttonTitle = 'Copy code';\n\n  @query('md-icon-button') private copyButton!: MdIconButton;\n\n  @queryAssignedElements({flatten: true, selector: '*'})\n  private slottedEls!: NodeListOf<HTMLElement>;\n\n  render() {\n    return html`\n      <slot></slot>\n      <md-icon-button\n        toggle\n        @click=${this.onClick}\n        @input=${this.onInput}\n        title=${this.buttonTitle}\n        .selected=${this.showCheckmark}\n        aria-label=${this.label}\n        aria-label-selected=${this.successLabel}>\n        <md-icon>content_copy</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-icon-button>\n    `;\n  }\n\n  private async onClick() {\n    await navigator.clipboard.writeText(this.getCopyText());\n    this.onCopySuccess();\n  }\n\n  private onInput() {\n    this.showCheckmark = this.copyButton.selected;\n  }\n\n  /**\n   * Returns the text to be copied. By default, it copies the textContent of the\n   * nodes slotted into the element. Override for custom functionality.\n   */\n  getCopyText() {\n    let text = '';\n    for (const el of this.slottedEls) {\n      text += el.textContent;\n    }\n\n    return text;\n  }\n\n  private onCopySuccess() {\n    this.showCheckmark = true;\n\n    if (this.timeoutId) {\n      window.clearTimeout(this.timeoutId);\n    }\n\n    this.timeoutId = window.setTimeout(() => {\n      this.showCheckmark = false;\n    }, 2000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'copy-code-button': CopyCodeButton;\n  }\n}\n"
  },
  {
    "path": "catalog/src/components/drag-playground.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n\nimport { LitElement, css, html } from 'lit';\nimport { customElement, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport '@material/web/icon/icon.js';\n\n/**\n * A playground preview + editor with a draggable handle.\n */\n@customElement('drag-playground')\nexport class DragPlayground extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      --_drag-bar-height: 24px;\n      --_drag-bar-border-width: 1px;\n      --_half-drag-bar-height: calc(\n        (var(--_drag-bar-height) / 2) + var(--_drag-bar-border-width)\n      );\n    }\n\n    #wrapper {\n      display: flex;\n      flex-direction: column;\n    }\n\n    :host,\n    #wrapper,\n    ::slotted(*) {\n      height: 100%;\n    }\n\n    slot {\n      display: block;\n      overflow: hidden;\n    }\n\n    [name='preview'] {\n      height: max(\n        calc(\n          100% - var(--editor-percentage, 0%) - var(--_half-drag-bar-height)\n        ),\n        0px\n      );\n    }\n\n    [name='editor'] {\n      height: max(\n        calc(var(--editor-percentage, 0px) - var(--_half-drag-bar-height)),\n        0px\n      );\n    }\n\n    #drag-bar {\n      touch-action: none;\n      background-color: var(--md-sys-color-surface-container);\n      color: var(--md-sys-color-on-surface);\n      border: var(--_drag-bar-border-width) solid var(--md-sys-color-outline);\n      border-radius: 12px;\n      height: var(--_drag-bar-height);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      -webkit-user-select: none;\n      user-select: none;\n    }\n\n    #drag-bar:hover {\n      background-color: var(--md-sys-color-surface-container-high);\n      cursor: grab;\n    }\n\n    #drag-bar.isDragging {\n      background-color: var(--md-sys-color-inverse-surface);\n      color: var(--md-sys-color-inverse-on-surface);\n      cursor: grabbing;\n    }\n  `;\n\n  /**\n   * Whether or not we are in the \"dragging\" state.\n   */\n  @state() private isDragging = false;\n\n  /**\n   * The percentage of the editor height.\n   */\n  @state() private editorHeightPercent = 0;\n\n  @query('#wrapper') private wrapperEl!: HTMLElement;\n\n  /**\n   * A set of pointer IDs in the case that the user is dragging with multiple\n   * pointers.\n   */\n  private pointerIds = new Set<number>();\n\n  render() {\n    return html`<div\n      id=\"wrapper\"\n      style=${styleMap({\n        '--editor-percentage': `${this.editorHeightPercent}%`,\n      })}\n    >\n      <slot name=\"preview\"></slot>\n      <div\n        id=\"drag-bar\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-orientation=\"vertical\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"${this.editorHeightPercent}\"\n        aria-valuetext=\"${this.editorHeightPercent} percent\"\n        aria-label=\"Editor height\"\n        @focus=${this.onFocus}\n        @blur=${this.onBlur}\n        @keydown=${this.onKeydown}\n        @pointerdown=${this.onPointerdown}\n        @pointerup=${this.onPointerup}\n        @pointermove=${this.onPointermove}\n        class=${classMap({\n          isDragging: this.isDragging,\n        })}\n      >\n        <md-icon>drag_handle</md-icon>\n      </div>\n      <slot name=\"editor\"></slot>\n    </div>`;\n  }\n\n  private onFocus() {\n    this.isDragging = true;\n  }\n\n  private onBlur() {\n    this.isDragging = false;\n  }\n\n  private onKeydown(event: KeyboardEvent) {\n    const { key } = event;\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        this.editorHeightPercent = Math.min(this.editorHeightPercent + 1, 100);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        this.editorHeightPercent = Math.max(this.editorHeightPercent - 1, 0);\n        break;\n      case 'PageUp':\n        this.editorHeightPercent = Math.min(this.editorHeightPercent + 10, 100);\n        break;\n      case 'PageDown':\n        this.editorHeightPercent = Math.max(this.editorHeightPercent - 10, 0);\n        break;\n      case 'Home':\n        this.editorHeightPercent = 0;\n        break;\n      case 'End':\n        this.editorHeightPercent = 100;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private onPointerdown(event: PointerEvent) {\n    this.isDragging = true;\n\n    if (this.pointerIds.has(event.pointerId)) return;\n\n    this.pointerIds.add(event.pointerId);\n    (event.target as HTMLElement).setPointerCapture(event.pointerId);\n  }\n\n  private onPointerup(event: PointerEvent) {\n    this.pointerIds.delete(event.pointerId);\n    (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n\n    if (this.pointerIds.size === 0) {\n      this.isDragging = false;\n    }\n  }\n\n  private onPointermove(event: PointerEvent) {\n    if (!this.isDragging) return;\n\n    const { clientY: mouseY } = event;\n    const { top: wrapperTop, bottom: wrapperBottom } =\n      this.wrapperEl.getBoundingClientRect();\n\n    // The height of the wrapper\n    const height = wrapperBottom - wrapperTop;\n\n    // Calculate the percentage of the editor height in which the pointer is\n    // located\n    const editorHeightPercent = 100 - ((mouseY - wrapperTop) / height) * 100;\n\n    // Clamp the percentage between 0 and 100\n    this.editorHeightPercent = Math.min(Math.max(editorHeightPercent, 0), 100);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'drag-playground': DragPlayground;\n  }\n}\n"
  },
  {
    "path": "catalog/src/components/hct-slider.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/slider/slider.js';\n\nimport type {MdSlider} from '@material/web/slider/slider.js';\nimport {css, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {hctFromHex, hexFromHct} from '../utils/material-color-helpers.js';\n\n/**\n * A tuple denoting an inclusive value range.\n */\ntype Range = [number, number];\n\nconst HUE_RANGE: Range = [0, 360];\nconst CHROMA_RANGE: Range = [0, 150];\nconst TONE_RANGE: Range = [0, 100];\n\n/**\n * A slider for either hue, chroma, or tone with a preview gradient.\n *\n * @event input Fired when the user changes the value.\n */\n@customElement('hct-slider')\nexport class HCTSlider extends LitElement {\n  /**\n   * The visiable and accessible label for the control.\n   */\n  @property({type: String}) label = '';\n\n  /**\n   * The value of the slider.\n   */\n  @property({type: Number}) value = 0;\n\n  /**\n   * The color from which to base the preview gradient (really only useful for\n   * chroma).\n   */\n  @property({type: String}) color = '';\n\n  /**\n   * The type of HCT slider to display\n   */\n  @property({type: String}) type: 'hue' | 'chroma' | 'tone' = 'hue';\n\n  override render() {\n    let range = HUE_RANGE;\n\n    if (this.type === 'chroma') {\n      range = CHROMA_RANGE;\n    } else if (this.type === 'tone') {\n      range = TONE_RANGE;\n    }\n\n    return html`<section>\n      <span id=\"label\" class=\"color-on-surface-text\">${this.label}</span>\n      <md-slider\n        id=\"source\"\n        labeled\n        aria-label=${this.label}\n        .min=${range[0]}\n        .max=${range[1]}\n        .value=${this.value}\n        @input=${this.onInput}></md-slider>\n      <div\n        id=\"gradient\"\n        class=${this.type}\n        style=${styleMap({\n          background: this.buildGradient(),\n        })}></div>\n    </section>`;\n  }\n\n  private onInput(e: Event) {\n    const target = e.target as MdSlider;\n    this.value = target.value as number;\n\n    this.dispatchEvent(new Event('input'));\n  }\n\n  /**\n   * Generates the linear-gradient background image CSS string for the gradient\n   * preview under the slider.\n   *\n   * @return A linear gradient CSS string.\n   */\n  private buildGradient() {\n    const numStops = 100;\n\n    let linearGradientString = 'linear-gradient(to right';\n\n    if (this.type === 'hue') {\n      for (let i = 0; i < numStops; i++) {\n        const hue = (HUE_RANGE[1] / numStops) * i;\n        // Set chroma to something fairly saturated + tone in the middle of\n        // black and white so it's not too dark or too bright and vary the hue\n        const hex = hexFromHct(hue, 100, 50);\n        linearGradientString += `, ${hex} ${i}%`;\n      }\n    } else if (this.type === 'chroma') {\n      const hct = hctFromHex(this.color || '#000');\n      const hue = hct.hue;\n\n      for (let i = 0; i < numStops; i++) {\n        const chroma = (CHROMA_RANGE[1] / numStops) * i;\n        // Change the color of the bar to the current hue and set the tone to\n        // mid so we it's not too dark or too bright and vary the chroma\n        const hex = hexFromHct(hue, chroma, 50);\n        linearGradientString += `, ${hex} ${i}%`;\n      }\n    } else if (this.type === 'tone') {\n      for (let i = 0; i < numStops; i++) {\n        const tone = (TONE_RANGE[1] / numStops) * i;\n        // Set tone color to black (0 chroma means that hue doesn't matter) and\n        // vary the tone\n        const hex = hexFromHct(0, 0, tone);\n        linearGradientString += `, ${hex} ${i}%`;\n      }\n    }\n\n    linearGradientString += ')';\n\n    return linearGradientString;\n  }\n\n  static override styles = css`\n    section {\n      display: flex;\n      flex-direction: column;\n    }\n\n    #gradient {\n      height: 24px;\n      border-radius: 12px;\n      border: 1px solid currentColor;\n      box-sizing: border-box;\n    }\n\n    #gradient.chroma {\n      will-change: background;\n    }\n\n    #label,\n    #gradient {\n      margin-inline: calc(var(--md-slider-handle-width, 20px) / 2);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hct-slider': HCTSlider;\n  }\n}\n"
  },
  {
    "path": "catalog/src/components/nav-drawer.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {animate, fadeIn, fadeOut} from '@lit-labs/motion';\nimport {EASING} from '@material/web/internal/motion/animation.js';\nimport {LitElement, PropertyValues, css, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\n\nimport {drawerOpenSignal} from '../signals/drawer-open-state.js';\nimport {inertContentSignal, inertSidebarSignal} from '../signals/inert.js';\nimport {SignalElement} from '../signals/signal-element.js';\n\n/**\n * A layout element that positions the top-app-bar, the main page content, and\n * the side navigation drawer.\n *\n * The drawer will automatically set itself as collapsible at narrower page\n * widths, and position itself inline with the page at wider page widths. Most\n * importantly, this sidebar is SSR compatible.\n */\n@customElement('nav-drawer')\nexport class NavDrawer extends SignalElement(LitElement) {\n  /**\n   * Whether or not the side drawer is collapsible or inline.\n   */\n  @state() private isCollapsible = false;\n\n  /**\n   * Whether or not the TOC should be rendered.\n   */\n  @property({type: Boolean, attribute: 'has-toc'}) hasToc = false;\n\n  @property({attribute: 'page-title'}) pageTitle = '';\n\n  private lastDrawerOpen = drawerOpenSignal.value;\n\n  render() {\n    const showModal = this.isCollapsible && drawerOpenSignal.value;\n\n    // Values taken from internal material motion spec\n    const drawerSlideAnimationDuration = showModal ? 500 : 150;\n    const drawerContentOpacityDuration = showModal ? 300 : 150;\n    const scrimOpacityDuration = 150;\n\n    const drawerSlideAnimationEasing = showModal\n      ? EASING.EMPHASIZED\n      : EASING.EMPHASIZED_ACCELERATE;\n\n    return html`\n      <div class=\"root\">\n        <slot name=\"top-app-bar\"></slot>\n        <div class=\"body  ${drawerOpenSignal.value ? 'open' : ''}\">\n          <div class=\"spacer\" ?inert=${inertSidebarSignal.value}>\n            ${showModal\n              ? html`<div\n                  class=\"scrim\"\n                  @click=${this.onScrimClick}\n                  ${animate({\n                    properties: ['opacity'],\n                    keyframeOptions: {\n                      duration: scrimOpacityDuration,\n                      easing: 'linear',\n                    },\n                    in: fadeIn,\n                    out: fadeOut,\n                  })}></div>`\n              : nothing}\n            <aside\n              ?inert=${this.isCollapsible && !drawerOpenSignal.value}\n              ${animate({\n                properties: ['transform'],\n                keyframeOptions: {\n                  duration: drawerSlideAnimationDuration,\n                  easing: drawerSlideAnimationEasing,\n                },\n              })}>\n              <div class=\"scroll-wrapper\">\n                <slot\n                  ${animate({\n                    properties: ['opacity'],\n                    keyframeOptions: {\n                      duration: drawerContentOpacityDuration,\n                      easing: 'linear',\n                    },\n                  })}></slot>\n              </div>\n            </aside>\n          </div>\n          <div class=\"panes\">\n            ${this.renderTocPane(showModal)}${this.renderContent(showModal)}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderContent(showModal: boolean) {\n    return html` <div\n      class=\"pane content-pane\"\n      ?inert=${showModal || inertContentSignal.value}>\n      <div class=\"scroll-wrapper\">\n        <div class=\"content\">\n          <slot name=\"app-content\"></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n\n  private renderTocPane(showModal: boolean) {\n    if (!this.hasToc) {\n      return nothing;\n    }\n\n    return html` <div\n      class=\"pane toc\"\n      ?inert=${showModal || inertContentSignal.value}>\n      <div class=\"scroll-wrapper\">\n        <p>On this page:</p>\n        <h2>${this.pageTitle}</h2>\n        <slot name=\"toc\"></slot>\n      </div>\n    </div>`;\n  }\n\n  /**\n   * Closes the drawer on scrim click.\n   */\n  private onScrimClick() {\n    drawerOpenSignal.value = false;\n  }\n\n  firstUpdated() {\n    const queryResult = window.matchMedia('(max-width: 1500px)');\n    this.isCollapsible = queryResult.matches;\n\n    // Listen for page resizes to mark the drawer as collapsible.\n    queryResult.addEventListener('change', (e) => {\n      this.isCollapsible = e.matches;\n    });\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n    if (\n      this.lastDrawerOpen !== drawerOpenSignal.value &&\n      drawerOpenSignal.value &&\n      this.isCollapsible\n    ) {\n      (\n        this.querySelector(\n          'md-list.nav md-list-item[tabindex=\"0\"]',\n        ) as HTMLElement\n      )?.focus();\n    }\n  }\n\n  static styles = css`\n    :host {\n      --_drawer-width: var(--catalog-drawer-width, 300px);\n      /* When in wide mode inline start margin is handled by the sidebar */\n      --_pane-margin-inline-start: 0px;\n      --_pane-margin-inline-end: var(--catalog-spacing-l);\n      --_pane-margin-block-end: var(--catalog-spacing-l);\n      --_toc-pane-width: 250px;\n      min-height: 100dvh;\n      display: flex;\n      flex-direction: column;\n    }\n\n    ::slotted(nav) {\n      list-style: none;\n    }\n\n    .body {\n      display: flex;\n      flex-grow: 1;\n    }\n\n    .spacer {\n      position: relative;\n      transition: min-width 0.5s cubic-bezier(0.3, 0, 0, 1);\n    }\n\n    .spacer,\n    aside {\n      min-width: var(--_drawer-width);\n      max-width: var(--_drawer-width);\n    }\n\n    .pane {\n      box-sizing: border-box;\n      overflow: auto;\n      width: 100%;\n      /* Explicit height to make overflow work */\n      height: calc(\n        100dvh - var(--catalog-top-app-bar-height) -\n          var(--_pane-margin-block-end)\n      );\n      background-color: var(--md-sys-color-surface);\n      border-radius: var(--catalog-shape-xl);\n    }\n\n    .pane,\n    .panes {\n      /* emphasized – duration matching render fn for sidebar */\n      transition: 0.5s cubic-bezier(0.3, 0, 0, 1);\n      transition-property: margin, height, border-radius, max-width, width;\n    }\n\n    .panes {\n      display: flex;\n      justify-content: start;\n      flex-direction: row-reverse;\n      gap: var(--_pane-margin-inline-end);\n      margin-inline: var(--_pane-margin-inline-start)\n        var(--_pane-margin-inline-end);\n      width: 100%;\n      max-width: calc(\n        100% - var(--_drawer-width) - var(--_pane-margin-inline-start) -\n          var(--_pane-margin-inline-end)\n      );\n    }\n\n    .pane.content-pane {\n      flex-grow: 1;\n    }\n\n    .pane.toc {\n      width: auto;\n      box-sizing: border-box;\n      width: var(--_toc-pane-width);\n    }\n\n    .toc .scroll-wrapper {\n      padding-inline: var(--catalog-spacing-xl);\n    }\n\n    .pane.toc p {\n      margin-block: 0;\n      font-size: var(--catalog-label-s-font-size);\n    }\n\n    .pane.toc h2 {\n      margin-block: var(--catalog-spacing-s) var(--catalog-spacing-m);\n      font-size: var(--catalog-headline-s-font-size);\n    }\n\n    .content {\n      flex-grow: 1;\n      display: flex;\n      justify-content: center;\n      box-sizing: border-box;\n      padding-inline: var(--catalog-spacing-xl);\n      width: 100%;\n    }\n\n    .content slot {\n      display: block;\n      width: 100%;\n      max-width: min(100%, var(--_max-width));\n    }\n\n    aside {\n      transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);\n      position: fixed;\n      isolation: isolate;\n      inset: var(--catalog-top-app-bar-height) 0 0 0;\n      z-index: 12;\n      background-color: var(--md-sys-color-surface-container);\n      overflow: hidden;\n    }\n\n    .scroll-wrapper {\n      overflow-y: auto;\n      max-height: 100%;\n      border-radius: inherit;\n      box-sizing: border-box;\n    }\n\n    .pane .scroll-wrapper {\n      padding-block: var(--catalog-spacing-xl);\n    }\n\n    aside slot {\n      display: block;\n    }\n\n    .scrim {\n      background-color: rgba(0, 0, 0, 0.32);\n    }\n\n    @media (max-width: 900px) {\n      .pane.toc {\n        display: none;\n      }\n    }\n\n    @media (max-width: 1500px) {\n      .spacer {\n        min-width: 0px;\n      }\n\n      .panes {\n        max-width: calc(\n          100% - var(--_pane-margin-inline-start) -\n            var(--_pane-margin-inline-end)\n        );\n      }\n\n      .content {\n        max-width: 100vw;\n        padding-inline: var(--catalog-spacing-xl);\n      }\n\n      .scrim {\n        position: fixed;\n        inset: 0;\n      }\n\n      aside {\n        transition: unset;\n        transform: translateX(-100%);\n        border-radius: 0 var(--catalog-shape-xl) var(--catalog-shape-xl) 0;\n      }\n\n      :host {\n        --_pane-margin-inline-start: var(--catalog-spacing-xl);\n      }\n\n      .open aside {\n        transform: translateX(0);\n      }\n\n      aside slot {\n        opacity: 0;\n      }\n\n      .open aside slot {\n        opacity: 1;\n      }\n\n      .open .scrim {\n        inset: 0;\n        z-index: 11;\n      }\n    }\n\n    @media (max-width: 600px) {\n      .pane {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n      }\n\n      :host {\n        --_pane-margin-block-end: 0px;\n        --_pane-margin-inline-start: 0px;\n        --_pane-margin-inline-end: 0px;\n      }\n    }\n\n    /* On desktop, make the scrollbars less blocky so you can see the border\n     * radius of the pane. On most mobile platforms, these scrollbars are hidden\n     * by default. It'll still unfortunately render on top of the border radius.\n     */\n    @media (pointer: fine) {\n      :host {\n        --_scrollbar-width: 8px;\n      }\n\n      .scroll-wrapper {\n        /* firefox */\n        scrollbar-color: var(--md-sys-color-primary) transparent;\n        scrollbar-width: thin;\n      }\n\n      .content {\n        /* adjust for the scrollbar width */\n        padding-inline-end: calc(\n          var(--catalog-spacing-xl) - var(--_scrollbar-width)\n        );\n      }\n\n      /* Chromium + Safari */\n      .scroll-wrapper::-webkit-scrollbar {\n        background-color: transparent;\n        width: var(--_scrollbar-width);\n      }\n\n      .scroll-wrapper::-webkit-scrollbar-thumb {\n        background-color: var(--md-sys-color-primary);\n        border-radius: calc(var(--_scrollbar-width) / 2);\n      }\n    }\n\n    @media (forced-colors: active) {\n      .pane {\n        border: 1px solid CanvasText;\n      }\n\n      @media (max-width: 1500px) {\n        aside {\n          box-sizing: border-box;\n          border: 1px solid CanvasText;\n        }\n\n        .scrim {\n          background-color: rgba(0, 0, 0, 0.75);\n        }\n      }\n\n      @media (pointer: fine) {\n        .scroll-wrapper {\n          /* firefox */\n          scrollbar-color: CanvasText transparent;\n        }\n\n        .scroll-wrapper::-webkit-scrollbar-thumb {\n          /* Chromium + Safari */\n          background-color: CanvasText;\n        }\n      }\n    }\n  `;\n}\n"
  },
  {
    "path": "catalog/src/components/theme-changer.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/labs/segmentedbutton/outlined-segmented-button.js';\nimport '@material/web/labs/segmentedbuttonset/outlined-segmented-button-set.js';\nimport './copy-code-button.js';\nimport './hct-slider.js';\n\nimport type {MdOutlinedSegmentedButton} from '@material/web/labs/segmentedbutton/outlined-segmented-button.js';\nimport {css, html, LitElement} from 'lit';\nimport {customElement, query, queryAll, state} from 'lit/decorators.js';\nimport {live} from 'lit/directives/live.js';\n\nimport {ChangeColorEvent, ChangeDarkModeEvent} from '../types/color-events.js';\nimport {hctFromHex, hexFromHct} from '../utils/material-color-helpers.js';\nimport type {ColorMode} from '../utils/theme.js';\nimport {\n  getCurrentMode,\n  getCurrentSeedColor,\n  getCurrentThemeString,\n} from '../utils/theme.js';\n\nimport type {HCTSlider} from './hct-slider.js';\n\n/**\n * A small set of controls that allows the user to change the theme and preview\n * color values.\n */\n@customElement('theme-changer')\nexport class ThemeChanger extends LitElement {\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The currently selected color mode.\n   */\n  @state() selectedColorMode: ColorMode | null = null;\n\n  /**\n   * The currently selected hex color.\n   *\n   * NOTE: Hex colors are in the srgb color space and HCT has a much larger, so\n   * this value is a clipped value of HCT.\n   */\n  @state() hexColor = '';\n\n  /**\n   * The current hue value of the hue slider.\n   */\n  @state() hue = 0;\n\n  /**\n   * The crrent value of the chroma slider.\n   */\n  @state() chroma = 0;\n\n  /**\n   * The current value of the tone slider.\n   */\n  @state() tone = 0;\n\n  @query('input') private inputEl!: HTMLInputElement;\n  @queryAll('hct-slider') private sliders!: NodeListOf<HCTSlider>;\n\n  render() {\n    return html`\n      <div id=\"head-wrapper\">\n        <h2> Theme Controls </h2>\n        <copy-code-button\n          button-title=\"Copy current theme to clipboard\"\n          label=\"Copy current theme\"\n          .getCopyText=${getCurrentThemeString}>\n        </copy-code-button>\n      </div>\n      ${this.renderHexPicker()} ${this.renderHctPicker()}\n      ${this.renderColorModePicker()}\n    `;\n  }\n\n  /**\n   * Renders a circular native color picker with a focus ring.\n   */\n  protected renderHexPicker() {\n    return html`<div>\n      <label id=\"hex\" for=\"color-input\">\n        <span class=\"label\">Hex Source Color</span>\n        <span class=\"input-wrapper\">\n          <div class=\"overflow\">\n            <input\n              id=\"color-input\"\n              @input=${this.onHexPickerInput}\n              type=\"color\"\n              .value=${live(this.hexColor)} />\n          </div>\n          <md-focus-ring for=\"color-input\"></md-focus-ring>\n        </span>\n      </label>\n    </div>`;\n  }\n\n  /**\n   * Renders the three hct color pickers.\n   */\n  private renderHctPicker() {\n    return html`<div class=\"sliders\">\n      <hct-slider\n        .value=${live(this.hue)}\n        type=\"hue\"\n        label=\"Hue\"\n        max=\"360\"\n        @input=${this.onSliderInput}></hct-slider>\n      <hct-slider\n        .value=${live(this.chroma)}\n        .color=${this.hexColor}\n        type=\"chroma\"\n        label=\"Chroma\"\n        max=\"150\"\n        @input=${this.onSliderInput}></hct-slider>\n      <hct-slider\n        .value=${live(this.tone)}\n        type=\"tone\"\n        label=\"Tone\"\n        max=\"100\"\n        @input=${this.onSliderInput}></hct-slider>\n    </div>`;\n  }\n\n  /**\n   * Renders the color mode segmented button set picker.\n   */\n  private renderColorModePicker() {\n    return html`<md-outlined-segmented-button-set\n      @segmented-button-set-selection=${this.onColorModeSelection}\n      aria-label=\"Color mode\">\n      ${this.renderModeButton('dark', 'dark_mode')}\n      ${this.renderModeButton('auto', 'brightness_medium')}\n      ${this.renderModeButton('light', 'light_mode')}\n    </md-outlined-segmented-button-set>`;\n  }\n\n  /**\n   * Renders a color mode segmented button.\n   *\n   * @param mode Sets the value and the title of the button to the given color\n   *     mode.\n   * @param icon The icon to display in the button.\n   */\n  private renderModeButton(mode: ColorMode, icon: string) {\n    return html`<md-outlined-segmented-button\n      data-value=${mode}\n      title=${mode}\n      aria-label=\"${mode} color scheme\"\n      .selected=${this.selectedColorMode === mode}>\n      <md-icon slot=\"icon\">${icon}</md-icon>\n    </md-outlined-segmented-button>`;\n  }\n\n  private onSliderInput() {\n    for (const slider of this.sliders) {\n      this[slider.type] = slider.value;\n    }\n\n    this.hexColor = hexFromHct(this.hue, this.chroma, this.tone);\n    this.dispatchEvent(new ChangeColorEvent(this.hexColor));\n  }\n\n  /**\n   * Updates the HCT sliders by converting a hex color to HCT.\n   *\n   * @param hexColor The hex color to convert to HCT and update the sliders.\n   */\n  private updateHctFromHex(hexColor: string) {\n    const hct = hctFromHex(hexColor);\n    this.hue = hct.hue;\n    this.chroma = hct.chroma;\n    this.tone = hct.tone;\n  }\n\n  private onHexPickerInput() {\n    this.hexColor = this.inputEl.value;\n    this.updateHctFromHex(this.hexColor);\n    this.dispatchEvent(new ChangeColorEvent(this.hexColor));\n  }\n\n  async firstUpdated() {\n    if (!this.selectedColorMode) {\n      // localStorage is not available on server so must do this here.\n      this.selectedColorMode = getCurrentMode();\n    }\n\n    if (!this.hexColor) {\n      // localStorage is not available on server so must do this here.\n      this.hexColor = getCurrentSeedColor()!;\n    }\n\n    this.updateHctFromHex(this.hexColor);\n  }\n\n  private onColorModeSelection(\n    e: CustomEvent<{\n      button: MdOutlinedSegmentedButton;\n      selected: boolean;\n      index: number;\n    }>,\n  ) {\n    const {button} = e.detail;\n    const value = button.dataset.value as ColorMode;\n    this.selectedColorMode = value;\n    this.dispatchEvent(new ChangeDarkModeEvent(value));\n  }\n\n  static styles = css`\n    :host {\n      /* These are the default values, but we don't want the alignment to break\n       * in case the token values are updated.\n       */\n      --_copy-button-button-size: 40px;\n      --_copy-button-icon-size: 24px;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      margin: var(--catalog-spacing-m) var(--catalog-spacing-l);\n    }\n\n    :host > * {\n      margin-block-end: var(--catalog-spacing-l);\n    }\n\n    :host > *:last-child {\n      margin-block-end: 0;\n    }\n\n    #head-wrapper {\n      display: flex;\n      align-items: space-between;\n    }\n\n    input {\n      border: none;\n      background: none;\n    }\n\n    .sliders,\n    #hex {\n      padding-inline: var(--catalog-spacing-m);\n      border-radius: var(--catalog-shape-l);\n      background-color: var(--md-sys-color-surface-variant);\n      color: var(--md-sys-color-on-surface-variant);\n\n      /* Default track color is inaccessible in a surface-variant */\n      --md-slider-inactive-track-color: var(--md-sys-color-on-surface-variant);\n    }\n\n    hct-slider {\n      display: block;\n      margin-block: 24px;\n    }\n\n    h2 {\n      margin: 0;\n      text-align: center;\n      position: relative;\n      height: var(--_copy-button-icon-size);\n    }\n\n    copy-code-button {\n      --md-icon-button-icon-size: var(--_copy-button-icon-size);\n      --md-icon-button-state-layer-width: var(--_copy-button-button-size);\n      --md-icon-button-state-layer-height: var(--_copy-button-button-size);\n      /*\n       * Center the copy icon with the h2 text\n       * -(icon button size - intrinsic icon size) / 2\n       */\n      --_inline-block-inset: calc(\n        -1 * (var(--_copy-button-button-size) - var(--_copy-button-icon-size)) /\n          2\n      );\n      --catalog-copy-code-button-inset: var(--_inline-block-inset) 0 auto auto;\n      position: static;\n    }\n\n    #hex {\n      display: flex;\n      padding: 12px;\n      align-items: center;\n    }\n\n    #hex .label {\n      flex-grow: 1;\n    }\n\n    #hex .input-wrapper {\n      box-sizing: border-box;\n      width: 48px;\n      height: 48px;\n      box-sizing: border-box;\n      border: 1px solid var(--md-sys-color-on-secondary-container);\n      position: relative;\n    }\n\n    #hex .input-wrapper,\n    #hex md-focus-ring {\n      border-radius: 50%;\n    }\n\n    .overflow {\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    #hex input {\n      min-width: 200%;\n      min-height: 200%;\n    }\n\n    @media (forced-colors: active) {\n      #hex,\n      .sliders {\n        box-sizing: border-box;\n        border: 1px solid CanvasText;\n      }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'theme-changer': ThemeChanger;\n  }\n}\n"
  },
  {
    "path": "catalog/src/components/top-app-bar.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\n\nimport type {MdIconButton} from '@material/web/iconbutton/icon-button.js';\nimport {css, html, LitElement} from 'lit';\nimport {customElement, query, state} from 'lit/decorators.js';\nimport {live} from 'lit/directives/live.js';\n\nimport {drawerOpenSignal} from '../signals/drawer-open-state.js';\nimport {inertContentSignal, inertSidebarSignal} from '../signals/inert.js';\nimport {SignalElement} from '../signals/signal-element.js';\nimport {materialDesign} from '../svg/material-design-logo.js';\n\n/**\n * Top app bar of the catalog.\n */\n@customElement('top-app-bar')\nexport class TopAppBar extends SignalElement(LitElement) {\n  /**\n   * Whether or not the color picker menu is open.\n   */\n  @state() private menuOpen = false;\n  @query('theme-changer') private themeChanger!: HTMLElement;\n\n  render() {\n    return html`\n      <header>\n        <div class=\"default-content\">\n          <section class=\"start\">\n            <md-icon-button\n              toggle\n              class=\"menu-button\"\n              aria-label-selected=\"open navigation menu\"\n              aria-label=\"close navigation menu\"\n              aria-expanded=${drawerOpenSignal.value ? 'false' : 'true'}\n              title=\"${!drawerOpenSignal.value\n                ? 'Open'\n                : 'Close'} navigation menu\"\n              .selected=${live(!drawerOpenSignal.value)}\n              @input=${this.onMenuIconToggle}>\n              <md-icon slot=\"selected\">menu</md-icon>\n              <md-icon>menu_open</md-icon>\n            </md-icon-button>\n            <md-icon-button\n              href=\"/\"\n              class=\"home-button\"\n              title=\"Home\"\n              aria-label=\"Home\">\n              ${materialDesign}\n            </md-icon-button>\n          </section>\n\n          <a href=\"/\" id=\"home-link\">\n            Material Web\n            <md-focus-ring for=\"home-link\"></md-focus-ring>\n          </a>\n\n          <a id=\"skip-to-main\" href=\"#main-content\" tabindex=\"0\">\n            Skip to main content\n          </a>\n\n          <section class=\"end\">\n            <lit-island\n              on:interaction=\"pointerenter,focusin,pointerdown\"\n              import=\"/js/hydration-entrypoints/menu.js\"\n              id=\"menu-island\">\n              <md-icon-button\n                title=\"GitHub repository\"\n                aria-label=\"GitHub repository\"\n                href=\"https://github.com/material-components/material-web\"\n                target=\"_blank\">\n                <md-icon>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 98 96\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z\" />\n                  </svg>\n                </md-icon>\n              </md-icon-button>\n              <md-icon-button\n                id=\"theme-button\"\n                @click=\"${this.onPaletteClick}\"\n                title=\"Page theme controls\"\n                aria-label=\"Page theme controls\"\n                aria-haspopup=\"dialog\"\n                aria-expanded=${this.menuOpen ? 'true' : 'false'}>\n                <md-icon>palette</md-icon>\n              </md-icon-button>\n              <md-menu\n                anchor=\"theme-button\"\n                menu-corner=\"start-end\"\n                anchor-corner=\"end-end\"\n                default-focus=\"none\"\n                role=\"dialog\"\n                aria-label=\"Page color theme controls\"\n                .open=${this.menuOpen}\n                @opened=${this.onMenuOpened}\n                @closed=${this.onMenuClosed}\n                @keydown=${this.onKeydown}>\n                <theme-changer></theme-changer>\n              </md-menu>\n            </lit-island>\n          </section>\n        </div>\n        <slot></slot>\n      </header>\n    `;\n  }\n\n  /**\n   * Opens the theme changer menu and inerts the rest of the page.\n   */\n  private onPaletteClick() {\n    this.menuOpen = true;\n    inertContentSignal.value = true;\n    inertSidebarSignal.value = true;\n    drawerOpenSignal.value = false;\n  }\n\n  /**\n   * Syncs current menu state with actual menu state and makes the rest of the\n   * page interactive again.\n   */\n  private onMenuClosed() {\n    this.menuOpen = false;\n    inertContentSignal.value = false;\n    inertSidebarSignal.value = false;\n  }\n\n  private onMenuOpened() {\n    this.themeChanger.focus();\n  }\n\n  private onKeydown(e: KeyboardEvent) {\n    if (!e.defaultPrevented && e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n    }\n  }\n\n  /**\n   * Toggles the sidebar's open state.\n   */\n  private onMenuIconToggle(e: InputEvent) {\n    drawerOpenSignal.value = !(e.target as MdIconButton).selected;\n  }\n\n  static styles = css`\n    :host,\n    header {\n      display: block;\n      height: var(--catalog-top-app-bar-height);\n    }\n\n    header {\n      position: fixed;\n      inset: 0 0 auto 0;\n      display: flex;\n      align-items: center;\n      box-sizing: border-box;\n      padding: var(--catalog-spacing-m) var(--catalog-spacing-l);\n      background-color: var(--md-sys-color-surface-container);\n      color: var(--md-sys-color-on-surface);\n      z-index: 12;\n    }\n\n    .default-content {\n      width: 100%;\n      display: flex;\n      align-items: center;\n    }\n\n    md-icon-button:not(:defined) {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      visibility: hidden;\n    }\n\n    md-icon-button * {\n      display: block;\n    }\n\n    a {\n      color: var(--md-sys-color-primary);\n      font-size: max(var(--catalog-title-l-font-size), 22px);\n      text-decoration: none;\n      padding-inline: 12px;\n      position: relative;\n      outline: none;\n      vertical-align: middle;\n    }\n\n    .start .menu-button {\n      display: none;\n    }\n\n    .start .home-button * {\n      color: var(--md-sys-color-primary);\n    }\n\n    .end {\n      flex-grow: 1;\n      display: flex;\n      justify-content: flex-end;\n    }\n\n    #menu-island {\n      position: relative;\n    }\n\n    #skip-to-main {\n      padding: var(--catalog-spacing-s);\n      border-radius: var(--catalog-shape-m);\n      background-color: var(--md-sys-color-inverse-surface);\n      color: var(--md-sys-color-inverse-on-surface);\n      opacity: 0;\n      position: absolute;\n      pointer-events: none;\n    }\n\n    #skip-to-main:focus-visible {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    @media (max-width: 1500px) {\n      .start .home-button {\n        display: none;\n      }\n\n      .start .menu-button {\n        display: flex;\n      }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'top-app-bar': TopAppBar;\n  }\n}\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/button.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/elevated-button.js';\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/filled-tonal-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/text-button.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/checkbox.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/checkbox/checkbox.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/fab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/fab/branded-fab.js';\nimport '@material/web/fab/fab.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/icon-button.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/iconbutton/filled-icon-button.js';\nimport '@material/web/iconbutton/filled-tonal-icon-button.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/iconbutton/outlined-icon-button.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/list.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/list/list.js';\nimport '@material/web/list/list-item.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/menu.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/filled-button.js';\nimport '@material/web/menu/menu.js';\nimport '@material/web/menu/menu-item.js';\nimport '@material/web/menu/sub-menu.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/select.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport '@material/web/select/select-option.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/components/text-field.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/textfield/filled-text-field.js';\nimport '@material/web/textfield/outlined-text-field.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/copy-code-button.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../components/copy-code-button.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/menu.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/menu/menu.js';\nimport '../components/theme-changer.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/navigation.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/list/list.js';\nimport '@material/web/list/list-item.js';\nimport '../components/nav-drawer.js';\nimport '../components/top-app-bar.js';\n"
  },
  {
    "path": "catalog/src/hydration-entrypoints/playground-elements.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport 'playground-elements/playground-file-editor.js';\nimport 'playground-elements/playground-preview.js';\nimport 'playground-elements/playground-project.js';\n"
  },
  {
    "path": "catalog/src/inline/apply-saved-theme.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {applyThemeString} from '../utils/apply-theme-string.js';\n\n// Checks if there has been a theme already generated from a prior visit\nconst lastThemeString = localStorage.getItem('material-theme');\n\n// Applies the theme string to the document if available.\nif (lastThemeString) {\n  applyThemeString(document, lastThemeString);\n}\n"
  },
  {
    "path": "catalog/src/pages/components.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/iconbutton/outlined-icon-button.js';\n\nimport {MdOutlinedIconButton} from '@material/web/iconbutton/outlined-icon-button.js';\nimport type {PlaygroundPreview} from 'playground-elements/playground-preview.js';\nimport {PostDoc} from 'postdoc-lib';\n\nimport {getCurrentThemeString} from '../utils/theme.js';\n\n/**\n * Gets the iframe of a playground preview, and updates the iframe communication\n * library to communicate with the new window on each iframe reload.\n *\n * @param postdoc The instance of the iframe communication library.\n * @param previewEl An element reference to the playground preview element.\n */\nasync function updateMessageTargetOnIframeLoad(\n  postdoc: PostDoc,\n  previewEl: PlaygroundPreview,\n) {\n  await previewEl.updateComplete;\n  const iframe = previewEl.iframe!;\n\n  iframe.addEventListener('load', (e: Event) => {\n    postdoc.messageTarget = iframe.contentWindow;\n  });\n}\n\n/**\n * Synchronizes the playground's theme with the material theme applied to the\n * current page every time the playground reloads.\n */\nasync function syncPlaygroundThemeWithPage() {\n  async function onPlaygroundMessage(e: MessageEvent) {\n    // if the playground is requesting a new theme, send it the current one\n    // from localStorage\n    if (e.data === 'request-theme') {\n      await postdoc.handshake;\n      postdoc.postMessage(getCurrentThemeString());\n    }\n  }\n\n  // Initialize the iframe communication library\n  const postdoc = new PostDoc({\n    messageReceiver: window,\n    onMessage: onPlaygroundMessage,\n  });\n\n  const previewEl = document.querySelector('playground-preview');\n\n  if (!previewEl) {\n    return;\n  }\n\n  await customElements.whenDefined('playground-preview');\n  await updateMessageTargetOnIframeLoad(postdoc, previewEl);\n  await postdoc.handshake;\n\n  // Whenever the theme changes, send it to the playground iframe.\n  window.addEventListener('theme-changed', async () => {\n    await postdoc.handshake;\n    postdoc.postMessage(localStorage.getItem('material-theme'));\n  });\n}\n\n/**\n * Synchronizes the state of the native <details> for the demo dropdown with the\n * slotted <md-outlined-icon-button>. Also deals with some quicks of buttons in\n * <summary> elements\n */\nfunction demoDropdown() {\n  const detailsEl = document.querySelector('details');\n\n  // tslint:disable:no-unnecessary-type-assertion TSC externally seems to differ\n  // from internal here and needs these type assertions\n  const expandButton = detailsEl?.querySelector(\n    'summary md-outlined-icon-button',\n  ) as MdOutlinedIconButton;\n  // tslint:enable:no-unnecessary-type-assertion\n\n  // Synchronize details open state with toggle button\n  detailsEl?.addEventListener('toggle', () => {\n    expandButton!.selected = detailsEl.open;\n  });\n\n  // Toggles the details element because buttons \"eat up\" the <summary> click\n  // except on Safari. So we have to setTimeout to check if the details element\n  // has updated.\n  expandButton?.addEventListener('click', () => {\n    setTimeout(() => {\n      if (detailsEl?.open !== expandButton.selected) {\n        detailsEl!.toggleAttribute('open');\n      }\n    });\n  });\n}\n\nsyncPlaygroundThemeWithPage();\ndemoDropdown();\n"
  },
  {
    "path": "catalog/src/pages/global.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview This file runs logic across every page in the SSG'd catalog and\n * is loaded top-level as a <script type=module>. So this file handles\n * global client-side logic for shared components (e.g. top-app bar) that can't\n * be run on the server in SSR such as accessing localstorage, media queries,\n * and global scroll listeners.\n */\n\nimport {\n  changeColor,\n  changeColorAndMode,\n  changeColorMode,\n  getCurrentMode,\n  getCurrentSeedColor,\n  getCurrentThemeString,\n  getLastSavedAutoColorMode,\n  isModeDark,\n} from '../utils/theme.js';\n\n/**\n * Applies theme-based event listeners such as changing color, mode, and\n * listening to system mode changes.\n */\nfunction applyColorThemeListeners() {\n  document.body.addEventListener('change-color', (event) => {\n    changeColor(event.color);\n  });\n\n  document.body.addEventListener('change-mode', (event) => {\n    changeColorMode(event.mode);\n  });\n\n  // Listen for system color change and applies the new theme if the current\n  // color mode is 'auto'.\n  window\n    .matchMedia('(prefers-color-scheme: dark)')\n    .addEventListener('change', () => {\n      if (getCurrentMode() !== 'auto') {\n        return;\n      }\n\n      changeColor(getCurrentSeedColor()!);\n    });\n}\n\n/**\n * Sets color and mode to '#81ea6c' and 'auto' respectively if there is no\n * material theme saved to localStorage. This is the case in initial navigation\n * to the catalog.\n */\nfunction initializeTheme() {\n  if (!getCurrentThemeString()) {\n    // Generates a primary color close to GM3 baseline primary color.\n    changeColorAndMode('#ECAA2E', 'auto');\n  }\n}\n\n/**\n * Determines whether to update the theme on page navigation if the mode is\n * 'auto'.\n *\n * This is necessary in the edge case where the user has set color mode to\n * 'auto', and the system mode is A. They navigate away from the catalog, and\n * over time the system mode changes to B. When they navigate back to the\n * catalog, the mode may be 'auto', but color theme with mode A is saved instead\n * of B.\n */\nfunction determinePageNavigationAutoMode() {\n  if (getCurrentMode() !== 'auto') {\n    return;\n  }\n\n  const actualColorMode = isModeDark('auto', false) ? 'dark' : 'light';\n  const lastSavedAutoColorMode = getLastSavedAutoColorMode();\n\n  if (actualColorMode !== lastSavedAutoColorMode) {\n    // Recalculate auto mode with the same theme color.\n    changeColorMode('auto');\n  }\n}\n\napplyColorThemeListeners();\ninitializeTheme();\ndeterminePageNavigationAutoMode();\n"
  },
  {
    "path": "catalog/src/pages/home-page.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// this is used in /site/index.html\n// Note: implement when we decide to add stuff to home page\n"
  },
  {
    "path": "catalog/src/pages/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../components/drag-playground.js';\n"
  },
  {
    "path": "catalog/src/signals/drawer-open-state.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {signal} from './signal-element.js';\n\n/**\n * Whether or not the sidebar drawer should be open.\n */\nexport const drawerOpenSignal = signal(false);\n"
  },
  {
    "path": "catalog/src/signals/inert.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {signal} from './signal-element.js';\n\n/**\n * Whether or not the site content should be inert (sidebar is still\n * interactive).\n */\nexport const inertContentSignal = signal(false);\n\n/**\n * Whether or not the sidebar should be inert.\n */\nexport const inertSidebarSignal = signal(false);\n"
  },
  {
    "path": "catalog/src/signals/signal-element.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {effect} from '@preact/signals-core';\nimport type {ReactiveElement} from 'lit';\n\nexport {signal} from '@preact/signals-core';\n\n// params that are going to be passed into any child extending SignalElement\n// tslint:disable-next-line:no-any We do not know the types of constructor\ntype ReactiveElementConstructor = new (...args: any[]) => ReactiveElement;\n\n/**\n * A mixin that hooks Preact signal changes to ReactiveElement.\n *\n * @param Base The class to mix-in and listen to Preact signal changes.\n */\nexport function SignalElement<T extends ReactiveElementConstructor>(\n  Base: T,\n): T {\n  return class SignalElement extends Base {\n    private _disposeEffect?: () => void;\n\n    performUpdate() {\n      if (!this.isUpdatePending) {\n        return;\n      }\n      this._disposeEffect?.();\n      let performingUpdate = true;\n      this._disposeEffect = effect(() => {\n        if (performingUpdate) {\n          performingUpdate = false;\n          super.performUpdate();\n        } else {\n          this.requestUpdate();\n        }\n      });\n    }\n  };\n}\n"
  },
  {
    "path": "catalog/src/ssr-utils/dsd-polyfill.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Declarative shadow dom polyfill\nimport {hydrateShadowRoots} from '@webcomponents/template-shadowroot/template-shadowroot.js';\n\nif (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {\n  hydrateShadowRoots(document.body);\n}\ndocument.body.removeAttribute('dsd-pending');\n"
  },
  {
    "path": "catalog/src/ssr-utils/lit-hydrate-support.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Must be loaded before any lit element see /site/_includes/default.html for\n// usage. Allows hydrating SSRd lit elements.\nimport '@lit-labs/ssr-client/lit-element-hydrate-support.js';\n"
  },
  {
    "path": "catalog/src/ssr-utils/lit-island.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Island} from '@11ty/is-land';\n\ncustomElements.define(\n  'lit-island',\n  class extends Island {\n    // Removes the feature in which 11ty island removes DOM to render a fallback.\n    override forceFallback() {}\n  },\n);\n"
  },
  {
    "path": "catalog/src/ssr.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This file imports only files that will be SSRd e.g. if you can't SSR a\n// component, don't import it here.\nimport '@material/web/all.js';\nimport './components/catalog-component-header.js';\nimport './components/catalog-component-header-title.js';\nimport './components/nav-drawer.js';\nimport './components/theme-changer.js';\nimport './components/top-app-bar.js';\nimport './components/drag-playground.js';\n// 🤫\nimport '@material/web/labs/item/item.js';\n"
  },
  {
    "path": "catalog/src/svg/material-design-logo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\n/**\n * The Material design logo.\n *\n * Source: Internal google symbols search.\n */\nexport const materialDesign = html` <svg\n  viewBox=\"0 96 960 960\"\n  fill=\"currentColor\">\n  <path\n    d=\"M480 1016q-91 0-171-34.5T169 887q-60-60-94.5-140T40 576q0-91 34.5-171T169 265q60-60 140-94.5T480 136q91 0 171 34.5T791 265q60 60 94.5 140T920 576q0 91-34.5 171T791 887q-60 60-140 94.5T480 1016ZM200 802V351q-38 47-59 104t-21 121q0 65 21 122t59 104Zm54-506h452q-47-38-104-59t-122-21q-65 0-122 21t-104 59Zm226 381 151-301H330l150 301Zm40 99h160V456L520 776Zm-240 0h160L280 456v320Zm200 160q64 0 121.5-21T706 856H254q47 38 104.5 59T480 936Zm280-134q38-47 59-104t21-122q0-64-21-121t-59-104v451Z\" />\n</svg>`;\n"
  },
  {
    "path": "catalog/src/types/color-events.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A theme mapping of token name (not custom property name) to stringified CSS\n * value.\n */\nexport interface Theme {\n  [tokenName: string]: string;\n}\n\n/**\n * Requests the global theme listener change the theme due to a color change.\n */\nexport class ChangeColorEvent extends Event {\n  /**\n   * @param color The new source color to apply.\n   */\n  constructor(public color: string) {\n    super('change-color', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Requests the global theme listener change the theme due to a dark mode\n * change.\n */\nexport class ChangeDarkModeEvent extends Event {\n  /**\n   * @param mode The new color mode to apply.\n   */\n  constructor(public mode: 'light' | 'dark' | 'auto') {\n    super('change-mode', {bubbles: true, composed: true});\n  }\n}\n\ndeclare global {\n  interface HTMLElementEventMap {\n    'change-color': ChangeColorEvent;\n    'change-mode': ChangeDarkModeEvent;\n  }\n}\n"
  },
  {
    "path": "catalog/src/types/is-land.d.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\ndeclare module '@11ty/is-land' {\n  export class Island extends HTMLElement {\n    forceFallback(): void;\n  }\n}\n"
  },
  {
    "path": "catalog/src/utils/apply-theme-string.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\ntype WithStylesheet = typeof globalThis & {\n  [stylesheetName: string]: CSSStyleSheet | undefined;\n};\n\n/**\n * Applies a stringified CSS theme to a document or shadowroot by creating or\n * reusing a constructable stylesheet. It also saves the themeString to\n * localstorage.\n *\n * NOTE: This function is inlined into the head of the document for performance\n * reasons as well as used by material-color-helpers which is lazily loaded. So\n * do not overload this file with slow logic since it will block render.\n *\n * @param doc Document or ShadowRoot to apply theme.\n * @param themeString Stringified CSS of a material theme to apply to the given\n *     document or shadowroot.\n * @param ssName Optional global identifier of the constructable stylesheet and\n *     used to generate the localstorage name.\n */\nexport function applyThemeString(\n  doc: DocumentOrShadowRoot,\n  themeString: string,\n  ssName = 'material-theme',\n) {\n  // Get constructable stylesheet\n  let sheet = (globalThis as WithStylesheet)[ssName];\n  // Create a new sheet if it doesn't exist already and save it globally.\n  if (!sheet) {\n    sheet = new CSSStyleSheet();\n    (globalThis as WithStylesheet)[ssName] = sheet;\n    doc.adoptedStyleSheets.push(sheet);\n  }\n\n  // Set the color of the URL bar because we are cool like that.\n  const surfaceContainer = themeString.match(\n    /--md-sys-color-surface-container:(.+?);/,\n  )?.[1];\n  if (surfaceContainer) {\n    document\n      .querySelector('meta[name=\"theme-color\"]')\n      ?.setAttribute('content', surfaceContainer);\n  }\n\n  sheet.replaceSync(themeString);\n  localStorage.setItem(ssName, themeString);\n}\n"
  },
  {
    "path": "catalog/src/utils/material-color-helpers.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  argbFromHex,\n  Hct,\n  hexFromArgb,\n  MaterialDynamicColors,\n  SchemeContent,\n} from '@material/material-color-utilities';\n\nimport type {Theme} from '../types/color-events.js';\n\nimport {applyThemeString} from './apply-theme-string.js';\n\n/**\n * A Mapping of color token name to MCU HCT color function generator.\n */\nconst materialColors = {\n  background: MaterialDynamicColors.background,\n  'on-background': MaterialDynamicColors.onBackground,\n  surface: MaterialDynamicColors.surface,\n  'surface-dim': MaterialDynamicColors.surfaceDim,\n  'surface-bright': MaterialDynamicColors.surfaceBright,\n  'surface-container-lowest': MaterialDynamicColors.surfaceContainerLowest,\n  'surface-container-low': MaterialDynamicColors.surfaceContainerLow,\n  'surface-container': MaterialDynamicColors.surfaceContainer,\n  'surface-container-high': MaterialDynamicColors.surfaceContainerHigh,\n  'surface-container-highest': MaterialDynamicColors.surfaceContainerHighest,\n  'on-surface': MaterialDynamicColors.onSurface,\n  'surface-variant': MaterialDynamicColors.surfaceVariant,\n  'on-surface-variant': MaterialDynamicColors.onSurfaceVariant,\n  'inverse-surface': MaterialDynamicColors.inverseSurface,\n  'inverse-on-surface': MaterialDynamicColors.inverseOnSurface,\n  outline: MaterialDynamicColors.outline,\n  'outline-variant': MaterialDynamicColors.outlineVariant,\n  shadow: MaterialDynamicColors.shadow,\n  scrim: MaterialDynamicColors.scrim,\n  'surface-tint': MaterialDynamicColors.surfaceTint,\n  primary: MaterialDynamicColors.primary,\n  'on-primary': MaterialDynamicColors.onPrimary,\n  'primary-container': MaterialDynamicColors.primaryContainer,\n  'on-primary-container': MaterialDynamicColors.onPrimaryContainer,\n  'inverse-primary': MaterialDynamicColors.inversePrimary,\n  secondary: MaterialDynamicColors.secondary,\n  'on-secondary': MaterialDynamicColors.onSecondary,\n  'secondary-container': MaterialDynamicColors.secondaryContainer,\n  'on-secondary-container': MaterialDynamicColors.onSecondaryContainer,\n  tertiary: MaterialDynamicColors.tertiary,\n  'on-tertiary': MaterialDynamicColors.onTertiary,\n  'tertiary-container': MaterialDynamicColors.tertiaryContainer,\n  'on-tertiary-container': MaterialDynamicColors.onTertiaryContainer,\n  error: MaterialDynamicColors.error,\n  'on-error': MaterialDynamicColors.onError,\n  'error-container': MaterialDynamicColors.errorContainer,\n  'on-error-container': MaterialDynamicColors.onErrorContainer,\n};\n\n/**\n * Converts a hex value to a HCT tuple.\n *\n * @param value A stringified hex color e.g. '#C01075'\n * @return Material Color Utilities HCT color tuple.\n */\nexport function hctFromHex(value: string) {\n  return Hct.fromInt(argbFromHex(value));\n}\n\n/**\n * Converts a hue chroma and tone to a hex color value clamped in the hex\n * colorspace.\n *\n * @param hue The hue of the color of value [0,360]\n * @param chroma The chroma of the color of value [0,150]\n * @param tone The tone of the color of value [0,100]\n * @return A clamped, stringified hex color value representing the HCT values.\n */\nexport function hexFromHct(hue: number, chroma: number, tone: number) {\n  const hct = Hct.from(hue, chroma, tone);\n  const value = hct.toInt();\n  return hexFromArgb(value);\n}\n\n/**\n * Generates a theme object mapping of kebab-system-color-token to stringified\n * sRGB hex value in the Material SchemeContent color scheme given a single\n * color.\n *\n * @param color A stringified hex color e.g. '#C01075'\n * @param isDark Whether or not to generate a dark mode theme.\n * @return A theme object that maps the sys color token to its value (not a\n *     custom property).\n */\nexport function themeFromSourceColor(color: string, isDark: boolean): Theme {\n  const scheme = new SchemeContent(Hct.fromInt(argbFromHex(color)), isDark, 0);\n  const theme: {[key: string]: string} = {};\n\n  for (const [key, value] of Object.entries(materialColors)) {\n    theme[key] = hexFromArgb(value.getArgb(scheme));\n  }\n  return theme;\n}\n\n/**\n * Generates a stylesheet string of custom properties from the given theme, and\n * applies the styles to the given document or shadow root, and caches the value\n * in memory and localstorage given an optional ssName.\n *\n * @param doc Document or ShadowRoot to apply theme.\n * @param theme A theme object that maps the sys color token to its value\n *     (output of themeFromSourceColor).\n * @param ssName Optional global identifier of the constructable stylesheet and\n *     used to generate the localstorage name.\n */\nexport function applyMaterialTheme(\n  doc: DocumentOrShadowRoot,\n  theme: Theme,\n  ssName = 'material-theme',\n) {\n  let styleString = ':root,:host{';\n  for (const [key, value] of Object.entries(theme)) {\n    styleString += `--md-sys-color-${key}:${value};`;\n  }\n  styleString += '}';\n\n  applyThemeString(doc, styleString, ssName);\n}\n"
  },
  {
    "path": "catalog/src/utils/theme.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  applyMaterialTheme,\n  themeFromSourceColor,\n} from './material-color-helpers.js';\n\n/** Color mode, either overriding light/dark or the user's preference. */\nexport type ColorMode = 'light' | 'dark' | 'auto';\n\n/**\n * Generates a Material Theme from a given color and dark mode boolean, and\n * applies the theme to the document and lets the app know that the theme has\n * changed.\n *\n * @param color The source color to generate the theme.\n * @param isDark Whether or not the theme should be in dark mode.\n */\nfunction applyThemeFromColor(color: string, isDark: boolean) {\n  const theme = themeFromSourceColor(color, isDark);\n  applyMaterialTheme(document, theme);\n  // Dispatches event to communicate with components pages' JS to update the\n  // theme in the playground preview.\n  window.dispatchEvent(new Event('theme-changed'));\n}\n\n/**\n * Determines whether or not the mode should be Dark. This also means\n * calculating whether it should be dark if the current mode is 'auto'.\n *\n * @param mode The current color mode 'light', 'dark', or 'auto'.\n * @param saveAutoMode (Optional) Whether or not to save last auto mode to\n *     localstorage. Set to false if you simply want to query whether auto mode\n *     is dark or not. Defaults to true.\n * @return Whether or not the dark mode color tokens should apply.\n */\nexport function isModeDark(mode: ColorMode, saveAutoMode = true) {\n  let isDark = mode === 'dark';\n\n  // Determines whether the auto mode should display light or dark.\n  if (mode === 'auto') {\n    isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    if (saveAutoMode) {\n      // We have to save this because if the user closes the tab when it's light\n      // and reopens it when it's dark, we need to know whether the last applied\n      // 'auto' mode was correct.\n      saveLastSavedAutoColorMode(isDark ? 'dark' : 'light');\n    }\n  }\n\n  return isDark;\n}\n\n/**\n * Gets the current stringified material theme css string from localstorage.\n *\n * @return The current stringified material theme css string.\n */\nexport function getCurrentThemeString(): string | null {\n  return localStorage.getItem('material-theme');\n}\n\n/**\n * Gets the current color mode from localstorage.\n *\n * @return The current color mode.\n */\nexport function getCurrentMode(): ColorMode | null {\n  return localStorage.getItem('color-mode') as ColorMode | null;\n}\n\n/**\n * Saves the given color mode to localstorage.\n *\n * @param mode The color mode to save to localstorage.\n */\nexport function saveColorMode(mode: ColorMode) {\n  localStorage.setItem('color-mode', mode);\n}\n\n/**\n * Gets the current seed color from localstorage.\n *\n * @return The current seed color.\n */\nexport function getCurrentSeedColor(): string | null {\n  return localStorage.getItem('seed-color');\n}\n\n/**\n * Saves the given seed color to localstorage.\n *\n * @param color The seed color to save to local storage.\n */\nexport function saveSeedColor(color: string) {\n  localStorage.setItem('seed-color', color);\n}\n\n/**\n * Gets last applied color mode while in \"auto\" from localstorage.\n *\n * @return The last applied color mode while in \"auto\".\n */\nexport function getLastSavedAutoColorMode() {\n  return localStorage.getItem('last-auto-color-mode') as\n    | 'light'\n    | 'dark'\n    | null;\n}\n\n/**\n * Saves last applied color mode while in \"auto\" from localstorage.\n *\n * @param mode The last applied color mode while in \"auto\" to be saved to local\n *     storage.\n */\nexport function saveLastSavedAutoColorMode(mode: 'light' | 'dark') {\n  localStorage.setItem('last-auto-color-mode', mode);\n}\n\n/**\n * Generates and applies a new theme due to a change in source color.\n *\n * @param color The new source color from which to generate the new theme.\n */\nexport function changeColor(color: string) {\n  const lastColorMode = getCurrentMode()!;\n  const isDark = isModeDark(lastColorMode);\n\n  applyThemeFromColor(color, isDark);\n  saveSeedColor(color);\n}\n\n/**\n * Generates and applies a new theme due to a change in color mode.\n *\n * @param mode The new color mode from which to generate the new theme.\n */\nexport function changeColorMode(mode: ColorMode) {\n  const color = getCurrentSeedColor()!;\n  const isDark = isModeDark(mode);\n\n  applyThemeFromColor(color, isDark);\n  saveColorMode(mode);\n}\n\n/**\n * Generates and applies a new theme due to a change in both source color and\n * color mode.\n *\n * @param color The new source color from which to generate the new theme.\n * @param mode The new color mode from which to generate the new theme.\n */\nexport function changeColorAndMode(color: string, mode: ColorMode) {\n  const isDark = isModeDark(mode);\n\n  applyThemeFromColor(color, isDark);\n  saveSeedColor(color);\n  saveColorMode(mode);\n}\n"
  },
  {
    "path": "catalog/stories/base.json",
    "content": "{\n  \"files\": {\n    \"components/story-renderer.ts\": {\n      \"hidden\": true\n    },\n    \"components/stories-renderer.ts\": {\n      \"hidden\": true\n    },\n    \"components/story-knob-panel.ts\": {\n      \"hidden\": true\n    },\n    \"components/knob-ui-components.ts\": {\n      \"hidden\": true\n    },\n    \"index.ts\": {\n      \"hidden\": true\n    },\n    \"knobs.ts\": {\n      \"hidden\": true\n    },\n    \"material-collection.ts\": {\n      \"hidden\": true\n    },\n    \"story.ts\": {\n      \"hidden\": true\n    },\n    \"index.html\": {\n      \"hidden\": true\n    },\n    \"theme-loader.ts\": {\n      \"hidden\": true\n    }\n  }\n}\n"
  },
  {
    "path": "catalog/stories/components/knob-ui-components.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// These imports are resolved by Lit playground's unpkg loader\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/checkbox/checkbox.js';\nimport '@material/web/radio/radio.js';\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/select-option.js';\nimport '@material/web/textfield/filled-text-field.js';\n\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\n\nimport { Knob, KnobUi } from '../knobs.js';\n\n/**\n * A boolean Knob UI.\n */\nexport function boolInput(): KnobUi<boolean> {\n  return {\n    render(knob: Knob<boolean>, onChange: (val: boolean) => void) {\n      const valueChanged = (e: Event) => {\n        onChange((e.target as HTMLInputElement).checked);\n      };\n\n      return html`\n        <div>\n          <label>\n            <md-checkbox\n              touch-target=\"none\"\n              style=\"margin-inline-end: 16px;\"\n              .checked=${!!knob.latestValue}\n              @change=\"${valueChanged}\"\n            >\n            </md-checkbox>\n            ${knob.name}\n          </label>\n        </div>\n      `;\n    },\n  };\n}\n\n/**\n * Color selector for knob UI\n */\n@customElement('knob-color-selector')\nexport class KnobColorSelector extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      position: relative;\n      margin-inline-end: 16px;\n      --md-outlined-button-leading-space: 8px;\n      --md-outlined-button-trailing-space: 8px;\n      --md-outlined-button-container-height: 32px;\n      /* md-checkbox sizes */\n      --_component-size: 40px;\n      --_color-picker-size: 14px;\n      --_color-picker-border-width: 2px;\n    }\n\n    input {\n      box-sizing: content-box;\n      width: var(--_color-picker-size);\n      height: var(--_color-picker-size);\n      margin: calc(\n        (\n            var(--_component-size) - var(--_color-picker-size) -\n              var(--_color-picker-border-width) * 2\n          ) / 2\n      );\n      padding: 0;\n      cursor: pointer;\n      border-radius: var(--_color-picker-border-width);\n      border: var(--_color-picker-border-width) solid\n        var(--md-sys-color-outline);\n      outline: none;\n    }\n\n    input::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n    input::-webkit-color-swatch {\n      border: 0;\n    }\n\n    span {\n      position: relative;\n      display: inline-block;\n    }\n\n    md-ripple {\n      inset: unset;\n      width: var(--_component-size);\n      height: var(--_component-size);\n      border-radius: 50%;\n    }\n\n    #wrapper {\n      display: flex;\n      align-items: center;\n    }\n  `;\n\n  private internalValue = '';\n\n  @property({ type: Boolean }) hasAlpha = false;\n\n  set value(val: string) {\n    const oldVal = this.internalValue;\n    this.internalValue = val;\n    this.requestUpdate('value', oldVal);\n  }\n\n  @property({ type: String, reflect: true })\n  get value() {\n    return this.internalValue;\n  }\n\n  render() {\n    return html`<span id=\"wrapper\">\n      <span>\n        ${this.hasAlpha ? this.renderTextInput() : this.renderColorInput()}\n      </span>\n      <md-outlined-button\n        @click=${() => {\n          this.hasAlpha = !this.hasAlpha;\n        }}\n      >\n        ${this.hasAlpha ? 'rgba' : 'rgb'}\n      </md-outlined-button>\n    </span>`;\n  }\n\n  private renderTextInput() {\n    return html`<md-filled-text-field\n      style=${styleMap(sharedTextFieldStyles)}\n      .value=${this.value}\n      @change=${this.propagateEvt}\n      @input=${this.onInput}\n    ></md-filled-text-field>`;\n  }\n\n  private renderColorInput() {\n    const rippleStyles = styleMap({\n      '--md-sys-color-on-surface': this.value || 'black',\n    });\n\n    return html`\n      <md-ripple for=\"color-picker\" style=${rippleStyles}></md-ripple>\n      <input\n        type=\"color\"\n        id=\"color-picker\"\n        .value=${this.value}\n        @change=${this.propagateEvt}\n        @input=${this.onInput}\n      />\n    `;\n  }\n\n  private onInput(e: Event) {\n    const val = (e.target as HTMLInputElement).value;\n    this.value = val;\n    this.propagateEvt(e);\n  }\n\n  private propagateEvt(e: Event) {\n    const newEvt = new Event(e.type, {\n      bubbles: e.bubbles,\n      composed: e.composed,\n    });\n    this.dispatchEvent(newEvt);\n  }\n\n  click() {\n    const input = this.renderRoot!.querySelector(\n      'input,md-filled-text-field'\n    ) as HTMLElement;\n    input.click();\n    input.focus();\n  }\n\n  focus() {\n    const input = this.renderRoot!.querySelector(\n      'input,md-filled-text-field'\n    ) as HTMLElement;\n    input.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'knob-color-selector': KnobColorSelector;\n  }\n}\n\nconst defaultColorPickerOpts = {\n  hasAlpha: false,\n};\n\n/**\n * Options for ColorPicker knob.\n */\nexport type ColorPickerOpts = Partial<typeof defaultColorPickerOpts>;\n\n/**\n * A color picker Knob UI.\n */\nexport function colorPicker(opts?: ColorPickerOpts): KnobUi<string> {\n  const config: typeof defaultColorPickerOpts = {\n    ...defaultColorPickerOpts,\n    ...opts,\n  };\n  return {\n    render(knob: Knob<string>, onChange: (val: string) => void) {\n      const valueChanged = (e: Event) => {\n        onChange((e.target as KnobColorSelector).value);\n      };\n      return html`\n        <div>\n          <label>\n            <knob-color-selector\n              .value=\"${knob.latestValue ?? ''}\"\n              .hasAlpha=\"${config.hasAlpha}\"\n              @input=${valueChanged}\n            ></knob-color-selector>\n            ${knob.name}\n          </label>\n        </div>\n      `;\n    },\n  };\n}\n\ninterface TextInputOptions<T> {\n  transform(val: string): T;\n}\n\nconst sharedTextFieldStyles: StyleInfo = {\n  'margin-inline-end': '16px',\n  '--md-filled-field-leading-space': '8px',\n  '--md-filled-field-trailing-space': '8px',\n  '--md-filled-field-top-space': '4px',\n  '--md-filled-field-bottom-space': '4px',\n  width: '150px',\n  'min-width': '150px',\n};\n\n/**\n * A simple, one line text input Knob UI.\n */\nexport function textInput<T>(): KnobUi<string>;\nexport function textInput<T>(options: TextInputOptions<T>): KnobUi<T>;\nexport function textInput<T>(options?: TextInputOptions<T>): KnobUi<T> {\n  return {\n    render(knob: Knob<T>, onChange: (val: T) => void) {\n      const valueChanged = (e: Event) => {\n        const rawVal = (e.target as HTMLInputElement).value;\n\n        if (options) {\n          onChange(options.transform(rawVal));\n        } else {\n          onChange(rawVal as unknown as T);\n        }\n      };\n      return html`\n        <div>\n          <label>\n            <md-filled-text-field\n              style=${styleMap(sharedTextFieldStyles)}\n              .value=\"${(knob.latestValue ?? '') as unknown as string}\"\n              @input=\"${valueChanged}\"\n            ></md-filled-text-field>\n            ${knob.name}\n          </label>\n        </div>\n      `;\n    },\n  };\n}\n\nconst defaultNumberInputOpts = {\n  step: 1,\n};\n\n/**\n * Options for NumberInput knob.\n */\nexport type NumberInputOpts = Partial<typeof defaultNumberInputOpts>;\n\n/**\n * A simple, one line text input Knob UI.\n */\nexport function numberInput(opts?: NumberInputOpts): KnobUi<number> {\n  const config: typeof defaultNumberInputOpts = {\n    ...defaultNumberInputOpts,\n    ...opts,\n  };\n\n  return {\n    render(knob, onChange, onReset) {\n      const valueChanged = (e: Event) => {\n        const rawVal = (e.target as HTMLInputElement).value;\n        onChange(Number(rawVal));\n      };\n      return html`\n        <div>\n          <label>\n            <md-filled-text-field\n              style=${styleMap(sharedTextFieldStyles)}\n              type=\"number\"\n              step=\"${config.step}\"\n              .value=\"${knob.latestValue ? knob.latestValue.toString() : '0'}\"\n              @input=\"${valueChanged}\"\n            ></md-filled-text-field>\n            ${knob.name}\n          </label>\n        </div>\n      `;\n    },\n  };\n}\n\n/**\n * A Knob UI that's just a button that triggers a rerender which it's clicked.\n * The value keeps track of the number of times it's been clicked.\n */\nexport function button(): KnobUi<number> {\n  return {\n    render(knob, onChange) {\n      const onClick = () => {\n        const count = knob.latestValue ?? 0;\n        onChange(count + 1);\n      };\n      const styles = styleMap({ display: 'inline-block' });\n      return html`\n        <md-outlined-button outlined @click=${onClick} style=${styles}>\n          ${knob.name}\n        </md-outlined-button>\n      `;\n    },\n  };\n}\n\ninterface RadioSelectorConfig<T extends string> {\n  readonly options: ReadonlyArray<{\n    readonly value: T;\n    readonly label: string;\n  }>;\n  readonly name: string;\n}\n\n/** A radio button Knob UI. */\nexport function radioSelector<T extends string>({\n  options,\n  name,\n}: RadioSelectorConfig<T>): KnobUi<T> {\n  return {\n    render(knob: Knob<T>, onChange: (val: T) => void) {\n      const valueChanged = (e: Event) => {\n        onChange((e.target as HTMLInputElement).value as T);\n      };\n      const radioOptions = options.map((option, index) => {\n        const value: string = option.value;\n        return html` <label>\n          <md-radio\n            name=\"${name}\"\n            value=\"${value}\"\n            @change=\"${valueChanged}\"\n            ?checked=\"${knob.latestValue === option.value}\"\n          ></md-radio>\n          ${option.label}\n        </label>`;\n      });\n      return html` <div>${radioOptions}</div> `;\n    },\n  };\n}\n\ninterface SelectDropdownConfig<T extends string> {\n  readonly options: ReadonlyArray<{\n    readonly value: T;\n    readonly label: string;\n  }>;\n}\n\n/** A select dropdown Knob UI. */\nexport function selectDropdown<T extends string>({\n  options,\n}: SelectDropdownConfig<T>): KnobUi<T | undefined> {\n  return {\n    render(knob: Knob<T | undefined>, onChange: (val: T) => void) {\n      const valueChanged = (e: Event) => {\n        onChange((e.target as HTMLInputElement).value as T);\n      };\n      const listItems = options.map((option, index) => {\n        return html`<md-select-option\n          ?selected=\"${knob.latestValue === option.value}\"\n          .value=\"${option.value}\"\n        >\n          <div slot=\"headline\">${option.label}</div>\n        </md-select-option>`;\n      });\n      return html`\n        <label>\n          <md-filled-select\n            @change=\"${valueChanged}\"\n            menu-positioning=\"fixed\"\n            style=${styleMap(sharedTextFieldStyles)}\n          >\n            ${listItems}\n          </md-filled-select>\n          ${knob.name}\n        </label>\n      `;\n    },\n  };\n}\n\n/**\n * Knob wiring that updates the CSS custom property with the knob's name\n * to the updated value.\n */\nexport function cssCustomProperty(\n  knob: Knob<string>,\n  val: string,\n  containerOfRenderedStory: HTMLElement\n) {\n  const value = knob.isUnset ? knob.defaultValue : val;\n  if (value) {\n    containerOfRenderedStory.style.setProperty(knob.name, value);\n  } else {\n    containerOfRenderedStory.style.removeProperty(knob.name);\n  }\n}\n\nconst setPropDefaults = new WeakMap<Knob<unknown>, WeakMap<Element, unknown>>();\n/**\n * Knob wiring that updates the CSS properties on a given querySelector's\n * targets.\n */\nexport function setProp(selector: string) {\n  // In the common case, where selector is keyof ElementTagNameMap, can we\n  // actually type check this?\n  // tslint:disable-next-line:no-any No way to represent this type clearly.\n  return (knob: Knob<any>, val: unknown, container: HTMLElement) => {\n    let defaults = setPropDefaults.get(knob);\n    if (defaults === undefined) {\n      defaults = new WeakMap();\n      setPropDefaults.set(knob, defaults);\n    }\n    const elements = Array.from(container.querySelectorAll(selector));\n    if (knob.isUnset === true) {\n      for (const element of elements) {\n        if (defaults.has(element)) {\n          const defaultVal = defaults.get(element);\n          // tslint:disable-next-line:no-any Necessary\n          (element as any)[knob.name] = defaultVal;\n          defaults.delete(element);\n        }\n      }\n      return;\n    }\n    for (const element of elements) {\n      if (!defaults.has(element)) {\n        // tslint:disable-next-line:no-any Necessary for setting arbitrary props\n        defaults.set(element, (element as any)[knob.name]);\n      }\n      // tslint:disable-next-line:no-any Necessary for setting arbitrary props\n      (element as any)[knob.name] = val;\n    }\n  };\n}\n"
  },
  {
    "path": "catalog/stories/components/stories-renderer.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Slimmed down version of Lit stories stories-renderer without IE renderer */\n\nimport './story-knob-panel.js';\nimport './story-renderer.js';\n\nimport {css, html, LitElement, TemplateResult} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\n\nimport {KnobValues, PolymorphicArrayOfKnobs} from '../knobs.js';\nimport {Collection, Story} from '../story.js';\n\n/**\n * Renders a sequence of stories, one after another, optionally with\n * their names and descriptions.\n */\n@customElement('stories-renderer')\nexport class StoriesRenderer extends LitElement {\n  static override styles = [\n    css`\n      :host {\n        margin: 0 16px;\n        display: flex;\n        justify-content: space-between;\n      }\n\n      :host([hasknobs]) {\n        margin-right: 0;\n      }\n\n      :host([fullscreen]) story-renderer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      :host([fullwidth]) #rendered-stories {\n        width: 100%;\n      }\n\n      :host([fullwidth]) story-renderer {\n        width: 100%;\n      }\n\n      label {\n        display: flex;\n        align-items: center;\n      }\n    `,\n  ];\n\n  /** If true, will not show the UI for any knobs on this collection. */\n  @property({type: Boolean}) hideKnobs: boolean = false;\n  @property({attribute: false})\n  focusStories?: readonly Story[];\n  @property({attribute: false}) collection?: Collection;\n  @property({type: Boolean}) hideLabels = false;\n  @property({type: Boolean, reflect: true}) hasKnobs = false;\n  @state() knobsOpen = true;\n  @state() knobsPanelType: 'modal' | 'inline' = 'inline';\n\n  private observedKnobs: undefined | KnobValues<PolymorphicArrayOfKnobs> =\n    undefined;\n\n  override render() {\n    const collection = this.collection;\n    if (collection === undefined) {\n      return html``;\n    }\n\n    this.updateObservedKnobs();\n\n    const rendered = this.renderStories(this.getStoriesToRender(collection));\n    const knobsSection = this.renderKnobs(collection);\n\n    return html`\n      <div id=\"rendered-stories\">${rendered}</div>\n      ${knobsSection}\n    `;\n  }\n\n  private renderStories(stories: Story[]): TemplateResult[] {\n    return stories.map((story) => {\n      let label: string | TemplateResult = '';\n\n      if (!this.hideLabels) {\n        const description = story.description\n          ? html`<small>${story.description}</small>`\n          : '';\n        label = html`\n          <h3 class=\"m-headline5\">${story.name}</h3>\n          ${description}\n        `;\n      }\n\n      return html`\n        <div>\n          ${label}\n          <story-renderer .story=${story}></story-renderer>\n        </div>\n      `;\n    });\n  }\n\n  private renderKnobs(collection: Collection) {\n    const knobs = collection.knobs;\n\n    let knobsSection: string | TemplateResult = '';\n\n    this.hasKnobs = !this.hideKnobs && !knobs.empty;\n\n    if (!knobs.empty && !this.hideKnobs) {\n      const onOpenChanged = (event: CustomEvent<{open: boolean}>) => {\n        this.knobsOpen = event.detail.open;\n      };\n\n      knobsSection = html`\n        <story-knob-panel\n          .open=${this.knobsOpen}\n          .type=${this.knobsPanelType}\n          @open-changed=${onOpenChanged}>\n          ${knobs.renderUI()}\n        </story-knob-panel>\n      `;\n    }\n\n    return knobsSection;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.updateObservedKnobs();\n\n    window.addEventListener('message', this.onWindowMessage);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unobserveKnobs();\n    window.removeEventListener('message', this.onWindowMessage);\n  }\n\n  private readonly onWindowMessage = (event: MessageEvent) => {\n    const message: string = event.data;\n\n    if (message === 'toggle-knobs-panel') {\n      this.knobsOpen = !this.knobsOpen;\n    } else if (message === 'modal-knobs-panel') {\n      this.knobsPanelType = 'modal';\n    } else if (message === 'inline-knobs-panel') {\n      this.knobsPanelType = 'inline';\n    }\n  };\n\n  private updateObservedKnobs() {\n    if (this.collection?.knobs === this.observedKnobs) {\n      return; // nothing to do;\n    }\n    // Stop watching the knobs that we're currently observing.\n    this.unobserveKnobs();\n    const newKnobs = this.collection?.knobs;\n    if (newKnobs !== undefined) {\n      newKnobs.addEventListener('changed', this.boundRequestUpdate);\n    }\n    // Keep track of the ones we're observing, so we can later unobserve them.\n    this.observedKnobs = newKnobs;\n  }\n\n  private getStoriesToRender(collection: Collection): Story[] {\n    let storiesToRender: Story[] = [];\n\n    if (this.focusStories) {\n      const allowedStories = new Set(collection.stories);\n      for (const story of this.focusStories) {\n        if (!allowedStories.has(story)) {\n          console.error(\n            `A stories renderer can only render stories ` +\n              `from its collection.`,\n          );\n        } else {\n          storiesToRender.push(story);\n        }\n      }\n    } else {\n      storiesToRender = collection.stories;\n    }\n\n    return storiesToRender;\n  }\n\n  private unobserveKnobs() {\n    if (this.observedKnobs !== undefined) {\n      this.observedKnobs.removeEventListener(\n        'changed',\n        this.boundRequestUpdate,\n      );\n    }\n  }\n\n  private readonly boundRequestUpdate = () => {\n    this.requestUpdate();\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'stories-renderer': StoriesRenderer;\n  }\n}\n"
  },
  {
    "path": "catalog/stories/components/story-knob-panel.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Fork of Lit stories story-knob-renderer with m3 components and theming */\n\nimport '@material/web/elevation/elevation.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\n\nimport {css, html, LitElement, PropertyValues} from 'lit';\nimport {customElement, property, query} from 'lit/decorators.js';\n\n/**\n * Default dimensions for offsets and heights used for drag bounding\n */\nexport const DEFAULT_DIMENSIONS = {\n  RIGHT_OFFSET: 8,\n  TOP_OFFSET: 8,\n  DRAG_BAR_HEIGHT: 32,\n} as const;\n\n/**\n * A right-side panel for the knobs\n *\n * @fires open-changed {{open: boolean}} Fired when opened or closed\n */\n@customElement('story-knob-panel')\nexport class StoryKnobPanel extends LitElement {\n  @query('.dragBar') dragBar!: HTMLElement | null;\n\n  @property({type: Boolean}) showCloseIcon = true;\n  @property({type: Boolean, reflect: true}) open = false;\n  @property({type: Boolean, reflect: true}) override draggable = false;\n  @property({type: Boolean}) hideDragIcon = false;\n  @property({type: String, reflect: true}) type: 'modal' | 'inline' = 'inline';\n  private isDragging = false;\n  private previousX = 0;\n  private currentX = 0;\n  private previousY = 0;\n  private currentY = 0;\n  private dragStartPos = {\n    x: 0,\n    y: 0,\n  };\n  private containerWidth = 0;\n\n  override update(changed: PropertyValues) {\n    super.update(changed);\n\n    if (changed.has('draggable') && changed.get('draggable') !== undefined) {\n      this.containerWidth = this.getBoundingClientRect().width;\n    }\n\n    if (changed.has('type')) {\n      this.open = this.type === 'inline';\n    }\n\n    if (changed.has('draggable')) {\n      this.translatePos(0, 0);\n      this.previousX = 0;\n      this.previousY = 0;\n    }\n  }\n\n  override render() {\n    let closeIcon = html``;\n    let dragIcon = html``;\n    let dragBar = html``;\n\n    if (this.showCloseIcon) {\n      closeIcon = html`\n        <md-icon-button aria-label=\"close\" @click=${this.close}>\n          <md-icon>close</md-icon>\n        </md-icon-button>\n      `;\n    }\n\n    if (this.draggable) {\n      dragBar = html`\n        <div\n          class=\"dragBar\"\n          @pointerdown=${this.onDragStart}\n          @pointermove=${this.onDrag}\n          @pointerup=${this.onDragEnd}>\n          <md-icon>drag_handle</md-icon>\n        </div>\n      `;\n    }\n\n    if (!this.hideDragIcon) {\n      const iconSvg = this.draggable ? 'dock_to_left' : 'branding_watermark';\n      const iconLabel = this.draggable ? 'dock' : 'pop out';\n\n      dragIcon = html`\n        <md-icon-button\n          class=\"dragIconButton\"\n          aria-label=${iconLabel}\n          @click=${this.onDragIconClick}>\n          <md-icon>${iconSvg}</md-icon>\n        </md-icon-button>\n      `;\n    }\n\n    return html`\n      <aside>\n        <md-elevation></md-elevation>\n        ${dragBar}\n        <div class=\"content\">\n          <div id=\"title\">\n            <h3 class=\"m-headline5\">Knobs</h3>\n            ${dragIcon} ${closeIcon}\n          </div>\n          <div id=\"knobs\">\n            <slot></slot>\n          </div>\n        </div>\n      </aside>\n    `;\n  }\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n\n    if (changed.has('open')) {\n      this.dispatchEvent(\n        new CustomEvent('open-changed', {\n          detail: {\n            open: this.open,\n          },\n        }),\n      );\n    }\n  }\n\n  close() {\n    this.open = false;\n  }\n\n  show() {\n    this.open = true;\n  }\n\n  private onDragIconClick() {\n    this.draggable = !this.draggable;\n  }\n\n  private onDragStart(event: PointerEvent) {\n    this.dragStartPos = {x: event.x, y: event.y};\n    this.isDragging = true;\n    if (this.dragBar) {\n      this.dragBar.setPointerCapture(event.pointerId);\n    }\n  }\n\n  private onDrag(event: PointerEvent) {\n    if (!this.isDragging) {\n      return;\n    }\n    const newX = this.previousX + event.x - this.dragStartPos.x;\n    const newY = this.previousY + event.y - this.dragStartPos.y;\n\n    this.translatePos(newX, newY);\n  }\n\n  private onDragEnd(event: PointerEvent) {\n    this.isDragging = false;\n    this.previousX = this.currentX;\n    this.previousY = this.currentY;\n    if (this.dragBar) {\n      this.dragBar.releasePointerCapture(event.pointerId);\n    }\n  }\n\n  private translatePos(x: number, y: number) {\n    if (x === 0 && y === 0) {\n      this.style.transform = '';\n      return;\n    }\n\n    const rightBound = DEFAULT_DIMENSIONS.RIGHT_OFFSET;\n    const leftBound =\n      DEFAULT_DIMENSIONS.RIGHT_OFFSET + this.containerWidth - window.innerWidth;\n    const topBound = -DEFAULT_DIMENSIONS.TOP_OFFSET;\n    const bottomBound =\n      window.innerHeight -\n      (DEFAULT_DIMENSIONS.DRAG_BAR_HEIGHT + DEFAULT_DIMENSIONS.TOP_OFFSET);\n\n    // do not allow drag outside right bound\n    if (x > rightBound) {\n      x = rightBound;\n    }\n\n    // do not allow drag outside left bound\n    if (x < leftBound) {\n      x = leftBound;\n    }\n\n    // do not allow drag outside top bound\n    if (y < topBound) {\n      y = topBound;\n    }\n\n    // do not allow drag outside bottom bound\n    if (y > bottomBound) {\n      y = bottomBound;\n    }\n\n    this.currentX = x;\n    this.currentY = y;\n\n    this.style.transform = `translate(${x}px, ${y}px)`;\n  }\n\n  static override styles = [\n    css`\n      :host {\n        max-width: 320px;\n        margin-left: 56px;\n        padding: 0 16px;\n        background-color: white;\n        --mdc-typography-headline-color: black;\n        background-color: var(--md-sys-color-surface-container);\n        color: var(--md-sys-color-on-surface);\n        --md-elevation-level: 1;\n        position: relative;\n      }\n\n      :host([type='inline']) {\n        display: none;\n      }\n\n      :host([type='inline']:not([draggable])) {\n        height: 100%;\n        min-height: 100dvh;\n      }\n\n      :host([type='modal']) {\n        top: 0;\n        bottom: 0;\n        right: 0;\n\n        transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1);\n        position: fixed;\n        z-index: 6;\n      }\n\n      :host([type='modal']:not([open])) {\n        right: -353px;\n      }\n\n      :host([open]) {\n        display: block;\n      }\n\n      :host([open][type='modal']) {\n        transition: right 200ms cubic-bezier(0.4, 0, 0.2, 1);\n      }\n\n      :host([draggable]) {\n        background-color: var(--md-sys-color-surface-container-high);\n        color: var(--md-sys-color-on-surface);\n        --md-elevation-level: 2;\n        position: fixed;\n        margin: 0;\n        padding: 0;\n        border-radius: 4px;\n        border: none;\n        top: 8px;\n        right: 8px;\n        bottom: unset;\n        z-index: 7;\n        opacity: 1;\n      }\n\n      :host([draggable]) .content {\n        border-end-start-radius: inherit;\n        border-end-end-radius: inherit;\n        padding: 0 16px 16px 16px;\n        max-height: 80dvh;\n        overflow-y: auto;\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      :host([draggable]:not([open])) {\n        display: none;\n      }\n\n      aside {\n        border-radius: inherit;\n      }\n\n      .dragBar {\n        height: 24px;\n        padding: 4px 0;\n        border-bottom: 1px solid var(--md-sys-color-outline-variant);\n        background-color: var(--md-sys-color-surface-variant);\n        color: var(--md-sys-color-on-surface-variant);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: grab;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        touch-action: none;\n        border-start-start-radius: inherit;\n        border-start-end-radius: inherit;\n      }\n\n      @media (pointer: coarse) {\n        .dragBar {\n          height: 32px;\n        }\n      }\n\n      .dragBar:active {\n        cursor: grabbing;\n      }\n\n      ::slotted(*) {\n        min-height: 40px;\n        display: flex;\n        align-items: center;\n        --mdc-theme-primary: hsl(199, 18%, 40%);\n        --mdc-theme-secondary: hsl(199, 18%, 40%);\n      }\n\n      #title {\n        display: flex;\n        align-items: center;\n      }\n\n      #title h3 {\n        flex-grow: 1;\n      }\n\n      mwc-icon-button {\n        color: hsl(0, 0%, 50%);\n      }\n    `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'story-knob-panel': StoryKnobPanel;\n  }\n}\n"
  },
  {
    "path": "catalog/stories/components/story-renderer.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Slimmed down version of Lit stories story-renderer without IE renderer */\n\nimport {css, LitElement, PropertyValues} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {Story} from '../story.js';\n\n/**\n * Renders a single story inside its own shadow root for style isolation.\n */\n@customElement('story-renderer')\nexport class StoryRenderer extends LitElement {\n  static override styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n  @property({attribute: false}) story?: Story = undefined;\n  private storyRenderComplete: Promise<void> | undefined = undefined;\n\n  override updated(propertiesChanged: PropertyValues) {\n    super.updated(propertiesChanged);\n    const story = this.story;\n    if (story) {\n      this.storyRenderComplete = story.render(this.renderRoot);\n      this.storyRenderComplete.then(() => {\n        story.knobs.connectWiring(this.renderRoot);\n      });\n    }\n    if (story && story.styles && story.styles.length) {\n      this.shadowRoot!.adoptedStyleSheets.push(...story.styles);\n    }\n  }\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener('web-story-update', (event: Event) => {\n      event.stopPropagation();\n      this.requestUpdate();\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    const story = this.story;\n    if (story) {\n      story.knobs.addEventListener('changed', this.boundRequestUpdate);\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    const story = this.story;\n    if (story) {\n      story.knobs.removeEventListener('changed', this.boundRequestUpdate);\n      story.knobs.disconnectWiring(this.renderRoot);\n    }\n  }\n\n  dispose() {\n    if (this.story) {\n      this.story.dispose(this.renderRoot);\n    }\n  }\n\n  private readonly boundRequestUpdate = () => {\n    this.requestUpdate();\n  };\n\n  get renderComplete() {\n    return (async () => {\n      await this.updateComplete;\n      await this.storyRenderComplete;\n      await this.updateComplete;\n    })();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'story-renderer': StoryRenderer;\n  }\n}\n"
  },
  {
    "path": "catalog/stories/index.html",
    "content": "<!--\n@license\nCopyright 2023 Google LLC\nSPDX-License-Identifier: Apache-2.0\n-->\n<!DOCTYPE html>\n<html>\n  <head>\n    <script type=\"module\" src=\"./theme-loader.js\"></script>\n    <script type=\"module\" src=\"./demo.js\"></script>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css2?family=Google+Sans:opsz,wght@17..18,400;17..18,500;17..18,700&display=swap\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined\"\n    />\n    <style>\n      :root {\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        font-family: \"Google Sans\", system-ui;\n        --md-ref-typeface-plain: \"Google Sans\", system-ui;\n      }\n\n      body {\n        margin: 0;\n      }\n    </style>\n  </head>\n  <body></body>\n</html>\n"
  },
  {
    "path": "catalog/stories/index.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Equivalent of Lit stories entrypoint */\n\nexport * from './knobs.js';\nexport * from './story.js';\n\n// This file is resolved by base.json\nimport './components/stories-renderer.js';\n"
  },
  {
    "path": "catalog/stories/knobs.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Slimmed down version of Lit stories knobs but using md-* components */\n\nimport {html, TemplateResult} from 'lit';\n\nexport * from './components/knob-ui-components.js';\n\ninterface KnobInit<T> {\n  defaultValue?: T;\n  ui: KnobUi<T>;\n  wiring?: KnobWiring<T>;\n}\n\n/**\n * A parameter that may be customized at runtime for a story.\n *\n * Has two parts: a UI which may be displayed to the user for them to set the\n * knob's value, and an optional bit of wiring that, if given, may automatically\n * apply the value to the rendered story.\n *\n * The story will also be notified when a knob's value changes.\n *\n * @template {Name} We capture the name of the knob here as a string literal\n *     type so that we can provide type safe access to the current value of a\n *     knob from within a story's render function.\n */\nexport class Knob<T, Name extends string = string> extends EventTarget {\n  readonly defaultValue?: T;\n  latestValue?: T;\n\n  /**\n   * True iff the knob has had a value set, so that we know to apply any\n   * wiring to any new stories we're informed of.\n   */\n  private dirty = false;\n  private readonly uiFn: KnobUi<T>;\n  private readonly wiring?: KnobWiring<T>;\n  private readonly onChange = (updatedVal: T, resetting = false) => {\n    this.latestValue = updatedVal;\n    this.dirty = !resetting;\n    this.dispatchEvent(new CustomEvent<T>('changed', {detail: updatedVal}));\n    if (this.wiring !== undefined) {\n      for (const container of this.renderedStoryContainers) {\n        this.wiring(this, updatedVal, container);\n      }\n    }\n  };\n  private readonly onReset = () => {\n    this.reset();\n  };\n  private readonly renderedStoryContainers = new Set<\n    HTMLElement | DocumentFragment\n  >();\n\n  constructor(readonly name: Name, init: KnobInit<T>) {\n    super();\n    this.defaultValue = init.defaultValue;\n    this.latestValue = this.defaultValue;\n    this.wiring = init.wiring;\n    this.uiFn = init.ui;\n  }\n\n  get isUnset() {\n    return !this.dirty;\n  }\n\n  get uiTemplate(): TemplateResult {\n    return this.uiFn.render(this, this.onChange, this.onReset);\n  }\n\n  getKnobUiTemplate(): TemplateResult {\n    return this.uiTemplate;\n  }\n\n  /**\n   * Connect the knob's wiring, if any, up to a container of a rendered story.\n   * This is fast and idempotent, so it's fine to call frequently.\n   */\n  connectWiring(containerOfRenderedStory: HTMLElement | DocumentFragment) {\n    // Fast path the common case where we have no wiring.\n    if (!this.wiring) {\n      return;\n    }\n    const alreadyWired = this.renderedStoryContainers.has(\n      containerOfRenderedStory,\n    );\n    if (!alreadyWired) {\n      this.renderedStoryContainers.add(containerOfRenderedStory);\n      // Ensure default values are wired correctly.\n      if (\n        this.dirty ||\n        (this.latestValue !== undefined &&\n          this.latestValue === this.defaultValue)\n      ) {\n        this.wiring?.(this, this.latestValue!, containerOfRenderedStory);\n      }\n    }\n  }\n\n  disconnectWiring(containerOfRenderedStory: HTMLElement | DocumentFragment) {\n    return this.renderedStoryContainers.delete(containerOfRenderedStory);\n  }\n\n  imperativelySet(newValue: T) {\n    this.dirty = true;\n    if (this.latestValue !== newValue) {\n      this.onChange(newValue);\n    }\n  }\n\n  reset() {\n    if (this.dirty === true) {\n      this.onChange(this.defaultValue!, true);\n    }\n  }\n}\n\n/** NOTE: This must only be used in an extends clause for a type variable. */\nexport type PolymorphicArrayOfKnobs = ReadonlyArray<Knob<any>>;\n\n/**\n * Given an array of Knobs, return their names.\n *\n * So given\n *   Knobs = `[Knob<string, 'label'>, Knob<number, 'count'>]`\n *\n * This type operator would return 'label' | 'count'\n */\ntype KnobKeys<Knobs extends PolymorphicArrayOfKnobs> = Knobs[number]['name'];\n\n/**\n * Given an array of Knobs, and the name of one of those knobs,\n * returns the value of the knob.\n *\n * So given:\n *   Knobs = `[Knob<string, 'label'>, Knob<number, 'count'>]` and\n *   SearchName = `'count'`\n *\n * This type operator would return `number`.\n */\ntype TypeOfKnobWithName<\n  Knobs extends PolymorphicArrayOfKnobs,\n  SearchName extends string,\n> = Extract<Knobs[number], {name: SearchName}> extends Knob<infer U>\n  ? U | undefined\n  : never;\n\n/** A helper class for getting the latest value for a knob by name. */\nexport class KnobValues<\n  Knobs extends PolymorphicArrayOfKnobs,\n> extends EventTarget {\n  private readonly byName: ReadonlyMap<string, Knob<unknown>>;\n\n  constructor(knobsArray: PolymorphicArrayOfKnobs) {\n    super();\n    const byName = new Map<string, Knob<unknown>>();\n    for (const knob of knobsArray) {\n      if (byName.has(knob.name)) {\n        throw new Error(\n          `More than one knob with name '${knob.name}' given to a story.`,\n        );\n      }\n      byName.set(knob.name, knob);\n      knob.addEventListener('changed', (e) => {\n        this.dispatchEvent(\n          new CustomEvent('changed', {detail: {knobName: knob.name}}),\n        );\n      });\n    }\n    this.byName = byName;\n  }\n\n  get<SearchName extends KnobKeys<Knobs>>(\n    knobName: SearchName,\n  ): TypeOfKnobWithName<Knobs, SearchName> {\n    return this.byName.get(knobName)?.latestValue as TypeOfKnobWithName<\n      Knobs,\n      SearchName\n    >;\n  }\n\n  set<SearchName extends KnobKeys<Knobs>>(\n    knobName: SearchName,\n    newValue: TypeOfKnobWithName<Knobs, SearchName>,\n  ) {\n    const knob = this.byName.get(knobName);\n    if (knob === undefined) {\n      throw new Error(`No knob with name ${knobName}`);\n    }\n    knob.imperativelySet(newValue);\n  }\n\n  /**\n   * Returns an iterator of all the knob names.\n   */\n  names<SearchName extends KnobKeys<Knobs>>() {\n    return this.byName.keys() as IterableIterator<SearchName>;\n  }\n\n  /**\n   * Reset all knob values back to their initial values.\n   */\n  reset() {\n    for (const knob of this.byName.values()) {\n      knob.reset();\n    }\n  }\n\n  /** True if empty, false if it contains knobs. */\n  get empty(): boolean {\n    return this.byName.size === 0;\n  }\n\n  /**\n   * Connect the knobs' wiring up to this container where a story will be\n   * rendered.\n   *\n   * Unlikely that any code outside of the stories system internals would\n   * call this.\n   */\n  connectWiring(container: HTMLElement | DocumentFragment) {\n    for (const knob of this.byName.values()) {\n      if (container instanceof DocumentFragment) {\n        container = container.firstElementChild as HTMLElement;\n      }\n      knob.connectWiring(container);\n    }\n  }\n\n  /**\n   * The inverse of connectWiring, so that discarded story renderers can be\n   * garbage collected.\n   *\n   * Returns false if the container wasn't actually connected.\n   */\n  disconnectWiring(container: HTMLElement | DocumentFragment) {\n    let disconnected = false;\n    for (const knob of this.byName.values()) {\n      disconnected = knob.disconnectWiring(container) || disconnected;\n    }\n    return disconnected;\n  }\n\n  /**\n   * Renders the UIs of the knobs.\n   */\n  renderUI(): TemplateResult {\n    const uiTemplates = [];\n    for (const knob of this.byName.values()) {\n      uiTemplates.push(knob.getKnobUiTemplate());\n    }\n    return html`${uiTemplates}`;\n  }\n}\n\n/**\n * Displays a user interface for someone browsing a catalog or demo for an\n * element to set the knob to different values.\n */\nexport interface KnobUi<T> {\n  /**\n   * @param knob Info about the knob that this UI is being rendered for.\n   * @param container The element to render the UI into.\n   * @param onChange Call this function every time a new value for the knob\n   *     has been selected by the user.\n   * @param onReset Call this function when the user has indicated that they\n   *     want to unset a knob completely. This is similar to calling onChange\n   *     with knob.defaultValue, but it will clear the knob from the URL\n   *     and wiring may treat this case differently (e.g. restoring a value\n   *     to the value it had before the wiring set it the first time).\n   */\n  render(\n    knob: Knob<T>,\n    onChange: (val: T) => void,\n    onReset: () => void,\n  ): TemplateResult;\n}\n\n/**\n * Takes updated values for a knob and interacts with a rendered story in order\n * to automatically apply the knob's value.\n *\n * Not all knobs can be automatically wired up in this way, so the knobs are\n * also made available to the stories themselves.\n *\n * For example, a knob that updates a css custom property can be automatically\n * wired up by just applying styles to the containerOfRenderedStory.\n */\nexport interface KnobWiring<T> {\n  (\n    knob: Knob<T>,\n    val: T,\n    containerOfRenderedStory: HTMLElement | DocumentFragment,\n  ): void;\n}\n"
  },
  {
    "path": "catalog/stories/material-collection.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Slimmed down version of material-collection */\n\nimport {css, CSSResult, html, TemplateResult} from 'lit';\n\nimport {Knob, KnobUi, KnobValues} from './knobs.js';\nimport {LitCollection, LitStoryInit} from './story.js';\n\nexport {LitCollection as MaterialCollection} from './story.js';\n\n/**\n * Material styling for labels.\n */\nexport const labelStyles = css`\n  label {\n    display: inline-flex;\n    place-items: center;\n    gap: 8px;\n    font-family: Roboto, system-ui;\n    color: var(--md-sys-color-on-background, #000);\n  }\n`;\n\n/**\n * A subtitle knob for labelling sections in the knob UI.\n */\nexport function title(): KnobUi<void> {\n  return {\n    render(knob) {\n      return html` <h3 style=\"font-family: system-ui;\">${knob.name}</h3> `;\n    },\n  };\n}\n\n/**\n * Converts an interface of `{[knobName: string]: unknown}` to something\n * ingestable by MaterialCollection.\n *\n * @example\n * ```ts\n * // demo.ts\n * import {StoryKnobs} from './stories.js';\n * import {MaterialCollection, KnobTypesToKnobs} from\n * '@material/web/internal/demo/stories/material-collection';\n *\n * const stories = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(...);\n * ```\n */\nexport type KnobTypesToKnobs<\n  // tslint:disable-next-line:no-any No way to represent this type clearly.\n  T extends {[name: string]: any},\n  Names extends Extract<keyof T, string> = Extract<keyof T, string>,\n  // tslint:disable-next-line:no-any We need to \"map\" the union type to knobs.\n> = ReadonlyArray<Names extends any ? Knob<T[Names], Names> : never>;\n\n/**\n * An init object for Material Stories. This should be exposed to the user.\n *\n * @example\n * ```ts\n * import {MaterialStoryInit} from\n * '@material/web/internal/demo/stories/material-collection';\n * // stories.ts\n * export interface StoryKnobs {\n *   checked: boolean;\n *   disabled: boolean;\n * }\n *\n * export const stories: Array<MaterialStoryInit<StoryKnobs>> = [\n *   {\n *     name: Checkbox,\n *     styles: css`...`,\n *     render: ({checked, disabled}) => {\n *       return html`...`;\n *     }\n *   }\n * ]\n * ```\n */\n// tslint:disable-next-line:no-any No way to represent this type clearly.\nexport interface MaterialStoryInit<T extends {[name: string]: any}> {\n  name: string;\n  render: (knobs: T) => TemplateResult | Promise<TemplateResult>;\n  styles?: CSSResult | CSSResult[];\n}\n\n/**\n * Converts an array of `MaterialStoryInit`s to a `LitStoryInit`.\n */\n// tslint:disable-next-line:no-any No way to represent this type clearly.\nexport function materialInitsToStoryInits<T extends {[name: string]: any}>(\n  inits: Array<MaterialStoryInit<T>>,\n): Array<LitStoryInit<KnobValues<KnobTypesToKnobs<T>>>> {\n  return inits.map((init) => {\n    return {\n      name: init.name,\n      litStyles: init.styles,\n      renderLit(knobMap) {\n        const knobNames = knobMap.names();\n        const knobs: T = {} as unknown as T;\n        for (const name of knobNames) {\n          knobs[name] = knobMap.get(name)! as (typeof knobs)[typeof name];\n        }\n        return init.render(knobs);\n      },\n    };\n  });\n}\n\n/**\n * Initializes the theme element for the theming knobs and renders the stories.\n */\nexport function setUpDemo(collection: LitCollection): void {\n  const renderer = document.createElement('stories-renderer');\n  renderer.collection = collection;\n  document.body.appendChild(renderer);\n}\n"
  },
  {
    "path": "catalog/stories/story.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Slimmed down version of Lit stories story file */\n\nimport {CSSResult, html, nothing, render, TemplateResult} from 'lit';\n\nimport {Knob, KnobValues, PolymorphicArrayOfKnobs} from './knobs.js';\n\nexport {Knob, PolymorphicArrayOfKnobs} from './knobs.js';\n\n/** Metadata all stories share. */\nexport interface BaseStoryInit {\n  /** A short name, unique to the containing collection. */\n  readonly name: string;\n  readonly id?: string;\n  readonly description?: string;\n}\n\n// Type variable to help clang-format.\ntype GenericKnobValues = KnobValues<PolymorphicArrayOfKnobs>;\n\n/** A story with an arbitrary render function. */\nexport interface StoryInit<KV extends GenericKnobValues = GenericKnobValues>\n  extends BaseStoryInit {\n  render(container: HTMLElement | DocumentFragment, knobs: KV): Promise<void>;\n  styles?: CSSStyleSheet[];\n}\n\nclass StoryImpl<\n  Knobs extends PolymorphicArrayOfKnobs = PolymorphicArrayOfKnobs,\n> {\n  readonly name: string;\n  readonly id: string;\n  readonly description: string | undefined;\n  readonly render: (container: HTMLElement | DocumentFragment) => Promise<void>;\n  readonly dispose: (container: HTMLElement | DocumentFragment) => void;\n  readonly knobs: KnobValues<Knobs>;\n\n  private readonly initStyles: CSSStyleSheet[] | undefined;\n\n  get styles() {\n    let styles = [...this.collection.customStyles];\n    if (this.initStyles) {\n      styles = styles.concat(this.initStyles);\n    }\n    return styles;\n  }\n\n  constructor(init: StoryInit, private readonly collection: Collection) {\n    this.name = init.name;\n    this.description = init.description;\n    this.id = init.id || this.name.replace(/ /g, '_').replace(/,/g, '');\n    if (this.id.includes('/')) {\n      const message =\n        `A story id can't contain a '/' character. ` +\n        `The name can, but if so you have to give an ` +\n        `explicit id that doesn't.`;\n      throw new Error(message);\n    }\n    const wrapperDivMap = new WeakMap<\n      HTMLElement | DocumentFragment,\n      HTMLDivElement\n    >();\n\n    this.initStyles = init.styles;\n\n    this.knobs = collection.knobs;\n\n    this.render = async (container: HTMLElement | DocumentFragment) => {\n      let wrapperDiv = wrapperDivMap.get(container);\n      if (wrapperDiv === undefined) {\n        wrapperDiv = document.createElement('div');\n        wrapperDiv.id = 'storyWrapper';\n        wrapperDivMap.set(container, wrapperDiv);\n      }\n      render(html` ${wrapperDiv} `, container);\n      await init.render(wrapperDiv, this.knobs);\n    };\n\n    this.dispose = (container: HTMLElement | DocumentFragment) => {\n      wrapperDivMap.delete(container);\n      render(nothing, container);\n    };\n  }\n}\n\n/**\n * A function that can render some HTML, combined with that metadata.\n *\n * A Story typically depicts a configuration of a UI component or group of\n * components. A Story is always a member of a collection.\n *\n * The type is exposed here, but the implementation isn't, because a Story\n * must be constructed via a Collection.\n */\nexport type Story<\n  Knobs extends PolymorphicArrayOfKnobs = PolymorphicArrayOfKnobs,\n> = StoryImpl<Knobs>;\n\n/**\n * A tree of related stories and sub-collections.\n *\n * The stories and sub-collections are stored in the order that they are\n * added to the collection.\n *\n * Every Story is a member of exactly one collection. Every collection is\n * either a toplevel collection for a named component, or it is a member of\n * exactly one collection.\n */\nexport class Collection<\n  T extends PolymorphicArrayOfKnobs = ReadonlyArray<Knob<unknown>>,\n> {\n  private readonly children = new Map<string, Story | Collection>();\n  readonly customStyles: CSSStyleSheet[] = [];\n  private static readonly collectionsByName = new Map<string, Collection>();\n  readonly knobs: KnobValues<T>;\n\n  constructor(readonly name: string, knobs: T = [] as unknown as T) {\n    Collection.collectionsByName.set(name, this);\n    this.knobs = new KnobValues(knobs);\n  }\n\n  /**\n   * Get an array of all stories in this collection.\n   *\n   * Exported for mwc's compiled tests.\n   * @export\n   */\n  get stories(): Array<Story<T>> {\n    const stories = [];\n    for (const child of this.children.values()) {\n      if (child instanceof StoryImpl) {\n        stories.push(child);\n      } else {\n        stories.push(...child.stories);\n      }\n    }\n    return stories;\n  }\n\n  get tree(): ReadonlyMap<string, Story<T> | Collection<T>> {\n    return this.children;\n  }\n\n  static get byName(): ReadonlyMap<string, Collection> {\n    return Collection.collectionsByName;\n  }\n\n  addStories(...inits: ReadonlyArray<StoryInit<KnobValues<T>>>) {\n    for (const init of inits) {\n      const story = new StoryImpl(init, this);\n      if (this.children.has(story.id)) {\n        const message = `A story or subcollection already exists with the id ${JSON.stringify(\n          story.id,\n        )}`;\n        // Don't throw an error, as that will disrupt live_reload / hot reload,\n        // by halting this module's initialization.\n        console.error(message);\n        continue;\n      }\n      this.children.set(story.id, story);\n    }\n  }\n\n  applyStyle(customStyle: CSSResult) {\n    this.customStyles.push(customStyle.styleSheet!);\n  }\n}\n\n/**\n * Describes a single configuration of a specific web UI component.\n */\nexport interface LitStoryInit<\n  KV extends KnobValues<PolymorphicArrayOfKnobs> = KnobValues<PolymorphicArrayOfKnobs>,\n> extends BaseStoryInit {\n  renderLit(knobs: KV): TemplateResult | Promise<TemplateResult>;\n  litStyles?: CSSResult | CSSResult[];\n}\n\nfunction isLitStoryInit(init: Partial<LitStoryInit>): init is LitStoryInit {\n  return !!init.renderLit;\n}\n\n/**\n * A collection with convenience methods for rendering lit-html templates.\n */\nexport class LitCollection<\n  T extends PolymorphicArrayOfKnobs = ReadonlyArray<Knob<unknown>>,\n> extends Collection<T> {\n  override addStories(\n    ...inits: Array<StoryInit<KnobValues<T>> | LitStoryInit<KnobValues<T>>>\n  ) {\n    const simpleInits: StoryInit[] = [];\n    for (const init of inits) {\n      if (isLitStoryInit(init)) {\n        let styles: CSSStyleSheet[] = [];\n        if (init.litStyles) {\n          styles =\n            init.litStyles instanceof Array\n              ? init.litStyles.map((s) => s.styleSheet!)\n              : [init.litStyles.styleSheet!];\n        }\n        simpleInits.push({\n          ...init,\n          async render(container, knobValues) {\n            const templateResult = await init.renderLit(knobValues);\n            render(templateResult, container);\n          },\n          styles,\n        });\n      } else {\n        simpleInits.push(init);\n      }\n    }\n    super.addStories(...simpleInits);\n  }\n}\n"
  },
  {
    "path": "catalog/stories/theme-loader.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/* Loads the current theme from the site */\n\nimport {PostDoc} from 'postdoc-lib';\n\n// create a constructable stylesheet\nconst styleSheet = new CSSStyleSheet();\nlet hasAdopted = false;\n\n/**\n * Applies a string theme to the page.\n *\n * @param theme The stringified theme to apply to the page\n */\nfunction applyTheme(theme: string) {\n  // Replaces the theme\n  styleSheet.replace(theme);\n\n  // If the style has not been adopted yet, then adopt it to the document.\n  if (!hasAdopted) {\n    hasAdopted = true;\n    document.adoptedStyleSheets.push(styleSheet);\n  }\n}\n\n/**\n * Apply the theme every time a postdoc pessage is received.\n */\nconst onMessage = (e: MessageEvent<string>) => {\n  applyTheme(e.data);\n};\n\n/* Listen to the main document for theme update messages */\nconst postdoc = new PostDoc({\n  // Where to listen for handshake messages\n  messageReceiver: window,\n  // Where to post messages requesting theme\n  messageTarget: window.top!,\n  onMessage,\n});\n\nawait postdoc.handshake;\n\n// Request the initial theme.\npostdoc.postMessage('request-theme');\n"
  },
  {
    "path": "catalog/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"es2022\",\n    \"lib\": [\"es2022\", \"dom\", \"dom.iterable\"],\n    \"target\": \"es2022\",\n    \"declaration\": true,\n    \"strict\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"moduleResolution\": \"node\",\n    \"allowSyntheticDefaultImports\": true,\n    \"experimentalDecorators\": true,\n    \"useDefineForClassFields\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"skipLibCheck\": true,\n    \"types\": []\n  },\n  \"include\": [\"src/**/*\", \"stories/*\", \"stories/components\"],\n  \"exclude\": []\n}\n"
  },
  {
    "path": "checkbox/_checkbox.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/checkbox' show theme;\n"
  },
  {
    "path": "checkbox/checkbox.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Checkbox} from './internal/checkbox.js';\nimport {styles} from './internal/checkbox-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-checkbox': MdCheckbox;\n  }\n}\n\n/**\n * @summary Checkboxes allow users to select one or more items from a set.\n * Checkboxes can turn an option on or off.\n *\n * @description\n * Use checkboxes to:\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 * @final\n * @suppress {visibility}\n */\n@customElement('md-checkbox')\nexport class MdCheckbox extends Checkbox {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "checkbox/checkbox_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\n\nimport {createFormTests} from '../testing/forms.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdCheckbox} from './checkbox.js';\n\ndescribe('<md-checkbox>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdCheckbox.styles);\n  });\n\n  describe('forms', () => {\n    createFormTests({\n      queryControl: (root) => root.querySelector('md-checkbox'),\n      valueTests: [\n        {\n          name: 'unnamed',\n          render: () => html`<md-checkbox checked></md-checkbox>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form without a name')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'unchecked',\n          render: () => html`<md-checkbox name=\"checkbox\"></md-checkbox>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when unchecked')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'checked default value',\n          render: () =>\n            html`<md-checkbox name=\"checkbox\" checked></md-checkbox>`,\n          assertValue(formData) {\n            expect(formData.get('checkbox')).toBe('on');\n          },\n        },\n        {\n          name: 'checked custom value',\n          render: () =>\n            html`<md-checkbox\n              name=\"checkbox\"\n              checked\n              value=\"Custom value\"></md-checkbox>`,\n          assertValue(formData) {\n            expect(formData.get('checkbox')).toBe('Custom value');\n          },\n        },\n        {\n          name: 'indeterminate',\n          render: () =>\n            html`<md-checkbox\n              name=\"checkbox\"\n              checked\n              indeterminate></md-checkbox>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when indeterminate')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'disabled',\n          render: () =>\n            html`<md-checkbox name=\"checkbox\" checked disabled></md-checkbox>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when disabled')\n              .toHaveSize(0);\n          },\n        },\n      ],\n      resetTests: [\n        {\n          name: 'reset to unchecked',\n          render: () => html`<md-checkbox name=\"checkbox\"></md-checkbox>`,\n          change(checkbox) {\n            checkbox.checked = true;\n          },\n          assertReset(checkbox) {\n            expect(checkbox.checked)\n              .withContext('checkbox.checked after reset')\n              .toBeFalse();\n          },\n        },\n        {\n          name: 'reset to checked',\n          render: () =>\n            html`<md-checkbox name=\"checkbox\" checked></md-checkbox>`,\n          change(checkbox) {\n            checkbox.checked = false;\n          },\n          assertReset(checkbox) {\n            expect(checkbox.checked)\n              .withContext('checkbox.checked after reset')\n              .toBeTrue();\n          },\n        },\n        {\n          name: 'reset to indeterminate',\n          render: () =>\n            html`<md-checkbox name=\"checkbox\" indeterminate></md-checkbox>`,\n          change(checkbox) {\n            checkbox.indeterminate = false;\n          },\n          assertReset(checkbox) {\n            expect(checkbox.indeterminate)\n              .withContext('checkbox.indeterminate should not be reset')\n              .toBeFalse();\n          },\n        },\n      ],\n      restoreTests: [\n        {\n          name: 'restore unchecked',\n          render: () => html`<md-checkbox name=\"checkbox\"></md-checkbox>`,\n          assertRestored(checkbox) {\n            expect(checkbox.checked)\n              .withContext('checkbox.checked after restore')\n              .toBeFalse();\n          },\n        },\n        {\n          name: 'restore checked',\n          render: () =>\n            html`<md-checkbox name=\"checkbox\" checked></md-checkbox>`,\n          assertRestored(checkbox) {\n            expect(checkbox.checked)\n              .withContext('checkbox.checked after restore')\n              .toBeTrue();\n          },\n        },\n        {\n          name: 'restore indeterminate',\n          render: () =>\n            html`<md-checkbox name=\"checkbox\" indeterminate></md-checkbox>`,\n          assertRestored(checkbox) {\n            expect(checkbox.indeterminate)\n              .withContext('checkbox.indeterminate should not be restored')\n              .toBeFalse();\n          },\n        },\n      ],\n    });\n  });\n});\n"
  },
  {
    "path": "checkbox/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Checkbox',\n  [\n    new Knob('checked', {defaultValue: false, ui: boolInput()}),\n    new Knob('indeterminate', {defaultValue: false, ui: boolInput()}),\n    new Knob('disabled', {defaultValue: false, ui: boolInput()}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "checkbox/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "checkbox/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/checkbox/checkbox.js';\n\nimport {\n  labelStyles,\n  MaterialStoryInit,\n} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for checkbox stories. */\nexport interface StoryKnobs {\n  checked: boolean;\n  disabled: boolean;\n  indeterminate: boolean;\n}\n\nconst checkbox: MaterialStoryInit<StoryKnobs> = {\n  name: 'Checkbox',\n  render({checked, disabled, indeterminate}) {\n    return html`\n      <md-checkbox\n        aria-label=\"An example checkbox\"\n        ?checked=${checked}\n        ?disabled=${disabled}\n        ?indeterminate=${indeterminate}\n        touch-target=\"wrapper\"></md-checkbox>\n    `;\n  },\n};\n\nconst withLabels: MaterialStoryInit<StoryKnobs> = {\n  name: 'With labels',\n  styles: [\n    labelStyles,\n    css`\n      ol {\n        all: unset;\n        display: flex;\n        flex-direction: column;\n      }\n\n      li {\n        all: unset;\n      }\n\n      label {\n        gap: 0;\n      }\n    `,\n  ],\n  render({disabled}) {\n    return html`\n      <ol aria-label=\"Animals\">\n        <li>\n          <label>\n            <md-checkbox\n              ?disabled=${disabled}\n              aria-label=\"Cats\"\n              touch-target=\"wrapper\"></md-checkbox>\n            Cats\n          </label>\n        </li>\n        <li>\n          <label>\n            <md-checkbox\n              checked\n              ?disabled=${disabled}\n              aria-label=\"dogs\"\n              touch-target=\"wrapper\"></md-checkbox>\n            Dogs\n          </label>\n        </li>\n        <li>\n          <label>\n            <md-checkbox\n              indeterminate\n              ?disabled=${disabled}\n              aria-label=\"Birds\"\n              touch-target=\"wrapper\"></md-checkbox>\n            Birds\n          </label>\n        </li>\n      </ol>\n    `;\n  },\n};\n\n/** Checkbox stories. */\nexport const stories = [checkbox, withLabels];\n"
  },
  {
    "path": "checkbox/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Checkbox} from './internal/checkbox.js';\n\n/**\n * Test harness for checkbox.\n */\nexport class CheckboxHarness extends Harness<Checkbox> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input')!;\n  }\n}\n"
  },
  {
    "path": "checkbox/internal/_checkbox.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n// Motion token values.\n$_md-sys-motion: tokens.md-sys-motion-values();\n// The stroke width of the icon marks.\n$_mark-stroke: 2px;\n// The coordinates in an 18px viewBox of the bottom left corner of the\n// indeterminate icon. Y is negative to fix an issue in Safari (see below).\n$_indeterminate-bottom-left: 4px, -10px;\n// The coordinates in an 18px viewBox of the bottom left corner of the\n// checkmark icon. Y is negative to fix an issue in Safari (see below).\n$_checkmark-bottom-left: 7px, -14px;\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-checkbox-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-checkbox-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-checkbox-values();\n\n  :host {\n    border-start-start-radius: map.get($tokens, 'container-shape-start-start');\n    border-start-end-radius: map.get($tokens, 'container-shape-start-end');\n    border-end-end-radius: map.get($tokens, 'container-shape-end-end');\n    border-end-start-radius: map.get($tokens, 'container-shape-end-start');\n    display: inline-flex;\n    height: map.get($tokens, 'container-size');\n    position: relative;\n    vertical-align: top; // Fix extra space when placed inside display: block\n    width: map.get($tokens, 'container-size');\n    -webkit-tap-highlight-color: transparent;\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    cursor: default;\n  }\n\n  :host([touch-target='wrapper']) {\n    margin: max(0px, ((48px - map.get($tokens, 'container-size')) / 2));\n  }\n\n  md-focus-ring {\n    height: 44px;\n    inset: unset;\n    width: 44px;\n  }\n\n  // <input> is also the touch target\n  input {\n    appearance: none;\n    height: 48px;\n    margin: 0;\n    opacity: 0;\n    outline: none;\n    position: absolute;\n    width: 48px;\n    z-index: 1;\n    cursor: inherit;\n  }\n\n  :host([touch-target='none']) input {\n    height: 100%;\n    width: 100%;\n  }\n\n  .container {\n    border-radius: inherit;\n    display: flex;\n    height: 100%;\n    place-content: center;\n    place-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .outline,\n  .background,\n  .icon {\n    inset: 0;\n    position: absolute;\n  }\n\n  .outline,\n  .background {\n    border-radius: inherit;\n  }\n\n  .outline {\n    border-color: map.get($tokens, 'outline-color');\n    border-style: solid;\n    border-width: map.get($tokens, 'outline-width');\n    box-sizing: border-box;\n  }\n\n  .background {\n    background-color: map.get($tokens, 'selected-container-color');\n  }\n\n  // Background and icon transitions.\n  .background,\n  .icon {\n    opacity: 0; // Background and icon fade in\n    transition-duration: 150ms, 50ms; // Exit duration for scale and opacity.\n    transition-property: transform, opacity;\n    // Exit easing function for scale, linear for opacity.\n    transition-timing-function: map.get(\n        $_md-sys-motion,\n        easing-emphasized-accelerate\n      ),\n      linear;\n    transform: scale(0.6); // Background and icon scale from 60% to 100%.\n  }\n\n  :where(.selected) :is(.background, .icon) {\n    opacity: 1;\n    // Enter duration for scale and opacity.\n    transition-duration: 350ms, 50ms;\n    // Enter easing function for scale, linear for opacity.\n    transition-timing-function: map.get(\n        $_md-sys-motion,\n        easing-emphasized-decelerate\n      ),\n      linear;\n    transform: scale(1);\n  }\n\n  // Ripple\n\n  md-ripple {\n    border-radius: map.get($tokens, 'state-layer-shape');\n    height: map.get($tokens, 'state-layer-size');\n    inset: unset;\n    width: map.get($tokens, 'state-layer-size');\n\n    @include ripple.theme(\n      (\n        hover-color: map.get($tokens, 'hover-state-layer-color'),\n        hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),\n        pressed-color: map.get($tokens, 'pressed-state-layer-color'),\n        pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),\n      )\n    );\n  }\n\n  .selected md-ripple {\n    @include ripple.theme(\n      (\n        hover-color: map.get($tokens, 'selected-hover-state-layer-color'),\n        hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),\n        pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),\n        pressed-opacity:\n          map.get($tokens, 'selected-pressed-state-layer-opacity'),\n      )\n    );\n  }\n\n  // Icon and icon marks\n\n  .icon {\n    // The icon is created with two <rect> marks for animation:\n    // 1. Short end\n    //   - the smaller leading part of the checkmark\n    //   - hidden behind long end for indeterminate mark\n    // 2. Long end\n    //   - the larger trailing part of the checkmark\n    //   - the entirety of the indeterminate mark\n    fill: map.get($tokens, 'selected-icon-color');\n    height: map.get($tokens, 'icon-size');\n    width: map.get($tokens, 'icon-size');\n  }\n\n  // The short end of the checkmark. Initially hidden underneath the\n  // indeterminate mark.\n  .mark.short {\n    height: $_mark-stroke;\n    transition-property: transform, height;\n    width: $_mark-stroke;\n  }\n\n  // The long end of the checkmark. Initially the indeterminate mark.\n  .mark.long {\n    height: $_mark-stroke;\n    transition-property: transform, width;\n    width: 10px;\n  }\n\n  // Exit duration and easing.\n  .mark {\n    animation-duration: 150ms;\n    animation-timing-function: map.get(\n      $_md-sys-motion,\n      easing-emphasized-accelerate\n    );\n    transition-duration: 150ms;\n    transition-timing-function: map.get(\n      $_md-sys-motion,\n      easing-emphasized-accelerate\n    );\n  }\n\n  // Enter duration and easing.\n  .selected .mark {\n    animation-duration: 350ms;\n    animation-timing-function: map.get(\n      $_md-sys-motion,\n      easing-emphasized-decelerate\n    );\n    transition-duration: 350ms;\n    transition-timing-function: map.get(\n      $_md-sys-motion,\n      easing-emphasized-decelerate\n    );\n  }\n\n  // Creates the checkmark icon.\n  .checked,\n  // Keep the checkmark shape when unselecting a checked checkbox.\n  .prev-checked.unselected {\n    .mark {\n      // Transform from the bottom left of the rectangles, whch turn into the\n      // bottom-most point of the checkmark.\n      // Fix Safari's transform-origin bug from \"top left\" to \"bottom left\"\n      $scale: scaleY(-1);\n      // Move the \"bottom left\" corner to the checkmark location.\n      $translate: translate($_checkmark-bottom-left);\n      // Rotate the checkmark.\n      $rotate: rotate(45deg);\n      transform: $scale $translate $rotate;\n    }\n\n    .mark.short {\n      // The right triangle that forms the short end has an X, Y length of\n      // 4dp, 4dp. The hypoteneuse is √(4*4 + 4*4), which is the length of the\n      // short end when checked.\n      height: 1px * math.sqrt(32);\n    }\n\n    .mark.long {\n      // The right triangle that forms the long end has an X, Y length of\n      // 8dp, 8dp. The hypoteneuse is √(8*8 + 8*8), which is the length of the\n      // long end when checked.\n      width: 1px * math.sqrt(128);\n    }\n  }\n\n  // Creates the indeterminate icon.\n  .indeterminate,\n  // Keep the indeterminate shape when unselecting an indeterminate checkbox.\n  .prev-indeterminate.unselected {\n    .mark {\n      transform: scaleY(-1) translate($_indeterminate-bottom-left) rotate(0deg);\n    }\n  }\n\n  // When selecting an unselected checkbox, don't transition between the\n  // checked and indeterminate states. The checkmark icon or indeterminate icon\n  // should fade in from its final position.\n  .prev-unselected .mark {\n    transition-property: none;\n  }\n\n  // When checking a checkbox, the long mark of the checkmark grows from the\n  // bottom-most point of the checkmark. An animation provides the starting\n  // width to animate from.\n  .prev-unselected.checked .mark.long {\n    animation-name: prev-unselected-to-checked;\n  }\n  @keyframes prev-unselected-to-checked {\n    from {\n      width: 0;\n    }\n  }\n\n  // States\n\n  :where(:hover) .outline {\n    border-color: map.get($tokens, 'hover-outline-color');\n    border-width: map.get($tokens, 'hover-outline-width');\n  }\n\n  :where(:hover) .background {\n    background: map.get($tokens, 'selected-hover-container-color');\n  }\n\n  :where(:hover) .icon {\n    fill: map.get($tokens, 'selected-hover-icon-color');\n  }\n\n  :where(:focus-within) .outline {\n    border-color: map.get($tokens, 'focus-outline-color');\n    border-width: map.get($tokens, 'focus-outline-width');\n  }\n\n  :where(:focus-within) .background {\n    background: map.get($tokens, 'selected-focus-container-color');\n  }\n\n  :where(:focus-within) .icon {\n    fill: map.get($tokens, 'selected-focus-icon-color');\n  }\n\n  :where(:active) .outline {\n    border-color: map.get($tokens, 'pressed-outline-color');\n    border-width: map.get($tokens, 'pressed-outline-width');\n  }\n\n  :where(:active) .background {\n    background: map.get($tokens, 'selected-pressed-container-color');\n  }\n\n  :where(:active) .icon {\n    fill: map.get($tokens, 'selected-pressed-icon-color');\n  }\n\n  // Don't animate to/from disabled states because the outline is hidden when\n  // selected. Without this, there'd be a FOUC if the checkbox state is\n  // programmatically  changed while disabled.\n  :where(.disabled, .prev-disabled) :is(.background, .icon, .mark) {\n    animation-duration: 0s;\n    transition-duration: 0s;\n  }\n\n  :where(.disabled) .outline {\n    border-color: map.get($tokens, 'disabled-outline-color');\n    border-width: map.get($tokens, 'disabled-outline-width');\n    opacity: map.get($tokens, 'disabled-container-opacity');\n  }\n\n  :where(.selected.disabled) .outline {\n    // Hide the outline behind the transparent selected container color.\n    // This can be removed once disabled colors are flattened.\n    visibility: hidden;\n  }\n\n  :where(.selected.disabled) .background {\n    // Set disabled opacity only when selected since opacity is used to show\n    // or hide the container background.\n    background: map.get($tokens, 'selected-disabled-container-color');\n    opacity: map.get($tokens, 'selected-disabled-container-opacity');\n  }\n\n  :where(.disabled) .icon {\n    fill: map.get($tokens, 'selected-disabled-icon-color');\n  }\n\n  @media (forced-colors: active) {\n    .background {\n      background-color: CanvasText;\n    }\n\n    .selected.disabled .background {\n      background-color: GrayText;\n      opacity: 1;\n    }\n\n    .outline {\n      border-color: CanvasText;\n    }\n\n    .disabled .outline {\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    .icon {\n      fill: Canvas;\n    }\n  }\n}\n"
  },
  {
    "path": "checkbox/internal/checkbox-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './checkbox';\n// go/keep-sorted end\n\n@include checkbox.styles;\n"
  },
  {
    "path": "checkbox/internal/checkbox.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst checkboxBaseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A checkbox component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Checkbox extends checkboxBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @state() private prevChecked = false;\n  @state() private prevDisabled = false;\n  @state() private prevIndeterminate = false;\n  @query('input') private readonly input!: HTMLInputElement | null;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.input) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input);\n      });\n    }\n  }\n\n  protected override update(changed: PropertyValues<Checkbox>) {\n    if (\n      changed.has('checked') ||\n      changed.has('disabled') ||\n      changed.has('indeterminate')\n    ) {\n      this.prevChecked = changed.get('checked') ?? this.checked;\n      this.prevDisabled = changed.get('disabled') ?? this.disabled;\n      this.prevIndeterminate =\n        changed.get('indeterminate') ?? this.indeterminate;\n    }\n\n    super.update(changed);\n  }\n\n  protected override render() {\n    const prevNone = !this.prevChecked && !this.prevIndeterminate;\n    const prevChecked = this.prevChecked && !this.prevIndeterminate;\n    const prevIndeterminate = this.prevIndeterminate;\n    const isChecked = this.checked && !this.indeterminate;\n    const isIndeterminate = this.indeterminate;\n\n    const containerClasses = classMap({\n      'disabled': this.disabled,\n      'selected': isChecked || isIndeterminate,\n      'unselected': !isChecked && !isIndeterminate,\n      'checked': isChecked,\n      'indeterminate': isIndeterminate,\n      'prev-unselected': prevNone,\n      'prev-checked': prevChecked,\n      'prev-indeterminate': prevIndeterminate,\n      'prev-disabled': this.prevDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    // Note: <input> needs to be rendered before the <svg> for\n    // form.reportValidity() to work in Chrome.\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <input\n          type=\"checkbox\"\n          id=\"input\"\n          aria-checked=${isIndeterminate ? 'mixed' : nothing}\n          aria-label=${ariaLabel || nothing}\n          aria-invalid=${ariaInvalid || nothing}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          .indeterminate=${this.indeterminate}\n          .checked=${this.checked}\n          @input=${this.handleInput}\n          @change=${this.handleChange} />\n\n        <div class=\"outline\"></div>\n        <div class=\"background\"></div>\n        <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n        <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n        <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <rect class=\"mark short\" />\n          <rect class=\"mark long\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  private handleInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    if (!this.checked || this.indeterminate) {\n      return null;\n    }\n\n    return this.value;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  override [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"
  },
  {
    "path": "checkbox/internal/checkbox_test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Environment} from '../../testing/environment.js';\nimport {CheckboxHarness} from '../harness.js';\n\nimport {Checkbox} from './checkbox.js';\n\ncustomElements.define('md-test-checkbox', Checkbox);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-test-checkbox': Checkbox;\n  }\n}\n\ndescribe('checkbox', () => {\n  const env = new Environment();\n\n  async function setupTest(\n    template = html`<md-test-checkbox></md-test-checkbox>`,\n  ) {\n    const element = env.render(template).querySelector('md-test-checkbox');\n    if (!element) {\n      throw new Error('Could not query rendered <md-test-checkbox>.');\n    }\n\n    await env.waitForStability();\n    const input = element.renderRoot.querySelector('input');\n    if (!input) {\n      throw new Error('Could not query rendered <input>.');\n    }\n\n    return {\n      input,\n      harness: new CheckboxHarness(element),\n    };\n  }\n\n  describe('basic', () => {\n    it('initializes as a checkbox', async () => {\n      const {harness} = await setupTest();\n      expect(harness.element).toBeInstanceOf(Checkbox);\n      expect(harness.element.checked).toEqual(false);\n      expect(harness.element.indeterminate).toEqual(false);\n      expect(harness.element.disabled).toEqual(false);\n      expect(harness.element.value).toEqual('on');\n    });\n\n    it('user input updates checked state', async () => {\n      const {harness} = await setupTest();\n      await harness.clickWithMouse();\n      await env.waitForStability();\n      expect(harness.element.checked).toEqual(true);\n    });\n\n    it('should trigger changed event when checkbox is selected', async () => {\n      const {harness} = await setupTest();\n      const changeHandler = jasmine.createSpy('changeHandler');\n      harness.element.addEventListener('change', changeHandler);\n\n      await harness.clickWithMouse();\n\n      expect(harness.element.checked).toBeTrue();\n      expect(changeHandler).toHaveBeenCalledTimes(1);\n      expect(changeHandler).toHaveBeenCalledWith(jasmine.any(Event));\n    });\n\n    it('should trigger input event when checkbox is selected', async () => {\n      const {harness} = await setupTest();\n      const inputHandler = jasmine.createSpy('inputHandler');\n      harness.element.addEventListener('input', inputHandler);\n\n      await harness.clickWithMouse();\n\n      expect(harness.element.checked).toBeTrue();\n      expect(inputHandler).toHaveBeenCalledTimes(1);\n      expect(inputHandler).toHaveBeenCalledWith(jasmine.any(Event));\n    });\n\n    it('checkbox state is updated during input event listeners', async () => {\n      const {harness} = await setupTest();\n      let state = false;\n      const inputHandler = jasmine\n        .createSpy('inputHandler')\n        .and.callFake(() => {\n          state = harness.element.checked;\n        });\n\n      harness.element.addEventListener('input', inputHandler);\n\n      await harness.clickWithMouse();\n      expect(inputHandler).withContext('input listener').toHaveBeenCalled();\n      expect(state)\n        .withContext('checkbox.checked during input listener')\n        .toBeTrue();\n    });\n\n    it('checkbox state is updated during change event listeners', async () => {\n      const {harness} = await setupTest();\n      let state = false;\n      const changeHandler = jasmine\n        .createSpy('changeHandler')\n        .and.callFake(() => {\n          state = harness.element.checked;\n        });\n\n      harness.element.addEventListener('change', changeHandler);\n\n      await harness.clickWithMouse();\n      expect(changeHandler).withContext('change listener').toHaveBeenCalled();\n      expect(state)\n        .withContext('checkbox.checked during change listener')\n        .toBeTrue();\n    });\n  });\n\n  describe('checked', () => {\n    it('get/set updates the checked property on the native checkbox element', async () => {\n      const {harness, input} = await setupTest();\n      harness.element.checked = true;\n      await env.waitForStability();\n      expect(input.checked).toEqual(true);\n      harness.element.checked = false;\n      await env.waitForStability();\n      expect(input.checked).toEqual(false);\n    });\n\n    it('get/set updates the checked property after user updates checked state', async () => {\n      const {harness, input} = await setupTest();\n\n      // Simulate user interaction setting checked to true.\n      await harness.clickWithMouse();\n      await env.waitForStability();\n      expect(input.checked).toEqual(true);\n      expect(harness.element.checked).toEqual(true);\n\n      // Set custom element checked to false.\n      harness.element.checked = false;\n      await env.waitForStability();\n      expect(input.checked).toEqual(false);\n      expect(harness.element.checked).toEqual(false);\n\n      // Set custom element checked to true.\n      harness.element.checked = true;\n      await env.waitForStability();\n      expect(input.checked).toEqual(true);\n      expect(harness.element.checked).toEqual(true);\n    });\n  });\n\n  describe('indeterminate', () => {\n    it('get/set updates the indeterminate property on the native checkbox element', async () => {\n      const {harness, input} = await setupTest();\n      harness.element.indeterminate = true;\n      await env.waitForStability();\n\n      expect(input.indeterminate).toEqual(true);\n      expect(input.getAttribute('aria-checked')).toEqual('mixed');\n\n      harness.element.indeterminate = false;\n      await env.waitForStability();\n\n      expect(input.indeterminate).toEqual(false);\n      expect(input.getAttribute('aria-checked')).not.toEqual('mixed');\n    });\n  });\n\n  describe('disabled', () => {\n    it('get/set updates the disabled property on the native checkbox element', async () => {\n      const {harness, input} = await setupTest();\n      harness.element.disabled = true;\n      await env.waitForStability();\n\n      expect(input.disabled).toEqual(true);\n      harness.element.disabled = false;\n      await env.waitForStability();\n      expect(input.disabled).toEqual(false);\n    });\n  });\n\n  describe('form submission', () => {\n    async function setupFormTest(propsInit: Partial<Checkbox> = {}) {\n      return await setupTest(html` <form>\n        <md-test-checkbox\n          .checked=${propsInit.checked === true}\n          .disabled=${propsInit.disabled === true}\n          .name=${propsInit.name ?? ''}\n          .value=${propsInit.value ?? ''}></md-test-checkbox>\n      </form>`);\n    }\n\n    it('does not submit if not checked', async () => {\n      const {harness} = await setupFormTest({name: 'foo'});\n      const formData = await harness.submitForm();\n      expect(formData.get('foo')).toBeNull();\n    });\n\n    it('does not submit if disabled', async () => {\n      const {harness} = await setupFormTest({\n        name: 'foo',\n        checked: true,\n        disabled: true,\n      });\n      const formData = await harness.submitForm();\n      expect(formData.get('foo')).toBeNull();\n    });\n\n    it('does not submit if name is not provided', async () => {\n      const {harness} = await setupFormTest({checked: true});\n      const formData = await harness.submitForm();\n      const keys = Array.from(formData.keys());\n      expect(keys.length).toEqual(0);\n    });\n\n    it('submits under correct conditions', async () => {\n      const {harness} = await setupFormTest({\n        name: 'foo',\n        checked: true,\n        value: 'bar',\n      });\n      const formData = await harness.submitForm();\n      expect(formData.get('foo')).toEqual('bar');\n    });\n  });\n\n  describe('label activation', () => {\n    async function setupLabelTest() {\n      const test = await setupTest(html`\n        <label>\n          <md-test-checkbox></md-test-checkbox>\n        </label>\n      `);\n      const label = (\n        test.harness.element.getRootNode() as HTMLElement\n      ).querySelector<HTMLLabelElement>('label')!;\n      return {...test, label};\n    }\n\n    it('toggles when label is clicked', async () => {\n      const {\n        harness: {element},\n        label,\n      } = await setupLabelTest();\n      label.click();\n      await env.waitForStability();\n      expect(element.checked).toBeTrue();\n      label.click();\n      await env.waitForStability();\n      expect(element.checked).toBeFalse();\n    });\n  });\n\n  describe('validation', () => {\n    it('should set valueMissing when required and not selected', async () => {\n      const {harness} = await setupTest();\n      harness.element.required = true;\n\n      expect(harness.element.validity.valueMissing)\n        .withContext('checkbox.validity.valueMissing')\n        .toBeTrue();\n    });\n\n    it('should not set valueMissing when required and checked', async () => {\n      const {harness} = await setupTest();\n      harness.element.required = true;\n      harness.element.checked = true;\n\n      expect(harness.element.validity.valueMissing)\n        .withContext('checkbox.validity.valueMissing')\n        .toBeFalse();\n    });\n\n    it('should set valueMissing when required and indeterminate', async () => {\n      const {harness} = await setupTest();\n      harness.element.required = true;\n      harness.element.indeterminate = true;\n\n      expect(harness.element.validity.valueMissing)\n        .withContext('checkbox.validity.valueMissing')\n        .toBeTrue();\n    });\n  });\n});\n"
  },
  {
    "path": "chips/_assist-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/assist-chip' show theme;\n"
  },
  {
    "path": "chips/_filter-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filter-chip' show theme;\n"
  },
  {
    "path": "chips/_input-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/input-chip' show theme;\n"
  },
  {
    "path": "chips/_suggestion-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/suggestion-chip' show theme;\n"
  },
  {
    "path": "chips/assist-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {AssistChip} from './internal/assist-chip.js';\nimport {styles} from './internal/assist-styles.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-assist-chip': MdAssistChip;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-assist-chip')\nexport class MdAssistChip extends AssistChip {\n  static override styles: CSSResultOrNative[] = [sharedStyles, elevatedStyles, styles];\n}\n"
  },
  {
    "path": "chips/assist-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdAssistChip} from './assist-chip.js';\n\ndescribe('<md-assist-chip>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdAssistChip.styles);\n  });\n});\n"
  },
  {
    "path": "chips/chip-set.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {ChipSet} from './internal/chip-set.js';\nimport {styles} from './internal/chip-set-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-chip-set': MdChipSet;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-chip-set')\nexport class MdChipSet extends ChipSet {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "chips/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Chips',\n  [\n    new Knob('label', {defaultValue: '', ui: textInput()}),\n    new Knob('elevated', {defaultValue: false, ui: boolInput()}),\n    new Knob('disabled', {defaultValue: false, ui: boolInput()}),\n    new Knob('scrolling', {defaultValue: false, ui: boolInput()}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {icons: 'material-symbols'});\n"
  },
  {
    "path": "chips/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "chips/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/chips/assist-chip.js';\nimport '@material/web/chips/chip-set.js';\nimport '@material/web/chips/filter-chip.js';\nimport '@material/web/chips/input-chip.js';\nimport '@material/web/chips/suggestion-chip.js';\nimport '@material/web/icon/icon.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html, svg} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/** Knob types for chips stories. */\nexport interface StoryKnobs {\n  label: string;\n  elevated: boolean;\n  disabled: boolean;\n  scrolling: boolean;\n}\n\nconst GOOGLE_LOGO = svg`\n  <svg viewBox=\"0 0 24 24\" slot=\"icon\">\n    <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" fill=\"#4285F4\" />\n    <path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\" />\n    <path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" fill=\"#FBBC05\" />\n    <path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\" />\n    <path d=\"M1 1h22v22H1z\" fill=\"none\" />\n  </svg>\n`;\n\nconst styles = css`\n  md-chip-set.scrolling {\n    flex-wrap: nowrap;\n    max-width: 512px;\n    overflow: scroll;\n    /** Add room for focus ring. */\n    padding: 8px;\n  }\n`;\n\nconst assist: MaterialStoryInit<StoryKnobs> = {\n  name: 'Assist chips',\n  styles,\n  render({label, elevated, disabled, scrolling}) {\n    const classes = {'scrolling': scrolling};\n    return html`\n      <md-chip-set class=${classMap(classes)} aria-label=\"Assist chips\">\n        <md-assist-chip ?disabled=${disabled} ?elevated=${elevated}>\n          ${label || 'Assist chip'}\n        </md-assist-chip>\n        <md-assist-chip ?disabled=${disabled} ?elevated=${elevated}>\n          <md-icon slot=\"icon\">local_laundry_service</md-icon>\n          ${label || 'Assist chip with icon'}\n        </md-assist-chip>\n        <md-assist-chip\n          ?elevated=${elevated}\n          href=\"https://google.com\"\n          target=\"_blank\">\n          ${GOOGLE_LOGO} ${label || 'Assist link chip'}\n        </md-assist-chip>\n        <md-assist-chip soft-disabled always-focusable ?elevated=${elevated}>\n          ${label || 'Soft-disabled assist chip (focusable)'}\n        </md-assist-chip>\n      </md-chip-set>\n    `;\n  },\n};\n\nconst filters: MaterialStoryInit<StoryKnobs> = {\n  name: 'Filter chips',\n  styles,\n  render({label, elevated, disabled, scrolling}) {\n    const classes = {'scrolling': scrolling};\n    return html`\n      <md-chip-set class=${classMap(classes)} aria-label=\"Filter chips\">\n        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated}>\n          ${label || 'Filter chip'}\n        </md-filter-chip>\n        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated}>\n          <md-icon slot=\"icon\">local_laundry_service</md-icon>\n          ${label || 'Filter chip with icon'}\n        </md-filter-chip>\n        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated} removable>\n          ${label || 'Removable filter chip'}\n        </md-filter-chip>\n        <md-filter-chip\n          soft-disabled\n          always-focusable\n          ?elevated=${elevated}\n          removable>\n          ${label || 'Soft-disabled filter chip (focusable)'}\n        </md-filter-chip>\n      </md-chip-set>\n    `;\n  },\n};\n\nconst inputs: MaterialStoryInit<StoryKnobs> = {\n  name: 'Input chips',\n  styles,\n  render({label, disabled, scrolling}) {\n    const classes = {'scrolling': scrolling};\n    return html`\n      <md-chip-set class=${classMap(classes)} aria-label=\"Input chips\">\n        <md-input-chip ?disabled=${disabled}>\n          ${label || 'Input chip'}\n        </md-input-chip>\n        <md-input-chip ?disabled=${disabled}>\n          <md-icon slot=\"icon\">local_laundry_service</md-icon>\n          ${label || 'Input chip with icon'}\n        </md-input-chip>\n        <md-input-chip ?disabled=${disabled} avatar>\n          <img\n            slot=\"icon\"\n            src=\"https://lh3.googleusercontent.com/a/default-user=s48\" />\n          ${label || 'Input chip with avatar'}\n        </md-input-chip>\n        <md-input-chip href=\"https://google.com\" target=\"_blank\"\n          >${GOOGLE_LOGO} ${label || 'Input link chip'}</md-input-chip\n        >\n        <md-input-chip ?disabled=${disabled} remove-only>\n          ${label || 'Remove-only input chip'}\n        </md-input-chip>\n        <md-input-chip soft-disabled always-focusable>\n          ${label || 'Soft-disabled input chip (focusable)'}\n        </md-input-chip>\n      </md-chip-set>\n    `;\n  },\n};\n\nconst suggestions: MaterialStoryInit<StoryKnobs> = {\n  name: 'Suggestion chips',\n  styles,\n  render({label, elevated, disabled, scrolling}) {\n    const classes = {'scrolling': scrolling};\n    return html`\n      <md-chip-set class=${classMap(classes)} aria-label=\"Suggestion chips\">\n        <md-suggestion-chip ?disabled=${disabled} ?elevated=${elevated}>\n          ${label || 'Suggestion chip'}\n        </md-suggestion-chip>\n        <md-suggestion-chip ?disabled=${disabled} ?elevated=${elevated}>\n          <md-icon slot=\"icon\">local_laundry_service</md-icon>\n          ${label || 'Suggestion chip with icon'}\n        </md-suggestion-chip>\n        <md-suggestion-chip\n          ?elevated=${elevated}\n          href=\"https://google.com\"\n          target=\"_blank\"\n          >${GOOGLE_LOGO} ${label || 'Suggestion link chip'}</md-suggestion-chip\n        >\n        <md-suggestion-chip\n          soft-disabled\n          always-focusable\n          ?elevated=${elevated}>\n          ${label || 'Soft-disabled suggestion chip (focusable)'}\n        </md-suggestion-chip>\n      </md-chip-set>\n    `;\n  },\n};\n\n/** Chips stories. */\nexport const stories = [assist, filters, inputs, suggestions];\n"
  },
  {
    "path": "chips/filter-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './internal/elevated-styles.js';\nimport {FilterChip} from './internal/filter-chip.js';\nimport {styles} from './internal/filter-styles.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filter-chip': MdFilterChip;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filter-chip')\nexport class MdFilterChip extends FilterChip {\n  static override styles: CSSResultOrNative[] = [\n    sharedStyles,\n    elevatedStyles,\n    trailingIconStyles,\n    selectableStyles,\n    styles,\n  ];\n}\n"
  },
  {
    "path": "chips/filter-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilterChip} from './filter-chip.js';\n\ndescribe('<md-filter-chip>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilterChip.styles);\n  });\n});\n"
  },
  {
    "path": "chips/harness.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Chip} from './internal/chip.js';\n\n/**\n * Test harness for chips.\n */\nexport class ChipHarness extends Harness<Chip> {\n  action: 'primary' | 'trailing' = 'primary';\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    const {primaryId} = this.element as unknown as {primaryId: string};\n    const primaryAction =\n      primaryId &&\n      this.element.renderRoot.querySelector<HTMLElement>(`#${primaryId}`);\n    // Retrieve MultiActionChip's trailingAction\n    const {trailingAction} = this.element as {\n      trailingAction?: HTMLElement | null;\n    };\n\n    // Default to trailing action if there isn't a primary action and the user\n    // didn't explicitly set `harness.action = 'trailing'` (remove-only input\n    // chips).\n    if (this.action === 'trailing' || !primaryAction) {\n      if (!trailingAction) {\n        throw new Error(\n          '`ChipHarness.action` is \"trailing\", but the chip does not have a trailing action.',\n        );\n      }\n\n      return trailingAction;\n    }\n\n    if (!primaryAction) {\n      throw new Error(\n        '`ChipHarness.action` is \"primary\", but the chip does not have a primary action.',\n      );\n    }\n\n    return primaryAction;\n  }\n}\n"
  },
  {
    "path": "chips/input-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {InputChip} from './internal/input-chip.js';\nimport {styles} from './internal/input-styles.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-input-chip': MdInputChip;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-input-chip')\nexport class MdInputChip extends InputChip {\n  static override styles: CSSResultOrNative[] = [\n    sharedStyles,\n    trailingIconStyles,\n    selectableStyles,\n    styles,\n  ];\n}\n"
  },
  {
    "path": "chips/input-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdInputChip} from './input-chip.js';\n\ndescribe('<md-input-chip>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdInputChip.styles);\n  });\n});\n"
  },
  {
    "path": "chips/internal/_assist-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-assist-chip-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-assist-chip-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-assist-chip-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  @media (forced-colors: active) {\n    .link .outline {\n      border-color: ActiveText;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/_chip-set.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles() {\n  :host {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n}\n"
  },
  {
    "path": "chips/internal/_elevated.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use '../../elevation/elevation';\n// go/keep-sorted end\n\n@mixin styles() {\n  .elevated {\n    @include elevation.theme(\n      (\n        'level': var(--_elevated-container-elevation),\n        'shadow-color': var(--_elevated-container-shadow-color),\n      )\n    );\n  }\n\n  .elevated::before {\n    background: var(--_elevated-container-color);\n  }\n\n  .elevated:hover {\n    @include elevation.theme(\n      (\n        'level': var(--_elevated-hover-container-elevation),\n      )\n    );\n  }\n\n  .elevated:focus-within {\n    @include elevation.theme(\n      (\n        'level': var(--_elevated-focus-container-elevation),\n      )\n    );\n  }\n\n  .elevated:active {\n    @include elevation.theme(\n      (\n        'level': var(--_elevated-pressed-container-elevation),\n      )\n    );\n  }\n\n  .elevated.disabled {\n    @include elevation.theme(\n      (\n        'level': var(--_elevated-disabled-container-elevation),\n      )\n    );\n  }\n\n  .elevated.disabled::before {\n    background: var(--_elevated-disabled-container-color);\n    opacity: var(--_elevated-disabled-container-opacity);\n  }\n\n  @media (forced-colors: active) {\n    .elevated md-elevation {\n      border: 1px solid CanvasText;\n    }\n\n    .elevated.disabled md-elevation {\n      border-color: GrayText;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/_filter-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filter-chip-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-filter-chip-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filter-chip-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .selected.elevated::before {\n    background: var(--_elevated-selected-container-color);\n  }\n\n  .checkmark {\n    height: var(--_icon-size);\n    width: var(--_icon-size);\n  }\n\n  .disabled .checkmark {\n    opacity: var(--_disabled-leading-icon-opacity);\n  }\n\n  @media (forced-colors: active) {\n    .disabled .checkmark {\n      opacity: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/_input-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-input-chip-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-input-chip-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-input-chip-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  :host([avatar]) {\n    // Use a rounded border by default for avatar chips. Recreating the\n    // fallbacks allows `--md-input-chip-container-shape` to cascade and\n    // override this without needing to add more specificity for avatar chips.\n    --_container-shape-start-start: var(\n      --md-input-chip-container-shape-start-start,\n      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))\n    );\n    --_container-shape-start-end: var(\n      --md-input-chip-container-shape-start-end,\n      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))\n    );\n    --_container-shape-end-end: var(\n      --md-input-chip-container-shape-end-end,\n      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))\n    );\n    --_container-shape-end-start: var(\n      --md-input-chip-container-shape-end-start,\n      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))\n    );\n  }\n\n  .avatar .primary.action {\n    padding-inline-start: 4px;\n  }\n\n  .avatar .leading.icon ::slotted(:first-child) {\n    border-radius: var(--_avatar-shape);\n    height: var(--_avatar-size);\n    width: var(--_avatar-size);\n  }\n\n  .disabled.avatar .leading.icon {\n    opacity: var(--_disabled-avatar-opacity);\n  }\n\n  @media (forced-colors: active) {\n    .link .outline {\n      border-color: ActiveText;\n    }\n\n    .disabled.avatar .leading.icon {\n      opacity: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/_selectable.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use '../../ripple/ripple';\n// go/keep-sorted end\n\n@mixin styles() {\n  .selected {\n    @include ripple.theme(\n      (\n        hover-color: var(--_selected-hover-state-layer-color),\n        hover-opacity: var(--_selected-hover-state-layer-opacity),\n        pressed-color: var(--_selected-pressed-state-layer-color),\n        pressed-opacity: var(--_selected-pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  :where(.selected)::before {\n    background: var(--_selected-container-color);\n  }\n\n  :where(.selected) .outline {\n    border-width: var(--_selected-outline-width);\n  }\n\n  :where(.selected.disabled)::before {\n    background: var(--_disabled-selected-container-color);\n    opacity: var(--_disabled-selected-container-opacity);\n  }\n\n  :where(.selected) .label {\n    color: var(--_selected-label-text-color);\n  }\n\n  :where(.selected:hover) .label {\n    color: var(--_selected-hover-label-text-color);\n  }\n\n  :where(.selected:focus) .label {\n    color: var(--_selected-focus-label-text-color);\n  }\n\n  :where(.selected:active) .label {\n    color: var(--_selected-pressed-label-text-color);\n  }\n\n  :where(.selected) .leading.icon {\n    color: var(--_selected-leading-icon-color);\n  }\n\n  :where(.selected:hover) .leading.icon {\n    color: var(--_selected-hover-leading-icon-color);\n  }\n\n  :where(.selected:focus) .leading.icon {\n    color: var(--_selected-focus-leading-icon-color);\n  }\n\n  :where(.selected:active) .leading.icon {\n    color: var(--_selected-pressed-leading-icon-color);\n  }\n\n  @media (forced-colors: active) {\n    :where(.selected:not(.elevated))::before {\n      // for forced-colors. Don't add it to elevated containers since elevation\n      // already have a border added.\n      border: 1px solid CanvasText;\n    }\n\n    :where(.selected) .outline {\n      border-width: 1px;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/_shared.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n@use '../../ripple/ripple';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n    border-end-end-radius: var(--_container-shape-end-end);\n    display: inline-flex;\n    height: var(--_container-height);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    @include ripple.theme(\n      (\n        'hover-color': var(--_hover-state-layer-color),\n        'hover-opacity': var(--_hover-state-layer-opacity),\n        'pressed-color': var(--_pressed-state-layer-color),\n        'pressed-opacity': var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  :host(:is([disabled], [soft-disabled])) {\n    pointer-events: none;\n  }\n\n  :host([touch-target='wrapper']) {\n    margin: max(0px, (48px - var(--_container-height)) / 2) 0;\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape-start-start': var(--_container-shape-start-start),\n        'shape-start-end': var(--_container-shape-start-end),\n        'shape-end-end': var(--_container-shape-end-end),\n        'shape-end-start': var(--_container-shape-end-start),\n      )\n    );\n  }\n\n  .container {\n    border-radius: inherit;\n    box-sizing: border-box;\n    display: flex;\n    height: 100%;\n    position: relative;\n    width: 100%;\n\n    // Container color, separate node for disabled opacity changes\n    &::before {\n      border-radius: inherit;\n      content: '';\n      inset: 0;\n      pointer-events: none;\n      position: absolute;\n    }\n  }\n\n  .container:not(.disabled) {\n    cursor: pointer;\n  }\n\n  .container.disabled {\n    pointer-events: none;\n  }\n\n  .cell {\n    display: flex;\n  }\n\n  .action {\n    align-items: baseline;\n    appearance: none;\n    background: none;\n    border: none;\n    border-radius: inherit;\n    display: flex;\n    outline: none;\n    padding: 0;\n    position: relative;\n    text-decoration: none;\n  }\n\n  .primary.action {\n    // Set a min-width on the primary action so that trailing actions remain\n    // inside the chip as the chip is resized.\n    min-width: 0;\n    padding-inline-start: var(--_leading-space);\n    padding-inline-end: var(--_trailing-space);\n  }\n\n  .has-icon .primary.action {\n    padding-inline-start: var(--_with-leading-icon-leading-space);\n  }\n\n  .touch {\n    height: 48px;\n    inset: 50% 0 0;\n    position: absolute;\n    transform: translateY(-50%);\n    width: 100%;\n  }\n\n  :host([touch-target='none']) .touch {\n    display: none;\n  }\n\n  // Outline, separate node for disabled opacity changes\n  .outline {\n    border: var(--_outline-width) solid var(--_outline-color);\n    border-radius: inherit;\n    inset: 0;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  :where(:focus) .outline {\n    border-color: var(--_focus-outline-color);\n  }\n\n  :where(.disabled) .outline {\n    border-color: var(--_disabled-outline-color);\n    opacity: var(--_disabled-outline-opacity);\n  }\n\n  md-ripple {\n    border-radius: inherit;\n  }\n\n  .label,\n  .icon,\n  .touch {\n    // Place content above background elements\n    z-index: 1;\n  }\n\n  .label {\n    align-items: center;\n    color: var(--_label-text-color);\n    display: flex;\n    font-family: var(--_label-text-font);\n    font-size: var(--_label-text-size);\n    font-weight: var(--_label-text-weight);\n    height: 100%;\n    line-height: var(--_label-text-line-height);\n    overflow: hidden;\n    user-select: none;\n  }\n\n  // An inner span is needed to truncate the label, since elements with a flex\n  // display do not support the text-overflow property. The outer wrapper .label\n  // needs to be a flex display to correctly set the element's baseline,\n  // supporting external elements aligning to the baseline of the chip's text\n  // instead of its edges or icons.\n  .label-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  :where(:hover) .label {\n    color: var(--_hover-label-text-color);\n  }\n\n  :where(:focus) .label {\n    color: var(--_focus-label-text-color);\n  }\n\n  :where(:active) .label {\n    color: var(--_pressed-label-text-color);\n  }\n\n  :where(.disabled) .label {\n    color: var(--_disabled-label-text-color);\n    opacity: var(--_disabled-label-text-opacity);\n  }\n\n  .icon {\n    align-self: center;\n    display: flex;\n    fill: currentColor;\n    position: relative;\n  }\n\n  .icon ::slotted(:first-child) {\n    font-size: var(--_icon-size);\n    height: var(--_icon-size);\n    width: var(--_icon-size);\n  }\n\n  .leading.icon {\n    color: var(--_leading-icon-color);\n  }\n\n  .leading.icon ::slotted(*),\n  .leading.icon svg {\n    margin-inline-end: var(--_icon-label-space);\n  }\n\n  :where(:hover) .leading.icon {\n    color: var(--_hover-leading-icon-color);\n  }\n\n  :where(:focus) .leading.icon {\n    color: var(--_focus-leading-icon-color);\n  }\n\n  :where(:active) .leading.icon {\n    color: var(--_pressed-leading-icon-color);\n  }\n\n  :where(.disabled) .leading.icon {\n    color: var(--_disabled-leading-icon-color);\n    opacity: var(--_disabled-leading-icon-opacity);\n  }\n\n  @media (forced-colors: active) {\n    :where(.disabled) :is(.label, .outline, .leading.icon) {\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n\n  a,\n  button {\n    // Override the user-agent text-transform: none of <button> and <a>\n    text-transform: inherit;\n  }\n\n  a,\n  button:not(:disabled, [aria-disabled='true']) {\n    cursor: inherit;\n  }\n}\n"
  },
  {
    "path": "chips/internal/_suggestion-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-suggestion-chip-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-suggestion-chip-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-suggestion-chip-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  @media (forced-colors: active) {\n    .link .outline {\n      border-color: ActiveText;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/_trailing-icon.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n// go/keep-sorted end\n\n@mixin styles() {\n  .trailing.action {\n    align-items: center;\n    justify-content: center;\n    padding-inline-start: var(--_icon-label-space);\n    padding-inline-end: var(--_with-trailing-icon-trailing-space);\n  }\n\n  .trailing.action :is(md-ripple, md-focus-ring) {\n    border-radius: 50%;\n    height: calc(4 / 3 * var(--_icon-size)); // 24px default\n    width: calc(4 / 3 * var(--_icon-size)); // 24px default\n  }\n\n  .trailing.action md-focus-ring {\n    inset: unset;\n  }\n\n  .has-trailing .primary.action {\n    padding-inline-end: 0;\n  }\n\n  .trailing.icon {\n    color: var(--_trailing-icon-color);\n    height: var(--_icon-size);\n    width: var(--_icon-size);\n  }\n\n  :where(:hover) .trailing.icon {\n    color: var(--_hover-trailing-icon-color);\n  }\n\n  :where(:focus) .trailing.icon {\n    color: var(--_focus-trailing-icon-color);\n  }\n\n  :where(:active) .trailing.icon {\n    color: var(--_pressed-trailing-icon-color);\n  }\n\n  :where(.disabled) .trailing.icon {\n    color: var(--_disabled-trailing-icon-color);\n    opacity: var(--_disabled-trailing-icon-opacity);\n  }\n\n  :where(.selected) .trailing.icon {\n    color: var(--_selected-trailing-icon-color);\n  }\n\n  :where(.selected:hover) .trailing.icon {\n    color: var(--_selected-hover-trailing-icon-color);\n  }\n\n  :where(.selected:focus) .trailing.icon {\n    color: var(--_selected-focus-trailing-icon-color);\n  }\n\n  :where(.selected:active) .trailing.icon {\n    color: var(--_selected-pressed-trailing-icon-color);\n  }\n\n  @media (forced-colors: active) {\n    .trailing.icon {\n      color: ButtonText;\n    }\n\n    :where(.disabled) .trailing.icon {\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/assist-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {\n  @property({type: Boolean}) elevated = false;\n  @property() href = '';\n  /**\n   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the chip is used as a link (`href` is set).\n   */\n  @property() download = '';\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected get primaryId() {\n    return this.href ? 'link' : 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && (this.disabled || this.softDisabled);\n  }\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      // Link chips cannot be disabled\n      disabled: !this.href && (this.disabled || this.softDisabled),\n      elevated: this.elevated,\n      link: !!this.href,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a\n          class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          download=${this.download || nothing}\n          target=${this.target || nothing}\n          >${content}</a\n        >\n      `;\n    }\n\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-disabled=${this.softDisabled || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation part=\"elevation\"></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n}\n"
  },
  {
    "path": "chips/internal/assist-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\n\nimport {Environment} from '../../testing/environment.js';\n\nimport {AssistChip} from './assist-chip.js';\n\ncustomElements.define('test-assist-chip', AssistChip);\n\ndescribe('Assist chip', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const chip = new AssistChip();\n    env.render(html`${chip}`);\n    await env.waitForStability();\n    return chip;\n  }\n\n  describe('links', () => {\n    it('should render a link when provided an href', async () => {\n      const chip = await setupTest();\n      chip.href = 'link';\n      await chip.updateComplete;\n\n      expect(chip.renderRoot.querySelector('a'))\n        .withContext('should have a rendered <a> link')\n        .toBeTruthy();\n    });\n\n    it('should not allow link chips to be disabled', async () => {\n      const chip = await setupTest();\n      chip.href = 'link';\n      chip.disabled = true;\n      await chip.updateComplete;\n\n      expect(chip.renderRoot.querySelector('.disabled,:disabled'))\n        .withContext('should not have any disabled styling or behavior')\n        .toBeNull();\n    });\n\n    it('should not allow link chips to be soft-disabled', async () => {\n      // Arrange\n      // Act\n      const chip = await setupTest();\n      chip.href = 'link';\n      chip.softDisabled = true;\n      await chip.updateComplete;\n\n      // Assert\n      expect(chip.renderRoot.querySelector('.disabled,:disabled'))\n        .withContext('should not have any disabled styling or behavior')\n        .toBeNull();\n    });\n  });\n\n  it('should use aria-disabled when soft-disabled', async () => {\n    // Arrange\n    // Act\n    const chip = await setupTest();\n    chip.softDisabled = true;\n    await chip.updateComplete;\n\n    // Assert\n    expect(chip.renderRoot.querySelector('button[aria-disabled=\"true\"]'))\n      .withContext('should have aria-disabled=\"true\"')\n      .not.toBeNull();\n  });\n\n  it('should be focusable when soft-disabled', async () => {\n    // Arrange\n    const chip = await setupTest();\n    chip.softDisabled = true;\n    await chip.updateComplete;\n\n    // Act\n    chip.focus();\n\n    // Assert\n    expect(document.activeElement)\n      .withContext('soft-disabled chip should be focused')\n      .toBe(chip);\n  });\n\n  it('should not be clickable when soft-disabled', async () => {\n    // Arrange\n    const clickListener = jasmine.createSpy('clickListener');\n    const chip = await setupTest();\n    chip.softDisabled = true;\n    chip.addEventListener('click', clickListener);\n\n    // Act\n    chip.click();\n\n    // Assert\n    expect(clickListener).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "chips/internal/assist-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './assist-chip';\n// go/keep-sorted end\n\n@include assist-chip.styles;\n"
  },
  {
    "path": "chips/internal/chip-set-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './chip-set';\n// go/keep-sorted end\n\n@include chip-set.styles;\n"
  },
  {
    "path": "chips/internal/chip-set.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A chip set component.\n */\nexport class ChipSet extends LitElement {\n  get chips() {\n    return this.childElements.filter(\n      (child): child is Chip => child instanceof Chip,\n    );\n  }\n\n  @queryAssignedElements() private readonly childElements!: HTMLElement[];\n  private readonly internals =\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('focusin', this.updateTabIndices.bind(this));\n      this.addEventListener('update-focus', this.updateTabIndices.bind(this));\n      this.addEventListener('keydown', this.handleKeyDown.bind(this));\n      this.internals.role = 'toolbar';\n    }\n  }\n\n  protected override render() {\n    return html`<slot @slotchange=${this.updateTabIndices}></slot>`;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    const isHome = event.key === 'Home';\n    const isEnd = event.key === 'End';\n    // Ignore non-navigation keys\n    if (!isLeft && !isRight && !isHome && !isEnd) {\n      return;\n    }\n\n    const {chips} = this as {chips: MaybeMultiActionChip[]};\n    // Don't try to select another chip if there aren't any.\n    if (chips.length < 2) {\n      return;\n    }\n\n    // Prevent default interactions, such as scrolling.\n    event.preventDefault();\n\n    if (isHome || isEnd) {\n      const index = isHome ? 0 : chips.length - 1;\n      chips[index].focus({trailing: isEnd});\n      this.updateTabIndices();\n      return;\n    }\n\n    // Check if moving forwards or backwards\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft : isRight;\n    const focusedChip = chips.find((chip) => chip.matches(':focus-within'));\n    if (!focusedChip) {\n      // If there is not already a chip focused, select the first or last chip\n      // based on the direction we're traveling.\n      const nextChip = forwards ? chips[0] : chips[chips.length - 1];\n      nextChip.focus({trailing: !forwards});\n      this.updateTabIndices();\n      return;\n    }\n\n    const currentIndex = chips.indexOf(focusedChip);\n    let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;\n    // Search for the next sibling that is not disabled to select.\n    // If we return to the host index, there is nothing to select.\n    while (nextIndex !== currentIndex) {\n      if (nextIndex >= chips.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = chips.length - 1;\n      }\n\n      // Check if the next sibling is disabled. If so,\n      // move the index and continue searching.\n      //\n      // Some toolbar items may be focusable when disabled for increased\n      // visibility.\n      const nextChip = chips[nextIndex];\n      if (nextChip.disabled && !nextChip.alwaysFocusable) {\n        if (forwards) {\n          nextIndex++;\n        } else {\n          nextIndex--;\n        }\n\n        continue;\n      }\n\n      nextChip.focus({trailing: !forwards});\n      this.updateTabIndices();\n      break;\n    }\n  }\n\n  private updateTabIndices() {\n    // The chip that should be focusable is either the chip that currently has\n    // focus or the first chip that can be focused.\n    const {chips} = this;\n    let chipToFocus: Chip | undefined;\n    for (const chip of chips) {\n      const isChipFocusable = chip.alwaysFocusable || !chip.disabled;\n      const chipIsFocused = chip.matches(':focus-within');\n      if (chipIsFocused && isChipFocusable) {\n        // Found the first chip that is actively focused. This overrides the\n        // first focusable chip found.\n        chipToFocus = chip;\n        continue;\n      }\n\n      if (isChipFocusable && !chipToFocus) {\n        chipToFocus = chip;\n      }\n\n      // Disable non-focused chips. If we disable all of them, we'll grant focus\n      // to the first focusable child that was found.\n      chip.tabIndex = -1;\n    }\n\n    if (chipToFocus) {\n      chipToFocus.tabIndex = 0;\n    }\n  }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n  focus(options?: FocusOptions & {trailing?: boolean}): void;\n}\n"
  },
  {
    "path": "chips/internal/chip-set_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {Harness} from '../../testing/harness.js';\nimport {ChipHarness} from '../harness.js';\n\nimport {AssistChip} from './assist-chip.js';\nimport {Chip} from './chip.js';\nimport {ChipSet} from './chip-set.js';\nimport {InputChip} from './input-chip.js';\n\n@customElement('test-chip-set')\nclass TestChipSet extends ChipSet {}\n@customElement('test-chip-set-assist-chip')\nclass TestAssistChip extends AssistChip {}\n@customElement('test-chip-set-input-chip')\nclass TestInputChip extends InputChip {}\n\ndescribe('Chip set', () => {\n  const env = new Environment();\n\n  async function setupTest(children: Node[]) {\n    const chipSet = new TestChipSet();\n    env.render(html`\n      <style>\n        /* Help visualize focus rings while debugging */\n        test-chip-set-assist-chip,\n        test-chip-set-input-chip,\n        test-chip-set-filter-chip {\n          position: relative;\n        }\n      </style>\n      ${chipSet}\n    `);\n    chipSet.append(...children);\n    await env.waitForStability();\n    return chipSet;\n  }\n\n  describe('chips', () => {\n    it('should return only chip children', async () => {\n      const notAChip = document.createElement('div');\n      const chip = new TestAssistChip();\n      const chipSet = await setupTest([notAChip, chip]);\n\n      expect(chipSet.chips).toEqual([chip]);\n    });\n  });\n\n  describe('navigation', () => {\n    it('should add tabindex=\"-1\" to all chips except the first', async () => {\n      const chipSet = await setupTest([\n        new TestAssistChip(),\n        new TestAssistChip(),\n        new TestAssistChip(),\n      ]);\n\n      expect(chipSet.chips[0].getAttribute('tabindex'))\n        .withContext('first tabindex')\n        .toBe('0');\n      expect(chipSet.chips[1].getAttribute('tabindex'))\n        .withContext('second tabindex')\n        .toBe('-1');\n      expect(chipSet.chips[2].getAttribute('tabindex'))\n        .withContext('third tabindex')\n        .toBe('-1');\n    });\n\n    async function testNavigation({\n      chipSet,\n      ltrKey,\n      rtlKey,\n      current,\n      next,\n    }: {\n      chipSet: ChipSet;\n      ltrKey: string;\n      rtlKey: string;\n      current: Chip | null;\n      next: Chip;\n    }) {\n      const harness = current ? new ChipHarness(current) : new Harness(chipSet);\n      // Don't use harness focusing since we need to test real focus states\n      current?.focus();\n      await harness.keypress(ltrKey);\n      expect(next.matches(':focus-within'))\n        .withContext(`next chip is focused in LTR after ${ltrKey}`)\n        .toBeTrue();\n\n      next.blur();\n      chipSet.style.direction = 'rtl';\n      current?.focus();\n      await harness.keypress(rtlKey);\n      expect(next.matches(':focus-within'))\n        .withContext(`next chip is focused in RTL after ${rtlKey}`)\n        .toBeTrue();\n    }\n\n    it('should navigate forward on horizontal arrow keys', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'ArrowRight',\n        rtlKey: 'ArrowLeft',\n        current: first,\n        next: second,\n      });\n    });\n\n    it('should navigate backward on horizontal keys', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'ArrowLeft',\n        rtlKey: 'ArrowRight',\n        current: second,\n        next: first,\n      });\n    });\n\n    it('should navigate to the first chip on Home', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'Home',\n        rtlKey: 'Home',\n        current: second,\n        next: first,\n      });\n    });\n\n    it('should navigate to the last chip on End', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'End',\n        rtlKey: 'End',\n        current: second,\n        next: third,\n      });\n    });\n\n    it('should navigate to first chip on forward when none focused', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'ArrowRight',\n        rtlKey: 'ArrowLeft',\n        current: null,\n        next: first,\n      });\n    });\n\n    it('should navigate to last chip on backward when none focused', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'ArrowLeft',\n        rtlKey: 'ArrowRight',\n        current: null,\n        next: third,\n      });\n    });\n\n    it('should skip over disabled chips', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      second.disabled = true;\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'ArrowRight',\n        rtlKey: 'ArrowLeft',\n        current: first,\n        next: third,\n      });\n    });\n\n    it('should NOT skip over disabled always focusable chips', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      second.disabled = true;\n      second.alwaysFocusable = true;\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'ArrowRight',\n        rtlKey: 'ArrowLeft',\n        current: first,\n        next: second,\n      });\n    });\n\n    it('should NOT skip over soft-disabled chips', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      second.softDisabled = true;\n      const third = new TestAssistChip();\n      const chipSet = await setupTest([first, second, third]);\n      await testNavigation({\n        chipSet,\n        ltrKey: 'ArrowRight',\n        rtlKey: 'ArrowLeft',\n        current: first,\n        next: second,\n      });\n    });\n\n    it('should focus trailing actions when navigating backwards', async () => {\n      const first = new TestInputChip();\n      const second = new TestInputChip();\n      const third = new TestInputChip();\n      await setupTest([first, second, third]);\n\n      const harness = new ChipHarness(second);\n      // Don't use harness focusing since we need to test real focus states\n      second.focus();\n      await harness.keypress('ArrowLeft');\n      const {trailingAction} = first as unknown as {\n        trailingAction: HTMLElement;\n      };\n      expect(trailingAction.matches(':focus-within'))\n        .withContext('trailing action of first chip is focused')\n        .toBeTrue();\n    });\n\n    it('should ignore other keyboard events', async () => {\n      const first = new TestAssistChip();\n      const second = new TestAssistChip();\n      const third = new TestAssistChip();\n      await setupTest([first, second, third]);\n\n      const harness = new ChipHarness(first);\n      // Don't use harness focusing since we need to test real focus states\n      first.focus();\n      await harness.keypress('Enter');\n      expect(first.matches(':focus-within'))\n        .withContext('first chip is still focused')\n        .toBeTrue();\n    });\n\n    it('should do nothing if there are not at least two chips', async () => {\n      const single = new TestAssistChip();\n      await setupTest([single]);\n\n      const harness = new ChipHarness(single);\n      // Don't use harness focusing since we need to test real focus states\n      single.focus();\n      await harness.keypress('ArrowRight');\n      expect(single.matches(':focus-within'))\n        .withContext('single chip is still focused')\n        .toBeTrue();\n    });\n  });\n});\n"
  },
  {
    "path": "chips/internal/chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\n\n// Separate variable needed for closure.\nconst chipBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A chip component.\n *\n * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles\n */\nexport abstract class Chip extends chipBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the chip is disabled.\n   *\n   * Disabled chips are not focusable, unless `always-focusable` is set.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Whether or not the chip is \"soft-disabled\" (disabled but still\n   * focusable).\n   *\n   * Use this when a chip needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * When true, allow disabled chips to be focused with arrow keys.\n   *\n   * Add this when a chip needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   *\n   * @deprecated Use `softDisabled` instead of `alwaysFocusable` + `disabled`.\n   */\n  @property({type: Boolean, attribute: 'always-focusable'})\n  alwaysFocusable = false;\n\n  // TODO(b/350810013): remove the label property.\n  /**\n   * The label of the chip.\n   *\n   * @deprecated Set text as content of the chip instead.\n   */\n  @property() label = '';\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a chip has a `slot=\"icon\"` to avoid a Flash Of\n   * Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-icon'}) hasIcon =\n    false;\n\n  /**\n   * The `id` of the action the primary focus ring and ripple are for.\n   * TODO(b/310046938): use the same id for both elements\n   */\n  protected abstract readonly primaryId: string;\n\n  /**\n   * Whether or not the primary ripple is disabled (defaults to `disabled`).\n   * Some chip actions such as links cannot be disabled.\n   */\n  protected get rippleDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleClick.bind(this));\n    }\n  }\n\n  override focus(options?: FocusOptions) {\n    if (this.disabled && !this.alwaysFocusable) {\n      return;\n    }\n\n    super.focus(options);\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"container ${classMap(this.getContainerClasses())}\">\n        ${this.renderContainerContent()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Chip>) {\n    if (changed.has('disabled') && changed.get('disabled') !== undefined) {\n      this.dispatchEvent(new Event('update-focus', {bubbles: true}));\n    }\n  }\n\n  protected getContainerClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled || this.softDisabled,\n      'has-icon': this.hasIcon,\n    };\n  }\n\n  protected renderContainerContent() {\n    return html`\n      ${this.renderOutline()}\n      <md-focus-ring part=\"focus-ring\" for=${this.primaryId}></md-focus-ring>\n      <md-ripple\n        for=${this.primaryId}\n        ?disabled=${this.rippleDisabled}></md-ripple>\n      ${this.renderPrimaryAction(this.renderPrimaryContent())}\n    `;\n  }\n\n  protected renderOutline() {\n    return html`<span class=\"outline\"></span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>`;\n  }\n\n  protected abstract renderPrimaryAction(content: unknown): unknown;\n\n  private renderPrimaryContent() {\n    return html`\n      <span class=\"leading icon\" aria-hidden=\"true\">\n        ${this.renderLeadingIcon()}\n      </span>\n      <span class=\"label\">\n        <span class=\"label-text\" id=\"label\">\n          ${this.label ? this.label : html`<slot></slot>`}\n        </span>\n      </span>\n      <span class=\"touch\"></span>\n    `;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements({flatten: true}).length > 0;\n  }\n\n  private handleClick(event: Event) {\n    // If the chip is soft-disabled or disabled + always-focusable, we need to\n    // explicitly prevent the click from propagating to other event listeners\n    // as well as prevent the default action.\n    if (this.softDisabled || (this.disabled && this.alwaysFocusable)) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {ChipHarness} from '../harness.js';\n\nimport {Chip} from './chip.js';\n\n@customElement('test-chip')\nclass TestChip extends Chip {\n  primaryId = 'button';\n\n  override renderPrimaryAction() {\n    return html`<button id=${this.primaryId}>Chip</button>`;\n  }\n}\n\ndescribe('Chip', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const chip = new TestChip();\n    env.render(html`${chip}`);\n    await env.waitForStability();\n    return {chip, harness: new ChipHarness(chip)};\n  }\n\n  it('should dispatch `update-focus` for chip set when disabled changes', async () => {\n    const {chip} = await setupTest();\n    const updateFocusListener = jasmine.createSpy('updateFocusListener');\n    chip.addEventListener('update-focus', updateFocusListener);\n\n    chip.disabled = true;\n    await env.waitForStability();\n    expect(updateFocusListener).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "chips/internal/elevated-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './elevated';\n// go/keep-sorted end\n\n@include elevated.styles;\n"
  },
  {
    "path": "chips/internal/filter-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid\n   * a Flash Of Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})\n  hasSelectedIcon = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action')\n  protected readonly primaryAction!: HTMLElement | null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n      'has-icon': this.hasIcon || this.selected,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.softDisabled || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClickOnChild}\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <slot name=\"selected-icon\">\n        <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <path\n            d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled || this.softDisabled,\n      });\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation part=\"elevation\"></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClickOnChild(event: MouseEvent) {\n    if (this.disabled || this.softDisabled) {\n      return;\n    }\n\n    // Store prevValue to revert in case `chip.selected` is changed during an\n    // event listener.\n    const prevValue = this.selected;\n    this.selected = !this.selected;\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      // We should not do `this.selected = !this.selected`, since a client\n      // click listener could change its value. Instead, always revert to the\n      // original value.\n      this.selected = prevValue;\n      return;\n    }\n  }\n}\n"
  },
  {
    "path": "chips/internal/filter-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {ChipHarness} from '../harness.js';\n\nimport {FilterChip} from './filter-chip.js';\n\n@customElement('test-filter-chip')\nclass TestFilterChip extends FilterChip {\n  declare primaryAction: HTMLElement;\n}\n\ndescribe('Filter chip', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const chip = new TestFilterChip();\n    env.render(html`${chip}`);\n    await env.waitForStability();\n    return {chip, harness: new ChipHarness(chip)};\n  }\n\n  describe('selection', () => {\n    it('should select on click', async () => {\n      const {chip, harness} = await setupTest();\n\n      await harness.clickWithMouse();\n      expect(chip.selected).withContext('chip.selected').toBeTrue();\n    });\n\n    it('should deselect on click', async () => {\n      const {chip, harness} = await setupTest();\n      chip.selected = true;\n\n      await harness.clickWithMouse();\n      expect(chip.selected).withContext('chip.selected').toBeFalse();\n    });\n\n    it('should not select on click when disabled', async () => {\n      const {chip, harness} = await setupTest();\n      chip.disabled = true;\n\n      await harness.clickWithMouse();\n      expect(chip.selected).withContext('chip.selected').toBeFalse();\n    });\n\n    it('should not select on click when soft-disabled', async () => {\n      // Arrange\n      const {chip, harness} = await setupTest();\n      chip.softDisabled = true;\n\n      // Act\n      await harness.clickWithMouse();\n\n      // Assert\n      expect(chip.selected).withContext('chip.selected').toBeFalse();\n    });\n\n    it('can prevent default', async () => {\n      const {chip, harness} = await setupTest();\n      const handler = jasmine.createSpy();\n      chip.addEventListener('selected', handler);\n\n      chip.addEventListener('click', (event) => {\n        event.preventDefault();\n      });\n\n      await harness.clickWithMouse();\n      await harness.clickWithMouse();\n      expect(handler).toHaveBeenCalledTimes(0);\n    });\n\n    it('always reverts value on preventDefault() even if selected is changed in listener', async () => {\n      const {chip, harness} = await setupTest();\n\n      chip.addEventListener(\n        'click',\n        (event) => {\n          event.preventDefault();\n          chip.selected = false;\n        },\n        {once: true},\n      );\n\n      await harness.clickWithMouse();\n      expect(chip.selected)\n        .withContext('chip.selected reverts to false')\n        .toBeFalse();\n\n      chip.selected = true;\n      chip.addEventListener(\n        'click',\n        (event) => {\n          event.preventDefault();\n          chip.selected = false;\n        },\n        {once: true},\n      );\n\n      await harness.clickWithMouse();\n      expect(chip.selected)\n        .withContext('chip.selected reverts to true')\n        .toBeTrue();\n    });\n  });\n\n  it('should be focusable when soft-disabled', async () => {\n    // Arrange\n    const {chip} = await setupTest();\n    chip.softDisabled = true;\n    await chip.updateComplete;\n\n    // Act\n    chip.focus();\n\n    // Assert\n    expect(document.activeElement)\n      .withContext('soft-disabled chip should be focused')\n      .toBe(chip);\n  });\n\n  it('should not be clickable when soft-disabled', async () => {\n    // Arrange\n    const clickListener = jasmine.createSpy('clickListener');\n    const {chip, harness} = await setupTest();\n    chip.softDisabled = true;\n    chip.addEventListener('click', clickListener);\n\n    // Act\n    await harness.clickWithMouse();\n\n    // Assert\n    expect(clickListener).not.toHaveBeenCalled();\n  });\n\n  it('should use aria-disabled when soft-disabled', async () => {\n    // Arrange\n    // Act\n    const {chip} = await setupTest();\n    chip.softDisabled = true;\n    await chip.updateComplete;\n\n    // Assert\n    expect(chip.renderRoot.querySelector('button[aria-disabled=\"true\"]'))\n      .withContext('should have aria-disabled=\"true\"')\n      .not.toBeNull();\n  });\n});\n"
  },
  {
    "path": "chips/internal/filter-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filter-chip';\n// go/keep-sorted end\n\n@include filter-chip.styles;\n"
  },
  {
    "path": "chips/internal/input-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * An input chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class InputChip extends MultiActionChip {\n  @property({type: Boolean}) avatar = false;\n  @property() href = '';\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n  @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  protected get primaryId() {\n    if (this.href) {\n      return 'link';\n    }\n\n    if (this.removeOnly) {\n      return '';\n    }\n\n    return 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && (this.disabled || this.softDisabled);\n  }\n\n  protected get primaryAction() {\n    // Don't use @query() since a remove-only input chip still has a span that\n    // has \"primary action\" classes.\n    if (this.removeOnly) {\n      return null;\n    }\n\n    return this.renderRoot.querySelector<HTMLElement>('.primary.action');\n  }\n\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      avatar: this.avatar,\n      // Link chips cannot be disabled\n      disabled: !this.href && (this.disabled || this.softDisabled),\n      link: !!this.href,\n      selected: this.selected,\n      'has-trailing': true,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a\n          class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n          >${content}</a\n        >\n      `;\n    }\n\n    if (this.removeOnly) {\n      return html`\n        <span class=\"primary action\" aria-label=${ariaLabel || nothing}>\n          ${content}\n        </span>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-disabled=${this.softDisabled || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    return renderRemoveButton({\n      focusListener,\n      ariaLabel: this.ariaLabelRemove,\n      disabled: !this.href && (this.disabled || this.softDisabled),\n      tabbable: this.removeOnly,\n    });\n  }\n}\n"
  },
  {
    "path": "chips/internal/input-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\n\nimport {Environment} from '../../testing/environment.js';\n\nimport {InputChip} from './input-chip.js';\n\ncustomElements.define('test-input-chip', InputChip);\n\ndescribe('Input chip', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const chip = new InputChip();\n    env.render(html`${chip}`);\n    await env.waitForStability();\n    return chip;\n  }\n\n  describe('links', () => {\n    it('should render a link when provided an href', async () => {\n      const chip = await setupTest();\n      chip.href = 'link';\n      await chip.updateComplete;\n\n      expect(chip.renderRoot.querySelector('a'))\n        .withContext('should have a rendered <a> link')\n        .toBeTruthy();\n    });\n\n    it('should not allow link chips to be disabled', async () => {\n      const chip = await setupTest();\n      chip.href = 'link';\n      chip.disabled = true;\n      await chip.updateComplete;\n\n      expect(chip.renderRoot.querySelector('.disabled,:disabled'))\n        .withContext('should not have any disabled styling or behavior')\n        .toBeNull();\n    });\n\n    it('should not allow link chips to be soft-disabled', async () => {\n      // Arrange\n      // Act\n      const chip = await setupTest();\n      chip.href = 'link';\n      chip.softDisabled = true;\n      await chip.updateComplete;\n\n      // Assert\n      expect(chip.renderRoot.querySelector('.disabled,:disabled'))\n        .withContext('should not have any disabled styling or behavior')\n        .toBeNull();\n    });\n  });\n\n  it('should use aria-disabled when soft-disabled', async () => {\n    // Arrange\n    // Act\n    const chip = await setupTest();\n    chip.softDisabled = true;\n    await chip.updateComplete;\n\n    // Assert\n    expect(chip.renderRoot.querySelector('button[aria-disabled=\"true\"]'))\n      .withContext('should have aria-disabled=\"true\"')\n      .not.toBeNull();\n  });\n\n  it('should be focusable when soft-disabled', async () => {\n    // Arrange\n    const chip = await setupTest();\n    chip.softDisabled = true;\n    await chip.updateComplete;\n\n    // Act\n    chip.focus();\n\n    // Assert\n    expect(document.activeElement)\n      .withContext('soft-disabled chip should be focused')\n      .toBe(chip);\n  });\n\n  it('should not be clickable when soft-disabled', async () => {\n    // Arrange\n    const clickListener = jasmine.createSpy('clickListener');\n    const chip = await setupTest();\n    chip.softDisabled = true;\n    chip.addEventListener('click', clickListener);\n\n    // Act\n    chip.click();\n\n    // Assert\n    expect(clickListener).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "chips/internal/input-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './input-chip';\n// go/keep-sorted end\n\n@include input-chip.styles;\n"
  },
  {
    "path": "chips/internal/multi-action-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer} from 'lit';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\nconst ARIA_LABEL_REMOVE = 'aria-label-remove';\n\n/**\n * A chip component with multiple actions.\n */\nexport abstract class MultiActionChip extends Chip {\n  get ariaLabelRemove(): string | null {\n    if (this.hasAttribute(ARIA_LABEL_REMOVE)) {\n      return this.getAttribute(ARIA_LABEL_REMOVE)!;\n    }\n\n    const {ariaLabel} = this as ARIAMixinStrict;\n\n    // TODO(b/350810013): remove `this.label` when label property is removed.\n    if (ariaLabel || this.label) {\n      return `Remove ${ariaLabel || this.label}`;\n    }\n\n    return null;\n  }\n\n  set ariaLabelRemove(ariaLabel: string | null) {\n    const prev = this.ariaLabelRemove;\n    if (ariaLabel === prev) {\n      return;\n    }\n\n    if (ariaLabel === null) {\n      this.removeAttribute(ARIA_LABEL_REMOVE);\n    } else {\n      this.setAttribute(ARIA_LABEL_REMOVE, ariaLabel);\n    }\n\n    this.requestUpdate();\n  }\n\n  protected abstract readonly primaryAction: HTMLElement | null;\n  protected abstract readonly trailingAction: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this);\n    if (!isServer) {\n      this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    }\n  }\n\n  override focus(options?: FocusOptions & {trailing?: boolean}) {\n    const isFocusable = this.alwaysFocusable || !this.disabled;\n    if (isFocusable && options?.trailing && this.trailingAction) {\n      this.trailingAction.focus(options);\n      return;\n    }\n\n    super.focus(options as FocusOptions);\n  }\n\n  protected override renderContainerContent() {\n    return html`\n      ${super.renderContainerContent()}\n      ${this.renderTrailingAction(this.handleTrailingActionFocus)}\n    `;\n  }\n\n  protected abstract renderTrailingAction(\n    focusListener: EventListener,\n  ): unknown;\n\n  private handleKeyDown(event: KeyboardEvent) {\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    // Ignore non-navigation keys.\n    if (!isLeft && !isRight) {\n      return;\n    }\n\n    if (!this.primaryAction || !this.trailingAction) {\n      // Does not have multiple actions.\n      return;\n    }\n\n    // Check if moving forwards or backwards\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft : isRight;\n    const isPrimaryFocused = this.primaryAction?.matches(':focus-within');\n    const isTrailingFocused = this.trailingAction?.matches(':focus-within');\n\n    if ((forwards && isTrailingFocused) || (!forwards && isPrimaryFocused)) {\n      // Moving outside of the chip, it will be handled by the chip set.\n      return;\n    }\n\n    // Prevent default interactions, such as scrolling.\n    event.preventDefault();\n    // Don't let the chip set handle this navigation event.\n    event.stopPropagation();\n    const actionToFocus = forwards ? this.trailingAction : this.primaryAction;\n    actionToFocus.focus();\n  }\n\n  private handleTrailingActionFocus() {\n    const {primaryAction, trailingAction} = this;\n    if (!primaryAction || !trailingAction) {\n      return;\n    }\n\n    // Temporarily turn off the primary action's focusability. This allows\n    // shift+tab from the trailing action to move to the previous chip rather\n    // than the primary action in the same chip.\n    primaryAction.tabIndex = -1;\n    trailingAction.addEventListener(\n      'focusout',\n      () => {\n        primaryAction.tabIndex = 0;\n      },\n      {once: true},\n    );\n  }\n}\n"
  },
  {
    "path": "chips/internal/multi-action-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {css, html, nothing} from 'lit';\nimport {customElement, property, query} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {ChipHarness} from '../harness.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n@customElement('test-multi-action-chip')\nclass TestMultiActionChip extends MultiActionChip {\n  static override styles = css`\n    :host {\n      position: relative;\n    }\n  `;\n\n  @query('#primary') primaryAction!: HTMLElement;\n  @query('.trailing.action') trailingAction!: HTMLElement;\n  @property() noTrailingAction = false;\n\n  protected primaryId = 'primary';\n\n  protected override renderPrimaryAction(content: unknown) {\n    return html`<button id=\"primary\">${content}</button>`;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.noTrailingAction) {\n      return nothing;\n    }\n\n    return renderRemoveButton({\n      focusListener,\n      ariaLabel: this.ariaLabelRemove,\n      disabled: this.disabled,\n    });\n  }\n}\n\ndescribe('Multi-action chips', () => {\n  const env = new Environment();\n\n  async function setupTest(\n    template = html`<test-multi-action-chip></test-multi-action-chip>`,\n  ): Promise<TestMultiActionChip> {\n    const root = env.render(template);\n    await env.waitForStability();\n    const chip = root.querySelector<TestMultiActionChip>(\n      'test-multi-action-chip',\n    );\n    if (!chip) {\n      throw new Error('Failed to query the rendered <test-multi-action-chip>');\n    }\n\n    return chip;\n  }\n\n  describe('navigation', () => {\n    it('should move internal focus forwards', async () => {\n      const chip = await setupTest();\n      const primaryHarness = new ChipHarness(chip);\n\n      await primaryHarness.focusWithKeyboard();\n      expect(chip.primaryAction.matches(':focus-within'))\n        .withContext('primary action is focused')\n        .toBeTrue();\n\n      await primaryHarness.keypress('ArrowRight');\n      expect(chip.trailingAction.matches(':focus-within'))\n        .withContext('trailing action is focused')\n        .toBeTrue();\n    });\n\n    it('should move internal focus forwards in rtl', async () => {\n      const chip = await setupTest();\n      chip.style.direction = 'rtl';\n      const primaryHarness = new ChipHarness(chip);\n\n      await primaryHarness.focusWithKeyboard();\n      expect(chip.primaryAction.matches(':focus-within'))\n        .withContext('primary action is focused')\n        .toBeTrue();\n\n      await primaryHarness.keypress('ArrowLeft');\n      expect(chip.trailingAction.matches(':focus-within'))\n        .withContext('trailing action is focused')\n        .toBeTrue();\n    });\n\n    it('should move internal focus backwards', async () => {\n      const chip = await setupTest();\n      const trailingHarness = new ChipHarness(chip);\n      trailingHarness.action = 'trailing';\n\n      await trailingHarness.focusWithKeyboard();\n      expect(chip.trailingAction.matches(':focus-within'))\n        .withContext('trailing action is focused')\n        .toBeTrue();\n\n      await trailingHarness.keypress('ArrowLeft');\n      expect(chip.primaryAction.matches(':focus-within'))\n        .withContext('primary action is focused')\n        .toBeTrue();\n    });\n\n    it('should move internal focus backwards in rtl', async () => {\n      const chip = await setupTest();\n      chip.style.direction = 'rtl';\n      const trailingHarness = new ChipHarness(chip);\n      trailingHarness.action = 'trailing';\n\n      await trailingHarness.focusWithKeyboard();\n      expect(chip.trailingAction.matches(':focus-within'))\n        .withContext('trailing action is focused')\n        .toBeTrue();\n\n      await trailingHarness.keypress('ArrowRight');\n      expect(chip.primaryAction.matches(':focus-within'))\n        .withContext('primary action is focused')\n        .toBeTrue();\n    });\n\n    it('should not bubble when navigating internally', async () => {\n      const chip = await setupTest();\n      const primaryHarness = new ChipHarness(chip);\n      const keydownHandler = jasmine.createSpy();\n      if (!chip.parentElement) {\n        throw new Error('Expected chip to have a parentElement for test.');\n      }\n\n      chip.parentElement.addEventListener('keydown', keydownHandler);\n\n      await primaryHarness.focusWithKeyboard();\n      await primaryHarness.keypress('ArrowRight');\n      expect(keydownHandler).not.toHaveBeenCalled();\n    });\n\n    it('should bubble event when navigating forward past trailing action', async () => {\n      const chip = await setupTest();\n      const trailingHarness = new ChipHarness(chip);\n      trailingHarness.action = 'trailing';\n      const keydownHandler = jasmine.createSpy();\n      if (!chip.parentElement) {\n        throw new Error('Expected chip to have a parentElement for test.');\n      }\n\n      chip.parentElement.addEventListener('keydown', keydownHandler);\n\n      await trailingHarness.focusWithKeyboard();\n      await trailingHarness.keypress('ArrowRight');\n      expect(keydownHandler).toHaveBeenCalledTimes(1);\n    });\n\n    it('should bubble event when navigating backward before primary action', async () => {\n      const chip = await setupTest();\n      const primaryHarness = new ChipHarness(chip);\n      const keydownHandler = jasmine.createSpy();\n      if (!chip.parentElement) {\n        throw new Error('Expected chip to have a parentElement for test.');\n      }\n\n      chip.parentElement.addEventListener('keydown', keydownHandler);\n\n      await primaryHarness.focusWithKeyboard();\n      await primaryHarness.keypress('ArrowLeft');\n      expect(keydownHandler).toHaveBeenCalledTimes(1);\n    });\n\n    it('should do nothing if it does not have multiple actions', async () => {\n      const chip = await setupTest();\n      chip.noTrailingAction = true;\n      await env.waitForStability();\n\n      const primaryHarness = new ChipHarness(chip);\n      await primaryHarness.focusWithKeyboard();\n      await primaryHarness.keypress('ArrowLeft');\n      expect(chip.primaryAction.matches(':focus-within'))\n        .withContext('primary action is still focused')\n        .toBeTrue();\n    });\n  });\n\n  describe('remove action', () => {\n    it('should remove chip from DOM when remove button clicked', async () => {\n      const chip = await setupTest();\n      const harness = new ChipHarness(chip);\n      harness.action = 'trailing';\n\n      expect(chip.parentElement)\n        .withContext('chip should be attached before removing')\n        .not.toBeNull();\n      await harness.clickWithMouse();\n      expect(chip.parentElement)\n        .withContext('chip should be detached after removing')\n        .toBeNull();\n    });\n\n    it('should dispatch a \"remove\" event when removed', async () => {\n      const chip = await setupTest();\n      const harness = new ChipHarness(chip);\n      harness.action = 'trailing';\n      const handler = jasmine.createSpy();\n      chip.addEventListener('remove', handler);\n\n      await harness.clickWithMouse();\n      expect(handler).toHaveBeenCalledTimes(1);\n    });\n\n    it('should not remove chip if \"remove\" event is default prevented', async () => {\n      const chip = await setupTest();\n      const harness = new ChipHarness(chip);\n      harness.action = 'trailing';\n      chip.addEventListener('remove', (event) => {\n        event.preventDefault();\n      });\n\n      await harness.clickWithMouse();\n      expect(chip.parentElement)\n        .withContext('chip should still be attached')\n        .not.toBeNull();\n    });\n\n    it('should provide a default \"ariaLabelRemove\" value', async () => {\n      const label = 'Label';\n      const chip = await setupTest(\n        html`<test-multi-action-chip>${label}</test-multi-action-chip>`,\n      );\n\n      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(`Remove ${label}`);\n    });\n\n    it('should provide a default \"ariaLabelRemove\" when \"ariaLabel\" is provided', async () => {\n      const label = 'Label';\n      const chip = await setupTest(\n        html`<test-multi-action-chip aria-label=${'Descriptive label'}>\n          ${label}\n        </test-multi-action-chip>`,\n      );\n\n      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(\n        `Remove ${chip.ariaLabel}`,\n      );\n    });\n\n    it('should allow setting a custom \"ariaLabelRemove\"', async () => {\n      const label = 'Label';\n      const customAriaLabelRemove = 'Remove custom label';\n      const chip = await setupTest(\n        html`<test-multi-action-chip\n          aria-label=${'Descriptive label'}\n          aria-label-remove=${customAriaLabelRemove}>\n          ${label}\n        </test-multi-action-chip>`,\n      );\n\n      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(\n        customAriaLabelRemove,\n      );\n    });\n\n    // TODO(b/350810013): remove test when label property is removed.\n    it('should provide a default \"ariaLabelRemove\" value (using the label property)', async () => {\n      const chip = await setupTest();\n      chip.label = 'Label';\n      await env.waitForStability();\n\n      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(\n        `Remove ${chip.label}`,\n      );\n    });\n\n    // TODO(b/350810013): remove test when label property is removed.\n    it('should provide a default \"ariaLabelRemove\" when \"ariaLabel\" is provided (using the label property)', async () => {\n      const chip = await setupTest();\n      chip.label = 'Label';\n      chip.ariaLabel = 'Descriptive label';\n      await env.waitForStability();\n\n      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(\n        `Remove ${chip.ariaLabel}`,\n      );\n    });\n\n    // TODO(b/350810013): remove test when label property is removed.\n    it('should allow setting a custom \"ariaLabelRemove\" (using the label property)', async () => {\n      const chip = await setupTest();\n      chip.label = 'Label';\n      chip.ariaLabel = 'Descriptive label';\n      const customAriaLabelRemove = 'Remove custom label';\n      chip.ariaLabelRemove = customAriaLabelRemove;\n      await env.waitForStability();\n\n      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(\n        customAriaLabelRemove,\n      );\n    });\n  });\n});\n\n/**\n * Returns the text content of a slot.\n */\nfunction getSlotTextContent(slot: HTMLSlotElement) {\n  // Remove any newlines, comments, and whitespace from the label slot.\n  let text = '';\n  for (const node of slot.assignedNodes() ?? []) {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent?.trim() || '';\n    }\n  }\n  return text;\n}\n\n/**\n * Returns the a11y label of the remove button. If the button has an aria-label,\n * it will return that. If it has aria-labelledby, it will return the text\n * content of the elements it is labelled by.\n */\nfunction getA11yLabelForChipRemoveButton(chip: TestMultiActionChip): string {\n  const removeButton = chip.shadowRoot!.querySelector<HTMLButtonElement>(\n    'button.trailing.action',\n  )!;\n\n  if (removeButton.ariaLabel) {\n    return removeButton.ariaLabel;\n  }\n\n  // If the remove button is not aria-labelled, it should be aria-labelledby.\n  const removeButtonAriaLabelledBy =\n    removeButton.getAttribute('aria-labelledby')!;\n  const elementsLabelledBy: HTMLElement[] = [];\n  removeButtonAriaLabelledBy.split(' ').forEach((id) => {\n    const labelledByElement = chip.shadowRoot?.getElementById(id);\n    if (!labelledByElement) {\n      throw new Error(\n        `Cannot find element with ID \"#{id}\" in the chip's shadow root`,\n      );\n    }\n    elementsLabelledBy.push(labelledByElement);\n  });\n  const textFromAriaLabelledBy: string[] = [];\n  elementsLabelledBy.forEach((element) => {\n    const unnamedSlotChildElement =\n      element.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (unnamedSlotChildElement) {\n      textFromAriaLabelledBy.push(getSlotTextContent(unnamedSlotChildElement));\n    } else {\n      textFromAriaLabelledBy.push(element.textContent ?? '');\n    }\n  });\n  return textFromAriaLabelledBy.join(' ');\n}\n"
  },
  {
    "path": "chips/internal/selectable-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './selectable';\n// go/keep-sorted end\n\n@include selectable.styles;\n"
  },
  {
    "path": "chips/internal/shared-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "chips/internal/suggestion-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AssistChip} from './assist-chip.js';\n\n/**\n * A suggestion chip component.\n */\nexport class SuggestionChip extends AssistChip {}\n\n// Note: assist and suggestion chips are functionally identical with different\n// tokens.\n"
  },
  {
    "path": "chips/internal/suggestion-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {AssistChip} from './assist-chip.js';\nimport {SuggestionChip} from './suggestion-chip.js';\n\ncustomElements.define('test-suggestion-chip', SuggestionChip);\n\ndescribe('Suggestion chip', () => {\n  it('should be an assist chip', () => {\n    expect(new SuggestionChip()).toBeInstanceOf(AssistChip);\n  });\n});\n"
  },
  {
    "path": "chips/internal/suggestion-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './suggestion-chip';\n// go/keep-sorted end\n\n@include suggestion-chip.styles;\n"
  },
  {
    "path": "chips/internal/trailing-icon-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './trailing-icon';\n// go/keep-sorted end\n\n@include trailing-icon.styles;\n"
  },
  {
    "path": "chips/internal/trailing-icons.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, nothing} from 'lit';\n\nimport {Chip} from './chip.js';\n\ninterface RemoveButtonProperties {\n  ariaLabel: string | null;\n  disabled: boolean;\n  focusListener: EventListener;\n  tabbable?: boolean;\n}\n\n/** @protected */\nexport function renderRemoveButton({\n  ariaLabel,\n  disabled,\n  focusListener,\n  tabbable = false,\n}: RemoveButtonProperties) {\n  // When an aria-label is not provided, we use two spans with aria-labelledby\n  // to create the \"Remove <textContent>\" label for the remove button. The first\n  // is this #remove-label span, the second is the chip's #label slot span.\n  return html`\n    <span id=\"remove-label\" hidden aria-hidden=\"true\">Remove</span>\n    <button\n      class=\"trailing action\"\n      aria-label=${ariaLabel || nothing}\n      aria-labelledby=${!ariaLabel ? 'remove-label label' : nothing}\n      tabindex=${!tabbable ? -1 : nothing}\n      @click=${handleRemoveClick}\n      @focus=${focusListener}>\n      <md-focus-ring part=\"trailing-focus-ring\"></md-focus-ring>\n      <md-ripple ?disabled=${disabled}></md-ripple>\n      <span class=\"trailing icon\" aria-hidden=\"true\">\n        <slot name=\"remove-trailing-icon\">\n          <svg viewBox=\"0 96 960 960\">\n            <path\n              d=\"m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z\" />\n          </svg>\n        </slot>\n      </span>\n      <span class=\"touch\"></span>\n    </button>\n  `;\n}\n\nfunction handleRemoveClick(this: Chip, event: Event) {\n  if (this.disabled || this.softDisabled) {\n    return;\n  }\n\n  event.stopPropagation();\n  const preventDefault = !this.dispatchEvent(\n    new Event('remove', {cancelable: true}),\n  );\n  if (preventDefault) {\n    return;\n  }\n\n  this.remove();\n}\n"
  },
  {
    "path": "chips/suggestion-chip.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './internal/elevated-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\nimport {SuggestionChip} from './internal/suggestion-chip.js';\nimport {styles} from './internal/suggestion-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-suggestion-chip': MdSuggestionChip;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-suggestion-chip')\nexport class MdSuggestionChip extends SuggestionChip {\n  static override styles: CSSResultOrNative[] = [sharedStyles, elevatedStyles, styles];\n}\n"
  },
  {
    "path": "chips/suggestion-chip_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdSuggestionChip} from './suggestion-chip.js';\n\ndescribe('<md-suggestion-chip>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdSuggestionChip.styles);\n  });\n});\n"
  },
  {
    "path": "color/_color.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../tokens';\n// go/keep-sorted end\n\n/// `color.theme()` emits `--md-sys-color-*` custom properties for a given color\n/// scheme.\n///\n/// @example scss\n///   @use '@material/web/color/color';\n///\n///   :root {\n///     @include color.theme(\n///       'primary': /* ... */,\n///       'primary-container': /* ... */,\n///       'primary-fixed': /* ... */,\n///       'primary-fixed-dim': /* ... */,\n///       /* ... */\n///     );\n///   }\n///\n///   /* Generated CSS */\n///   :root {\n///     --md-sys-color-primary: /* ... */;\n///     --md-sys-color-primary-container: /* ... */;\n///     --md-sys-color-primary-fixed: /* ... */;\n///     --md-sys-color-primary-fixed-dim: /* ... */;\n///     /* ... */\n///   }\n///\n/// To generate a color scheme, use the Material Theme Builder Figma plugin.\n///\n/// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder\n///\n/// @param {Map} $tokens - A Map with `md-sys-color` token name keys and their\n///     corresponding values.\n/// @output Emits `--md-sys-color-*` custom properties for a given color scheme.\n@mixin theme($tokens) {\n  @each $token, $value in $tokens {\n    @if list.index(tokens.$md-sys-color-supported-tokens, $token) == null {\n      @error 'md-sys-color `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-sys-color-#{$token}: #{$value};\n    }\n  }\n}\n\n/// `color.light-theme()` emits `--md-sys-color-*` custom properties for a light\n/// theme from the given color palette.\n///\n/// @example scss\n///   @use 'sass:map';\n///   @use '@material/web/color/color';\n///   @use '@material/web/tokens';\n///\n///   // Tip: if only changing part of the palette, merge the default palette\n///   // values to inherit other tones (such as neutral and error tones).\n///   $my-palette: map.merge(\n///     tokens.md-ref-palette-values(),\n///     (\n///       'primary10': /* ... */,\n///       'primary20': /* ... */,\n///       'primary30': /* ... */,\n///       'primary40': /* ... */,\n///       'primary50': /* ... */,\n///       'primary60': /* ... */,\n///       'primary70': /* ... */,\n///       'primary80': /* ... */,\n///       'primary90': /* ... */,\n///       'primary95': /* ... */,\n///       'primary99': /* ... */,\n///       // Opt: palette values for:\n///       // - secondary\n///       // - tertiary\n///       // - error\n///       // - neutral\n///       // - neutral-variant\n///     ),\n///   );\n///\n///   :root {\n///     @include color.light-theme($my-palette);\n///   }\n///\n///   /* Generated CSS */\n///   :root {\n///     --md-sys-color-primary: /* ... */;\n///     --md-sys-color-primary-container: /* ... */;\n///     --md-sys-color-primary-fixed: /* ... */;\n///     --md-sys-color-primary-fixed-dim: /* ... */;\n///     /* ... */\n///   }\n///\n/// To generate a palette, use the Material Theme Builder Figma plugin.\n///\n/// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder\n///\n/// @param {Map} $md-ref-palette - A map of Material palette keys and their\n///     values.\n/// @output Emits `--md-sys-color-*` custom properties for a light theme with\n///     the given palette.\n@mixin light-theme($md-ref-palette: tokens.md-ref-palette-values()) {\n  @each $token, $value in $md-ref-palette {\n    @if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null {\n      @error 'md-ref-palette `#{$token}` is not a supported token.';\n    }\n  }\n\n  @include theme(\n    tokens.md-sys-color-values-light(\n      (\n        'md-ref-palette': $md-ref-palette,\n      ),\n      $exclude-custom-properties: true\n    )\n  );\n}\n\n/// `color.dark-theme()` emits `--md-sys-color-*` custom properties for a dark\n/// theme from the given color palette.\n///\n/// @example scss\n///   @use 'sass:map';\n///   @use '@material/web/color/color';\n///   @use '@material/web/tokens';\n///\n///   // Tip: if only changing part of the palette, merge the default palette\n///   // values to inherit other tones (such as neutral and error tones).\n///   $my-palette: map.merge(\n///     tokens.md-ref-palette-values(),\n///     (\n///       'primary10': /* ... */,\n///       'primary20': /* ... */,\n///       'primary30': /* ... */,\n///       'primary40': /* ... */,\n///       'primary50': /* ... */,\n///       'primary60': /* ... */,\n///       'primary70': /* ... */,\n///       'primary80': /* ... */,\n///       'primary90': /* ... */,\n///       'primary95': /* ... */,\n///       'primary99': /* ... */,\n///       // Opt: palette values for:\n///       // - secondary\n///       // - tertiary\n///       // - error\n///       // - neutral\n///       // - neutral-variant\n///     ),\n///   );\n///\n///   @media (prefers-color-scheme: dark) {\n///     @include color.dark-theme($my-palette);\n///   }\n///\n///   /* Generated CSS */\n///   @media (prefers-color-scheme: dark) {\n///     --md-sys-color-primary: /* ... */;\n///     --md-sys-color-primary-container: /* ... */;\n///     --md-sys-color-primary-fixed: /* ... */;\n///     --md-sys-color-primary-fixed-dim: /* ... */;\n///     /* ... */\n///   }\n///\n/// To generate a palette, use the Material Theme Builder Figma plugin.\n///\n/// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder\n///\n/// @param {Map} $md-ref-palette - A map of Material palette keys and their\n///     values.\n/// @output Emits `--md-sys-color-*` custom properties for a dark theme with\n///     the given palette.\n@mixin dark-theme($md-ref-palette: tokens.md-ref-palette-values()) {\n  @each $token, $value in $md-ref-palette {\n    @if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null {\n      @error 'md-ref-palette `#{$token}` is not a supported token.';\n    }\n  }\n\n  @include theme(\n    tokens.md-sys-color-values-dark(\n      (\n        'md-ref-palette': $md-ref-palette,\n      ),\n      $exclude-custom-properties: true\n    )\n  );\n}\n"
  },
  {
    "path": "commitlint.config.js",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport default {\n  extends: ['@commitlint/config-conventional'],\n  rules: {\n    'scope-enum': [\n      2,\n      'always',\n      [\n        // Use \"/\" for multiple scopes: `fix(button/checkbox): subject\"`\n        // Omit scope for broad \"all\" changes.\n        'button',\n        'catalog',\n        'checkbox',\n        'chips',\n        'color',\n        'dialog',\n        'divider',\n        'elevation',\n        'fab',\n        'field',\n        'focus',\n        'icon',\n        'iconbutton',\n        'labs',\n        'list',\n        'menu',\n        'progress',\n        'radio',\n        'ripple',\n        'sass-ext',\n        'select',\n        'slider',\n        'switch',\n        'tabs',\n        'testing',\n        'textfield',\n        'tokens',\n        'typography',\n      ],\n    ],\n  },\n};\n"
  },
  {
    "path": "common.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes common components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * It is smaller than `@material/web/all.js` and includes the most common\n * components for starting a project. Import only the individual components used\n * for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/chip-set.js';\nimport './chips/filter-chip.js';\nimport './dialog/dialog.js';\nimport './icon/icon.js';\nimport './iconbutton/icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './tabs/primary-tab.js';\nimport './tabs/tabs.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/chip-set.js';\nexport * from './chips/filter-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './tabs/primary-tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"
  },
  {
    "path": "dialog/_dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/dialog' show theme;\n"
  },
  {
    "path": "dialog/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Dialog',\n  [\n    new Knob('quick', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('noFocusTrap', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('icon', {defaultValue: '', ui: textInput()}),\n    new Knob('headline', {defaultValue: 'Dialog', ui: textInput()}),\n    new Knob('supportingText', {\n      defaultValue: 'Just a simple dialog.',\n      ui: textInput(),\n    }),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {icons: 'material-symbols'});\n"
  },
  {
    "path": "dialog/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "dialog/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/filled-tonal-button.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/dialog/dialog.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/radio/radio.js';\nimport '@material/web/textfield/filled-text-field.js';\n\nimport {MdDialog} from '@material/web/dialog/dialog.js';\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html, nothing} from 'lit';\n\n/** Knob types for dialog stories. */\nexport interface StoryKnobs {\n  quick: boolean;\n  noFocusTrap: boolean;\n  icon: string;\n  headline: string;\n  supportingText: string;\n}\n\nfunction showDialog(event: Event) {\n  ((event.target as Element).nextElementSibling as MdDialog)?.show();\n}\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'Dialog',\n  render({icon, headline, supportingText, quick, noFocusTrap}) {\n    return html`\n      <md-filled-button @click=${showDialog} aria-label=\"Open a dialog\">\n        Open\n      </md-filled-button>\n\n      <md-dialog\n        aria-label=${headline ? nothing : 'A simple dialog'}\n        ?quick=${quick}\n        ?no-focus-trap=${noFocusTrap}>\n        ${icon ? html`<md-icon slot=\"icon\">${icon}</md-icon>` : nothing}\n        <div slot=\"headline\">${headline}</div>\n        <form id=\"form\" slot=\"content\" method=\"dialog\">\n          <span>${supportingText}</span>\n        </form>\n        <div slot=\"actions\">\n          <md-text-button form=\"form\" value=\"close\">Close</md-text-button>\n          <md-text-button form=\"form\" value=\"ok\" autofocus>OK</md-text-button>\n        </div>\n      </md-dialog>\n    `;\n  },\n};\n\nconst alert: MaterialStoryInit<StoryKnobs> = {\n  name: 'Alert',\n  render({quick, noFocusTrap}) {\n    return html`\n      <md-filled-button @click=${showDialog} aria-label=\"Open an alert dialog\">\n        Alert\n      </md-filled-button>\n\n      <md-dialog type=\"alert\" ?quick=${quick} ?no-focus-trap=${noFocusTrap}>\n        <div slot=\"headline\">Alert dialog</div>\n        <form id=\"form\" slot=\"content\" method=\"dialog\">\n          This is a standard alert dialog. Alert dialogs interrupt users with\n          urgent information, details, or actions.\n        </form>\n        <div slot=\"actions\">\n          <md-text-button form=\"form\" value=\"ok\">OK</md-text-button>\n        </div>\n      </md-dialog>\n    `;\n  },\n};\n\nconst confirm: MaterialStoryInit<StoryKnobs> = {\n  name: 'Confirm',\n  render({quick, noFocusTrap}) {\n    return html`\n      <md-filled-button\n        @click=${showDialog}\n        aria-label=\"Open a confirmation dialog\">\n        Confirm\n      </md-filled-button>\n\n      <md-dialog\n        style=\"max-width: 320px;\"\n        ?quick=${quick}\n        ?no-focus-trap=${noFocusTrap}>\n        <div slot=\"headline\">Permanently delete?</div>\n        <md-icon slot=\"icon\">delete_outline</md-icon>\n        <form id=\"form\" slot=\"content\" method=\"dialog\">\n          Deleting the selected photos will also remove them from all synced\n          devices.\n        </form>\n        <div slot=\"actions\">\n          <md-text-button form=\"form\" value=\"delete\">Delete</md-text-button>\n          <md-filled-tonal-button form=\"form\" value=\"cancel\" autofocus\n            >Cancel</md-filled-tonal-button\n          >\n        </div>\n      </md-dialog>\n    `;\n  },\n};\n\nconst choose: MaterialStoryInit<StoryKnobs> = {\n  name: 'Choose',\n  styles: css`\n    label {\n      display: flex;\n      align-items: center;\n    }\n  `,\n  render({quick, noFocusTrap}) {\n    return html`\n      <md-filled-button @click=${showDialog} aria-label=\"Open a choice dialog\">\n        Choice\n      </md-filled-button>\n\n      <md-dialog ?quick=${quick} ?no-focus-trap=${noFocusTrap}>\n        <div slot=\"headline\">Choose your favorite pet</div>\n        <form id=\"form\" slot=\"content\" method=\"dialog\">\n          <label>\n            <md-radio\n              name=\"pet\"\n              value=\"cats\"\n              aria-label=\"Cats\"\n              touch-target=\"wrapper\"\n              checked></md-radio>\n            <span aria-hidden=\"true\">Cats</span>\n          </label>\n          <label>\n            <md-radio\n              name=\"pet\"\n              value=\"dogs\"\n              aria-label=\"Dogs\"\n              touch-target=\"wrapper\"></md-radio>\n            <span aria-hidden=\"true\">Dogs</span>\n          </label>\n          <label>\n            <md-radio\n              name=\"pet\"\n              value=\"birds\"\n              aria-label=\"Birds\"\n              touch-target=\"wrapper\"></md-radio>\n            <span aria-hidden=\"true\">Birds</span>\n          </label>\n        </form>\n        <div slot=\"actions\">\n          <md-text-button form=\"form\" value=\"cancel\">Cancel</md-text-button>\n          <md-text-button form=\"form\" autofocus value=\"ok\">OK</md-text-button>\n        </div>\n      </md-dialog>\n    `;\n  },\n};\n\nconst contacts: MaterialStoryInit<StoryKnobs> = {\n  name: 'Form',\n  styles: css`\n    .contacts {\n      min-width: calc(100vw - 212px);\n    }\n\n    .contacts [slot='header'] {\n      display: flex;\n      flex-direction: row-reverse;\n      align-items: center;\n    }\n\n    .contacts .headline {\n      flex: 1;\n    }\n\n    .contact-content,\n    .contact-row {\n      display: flex;\n      gap: 8px;\n    }\n\n    .contact-content {\n      flex-direction: column;\n    }\n\n    .contact-row > * {\n      flex: 1;\n    }\n  `,\n  render({quick, noFocusTrap}) {\n    return html`\n      <md-filled-button @click=${showDialog} aria-label=\"Open a form dialog\">\n        Form\n      </md-filled-button>\n\n      <md-dialog class=\"contacts\" ?quick=${quick} ?no-focus-trap=${noFocusTrap}>\n        <span slot=\"headline\">\n          <md-icon-button form=\"form\" value=\"close\" aria-label=\"Close dialog\">\n            <md-icon>close</md-icon>\n          </md-icon-button>\n          <span class=\"headline\">Create new contact</span>\n        </span>\n        <form id=\"form\" slot=\"content\" method=\"dialog\" class=\"contact-content\">\n          <div class=\"contact-row\">\n            <md-filled-text-field\n              autofocus\n              label=\"First Name\"></md-filled-text-field>\n            <md-filled-text-field label=\"Last Name\"></md-filled-text-field>\n          </div>\n          <div class=\"contact-row\">\n            <md-filled-text-field label=\"Company\"></md-filled-text-field>\n            <md-filled-text-field label=\"Job Title\"></md-filled-text-field>\n          </div>\n          <md-filled-text-field label=\"Email\"></md-filled-text-field>\n          <md-filled-text-field label=\"Phone\"></md-filled-text-field>\n        </form>\n        <div slot=\"actions\">\n          <md-text-button form=\"form\" value=\"reset\" type=\"reset\"\n            >Reset</md-text-button\n          >\n          <div style=\"flex: 1\"></div>\n          <md-text-button form=\"form\" value=\"cancel\">Cancel</md-text-button>\n          <md-text-button form=\"form\" value=\"save\">Save</md-text-button>\n        </div>\n      </md-dialog>\n    `;\n  },\n};\n\nconst floatingSheet: MaterialStoryInit<StoryKnobs> = {\n  name: 'Floating sheet',\n  render({quick, noFocusTrap}) {\n    return html`\n      <md-filled-button @click=${showDialog} aria-label=\"Open a floating sheet\">\n        Floating sheet\n      </md-filled-button>\n\n      <md-dialog ?quick=${quick} ?no-focus-trap=${noFocusTrap}>\n        <span slot=\"headline\">\n          <span style=\"flex: 1;\">Floating Sheet</span>\n          <md-icon-button form=\"form\" value=\"close\" aria-label=\"Close dialog\">\n            <md-icon>close</md-icon>\n          </md-icon-button>\n        </span>\n        <form id=\"form\" slot=\"content\" method=\"dialog\">\n          This is a floating sheet with title. Floating sheets offer no action\n          buttons at the bottom, but there's a close icon button at the top\n          right. They accept any HTML content.\n        </form>\n      </md-dialog>\n    `;\n  },\n};\n\n/** Dialog stories. */\nexport const stories = [\n  standard,\n  alert,\n  confirm,\n  choose,\n  contacts,\n  floatingSheet,\n];\n"
  },
  {
    "path": "dialog/dialog.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Dialog} from './internal/dialog.js';\nimport {styles} from './internal/dialog-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-dialog': MdDialog;\n  }\n}\n\n/**\n * @summary Dialogs can require an action, communicate information, or help\n * users accomplish a task. There are two types of dialogs: basic and\n * full-screen.\n *\n * @description\n * A dialog is a modal window that appears in front of app content to provide\n * critical information or ask for a decision. Dialogs disable all app\n * functionality when they appear, and remain on screen until confirmed,\n * dismissed, or a required action has been taken.\n *\n * Dialogs are purposefully interruptive, so they should be used sparingly.\n * A less disruptive alternative is to use a menu, which provides options\n * without interrupting a user’s experience.\n *\n * On mobile devices only, complex dialogs should be displayed fullscreen.\n *\n * __Example usages:__\n * - Common use cases for basic dialogs include alerts, quick selection, and\n * confirmation.\n * - More complex dialogs may contain actions that require a series of tasks\n * to complete. One example is creating a calendar entry with the event title,\n * date, location, and time.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-dialog')\nexport class MdDialog extends Dialog {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "dialog/dialog_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdDialog} from './dialog.js';\nimport {DialogHarness} from './harness.js';\n\ndescribe('<md-dialog>', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const root = env.render(html`\n      <md-dialog>\n        <form id=\"form\" method=\"dialog\" slot=\"content\">\n          Content\n          <input autofocus />\n        </form>\n        <div slot=\"actions\">\n          <button form=\"form\" value=\"button\">Close</button>\n        </div>\n      </md-dialog>\n    `);\n\n    await env.waitForStability();\n    const dialog = root.querySelector('md-dialog');\n    if (!dialog) {\n      throw new Error('Failed to query rendered <md-dialog>');\n    }\n\n    disableDialogAnimations(dialog);\n    const harness = new DialogHarness(dialog);\n    const dialogElement = dialog.shadowRoot?.querySelector('dialog');\n    if (!dialogElement) {\n      throw new Error('Failed to query rendered <dialog>');\n    }\n\n    const contentElement = root.querySelector<HTMLElement>('[slot=content]');\n    if (!contentElement) {\n      throw new Error('Failed to query rendered content.');\n    }\n\n    const focusElement = root.querySelector<HTMLElement>('[autofocus]');\n    if (!focusElement) {\n      throw new Error('Failed to query rendered autofocus element.');\n    }\n\n    return {harness, root, dialogElement, contentElement, focusElement};\n  }\n\n  describe('.styles', () => {\n    createTokenTests(MdDialog.styles);\n  });\n\n  describe('basic', () => {\n    it('open property calls show() and close()', async () => {\n      const {harness} = await setupTest();\n      spyOn(harness.element, 'show');\n      spyOn(harness.element, 'close');\n\n      harness.element.open = true;\n      await env.waitForStability();\n      expect(harness.element.show).toHaveBeenCalled();\n\n      harness.element.open = false;\n      await env.waitForStability();\n      expect(harness.element.close).toHaveBeenCalled();\n    });\n\n    it('renders open state by calling show()/close()', async () => {\n      const {harness, dialogElement} = await setupTest();\n      await harness.element.show();\n      expect(dialogElement.open).toBeTrue();\n      await harness.element.close();\n      expect(dialogElement.open).toBeFalse();\n    });\n\n    it('fires open/close events', async () => {\n      const {harness} = await setupTest();\n      const openHandler = jasmine.createSpy('openHandler');\n      const openedHandler = jasmine.createSpy('openedHandler');\n      const closeHandler = jasmine.createSpy('closeHandler');\n      const closedHandler = jasmine.createSpy('closedHandler');\n      harness.element.addEventListener('open', openHandler);\n      harness.element.addEventListener('opened', openedHandler);\n      harness.element.addEventListener('close', closeHandler);\n      harness.element.addEventListener('closed', closedHandler);\n      await harness.element.show();\n      expect(openHandler).toHaveBeenCalledTimes(1);\n      expect(openedHandler).toHaveBeenCalledTimes(1);\n      expect(closeHandler).toHaveBeenCalledTimes(0);\n      expect(closedHandler).toHaveBeenCalledTimes(0);\n      await harness.element.close('testing');\n      expect(openHandler).toHaveBeenCalledTimes(1);\n      expect(openedHandler).toHaveBeenCalledTimes(1);\n      expect(closeHandler).toHaveBeenCalledTimes(1);\n      expect(closedHandler).toHaveBeenCalledTimes(1);\n      expect(harness.element.returnValue).toBe('testing');\n    });\n\n    it('closes when element with action is clicked', async () => {\n      const {harness} = await setupTest();\n      await harness.element.show();\n      const closedPromise = new Promise<void>((resolve) => {\n        harness.element.addEventListener(\n          'closed',\n          () => {\n            resolve();\n          },\n          {once: true},\n        );\n      });\n\n      harness.element\n        .querySelector<HTMLButtonElement>('[value=\"button\"]')!\n        .click();\n      await closedPromise;\n      expect(harness.element.open).toBeFalse();\n      expect(harness.element.returnValue).toBe('button');\n    });\n\n    it('closes with click outside dialog', async () => {\n      const {harness, dialogElement, contentElement} = await setupTest();\n      const isClosing = jasmine.createSpy('isClosing');\n      harness.element.addEventListener('close', isClosing);\n      await harness.element.show();\n      contentElement.click();\n      expect(isClosing).not.toHaveBeenCalled();\n      dialogElement.click();\n      await env.waitForStability();\n      expect(isClosing).toHaveBeenCalled();\n    });\n\n    it('focuses element with autofocus when shown and previously focused element when closed', async () => {\n      const {harness, focusElement} = await setupTest();\n      const button = document.createElement('button');\n      document.body.append(button);\n      button.focus();\n      expect(document.activeElement).toBe(button);\n      await harness.element.show();\n      expect(document.activeElement).toBe(focusElement);\n      await harness.element.close();\n      expect(document.activeElement).toBe(button);\n      button.remove();\n    });\n  });\n\n  it('should set returnValue during the close event', async () => {\n    const {harness} = await setupTest();\n\n    let returnValueDuringClose = '';\n    harness.element.addEventListener('close', () => {\n      returnValueDuringClose = harness.element.returnValue;\n    });\n\n    await harness.element.show();\n    const returnValue = 'foo';\n    await harness.element.close(returnValue);\n    expect(returnValueDuringClose)\n      .withContext('dialog.returnValue during close event')\n      .toBe(returnValue);\n  });\n\n  it('should not change returnValue if close event is canceled', async () => {\n    const {harness} = await setupTest();\n\n    harness.element.addEventListener('close', (event) => {\n      event.preventDefault();\n    });\n\n    await harness.element.show();\n    const prevReturnValue = harness.element.returnValue;\n    await harness.element.close('new return value');\n    expect(harness.element.returnValue)\n      .withContext('dialog.returnValue after close event canceled')\n      .toBe(prevReturnValue);\n  });\n\n  it('should open on connected if opened before connected to DOM', async () => {\n    const openListener = jasmine.createSpy('openListener');\n    const dialog = document.createElement('md-dialog');\n    disableDialogAnimations(dialog);\n    dialog.addEventListener('open', openListener);\n    dialog.open = true;\n    expect(openListener)\n      .withContext('should not trigger open before connected')\n      .not.toHaveBeenCalled();\n\n    const root = env.render(html``);\n    root.appendChild(dialog);\n    await env.waitForStability();\n    expect(openListener)\n      .withContext('opens after connecting')\n      .toHaveBeenCalled();\n  });\n\n  it('should not open on connected if opened, but closed before connected to DOM', async () => {\n    const openListener = jasmine.createSpy('openListener');\n    const dialog = document.createElement('md-dialog');\n    disableDialogAnimations(dialog);\n    dialog.addEventListener('open', openListener);\n    dialog.open = true;\n    await env.waitForStability();\n    dialog.open = false;\n    const root = env.render(html``);\n    root.appendChild(dialog);\n    await env.waitForStability();\n    expect(openListener)\n      .withContext('should not open on connected since close was called')\n      .not.toHaveBeenCalled();\n  });\n\n  it('should not open on connected if opened before connection but closed after', async () => {\n    const openListener = jasmine.createSpy('openListener');\n    const dialog = document.createElement('md-dialog');\n    disableDialogAnimations(dialog);\n    dialog.addEventListener('open', openListener);\n    dialog.open = true;\n    const root = env.render(html``);\n    root.appendChild(dialog);\n    dialog.open = false;\n    await env.waitForStability();\n    expect(openListener)\n      .withContext(\n        'should not open on connected since close was called before open could complete',\n      )\n      .not.toHaveBeenCalled();\n  });\n\n  it('should not dispatch close if closed while disconnected', async () => {\n    const {harness, root} = await setupTest();\n    await harness.element.show();\n\n    const closeListener = jasmine.createSpy('closeListener');\n    harness.element.addEventListener('close', closeListener);\n    harness.element.remove();\n    await env.waitForStability();\n\n    expect(closeListener)\n      .withContext('should not trigger close when disconnected')\n      .not.toHaveBeenCalled();\n\n    await harness.element.close();\n    expect(closeListener)\n      .withContext('should not trigger close when disconnected')\n      .not.toHaveBeenCalled();\n\n    root.appendChild(harness.element);\n    await env.waitForStability();\n    expect(closeListener)\n      .withContext('should not trigger close when disconnected')\n      .not.toHaveBeenCalled();\n  });\n});\n\nfunction disableDialogAnimations(dialog: MdDialog) {\n  dialog.getOpenAnimation = () => {\n    return {};\n  };\n  dialog.getCloseAnimation = () => {\n    return {};\n  };\n}\n"
  },
  {
    "path": "dialog/harness.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Dialog} from './internal/dialog.js';\n\n/**\n * Test harness for dialog.\n */\nexport class DialogHarness extends Harness<Dialog> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (\n      this.element.querySelector<HTMLElement>('[autocomplete]') ?? this.element\n    );\n  }\n}\n"
  },
  {
    "path": "dialog/internal/_dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-dialog-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-dialog-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $md-sys-color: tokens.md-sys-color-values-light();\n  $md-sys-motion: tokens.md-sys-motion-values();\n  $tokens: tokens.md-comp-dialog-values();\n\n  :host {\n    border-start-start-radius: map.get($tokens, 'container-shape-start-start');\n    border-start-end-radius: map.get($tokens, 'container-shape-start-end');\n    border-end-end-radius: map.get($tokens, 'container-shape-end-end');\n    border-end-start-radius: map.get($tokens, 'container-shape-end-start');\n    display: contents;\n    margin: auto;\n    max-height: min(560px, calc(100% - 48px));\n    max-width: min(560px, calc(100% - 48px));\n    min-height: 140px;\n    min-width: 280px;\n    position: fixed;\n    height: fit-content;\n    width: fit-content;\n  }\n\n  dialog {\n    background: transparent;\n    border: none;\n    border-radius: inherit;\n    flex-direction: column;\n    height: inherit;\n    margin: inherit;\n    max-height: inherit;\n    max-width: inherit;\n    min-height: inherit;\n    min-width: inherit;\n    outline: none;\n    overflow: visible;\n    padding: 0;\n    width: inherit;\n  }\n\n  dialog[open] {\n    display: flex;\n  }\n\n  ::backdrop {\n    // Can't use ::backdrop since Firefox does not allow animations on it.\n    background: none;\n  }\n\n  .scrim {\n    background: map.get($md-sys-color, 'scrim');\n    display: none;\n    inset: 0;\n    opacity: 32%;\n    pointer-events: none;\n    position: fixed;\n    z-index: 1;\n  }\n\n  :host([open]) .scrim {\n    display: flex;\n  }\n\n  h2 {\n    all: unset;\n    align-self: stretch;\n  }\n\n  .headline {\n    align-items: center;\n    color: map.get($tokens, 'headline-color');\n    display: flex;\n    flex-direction: column;\n    font-family: map.get($tokens, 'headline-font');\n    font-size: map.get($tokens, 'headline-size');\n    line-height: map.get($tokens, 'headline-line-height');\n    font-weight: map.get($tokens, 'headline-weight');\n    position: relative;\n  }\n\n  slot[name='headline']::slotted(*) {\n    align-items: center;\n    align-self: stretch;\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    padding: 24px 24px 0;\n  }\n\n  .icon {\n    display: flex;\n  }\n\n  slot[name='icon']::slotted(*) {\n    color: map.get($tokens, 'icon-color');\n    fill: currentColor;\n    font-size: map.get($tokens, 'icon-size');\n    margin-top: 24px;\n    height: map.get($tokens, 'icon-size');\n    width: map.get($tokens, 'icon-size');\n  }\n\n  .has-icon slot[name='headline']::slotted(*) {\n    justify-content: center;\n    padding-top: 16px;\n  }\n\n  .scrollable slot[name='headline']::slotted(*) {\n    padding-bottom: 16px;\n  }\n\n  .scrollable.has-headline slot[name='content']::slotted(*) {\n    padding-top: 8px;\n  }\n\n  .container {\n    border-radius: inherit;\n    display: flex;\n    flex-direction: column;\n    // Safari won't show content with \"flex: 1\", but container needs to grow if\n    // height is set on the dialog, so use flex-grow instead.\n    flex-grow: 1;\n    overflow: hidden;\n    position: relative;\n    transform-origin: top;\n  }\n\n  .container::before {\n    background: map.get($tokens, 'container-color');\n    border-radius: inherit;\n    content: '';\n    inset: 0;\n    position: absolute;\n  }\n\n  .scroller {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n    // needed to display scrollbars on Chrome linux. Also needs to be > 0 so\n    // that content that is position: fixed in the content can render above the\n    // actions bar. e.g. <md-select positioning=\"menu-fixed\">\n    z-index: 1;\n  }\n\n  .scrollable .scroller {\n    // Only add scrollbars if the content is overflowing. This prevents extra\n    // space from appearing on platforms that reserve scrollbar space.\n    // Note: we only scroll vertically. Horizontal scrolling should be handled\n    // by the content.\n    overflow-y: scroll;\n  }\n\n  .content {\n    color: map.get($tokens, 'supporting-text-color');\n    font-family: map.get($tokens, 'supporting-text-font');\n    font-size: map.get($tokens, 'supporting-text-size');\n    line-height: map.get($tokens, 'supporting-text-line-height');\n    flex: 1;\n    font-weight: map.get($tokens, 'supporting-text-weight');\n    height: min-content; // Needed for Safari\n    position: relative;\n  }\n\n  slot[name='content']::slotted(*) {\n    box-sizing: border-box;\n    padding: 24px;\n  }\n\n  // Anchors are used with an IntersectionObserver to determine when the content\n  // has scrolled.\n  .anchor {\n    position: absolute;\n  }\n\n  .top.anchor {\n    top: 0;\n  }\n\n  .bottom.anchor {\n    bottom: 0;\n  }\n\n  .actions {\n    position: relative;\n  }\n\n  slot[name='actions']::slotted(*) {\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    padding: 16px 24px 24px;\n  }\n\n  .has-actions slot[name='content']::slotted(*) {\n    padding-bottom: 8px;\n  }\n\n  md-divider {\n    display: none;\n    position: absolute;\n  }\n\n  .has-headline.show-top-divider .headline md-divider,\n  .has-actions.show-bottom-divider .actions md-divider {\n    display: flex;\n  }\n\n  .headline md-divider {\n    bottom: 0;\n  }\n\n  .actions md-divider {\n    top: 0;\n  }\n\n  @media (forced-colors: active) {\n    dialog {\n      outline: 2px solid WindowText;\n    }\n  }\n}\n"
  },
  {
    "path": "dialog/internal/animations.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A dialog animation's arguments. See `Element.prototype.animate`.\n */\nexport type DialogAnimationArgs = Parameters<Element['animate']>;\n\n/**\n * A collection of dialog animations. Each element of a dialog may have multiple\n * animations.\n */\nexport interface DialogAnimation {\n  /**\n   * Animations for the dialog itself.\n   */\n  dialog?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the scrim backdrop.\n   */\n  scrim?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the container of the dialog.\n   */\n  container?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the headline section.\n   */\n  headline?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the contents section.\n   */\n  content?: DialogAnimationArgs[];\n  /**\n   * Animations for the actions section.\n   */\n  actions?: DialogAnimationArgs[];\n}\n\n/**\n * The default dialog open animation.\n */\nexport const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {\n  dialog: [\n    [\n      // Dialog slide down\n      [{'transform': 'translateY(-50px)'}, {'transform': 'translateY(0)'}],\n      {duration: 500, easing: EASING.EMPHASIZED},\n    ],\n  ],\n  scrim: [\n    [\n      // Scrim fade in\n      [{'opacity': 0}, {'opacity': 0.32}],\n      {duration: 500, easing: 'linear'},\n    ],\n  ],\n  container: [\n    [\n      // Container fade in\n      [{'opacity': 0}, {'opacity': 1}],\n      {duration: 50, easing: 'linear', pseudoElement: '::before'},\n    ],\n    [\n      // Container grow\n      // Note: current spec says to grow from 0dp->100% and shrink from\n      // 100%->35%. We change this to 35%->100% to simplify the animation that\n      // is supposed to clip content as it grows. From 0dp it's possible to see\n      // text/actions appear before the container has fully grown.\n      [{'height': '35%'}, {'height': '100%'}],\n      {duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before'},\n    ],\n  ],\n  headline: [\n    [\n      // Headline fade in\n      [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n      {duration: 250, easing: 'linear', fill: 'forwards'},\n    ],\n  ],\n  content: [\n    [\n      // Content fade in\n      [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n      {duration: 250, easing: 'linear', fill: 'forwards'},\n    ],\n  ],\n  actions: [\n    [\n      // Actions fade in\n      [{'opacity': 0}, {'opacity': 0, offset: 0.5}, {'opacity': 1}],\n      {duration: 300, easing: 'linear', fill: 'forwards'},\n    ],\n  ],\n};\n\n/**\n * The default dialog close animation.\n */\nexport const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {\n  dialog: [\n    [\n      // Dialog slide up\n      [{'transform': 'translateY(0)'}, {'transform': 'translateY(-50px)'}],\n      {duration: 150, easing: EASING.EMPHASIZED_ACCELERATE},\n    ],\n  ],\n  scrim: [\n    [\n      // Scrim fade out\n      [{'opacity': 0.32}, {'opacity': 0}],\n      {duration: 150, easing: 'linear'},\n    ],\n  ],\n  container: [\n    [\n      // Container shrink\n      [{'height': '100%'}, {'height': '35%'}],\n      {\n        duration: 150,\n        easing: EASING.EMPHASIZED_ACCELERATE,\n        pseudoElement: '::before',\n      },\n    ],\n    [\n      // Container fade out\n      [{'opacity': '1'}, {'opacity': '0'}],\n      {delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before'},\n    ],\n  ],\n  headline: [\n    [\n      // Headline fade out\n      [{'opacity': 1}, {'opacity': 0}],\n      {duration: 100, easing: 'linear', fill: 'forwards'},\n    ],\n  ],\n  content: [\n    [\n      // Content fade out\n      [{'opacity': 1}, {'opacity': 0}],\n      {duration: 100, easing: 'linear', fill: 'forwards'},\n    ],\n  ],\n  actions: [\n    [\n      // Actions fade out\n      [{'opacity': 1}, {'opacity': 0}],\n      {duration: 100, easing: 'linear', fill: 'forwards'},\n    ],\n  ],\n};\n"
  },
  {
    "path": "dialog/internal/dialog-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './dialog';\n// go/keep-sorted end\n\n@include dialog.styles;\n"
  },
  {
    "path": "dialog/internal/dialog.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {\n  DIALOG_DEFAULT_CLOSE_ANIMATION,\n  DIALOG_DEFAULT_OPEN_ANIMATION,\n  DialogAnimation,\n  DialogAnimationArgs,\n} from './animations.js';\n\n// Separate variable needed for closure.\nconst dialogBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A dialog component.\n *\n * @fires open {Event} Dispatched when the dialog is opening before any animations.\n * @fires opened {Event} Dispatched when the dialog has opened after any animations.\n * @fires close {Event} Dispatched when the dialog is closing before any animations.\n * @fires closed {Event} Dispatched when the dialog has closed after any animations.\n * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking\n * on the scrim or pressing Escape.\n */\nexport class Dialog extends dialogBaseClass {\n  // We do not use `delegatesFocus: true` due to a Chromium bug with\n  // selecting text.\n  // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357\n\n  /**\n   * Opens the dialog when set to `true` and closes it when set to `false`.\n   */\n  @property({type: Boolean})\n  get open() {\n    return this.isOpen;\n  }\n\n  set open(open: boolean) {\n    if (open === this.isOpen) {\n      return;\n    }\n\n    this.isOpen = open;\n    if (open) {\n      this.setAttribute('open', '');\n      this.show();\n    } else {\n      this.removeAttribute('open');\n      this.close();\n    }\n  }\n\n  /**\n   * Skips the opening and closing animations.\n   */\n  @property({type: Boolean}) quick = false;\n\n  /**\n   * Gets or sets the dialog's return value, usually to indicate which button\n   * a user pressed to close it.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n   */\n  @property({attribute: false}) returnValue = '';\n\n  /**\n   * The type of dialog for accessibility. Set this to `alert` to announce a\n   * dialog as an alert dialog.\n   */\n  @property() type?: 'alert';\n\n  /**\n   * Disables focus trapping, which by default keeps keyboard Tab navigation\n   * within the dialog.\n   *\n   * When disabled, after focusing the last element of a dialog, pressing Tab\n   * again will release focus from the window back to the browser (such as the\n   * URL bar).\n   *\n   * Focus trapping is recommended for accessibility, and should not typically\n   * be disabled. Only turn this off if the use case of a dialog is more\n   * accessible without focus trapping.\n   */\n  @property({type: Boolean, attribute: 'no-focus-trap'})\n  noFocusTrap = false;\n\n  /**\n   * Gets the opening animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n  /**\n   * Gets the closing animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n  private isOpen = false;\n  private isOpening = false;\n  // getIsConnectedPromise() immediately sets the resolve property.\n  private isConnectedPromiseResolve!: () => void;\n  private isConnectedPromise = this.getIsConnectedPromise();\n  @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n  @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n  @query('.container') private readonly container!: HTMLDialogElement | null;\n  @query('.headline') private readonly headline!: HTMLDialogElement | null;\n  @query('.content') private readonly content!: HTMLDialogElement | null;\n  @query('.actions') private readonly actions!: HTMLDialogElement | null;\n  @state() private isAtScrollTop = false;\n  @state() private isAtScrollBottom = false;\n  @query('.scroller') private readonly scroller!: HTMLElement | null;\n  @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n  @query('.focus-trap')\n  private readonly firstFocusTrap!: HTMLElement | null;\n  private nextClickIsFromContent = false;\n  private intersectionObserver?: IntersectionObserver;\n  // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n  @state() private hasHeadline = false;\n  @state() private hasActions = false;\n  @state() private hasIcon = false;\n  private cancelAnimations?: AbortController;\n\n  // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224\n  // Chrome v120 has a bug where escape keys do not trigger cancels. If we get\n  // a dialog \"close\" event that is triggered without a \"cancel\" after an escape\n  // keydown, then we need to manually trigger our closing logic.\n  //\n  // This bug occurs when pressing escape to close a dialog without first\n  // interacting with the dialog's content.\n  //\n  // Cleanup tracking:\n  // https://github.com/material-components/material-web/issues/5330\n  // This can be removed when full CloseWatcher support added and the above bug\n  // in Chromium is fixed to fire 'cancel' with one escape press and close with\n  // multiple.\n  private escapePressedWithoutCancel = false;\n  // This TreeWalker is used to walk through a dialog's children to find\n  // focusable elements. TreeWalker is faster than `querySelectorAll('*')`.\n  // We check for isServer because there isn't a \"document\" during an SSR\n  // run.\n  private readonly treewalker = isServer\n    ? null\n    : document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('submit', this.handleSubmit);\n    }\n  }\n\n  /**\n   * Opens the dialog and fires a cancelable `open` event. After a dialog's\n   * animation, an `opened` event is fired.\n   *\n   * Add an `autofocus` attribute to a child of the dialog that should\n   * receive focus after opening.\n   *\n   * @return A Promise that resolves after the animation is finished and the\n   *     `opened` event was fired.\n   */\n  async show() {\n    this.isOpening = true;\n    // Dialogs can be opened before being attached to the DOM, so we need to\n    // wait until we're connected before calling `showModal()`.\n    await this.isConnectedPromise;\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already opened or if `dialog.close()` was called while awaiting.\n    if (dialog.open || !this.isOpening) {\n      this.isOpening = false;\n      return;\n    }\n\n    const preventOpen = !this.dispatchEvent(\n      new Event('open', {cancelable: true}),\n    );\n    if (preventOpen) {\n      this.open = false;\n      this.isOpening = false;\n      return;\n    }\n\n    // All Material dialogs are modal.\n    dialog.showModal();\n    this.open = true;\n    // Reset scroll position if re-opening a dialog with the same content.\n    if (this.scroller) {\n      this.scroller.scrollTop = 0;\n    }\n    // Native modal dialogs ignore autofocus and instead force focus to the\n    // first focusable child. Override this behavior if there is a child with\n    // an autofocus attribute.\n    this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n    await this.animateDialog(this.getOpenAnimation());\n    this.dispatchEvent(new Event('opened'));\n    this.isOpening = false;\n  }\n\n  /**\n   * Closes the dialog and fires a cancelable `close` event. After a dialog's\n   * animation, a `closed` event is fired.\n   *\n   * @param returnValue A return value usually indicating which button was used\n   *     to close a dialog. If a dialog is canceled by clicking the scrim or\n   *     pressing Escape, it will not change the return value after closing.\n   * @return A Promise that resolves after the animation is finished and the\n   *     `closed` event was fired.\n   */\n  async close(returnValue = this.returnValue) {\n    this.isOpening = false;\n    if (!this.isConnected) {\n      // Disconnected dialogs do not fire close events or animate.\n      this.open = false;\n      return;\n    }\n\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already closed or if `dialog.show()` was called while awaiting.\n    if (!dialog.open || this.isOpening) {\n      this.open = false;\n      return;\n    }\n\n    const prevReturnValue = this.returnValue;\n    this.returnValue = returnValue;\n    const preventClose = !this.dispatchEvent(\n      new Event('close', {cancelable: true}),\n    );\n    if (preventClose) {\n      this.returnValue = prevReturnValue;\n      return;\n    }\n\n    await this.animateDialog(this.getCloseAnimation());\n    dialog.close(returnValue);\n    this.open = false;\n    this.dispatchEvent(new Event('closed'));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.isConnectedPromiseResolve();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.isConnectedPromise = this.getIsConnectedPromise();\n  }\n\n  protected override render() {\n    const scrollable =\n      this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n    const classes = {\n      'has-headline': this.hasHeadline,\n      'has-actions': this.hasActions,\n      'has-icon': this.hasIcon,\n      'scrollable': scrollable,\n      'show-top-divider': scrollable && !this.isAtScrollTop,\n      'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n    };\n\n    // The focus trap sentinels are only added after the dialog opens, since\n    // dialog.showModal() will try to autofocus them, even with tabindex=\"-1\".\n    const showFocusTrap = this.open && !this.noFocusTrap;\n    const focusTrap = html`\n      <div\n        class=\"focus-trap\"\n        tabindex=\"0\"\n        aria-hidden=\"true\"\n        @focus=${this.handleFocusTrapFocus}></div>\n    `;\n\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div class=\"scrim\"></div>\n      <dialog\n        class=${classMap(classes)}\n        aria-label=${ariaLabel || nothing}\n        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n        role=${this.type === 'alert' ? 'alertdialog' : nothing}\n        @cancel=${this.handleCancel}\n        @click=${this.handleDialogClick}\n        @close=${this.handleClose}\n        @keydown=${this.handleKeydown}\n        .returnValue=${this.returnValue || nothing}>\n        ${showFocusTrap ? focusTrap : nothing}\n        <div class=\"container\" @click=${this.handleContentClick}>\n          <div class=\"headline\">\n            <div class=\"icon\" aria-hidden=\"true\">\n              <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n            </div>\n            <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n              <slot\n                name=\"headline\"\n                @slotchange=${this.handleHeadlineChange}></slot>\n            </h2>\n            <md-divider></md-divider>\n          </div>\n          <div class=\"scroller\">\n            <div class=\"content\">\n              <div class=\"top anchor\"></div>\n              <slot name=\"content\"></slot>\n              <div class=\"bottom anchor\"></div>\n            </div>\n          </div>\n          <div class=\"actions\">\n            <md-divider></md-divider>\n            <slot name=\"actions\" @slotchange=${this.handleActionsChange}></slot>\n          </div>\n        </div>\n        ${showFocusTrap ? focusTrap : nothing}\n      </dialog>\n    `;\n  }\n\n  protected override firstUpdated() {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          this.handleAnchorIntersection(entry);\n        }\n      },\n      {root: this.scroller!},\n    );\n\n    this.intersectionObserver.observe(this.topAnchor!);\n    this.intersectionObserver.observe(this.bottomAnchor!);\n  }\n\n  private handleDialogClick() {\n    if (this.nextClickIsFromContent) {\n      // Avoid doing a layout calculation below if we know the click came from\n      // content.\n      this.nextClickIsFromContent = false;\n      return;\n    }\n\n    // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n    // but Material dialogs do.\n    const preventDefault = !this.dispatchEvent(\n      new Event('cancel', {cancelable: true}),\n    );\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleContentClick() {\n    this.nextClickIsFromContent = true;\n  }\n\n  private handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const {submitter} = event;\n    if (form.getAttribute('method') !== 'dialog' || !submitter) {\n      return;\n    }\n\n    // Close reason is the submitter's value attribute, or the dialog's\n    // `returnValue` if there is no attribute.\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  private handleCancel(event: Event) {\n    if (event.target !== this.dialog) {\n      // Ignore any cancel events dispatched by content.\n      return;\n    }\n\n    this.escapePressedWithoutCancel = false;\n    const preventDefault = !redispatchEvent(this, event);\n    // We always prevent default on the original dialog event since we'll\n    // animate closing it before it actually closes.\n    event.preventDefault();\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleClose() {\n    if (!this.escapePressedWithoutCancel) {\n      return;\n    }\n\n    this.escapePressedWithoutCancel = false;\n    this.dialog?.dispatchEvent(new Event('cancel', {cancelable: true}));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key !== 'Escape') {\n      return;\n    }\n\n    // An escape key was pressed. If a \"close\" event fires next without a\n    // \"cancel\" event first, then we know we're in the Chrome v120 bug.\n    this.escapePressedWithoutCancel = true;\n    // Wait a full task for the cancel/close event listeners to fire, then\n    // reset the flag.\n    setTimeout(() => {\n      this.escapePressedWithoutCancel = false;\n    });\n  }\n\n  private async animateDialog(animation: DialogAnimation) {\n    // Always cancel the previous animations. Animations can include `fill`\n    // modes that need to be cleared when `quick` is toggled. If not, content\n    // that faded out will remain hidden when a `quick` dialog re-opens after\n    // previously opening and closing without `quick`.\n    this.cancelAnimations?.abort();\n    this.cancelAnimations = new AbortController();\n    if (this.quick) {\n      return;\n    }\n\n    const {dialog, scrim, container, headline, content, actions} = this;\n    if (!dialog || !scrim || !container || !headline || !content || !actions) {\n      return;\n    }\n\n    const {\n      container: containerAnimate,\n      dialog: dialogAnimate,\n      scrim: scrimAnimate,\n      headline: headlineAnimate,\n      content: contentAnimate,\n      actions: actionsAnimate,\n    } = animation;\n\n    const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n      [dialog, dialogAnimate ?? []],\n      [scrim, scrimAnimate ?? []],\n      [container, containerAnimate ?? []],\n      [headline, headlineAnimate ?? []],\n      [content, contentAnimate ?? []],\n      [actions, actionsAnimate ?? []],\n    ];\n\n    const animations: Animation[] = [];\n    for (const [element, animation] of elementAndAnimation) {\n      for (const animateArgs of animation) {\n        const animation = element.animate(...animateArgs);\n        this.cancelAnimations.signal.addEventListener('abort', () => {\n          animation.cancel();\n        });\n\n        animations.push(animation);\n      }\n    }\n\n    await Promise.all(\n      animations.map((animation) =>\n        animation.finished.catch(() => {\n          // Ignore intentional AbortErrors when calling `animation.cancel()`.\n        }),\n      ),\n    );\n  }\n\n  private handleHeadlineChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasHeadline = slot.assignedElements().length > 0;\n  }\n\n  private handleActionsChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasActions = slot.assignedElements().length > 0;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements().length > 0;\n  }\n\n  private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n    const {target, isIntersecting} = entry;\n    if (target === this.topAnchor) {\n      this.isAtScrollTop = isIntersecting;\n    }\n\n    if (target === this.bottomAnchor) {\n      this.isAtScrollBottom = isIntersecting;\n    }\n  }\n\n  private getIsConnectedPromise() {\n    return new Promise<void>((resolve) => {\n      this.isConnectedPromiseResolve = resolve;\n    });\n  }\n\n  private handleFocusTrapFocus(event: FocusEvent) {\n    const [firstFocusableChild, lastFocusableChild] =\n      this.getFirstAndLastFocusableChildren();\n    if (!firstFocusableChild || !lastFocusableChild) {\n      // When a dialog does not have focusable children, the dialog itself\n      // receives focus.\n      this.dialog?.focus();\n      return;\n    }\n\n    // To determine which child to focus, we need to know which focus trap\n    // received focus...\n    const isFirstFocusTrap = event.target === this.firstFocusTrap;\n    const isLastFocusTrap = !isFirstFocusTrap;\n    // ...and where the focus came from (what was previously focused).\n    const focusCameFromFirstChild = event.relatedTarget === firstFocusableChild;\n    const focusCameFromLastChild = event.relatedTarget === lastFocusableChild;\n    // Although this is a focus trap, focus can come from outside the trap.\n    // This can happen when elements are programmatically `focus()`'d. It also\n    // happens when focus leaves and returns to the window, such as clicking on\n    // the browser's URL bar and pressing Tab, or switching focus between\n    // iframes.\n    const focusCameFromOutsideDialog =\n      !focusCameFromFirstChild && !focusCameFromLastChild;\n\n    // Focus the dialog's first child when we reach the end of the dialog and\n    // focus is moving forward. Or, when focus is moving forwards into the\n    // dialog from outside of the window.\n    const shouldFocusFirstChild =\n      (isLastFocusTrap && focusCameFromLastChild) ||\n      (isFirstFocusTrap && focusCameFromOutsideDialog);\n    if (shouldFocusFirstChild) {\n      firstFocusableChild.focus();\n      return;\n    }\n\n    // Focus the dialog's last child when we reach the beginning of the dialog\n    // and focus is moving backward. Or, when focus is moving backwards into the\n    // dialog from outside of the window.\n    const shouldFocusLastChild =\n      (isFirstFocusTrap && focusCameFromFirstChild) ||\n      (isLastFocusTrap && focusCameFromOutsideDialog);\n    if (shouldFocusLastChild) {\n      lastFocusableChild.focus();\n      return;\n    }\n\n    // The booleans above are verbose for readability, but code executation\n    // won't actually reach here.\n  }\n\n  private getFirstAndLastFocusableChildren():\n    | [HTMLElement, HTMLElement]\n    | [null, null] {\n    if (!this.treewalker) {\n      return [null, null];\n    }\n\n    let firstFocusableChild: HTMLElement | null = null;\n    let lastFocusableChild: HTMLElement | null = null;\n\n    // Reset the current node back to the root host element.\n    this.treewalker.currentNode = this.treewalker.root;\n    while (this.treewalker.nextNode()) {\n      // Cast as Element since the TreeWalker filter only accepts Elements.\n      const nextChild = this.treewalker.currentNode as Element;\n      if (!isFocusable(nextChild)) {\n        continue;\n      }\n\n      if (!firstFocusableChild) {\n        firstFocusableChild = nextChild;\n      }\n\n      lastFocusableChild = nextChild;\n    }\n\n    // We set lastFocusableChild immediately after finding a\n    // firstFocusableChild, which means the pair is either both null or both\n    // non-null. Cast since TypeScript does not recognize this.\n    return [firstFocusableChild, lastFocusableChild] as\n      | [HTMLElement, HTMLElement]\n      | [null, null];\n  }\n}\n\nfunction isFocusable(element: Element): element is HTMLElement {\n  // Check if the element is a known built-in focusable element:\n  // - <a> and <area> with `href` attributes.\n  // - Form controls that are not disabled.\n  // - `contenteditable` elements.\n  // - Anything with a non-negative `tabindex`.\n  const knownFocusableElements =\n    ':is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])';\n  const notDisabled = ':not(:disabled,[disabled])';\n  const notNegativeTabIndex = ':not([tabindex^=\"-\"])';\n  if (\n    element.matches(knownFocusableElements + notDisabled + notNegativeTabIndex)\n  ) {\n    return true;\n  }\n\n  const isCustomElement = element.localName.includes('-');\n  if (!isCustomElement) {\n    return false;\n  }\n\n  // If a custom element does not have a tabindex, it may still be focusable\n  // if it delegates focus with a shadow root. We also need to check again if\n  // the custom element is a disabled form control.\n  if (!element.matches(notDisabled)) {\n    return false;\n  }\n\n  return element.shadowRoot?.delegatesFocus ?? false;\n}\n"
  },
  {
    "path": "dialog/test/window_size.json",
    "content": "{\n  \"capabilities\": {\n    \"goog:chromeOptions\": {\n      \"args\": [\"--window-position=0,0\", \"--window-size=599,800\"]\n    },\n    \"moz:firefoxOptions\": {\n      \"args\": [\"-width=599\",\"-height=800\"]\n    }\n  },\n  \"extension\": {\n    \"xvfbResolution\": \"599x800x24\"\n  }\n}\n"
  },
  {
    "path": "divider/_divider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/divider' show theme;\n"
  },
  {
    "path": "divider/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Divider',\n  [\n    new Knob('inset', {defaultValue: true, ui: boolInput()}),\n    new Knob('inset (start)', {defaultValue: false, ui: boolInput()}),\n    new Knob('inset (end)', {defaultValue: false, ui: boolInput()}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "divider/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "divider/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/divider/divider.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\nimport {css, html} from 'lit';\n\n/** Knob types for divider stories. */\nexport interface StoryKnobs {\n  inset: boolean;\n  'inset (start)': boolean;\n  'inset (end)': boolean;\n}\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'Divider',\n  styles: [\n    typescaleStyles,\n    css`\n      ul {\n        border: 1px solid var(--md-sys-color-outline);\n        margin: 0;\n        padding: 0;\n        width: 256px;\n      }\n\n      li {\n        color: var(--md-sys-color-on-background);\n        list-style: none;\n        margin: 16px;\n      }\n    `,\n  ],\n  render(knobs) {\n    return html`\n      <ul\n        aria-label=\"A list of items with decorative and non-decorative separators\"\n        class=\"md-typescale-body-medium\">\n        <li>List item one</li>\n        <md-divider\n          ?inset=${knobs.inset}\n          ?inset-start=${knobs['inset (start)']}\n          ?inset-end=${knobs['inset (end)']}></md-divider>\n        <li>List item two</li>\n        <md-divider role=\"separator\"></md-divider>\n        <li>List item three</li>\n        <md-divider\n          ?inset=${knobs.inset}\n          ?inset-start=${knobs['inset (start)']}\n          ?inset-end=${knobs['inset (end)']}></md-divider>\n        <li>List item four</li>\n      </ul>\n    `;\n  },\n};\n\n/** Divider stories. */\nexport const stories = [standard];\n"
  },
  {
    "path": "divider/divider.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Divider} from './internal/divider.js';\nimport {styles} from './internal/divider-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-divider': MdDivider;\n  }\n}\n\n/**\n * @summary A divider is a thin line that groups content in lists and\n * containers.\n *\n * @description Dividers can reinforce tapability, such as when used to separate\n * list items or define tappable regions in an accordion.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-divider')\nexport class MdDivider extends Divider {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "divider/divider_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdDivider} from './divider.js';\n\ndescribe('<md-divider>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdDivider.styles);\n  });\n});\n"
  },
  {
    "path": "divider/internal/_divider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-divider-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-divider-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-divider-values();\n\n  :host {\n    box-sizing: border-box;\n    color: map.get($tokens, 'color');\n    display: flex;\n    height: map.get($tokens, 'thickness');\n    width: 100%;\n  }\n\n  :host([inset]),\n  :host([inset-start]) {\n    padding-inline-start: 16px;\n  }\n\n  :host([inset]),\n  :host([inset-end]) {\n    padding-inline-end: 16px;\n  }\n\n  :host::before {\n    background: currentColor;\n    content: '';\n    height: 100%;\n    width: 100%;\n  }\n\n  @media (forced-colors: active) {\n    :host::before {\n      background: CanvasText;\n    }\n  }\n}\n"
  },
  {
    "path": "divider/internal/divider-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './divider';\n// go/keep-sorted end\n\n@include divider.styles;\n"
  },
  {
    "path": "divider/internal/divider.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n/**\n * A divider component.\n */\nexport class Divider extends LitElement {\n  /**\n   * Indents the divider with equal padding on both sides.\n   */\n  @property({type: Boolean, reflect: true}) inset = false;\n\n  /**\n   * Indents the divider with padding on the leading side.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'inset-start'})\n  insetStart = false;\n\n  /**\n   * Indents the divider with padding on the trailing side.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'inset-end'})\n  insetEnd = false;\n}\n"
  },
  {
    "path": "docs/components/button.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Buttons\ndirname: button\n-----><!-- catalog-only-end -->\n\n<catalog-component-header>\n<catalog-component-header-title slot=\"title\">\n\n# Buttons\n\n<!-- no-catalog-start -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-button -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/button/).**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Buttons](https://m3.material.io/components/buttons)<!-- {.external} --> help people\ninitiate actions, from sending an email, to sharing a document, to liking a\npost.\n\nThere are five types of common buttons: elevated, filled, filled tonal,\noutlined, and text.\n\n</catalog-component-header-title>\n\n<img\n    class=\"hero\"\n    alt=\"A phone showing a payment screen with a green filled button that says 'Make\npayment'\"\n    title=\"There are 5 types of common buttons\"\n    src=\"images/button/hero.webp\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/buttons) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/button)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Types\n\n<!-- no-catalog-start -->\n\n![The 5 types of common buttons](images/button/types.webp \"Elevated, filled, filled tonal, outlined, and text buttons\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      class=\"types-image\"\n      style=\"justify-content:center;\"\n      title=\"Elevated, filled, filled tonal, outlined, and text buttons\"\n      aria-label=\"The 5 types of common buttons\">\n    <style>\n      .types-image .wrapper,\n      .types-image .wrapper > * {\n        display: flex;\n        padding: 8px;\n        flex-wrap: wrap;\n        justify-content: center;\n      }\n      .types-image .wrapper > * {\n        flex-direction: column;\n        align-items: center;\n        padding-inline: 16px;\n      }\n      .types-image span {\n        display: inline-flex;\n        background-color: var(--md-sys-color-inverse-surface);\n        color: var(--md-sys-color-inverse-on-surface);\n        padding: 8px;\n        margin-block-start: 8px;\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        justify-content: center;\n        align-items: center;\n      }\n    </style>\n    <div class=\"wrapper\">\n      <div>\n        <md-elevated-button has-icon>\n          <md-icon slot=\"icon\">add</md-icon>\n          Elevated\n        </md-elevated-button>\n        <span>1</span>\n      </div>\n      <div>\n        <md-filled-button>Filled</md-filled-button>\n        <span>2</span>\n      </div>\n      <div>\n        <md-filled-tonal-button>Tonal</md-filled-tonal-button>\n        <span>3</span>\n      </div>\n      <div>\n        <md-outlined-button>Outlined</md-outlined-button>\n        <span>4</span>\n      </div>\n      <div>\n        <md-text-button>Text</md-text-button>\n        <span>5</span>\n      </div>\n    </div>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n1.  [Elevated button](#elevated-button)\n1.  [Filled button](#filled-button)\n1.  [Filled tonal button](#filled-tonal-button)\n1.  [Outlined button](#outlined-button)\n1.  [Text button](#text-button)\n\n## Usage\n\nButtons have label text that describes the action that will occur if a user taps\na button.\n\n<!-- no-catalog-start -->\n\n![An outlined button with the text \"Back\" next to a filled button with the text\n\"Complete\"](images/button/usage.webp \"Outlined and filled buttons.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;gap: 8px;\"\n      title=\"Outlined and filled buttons.\"\n      aria-label=\"An outlined button with the text 'Back' next to a filled button with the text 'Complete'\">\n    <md-outlined-button>Back</md-outlined-button>\n    <md-filled-button>Complete</md-filled-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-outlined-button>Back</md-outlined-button>\n<md-filled-button>Complete</md-filled-button>\n```\n\n### Icon\n\nAn icon may optionally be added to a button to help communicate the button's\naction and help draw attention.\n\n<!-- no-catalog-start -->\n\n![A tonal button with a right arrow send icon with text 'send' and a text button\nwith the text 'open' with a trailing icon arrow\nbox](images/button/usage-icon.webp \"Slot in icons to the appropriate slots\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;gap: 8px;\"\n      title=\"Outlined and filled buttons.\"\n      aria-label=\"An outlined button with the text 'Back' next to a filled button with the text 'Complete'\">\n    <md-filled-tonal-button>\n      Send\n      <svg slot=\"icon\" viewBox=\"0 0 48 48\"><path d=\"M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z\"/></svg>\n    </md-filled-tonal-button>\n\n    <md-text-button trailing-icon>\n      Open\n      <svg slot=\"icon\" viewBox=\"0 0 48 48\"><path d=\"M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z\"/></svg>\n    </md-text-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-filled-tonal-button>\n  Send\n  <svg slot=\"icon\" viewBox=\"0 0 48 48\"><path d=\"M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z\"/></svg>\n</md-filled-tonal-button>\n\n<md-text-button trailing-icon>\n  Open\n  <svg slot=\"icon\" viewBox=\"0 0 48 48\"><path d=\"M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z\"/></svg>\n</md-text-button>\n```\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to buttons whose labels need a more descriptive label.\n\n```html\n<md-elevated-button aria-label=\"Add a new contact\">Add</md-elevated-button>\n```\n\n### Focusable and disabled\n\nBy default, disabled buttons are not focusable with the keyboard, while\n\"soft-disabled\" buttons are. Some use cases encourage focusability of disabled\ntoolbar items to increase their discoverability.\n\nSee the\n[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->\nfor guidance on when this is recommended.\n\n```html\n<div role=\"toolbar\">\n  <md-text-button>Copy</md-text-button>\n  <md-text-button>Cut</md-text-button>\n  <!--\n    This button is disabled but kept focusable to improve its discoverability\n    in the toolbar.\n  -->\n  <md-text-button soft-disabled>Paste</md-text-button>\n</div>\n```\n\n## Elevated button\n\n<!-- go/md-elevated-button -->\n\n[Elevated buttons](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e)<!-- {.external} -->\nare essentially filled tonal buttons with a shadow. To prevent shadow creep,\nonly use them when absolutely necessary, such as when the button requires visual\nseparation from a patterned background.\n\n<!-- no-catalog-start -->\n\n![An elevated button](images/button/usage-elevated-button.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      aria-label=\"An elevated button.\">\n    <md-elevated-button>Elevated</md-elevated-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-elevated-button>Elevated</md-elevated-button>\n```\n\n## Filled button\n\n<!-- go/md-filled-button -->\n\n[Filled buttons](https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe)<!-- {.external} -->\nhave the most visual impact after the FAB, and should be used for important,\nfinal actions that complete a flow, like Save, Join now, or Confirm.\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      aria-label=\"A filled button.\">\n    <md-filled-button>Filled</md-filled-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-filled-button>Filled</md-filled-button>\n```\n\n## Filled tonal button\n\n<!-- go/md-filled-tonal-button -->\n\nA\n[filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b)<!-- {.external} -->\nis an alternative middle ground between filled and outlined buttons. They're\nuseful in contexts where a lower-priority button requires slightly more emphasis\nthan an outline would give, such as \"Next\" in an onboarding flow.\n\n<!-- no-catalog-start -->\n\n![A filled tonal button](images/button/usage-filled-tonal-button.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      aria-label=\"A tonal button.\">\n    <md-filled-tonal-button>Tonal</md-filled-tonal-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-filled-tonal-button>Tonal</md-filled-tonal-button>\n```\n\n## Outlined button\n\n<!-- go/md-outlined-button -->\n\n[Outlined buttons](https://m3.material.io/components/buttons/guidelines#3742b09f-c224-43e0-a83e-541bd29d0f05)<!-- {.external} -->\nare medium-emphasis buttons. They contain actions that are important, but aren’t\nthe primary action in an app.\n\n<!-- no-catalog-start -->\n\n![An outlined button](images/button/usage-outlined-button.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      aria-label=\"An outlined button.\">\n    <md-outlined-button>Outlined</md-outlined-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-outlined-button>Outlined</md-outlined-button>\n```\n\n## Text button\n\n<!-- go/md-text-button -->\n\n[Text buttons](https://m3.material.io/components/buttons/guidelines#c9bcbc0b-ee05-45ad-8e80-e814ae919fbb)<!-- {.external} -->\nare used for the lowest priority actions, especially when presenting multiple\noptions.\n\n<!-- no-catalog-start -->\n\n![A text button](images/button/usage-text-button.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      aria-label=\"A text button.\">\n    <md-text-button>Text</md-text-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-text-button>Text</md-text-button>\n```\n\n## Theming\n\nButton supports [Material theming](../theming/README.md) and can be customized\nin terms of color, typography, and shape.\n\n### Elevated button tokens\n\nToken                                   | Default value\n--------------------------------------- | -------------------------------------\n`--md-elevated-button-container-color`  | `--md-sys-color-surface`\n`--md-elevated-button-container-shape`  | `--md-sys-shape-corner-full`\n`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`\n`--md-elevated-button-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss)\n    <!-- {.external} -->\n\n### Elevated button example\n\n<!-- no-catalog-start -->\n\n![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.webp \"Elevated button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      class=\"styled-example\"\n      title=\"Elevated button theming example.\"\n      aria-label=\"Image of an elevated button with a different theme applied\">\n    <style>\n      .styled-example {\n        background-color: white;\n        --md-elevated-button-container-shape: 0px;\n        --md-elevated-button-label-text-font: system-ui;\n        --md-sys-color-surface-container-low: #FAFDFC;\n        --md-sys-color-primary: #191C1C;\n      }\n    </style>\n\n    <md-elevated-button>Elevated</md-elevated-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<style>\n:root {\n  --md-elevated-button-container-shape: 0px;\n  --md-elevated-button-label-text-font: system-ui;\n  --md-sys-color-surface-container-low: #FAFDFC;\n  --md-sys-color-primary: #191C1C;\n}\n</style>\n\n<md-elevated-button>Elevated</md-elevated-button>\n```\n\n### Filled button tokens\n\nToken                                 | Default value\n------------------------------------- | -------------------------------------\n`--md-filled-button-container-color`  | `--md-sys-color-primary`\n`--md-filled-button-container-shape`  | `--md-sys-shape-corner-full`\n`--md-filled-button-label-text-color` | `--md-sys-color-on-primary`\n`--md-filled-button-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss)\n    <!-- {.external} -->\n\n### Filled button example\n\n<!-- no-catalog-start -->\n\n![Image of a filled button with a different theme applied](images/button/theming-filled-button.webp \"Filled button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      class=\"styled-example\"\n      title=\"Filled button theming example.\"\n      aria-label=\"Image of a filled button with a different theme applied\">\n    <style>\n      .styled-example {\n        background-color: white;\n        --md-filled-button-container-shape: 0px;\n        --md-filled-button-label-text-font: system-ui;\n        --md-sys-color-primary: #006A6A;\n        --md-sys-color-on-primary: #FFFFFF;\n      }\n    </style>\n\n    <md-filled-button>Filled</md-filled-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<style>\n:root {\n  --md-filled-button-container-shape: 0px;\n  --md-filled-button-label-text-font: system-ui;\n  --md-sys-color-primary: #006A6A;\n  --md-sys-color-on-primary: #FFFFFF;\n}\n</style>\n\n<md-filled-button>Filled</md-filled-button>\n```\n\n### Filled tonal button tokens\n\nToken                                       | Default value\n------------------------------------------- | -------------\n`--md-filled-tonal-button-container-color`  | `--md-sys-color-secondary-container`\n`--md-filled-tonal-button-container-shape`  | `--md-sys-shape-corner-full`\n`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`\n`--md-filled-tonal-button-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)\n    <!-- {.external} -->\n\n### Filled tonal button example\n\n<!-- no-catalog-start -->\n\n![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.webp \"Filled tonal button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      class=\"styled-example\"\n      title=\"Tonal button theming example.\"\n      aria-label=\"Image of a tonal button with a different theme applied\">\n    <style>\n      .styled-example {\n        background-color: white;\n        --md-filled-tonal-button-container-shape: 0px;\n        --md-filled-tonal-button-label-text-font: system-ui;\n        --md-sys-color-secondary-container: #CCE8E7;\n        --md-sys-color-on-secondary-container: #051F1F;\n      }\n    </style>\n\n    <md-filled-tonal-button>Tonal</md-filled-tonal-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<style>\n:root {\n  --md-filled-tonal-button-container-shape: 0px;\n  --md-filled-tonal-button-label-text-font: system-ui;\n  --md-sys-color-secondary-container: #CCE8E7;\n  --md-sys-color-on-secondary-container: #051F1F;\n}\n</style>\n\n<md-filled-tonal-button>Tonal</md-filled-tonal-button>\n```\n\n### Outlined button tokens\n\nToken                                   | Default value\n--------------------------------------- | -------------------------------------\n`--md-outlined-button-outline-color`    | `--md-sys-color-outline`\n`--md-outlined-button-container-shape`  | `--md-sys-shape-corner-full`\n`--md-outlined-button-label-text-color` | `--md-sys-color-primary`\n`--md-outlined-button-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss)\n    <!-- {.external} -->\n\n### Outlined button example\n\n<!-- no-catalog-start -->\n\n![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.webp \"Outlined button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      class=\"styled-example\"\n      title=\"Outlined button theming example.\"\n      aria-label=\"Image of a outlined button with a different theme applied\">\n    <style>\n      .styled-example {\n        background-color: white;\n        --md-outlined-button-container-shape: 0px;\n        --md-outlined-button-label-text-font: system-ui;\n        --md-sys-color-primary: #006A6A;\n        --md-sys-color-outline: #6F7979;\n      }\n    </style>\n\n    <md-outlined-button>Outlined</md-outlined-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<style>\n:root {\n  --md-outlined-button-container-shape: 0px;\n  --md-outlined-button-label-text-font: system-ui;\n  --md-sys-color-primary: #006A6A;\n  --md-sys-color-outline: #6F7979;\n}\n</style>\n\n<md-outlined-button>Outlined</md-outlined-button>\n```\n\n### Text button tokens\n\nToken                               | Default value\n----------------------------------- | -------------------------------------\n`--md-text-button-label-text-color` | `--md-sys-color-primary`\n`--md-text-button-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss)\n    <!-- {.external} -->\n\n### Text button example\n\n<!-- no-catalog-start -->\n\n![Image of a text button with a different theme applied](images/button/theming-text-button.webp \"Text button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      class=\"styled-example\"\n      title=\"Text button theming example.\"\n      aria-label=\"Image of a text button with a different theme applied\">\n    <style>\n      .styled-example {\n        background-color: white;\n        --md-text-button-label-text-font: system-ui;\n        --md-sys-color-primary: #006A6A;\n      }\n    </style>\n\n    <md-text-button>Text</md-text-button>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<style>\n:root {\n  --md-text-button-label-text-font: system-ui;\n  --md-sys-color-primary: #006A6A;\n}\n</style>\n\n<md-text-button>Text</md-text-button>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdElevatedButton <code>&lt;md-elevated-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is \"soft-disabled\" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `href` | `href` | `string` | `''` | The URL that the link button points to. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |\n| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdFilledButton <code>&lt;md-filled-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is \"soft-disabled\" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `href` | `href` | `string` | `''` | The URL that the link button points to. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |\n| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdFilledTonalButton <code>&lt;md-filled-tonal-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is \"soft-disabled\" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `href` | `href` | `string` | `''` | The URL that the link button points to. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |\n| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdOutlinedButton <code>&lt;md-outlined-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is \"soft-disabled\" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `href` | `href` | `string` | `''` | The URL that the link button points to. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |\n| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdTextButton <code>&lt;md-text-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is \"soft-disabled\" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `href` | `href` | `string` | `''` | The URL that the link button points to. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |\n| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/checkbox.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Checkbox\ndirname: checkbox\n-----><!-- catalog-only-end -->\n\n<catalog-component-header>\n<catalog-component-header-title slot=\"title\">\n\n# Checkbox\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: {\n  owner: 'lizmitchell'\n  reviewed: '2025-11-23'\n}\ntag: 'docType:reference'\n*-->\n\n<!-- no-catalog-start -->\n\n<!-- go/md-checkbox -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/checkbox/).**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Checkboxes](https://m3.material.io/components/checkbox)<!-- {.external} --> allow users\nto select one or more items from a set. Checkboxes can turn an option on or off.\n\nThere's one type of checkbox in Material. Use this selection control when the\nuser needs to select one or more options from a list.\n\n</catalog-component-header-title>\n\n<img\n    class=\"hero\"\n    src=\"images/checkbox/hero.webp\"\n    alt=\"A list of burger additions represented with checkboxes\"\n    title=\"Checkboxes in a list of items.\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/checkbox) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/checkbox)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nCheckboxes may be standalone, pre-checked, or indeterminate.\n\n<!-- no-catalog-start -->\n\n![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.webp \"Unselected, selected, and indeterminate checkboxes.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/checkbox/usage.html\" -->\n\n```html\n<md-checkbox touch-target=\"wrapper\"></md-checkbox>\n<md-checkbox touch-target=\"wrapper\" checked></md-checkbox>\n<md-checkbox touch-target=\"wrapper\" indeterminate></md-checkbox>\n```\n\n### Label\n\nAssociate a label with a checkbox using the `<label>` element.\n\n<!-- no-catalog-start -->\n\n![Two checkboxes with labels](images/checkbox/usage-label.webp \"Labeled checkboxes.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/checkbox/usage-label.html\" -->\n\n```html\n<label>\n  <md-checkbox touch-target=\"wrapper\"></md-checkbox>\n  Checkbox one\n</label>\n\n<md-checkbox id=\"checkbox-two\" touch-target=\"wrapper\"></md-checkbox>\n<label for=\"checkbox-two\">Checkbox two</label>\n```\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to checkboxes without labels or checkboxes whose labels need to be\nmore descriptive.\n\n```html\n<md-checkbox aria-label=\"Select all checkboxes\"></md-checkbox>\n\n<label>\n  <md-checkbox aria-label=\"Agree to terms and conditions\"></md-checkbox>\n  Agree\n</label>\n```\n\n> Note: checkboxes are not automatically labelled by `<label>` elements and\n> always need an `aria-label`. See b/294081528.\n\n## Theming\n\nCheckbox supports [Material theming](../theming/README.md) and can be customized\nin terms of color and shape.\n\n### Tokens\n\nToken                                    | Default value\n---------------------------------------- | -----------------------------------\n`--md-checkbox-outline-color`            | `--md-sys-color-on-surface-variant`\n`--md-checkbox-selected-container-color` | `--md-sys-color-primary`\n`--md-checkbox-selected-icon-color`      | `--md-sys-color-on-primary`\n`--md-checkbox-container-shape`          | `2px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-checkbox.scss)\n    <!-- {.external} -->\n\n### Example\n\n<!-- no-catalog-start -->\n\n![Image of a checkbox with a different theme applied](images/checkbox/theming.webp \"Checkbox theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/checkbox/theming.html\" -->\n\n```html\n<style>\n  :root {\n    /* System tokens */\n    --md-sys-color-primary: #006a6a;\n    --md-sys-color-on-primary: #ffffff;\n    --md-sys-color-on-surface-variant: #3f4948;\n\n    /* Component tokens */\n    --md-checkbox-container-shape: 0px;\n  }\n</style>\n\n<md-checkbox touch-target=\"wrapper\"></md-checkbox>\n<md-checkbox touch-target=\"wrapper\" checked></md-checkbox>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdCheckbox <code>&lt;md-checkbox&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `checked` | `checked` | `boolean` | `false` | Whether or not the checkbox is selected. |\n| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not the checkbox is indeterminate.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes |\n| `required` | `required` | `boolean` | `false` | When true, require the checkbox to be selected when participating in form submission.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation |\n| `value` | `value` | `string` | `'on'` | The value of the checkbox that is submitted with a form when selected.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |\n| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/chip.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Chips\ndirname: chips\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Chips\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- no-catalog-start -->\n\n<!-- go/md-chips -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/chip/)**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Chips](https://m3.material.io/components/chips)<!-- {.external} --> help people enter\ninformation, make selections, filter content, or trigger actions.\n\nWhile buttons are expected to appear consistently and with familiar calls to\naction, chips should appear dynamically as a group of multiple interactive\nelements.\n\n</catalog-component-header-title>\n\n<img class=\"hero\" src=\"images/chips/hero.webp\" alt=\"Two collections of filter chips, with some options selected and some unselected.\"\ntitle=\"Filter chips\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/chips) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/chips)\n    <!-- {.external} -->\n\n## Types\n\n1.  [Assist chip](#assist-chip)\n1.  [Filter chip](#filter-chip)\n1.  [Input chip](#input-chip)\n1.  [Suggestion chip](#suggestion-chip)\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nChoose the type of chip based on its purpose and author.\n\n-   **Assist** chips are common actions, such as adding an event to a calendar.\n-   **Filter** chips are tags used to filter content, such as shopping\n    categories.\n-   **Input** chips are pieces of information entered by a user, such as event\n    attendees.\n-   **Suggestion** chips represent dynamic suggestions for user input, such as\n    text message replies.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-chip-set>\n  <md-assist-chip label=\"Assist\"></md-assist-chip>\n  <md-filter-chip label=\"Filter\"></md-filter-chip>\n  <md-input-chip label=\"Input\"></md-input-chip>\n  <md-suggestion-chip label=\"Suggestion\"></md-suggestion-chip>\n</md-chip-set>\n```\n\n### Chip sets\n\n<!-- go/md-chip-set -->\n\nChips should always appear in a set. Chip sets are\n[toolbars](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role)<!-- {.external} -->\nthat can display any type of chip or other toolbar items.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<h3>New event</h3>\n<md-chip-set>\n  <md-filter-chip label=\"All day\"></md-filter-chip>\n  <md-assist-chip label=\"Add to calendar\"></md-assist-chip>\n  <md-assist-chip label=\"Set a reminder\"></md-assist-chip>\n</md-chip-set>\n```\n\n### Icons\n\nAll chips may display an optional icon. Input chips can specify if an avatar\npicture is displayed.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<md-chip-set>\n  <md-assist-chip label=\"Add to calendar\">\n    <md-icon slot=\"icon\">event</md-icon>\n  </md-assist-chip>\n\n  <md-input-chip label=\"Ping Qiang\" avatar>\n    <img slot=\"icon\" src=\"...\">\n  </md-input-chip>\n</md-chip-set>\n```\n\n### Elevated\n\nAssist, filter, and suggestion chips can be elevated if the placement requires\nprotection, such as on top of an image.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<div>\n  <img src=\"...\">\n  <md-chip-set>\n    <md-suggestion-chip label=\"Share\" elevated></md-suggestion-chip>\n    <md-suggestion-chip label=\"Favorite\" elevated></md-suggestion-chip>\n  </md-chip-set>\n</div>\n```\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to chip sets or reference a label with\n[`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)<!-- {.external} -->.\nAdd an `aria-label` to chips whose labels need to be more descriptive.\n\n```html\n<h3 id=\"dates-label\">Dates</h3>\n<md-chip-set aria-labelledby=\"dates-label\">\n  <md-filter-chip label=\"Mon\" aria-label=\"Monday\"></md-filter-chip>\n  <md-filter-chip label=\"Tue\" aria-label=\"Tuesday\"></md-filter-chip>\n  <md-filter-chip label=\"Wed\" aria-label=\"Wednesday\"></md-filter-chip>\n</md-chip-set>\n```\n\n### Focusable and disabled\n\nBy default, disabled chips are not focusable with the keyboard, while\n\"soft-disabled\" chips are. Some use cases encourage focusability of disabled\ntoolbar items to increase their discoverability.\n\nSee the\n[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->\nfor guidance on when this is recommended.\n\n```html\n<md-chip-set aria-label=\"Actions\">\n  <!--\n    Disabled until text is selected. Since both are disabled by default, keep\n    them focusable so that screen readers can discover the actions available.\n  -->\n  <md-assist-chip label=\"Copy\" soft-disabled></md-assist-chip>\n  <md-assist-chip label=\"Paste\" soft-disabled></md-assist-chip>\n</md-chip-set>\n<md-outlined-text-field type=\"textarea\"></md-outlined-text-field>\n```\n\n## Assist chip\n\n<!-- go/md-assist-chip -->\n\n[Assist chips](https://m3.material.io/components/chips/guidelines#5dd1928c-1476-4029-bdc5-fde66fc0dcb1)<!-- {.external} -->\nrepresent smart or automated actions that can span multiple apps, such as\nopening a calendar event from the home screen.\n\nAssist chips function as though the user asked an assistant to complete the\naction. They should appear dynamically and contextually in a UI.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<h3>A restaraunt location</h3>\n<md-chip-set>\n  <md-assist-chip label=\"Add to my itinerary\">\n    <md-icon slot=\"icon\">calendar</md-icon>\n  </md-assist-chip>\n  <md-assist-chip label=\"12 mins from hotel\">\n    <md-icon slot=\"icon\">map</md-icon>\n  </md-assist-chip>\n</md-chip-set>\n```\n\n## Filter chip\n\n<!-- go/md-filter-chip -->\n\n[Filter chips](https://m3.material.io/components/chips/guidelines#8d453d50-8d8e-43aa-9ae3-87ed134d2e64)<!-- {.external} -->\nuse tags or descriptive words to filter content. They can be a good alternative\nto toggle buttons or checkboxes.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<h3>Choose where to share</h3>\n<md-chip-set>\n  <md-filter-chip label=\"Docs\"></md-filter-chip>\n  <md-filter-chip label=\"Slides\" selected></md-filter-chip>\n  <md-filter-chip label=\"Sheets\" selected></md-filter-chip>\n  <md-filter-chip label=\"Images\"></md-filter-chip>\n</md-chip-set>\n```\n\n### Removable\n\nFilter chips can optionally be removable from the chip set. Removable chips have\na trailing remove icon.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<h3>Colors</h3>\n<md-chip-set>\n  <md-filter-chip label=\"Red\" removable selected></md-filter-chip>\n  <md-filter-chip label=\"Yellow\" removable></md-filter-chip>\n  <md-filter-chip label=\"Blue\" removable></md-filter-chip>\n  <md-filter-chip label=\"Green\" removable></md-filter-chip>\n</md-chip-set>\n```\n\n## Input chip\n\n<!-- go/md-input-chip -->\n\n[Input chips](https://m3.material.io/components/chips/guidelines#4d2d5ef5-3fcd-46e9-99f2-067747b2393f)<!-- {.external} -->\nrepresent discrete pieces of information entered by a user, such as Gmail\ncontacts or filter options within a search field.\n\nInput chips whose icons are user images may add the `avatar` attribute to\ndisplay the image in a larger circle.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<md-outlined-text-field label=\"Attendees\" type=\"email\"></md-outlined-text-field>\n\n<md-chip-set>\n  <md-input-chip label=\"Ping Qiang\" avatar>\n    <img slot=\"icon\" src=\"...\">\n  </md-input-chip>\n  <md-input-chip label=\"Thea Schröder\" avatar>\n    <img slot=\"icon\" src=\"...\">\n  </md-input-chip>\n</md-chip-set>\n```\n\n### Remove-only\n\nAll input chips are removable. If an input chip does not have an action\nassociated with clicking on it, it may be marked as `remove-only`.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<h3>Favorite movies</h3>\n<md-chip-set>\n  <md-input-chip label=\"Star Wars\" remove-only></md-input-chip>\n  <md-input-chip label=\"Star Trek\" remove-only></md-input-chip>\n</md-chip-set>\n```\n\n## Suggestion chip\n\n<!-- go/md-suggestion-chip -->\n\n[Suggestion chips](https://m3.material.io/components/chips/guidelines#36d7bb16-a9bf-4cf6-a73d-8e05510d66a7)<!-- {.external} -->\nhelp narrow a user’s intent by presenting dynamically generated suggestions,\nsuch as possible responses or search filters.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage-scenario-one.html\" -->\n<!-- catalog-only-end -->\n\n```html\n<h3>Suggested reply</h3>\n<md-chip-set>\n  <md-suggestion-chip label=\"I agree\"></md-suggestion-chip>\n  <md-suggestion-chip label=\"Looks good to me\"></md-suggestion-chip>\n  <md-suggestion-chip label=\"Thank you\"></md-suggestion-chip>\n</md-chip-set>\n```\n\n## Theming\n\nChips support [Material theming](../theming/README.md) and can be customized in\nterms of color, typography, and shape.\n\n### Assist chip tokens\n\nToken                               | Default value\n----------------------------------- | -------------------------------------\n`--md-assist-chip-outline-color`    | `--md-sys-color-outline`\n`--md-assist-chip-container-shape`  | `--md-sys-shape-corner-small`\n`--md-assist-chip-icon-size`        | `18px`\n`--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`\n`--md-assist-chip-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-assist-chip.scss)\n    <!-- {.external} -->\n\n### Assist chip example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/theming.html\" -->\n\n```html\n<style>\n:root {\n  --md-assist-chip-container-shape: 0px;\n  --md-assist-chip-label-text-font: system-ui;\n  --md-sys-color-outline: #6F7979;\n  --md-sys-color-on-surface: #191C1C;\n}\n</style>\n\n<md-assist-chip label=\"Assist\"></md-assist-chip>\n```\n\n### Filter chip tokens\n\nToken                                       | Default value\n------------------------------------------- | -------------\n`--md-filter-chip-selected-container-color` | `--md-sys-color-secondary-container`\n`--md-filter-chip-outline-color`            | `--md-sys-color-outline`\n`--md-filter-chip-container-shape`          | `--md-sys-shape-corner-small`\n`--md-filter-chip-icon-size`                | `18px`\n`--md-filter-chip-label-text-color`         | `--md-sys-color-on-surface`\n`--md-filter-chip-label-text-font`          | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filter-chip.scss)\n    <!-- {.external} -->\n\n### Filter chip example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/theming.html\" -->\n\n```html\n<style>\n:root {\n  --md-filter-chip-container-shape: 0px;\n  --md-filter-chip-label-text-font: system-ui;\n  --md-sys-color-outline: #6f7979;\n  --md-sys-color-on-surface: #191c1c;\n  --md-sys-color-secondary-container: #cce8e7;\n}\n</style>\n\n<md-filter-chip label=\"Filter\"></md-filter-chip>\n```\n\n### Input chip tokens\n\nToken                              | Default value\n---------------------------------- | -------------------------------------\n`--md-input-chip-outline-color`    | `--md-sys-color-outline`\n`--md-input-chip-container-shape`  | `--md-sys-shape-corner-small`\n`--md-input-chip-icon-size`        | `18px`\n`--md-input-chip-label-text-color` | `--md-sys-color-on-surface`\n`--md-input-chip-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-input-chip.scss)\n    <!-- {.external} -->\n\n### Input chip example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/theming.html\" -->\n\n```html\n<style>\n:root {\n  --md-input-chip-container-shape: 0px;\n  --md-input-chip-label-text-font: system-ui;\n  --md-sys-color-outline: #6f7979;\n  --md-sys-color-on-surface: #191c1c;\n}\n</style>\n\n<md-input-chip label=\"Input\"></md-input-chip>\n```\n\n### Suggestion chip tokens\n\nToken                                   | Default value\n--------------------------------------- | -------------------------------------\n`--md-suggestion-chip-outline-color`    | `--md-sys-color-outline`\n`--md-suggestion-chip-container-shape`  | `--md-sys-shape-corner-small`\n`--md-suggestion-chip-icon-size`        | `18px`\n`--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`\n`--md-suggestion-chip-label-text-font`  | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-suggestion-chip.scss)\n    <!-- {.external} -->\n\n### Suggestion chip example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/theming.html\" -->\n\n```html\n<style>\n:root {\n  --md-suggestion-chip-container-shape: 0px;\n  --md-suggestion-chip-label-text-font: system-ui;\n  --md-sys-color-outline: #6f7979;\n  --md-sys-color-on-surface: #191c1c;\n}\n</style>\n\n<md-suggestion-chip label=\"Suggestion\"></md-suggestion-chip>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdChipSet <code>&lt;md-chip-set&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `chips` |  | `Chip[]` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdAssistChip <code>&lt;md-assist-chip&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `elevated` | `elevated` | `boolean` | `false` |  |\n| `href` | `href` | `string` | `''` |  |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the chip is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` |  |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is \"soft-disabled\" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `label` | `label` | `string` | `''` | The label of the chip. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot=\"icon\"` to avoid a Flash Of Unstyled Content. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdFilterChip <code>&lt;md-filter-chip&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `elevated` | `elevated` | `boolean` | `false` |  |\n| `removable` | `removable` | `boolean` | `false` |  |\n| `selected` | `selected` | `boolean` | `false` |  |\n| `hasSelectedIcon` | `has-selected-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid a Flash Of Unstyled Content. |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is \"soft-disabled\" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `label` | `label` | `string` | `''` | The label of the chip. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot=\"icon\"` to avoid a Flash Of Unstyled Content. |\n| `handleTrailingActionFocus` |  | `() => void` | `undefined` |  |\n| `ariaLabelRemove` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |\n| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdInputChip <code>&lt;md-input-chip&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `avatar` | `avatar` | `boolean` | `false` |  |\n| `href` | `href` | `string` | `''` |  |\n| `target` | `target` | `string` | `''` |  |\n| `removeOnly` | `remove-only` | `boolean` | `false` |  |\n| `selected` | `selected` | `boolean` | `false` |  |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is \"soft-disabled\" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `label` | `label` | `string` | `''` | The label of the chip. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot=\"icon\"` to avoid a Flash Of Unstyled Content. |\n| `handleTrailingActionFocus` |  | `() => void` | `undefined` |  |\n| `ariaLabelRemove` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `remove` | `Event` | No | No | Dispatched when the remove button is clicked. |\n| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdSuggestionChip <code>&lt;md-suggestion-chip&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `elevated` | `elevated` | `boolean` | `false` |  |\n| `href` | `href` | `string` | `''` |  |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the chip is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` |  |\n| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is \"soft-disabled\" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `label` | `label` | `string` | `''` | The label of the chip. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot=\"icon\"` to avoid a Flash Of Unstyled Content. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `update-focus` | `Event` | Yes | No | Dispatched when `disabled` is toggled. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/dialog.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Dialogs\ndirname: dialog\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Dialogs\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- no-catalog-start -->\n\n<!-- go/md-dialog -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/dialog/)**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Dialogs](https://m3.material.io/components/dialogs)<!-- {.external} --> provide\nimportant prompts in a user flow.\n\n</catalog-component-header-title>\n\n<img class=\"hero\" src=\"images/dialog/hero.webp\" alt=\"A dialog displaying phone ringtone options.\"\ntitle=\"A dialog\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/dialogs) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/dialog)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nDialogs behave like\n[`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)<!-- {.external} -->\nelements, and can be closed with a `<form method=\"dialog\">` element.\n\nDialogs have three optional sections: the headline title, the main content, and\naction buttons.\n\n```html\n<md-dialog>\n  <div slot=\"headline\">\n    Dialog title\n  </div>\n  <form slot=\"content\" id=\"form-id\" method=\"dialog\">\n    A simple dialog with free-form content.\n  </form>\n  <div slot=\"actions\">\n    <md-text-button form=\"form-id\">Ok</md-text-button>\n  </div>\n</md-dialog>\n```\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n> Tip: use `margin`, `height`, and `width` CSS properties to control the\n> dialog's size and position.\n\n### Opening and closing\n\nDialogs are opened and closed by setting the `open` attribute or property.\n\n```html\n<md-dialog open>\n  <div slot=\"content\">\n    A dialog that is opened by default.\n  </div>\n</md-dialog>\n```\n\nDialogs are also opened and closed by calling `dialog.show()` and\n`dialog.close()`.\n\nBoth return a Promise that resolves after the dialog's animation finishes.\n\n```ts\ncloseButton.addEventListener('click', async () => {\n  await dialog.close();\n});\n```\n\n### Return value\n\nA button's value attribute will set the dialog's `returnValue` property to\nidentify which button closed it.\n\n```html\n<md-dialog open>\n  <form slot=\"content\" id=\"form-id\" method=\"dialog\">...</form>\n  <div slot=\"actions\">\n    <md-text-button form=\"form-id\" value=\"cancel\">Cancel</md-text-button>\n    <md-text-button form=\"form-id\" value=\"ok\">Ok</md-text-button>\n  </div>\n</md-dialog>\n```\n\n```ts\ndialog.addEventListener('close', () => {\n  const cancelClicked = dialog.returnValue === 'cancel';\n  const okClicked = dialog.returnValue === 'ok';\n});\n```\n\n## Accessibility\n\nDialogs are labelled by their headlines. Add an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to dialogs without a headline.\n\n```html\n<md-dialog aria-label=\"Error message\">\n  <div slot=\"content\">An error occurred, details ...</div>\n</md-dialog>\n```\n\n### Alerts\n\nAdd a\n[`type=\"alert\"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)\nattribute to dialogs that need to communicate an important message and require a\nuser's response.\n\nCommon examples include error messages that require confirmation and other\naction confirmation prompts.\n\n```html\n<md-dialog type=\"alert\">\n  <div slot=\"headline\">Confirm deletion</div>\n  <form slot=\"content\" id=\"form-id\" method=\"dialog\">\n    Are you sure you wish to delete this item?\n  </form>\n  <div slot=\"actions\">\n    <md-text-button form=\"form-id\" value=\"cancel\">Cancel</md-text-button>\n    <md-text-button form=\"form-id\" value=\"delete\">Delete</md-text-button>\n  </div>\n</md-dialog>\n```\n\n## Theming\n\nDialogs supports [Material theming](../theming/README.md) and can be customized\nin terms of color, typography, and shape.\n\n### Tokens\n\nToken                               | Default value\n----------------------------------- | ---------------------------------------\n`--md-dialog-container-color`       | `--md-sys-color-surface-container-high`\n`--md-dialog-headline-color`        | `--md-sys-color-on-surface`\n`--md-dialog-headline-font`         | `--md-sys-typescale-headline-small-font`\n`--md-dialog-supporting-text-color` | `--md-sys-color-on-surface-variant`\n`--md-dialog-supporting-text-font`  | `--md-sys-typescale-body-medium-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-dialog.scss)\n    <!-- {.external} -->\n\n### Example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<style>\n:root {\n  /* System tokens */\n  --md-sys-color-surface-container-highest: #dde4e3;\n  --md-sys-color-on-surface: #161d1d;\n  --md-sys-color-on-surface-variant: #3f4948;\n  --md-sys-typescale-body-medium: system-ui 16px/24px;\n  --md-sys-typescale-headline-small: system-ui 24px/32px;\n\n  /* Component tokens */\n  --md-dialog-container-shape: 0px;\n}\n</style>\n\n<md-dialog>\n  <div slot=\"headline\">Title</div>\n  <div slot=\"content\">Dialog content</div>\n</md-dialog>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdDialog <code>&lt;md-dialog&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `quick` | `quick` | `boolean` | `false` | Skips the opening and closing animations. |\n| `returnValue` |  | `string` | `''` | Gets or sets the dialog's return value, usually to indicate which button a user pressed to close it.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue |\n| `type` | `type` | `string` | `undefined` | The type of dialog for accessibility. Set this to `alert` to announce a dialog as an alert dialog. |\n| `noFocusTrap` | `no-focus-trap` | `boolean` | `false` | Disables focus trapping, which by default keeps keyboard Tab navigation within the dialog.<br>When disabled, after focusing the last element of a dialog, pressing Tab again will release focus from the window back to the browser (such as the URL bar).<br>Focus trapping is recommended for accessibility, and should not typically be disabled. Only turn this off if the use case of a dialog is more accessible without focus trapping. |\n| `open` | `open` | `boolean` | `undefined` |  |\n| `getOpenAnimation` |  | `() => DialogAnimation` | `function { ... }` | Gets the opening animation for a dialog. Set to a new function to customize the animation. |\n| `getCloseAnimation` |  | `() => DialogAnimation` | `function { ... }` | Gets the closing animation for a dialog. Set to a new function to customize the animation. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `show` | _None_ | `Promise<void>` | Opens the dialog and fires a cancelable `open` event. After a dialog's animation, an `opened` event is fired.<br>Add an `autofocus` attribute to a child of the dialog that should receive focus after opening. |\n| `close` | `returnValue` | `Promise<void>` | Closes the dialog and fires a cancelable `close` event. After a dialog's animation, a `closed` event is fired. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `open` | `Event` | No | No | Dispatched when the dialog is opening before any animations. |\n| `opened` | `Event` | No | No | Dispatched when the dialog has opened after any animations. |\n| `close` | `Event` | No | No | Dispatched when the dialog is closing before any animations. |\n| `closed` | `Event` | No | No | Dispatched when the dialog has closed after any animations. |\n| `cancel` | `Event` | No | No | Dispatched when the dialog has been canceled by clicking on the scrim or pressing Escape. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/divider.md",
    "content": "# Divider\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-divider -->\n\n<!-- [TOC] -->\n\nA [divider](https://m3.material.io/components/divider)<!-- {.external} --> is a thin line\nthat groups content in lists and containers.\n\nDividers can reinforce tapability, such as when used to separate list items or\ndefine tappable regions in an accordion.\n\n![Screenshot of five stacked dividers](images/divider/hero.webp \"Dividers separating items in a list.\")\n\n*   [Design article](https://m3.material.io/components/divider) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/divider)\n    <!-- {.external} -->\n\n## Usage\n\nUse full width dividers to separate larger sections of unrelated content.\n\n![A full width divider separating two paragraphs of \"Lorem ipsum\"](images/divider/usage.webp \"Full width divider example\")\n\n```html\n<section>\n  <p>Lorem ipsum...</p>\n  <md-divider></md-divider>\n  <p>Lorem ipsum...</p>\n</section>\n```\n\n### Inset dividers\n\nUse inset dividers to separate related content within a section.\n\n![A list of design system names separated by an inset divider](images/divider/usage-inset.webp \"Inset divider example\")\n\n```html\n<section>\n  <p>Material 2</p>\n  <md-divider inset></md-divider>\n  <p>Material 3</p>\n</section>\n```\n\nInset dividers are equally indented from both sides of the screen by default.\nUse `inset-start` or `inset-end` to change this.\n\n![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.webp \"Leading inset divider example\")\n\n```html\n<section>\n  <p>Material 2</p>\n  <md-divider inset-start></md-divider>\n  <p>Material 3</p>\n</section>\n```\n\n## Accessibility\n\nDividers are decorative by default and not announced by assistive technology.\n\nAdd a\n[`role=\"separator\"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role)<!-- {.external} -->\nattribute to non-decorative dividers that should be announced.\n\n```html\n<ul>\n  <li>Item one</li>\n  <md-divider inset></md-divider>\n  <li>Item two</li>\n  <md-divider role=\"separator\"></md-divider>\n  <li>Item three</li>\n  <md-divider inset></md-divider>\n  <li>Item four</li>\n</ul>\n```\n\n## Theming\n\nDivider supports [theming](../theming/README.md) and can be customized with CSS\ncustom property tokens.\n\n### Tokens\n\nToken                    | Default value\n------------------------ | --------------------------------\n`--md-divider-color`     | `--md-sys-color-outline-variant`\n`--md-divider-thickness` | `1px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-divider.scss)\n    <!-- {.external} -->\n\n### Example\n\n![A customized divider with a different color and thickness](images/divider/theming.webp \"Divider theming example.\")\n\n```html\n<style>\n:root {\n  --md-sys-color-outline-variant: #BEC9C8;\n  --md-divider-thickness: 2px;\n}\n</style>\n\n<section>\n  <p>Lorem ipsum...</p>\n  <md-divider></md-divider>\n  <p>Lorem ipsum...</p>\n</section>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdDivider <code>&lt;md-divider&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `inset` | `inset` | `boolean` | `false` | Indents the divider with equal padding on both sides. |\n| `insetStart` | `inset-start` | `boolean` | `false` | Indents the divider with padding on the leading side. |\n| `insetEnd` | `inset-end` | `boolean` | `false` | Indents the divider with padding on the trailing side. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/elevation.md",
    "content": "# Elevation\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-elevation -->\n\n<!-- [TOC] -->\n\n[Elevation](https://m3.material.io/styles/elevation)<!-- {.external} --> is the relative\ndistance between two surfaces along the z-axis.\n\nMaterial's elevation system is deliberately limited to just a handful of levels.\nThis creative constraint means you need to make thoughtful decisions about your\nUI’s elevation story.\n\n![Diagram showing the five elevation levels and their respective dp values](images/elevation/hero.webp \"Material uses six levels of elevation, each with a corresponding dp value. These values are named for their relative distance above the UI’s surface: 0, +1, +2, +3, +4, and +5. An element’s resting state can be on levels 0 to +3, while levels +4 and +5 are reserved for user-interacted states such as hover and dragged.\")\n\n*   [Design article](https://m3.material.io/styles/elevation) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/elevation)\n    <!-- {.external} -->\n\n## Usage\n\nElevation can be set from 0 to 5 using the `--md-elevation-level` CSS custom\nproperty. The elevation will automatically fill the nearest `position: relative`\nelement's size and shape.\n\n![A rounded square with a drop shadow beneath it.](images/elevation/usage.webp \"A surface with an elevation shadow.\")\n\n```html\n<style>\n  .surface {\n    position: relative;\n    border-radius: 16px;\n    height: 64px;\n    width: 64px;\n\n    --md-elevation-level: 3;\n  }\n</style>\n<div class=\"surface\">\n  <md-elevation></md-elevation>\n  <!-- Content -->\n</div>\n```\n\n### Animation\n\nShadows may be animated between levels by adding `transition-duration` and\n`transition-easing-function` CSS properties.\n\n![A rounded square with a drop shadow beneath it. After a moment, the square\nlowers into the background and the shadow disappears, then\nrepeats.](images/elevation/usage-animation.gif \"Animating between elevations.\")\n\n```html\n<style>\n  .surface {\n    /* ... */\n    transition-duration: 250ms;\n    transition-timing-function: ease-in-out;\n\n    --md-elevation-level: 3;\n  }\n\n  .surface:active {\n    --md-elevation-level: 0;\n  }\n</style>\n<div class=\"surface\">\n  <md-elevation></md-elevation>\n  <!-- Content -->\n</div>\n```\n\n## Accessibility\n\nElevation is a visual component and does not have accessibility concerns.\n\n## Theming\n\nElevation supports [Material theming](../theming/README.md) and can be\ncustomized in terms of color.\n\n### Tokens\n\nToken                         | Default value\n----------------------------- | -----------------------\n`--md-elevation-level`        | `0`\n`--md-elevation-shadow-color` | `--md-sys-color-shadow`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevation.scss)\n    <!-- {.external} -->\n\n### Example\n\n![Image of an elevation surface with a different theme applied](images/elevation/theming.webp \"Elevation theming example.\")\n\n```html\n<style>\n  .surface {\n    position: relative;\n    border-radius: 16px;\n    height: 64px;\n    width: 64px;\n  }\n\n  :root {\n    --md-elevation-level: 5;\n    --md-sys-color-shadow: #006A6A;\n  }\n</style>\n<div class=\"surface\">\n  <md-elevation></md-elevation>\n  <!-- Content -->\n</div>\n```\n\n<!-- auto-generated API docs start -->\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/fab.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Floating action button (FAB)\ndirname: fab\n-----><!-- catalog-only-end -->\n\n<catalog-component-header>\n<catalog-component-header-title slot=\"title\">\n\n# Floating action buttons (FAB)\n\n<!-- no-catalog-start -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-fab -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/fab/).**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[FAB](https://m3.material.io/components/floating-action-button)<!-- {.external} -->\nrepresents the most important action on a screen. It puts key actions within\nreach.\n\n[Extended FABs](https://m3.material.io/components/extended-fab) help people take\nprimary actions. They're wider than FABs to accommodate a text label and larger\ntarget area.\n\n</catalog-component-header-title>\n\n<img\n    class=\"hero\"\n    alt=\"A phone showing a payment screen with a green filled button that says 'Make\npayment'\"\n    src=\"images/fab/hero.webp\">\n\n</catalog-component-header>\n\n*   Design articles\n    *   [FAB](https://m3.material.io/components/floating-action-button)\n        <!-- {.external} -->\n    *   [Extended FAB](https://m3.material.io/components/extended-fab)\n        <!-- {.external} -->\n*   API Documentation (*coming soon*)\n*   [Source code](https://github.com/material-components/material-web/tree/main/fab)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Types\n\n<!-- no-catalog-start -->\n\n![The 3 sizes of FAB](images/fab/fabs.webp \"There are three sizes of floating action buttons: FAB, small FAB, and large FAB\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/fabs.html\" -->\n\n1.  [FAB](#fab)\n2.  [Small FAB](#sizes)\n3.  [Large FAB](#sizes)\n\n### Extended FAB\n\n<!-- no-catalog-start -->\n\n![2 examples of extended FABs](images/fab/extended-fabs.webp \"There are two types of extended FABs with and without icon\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/extended-fabs.html\" -->\n\n*   [Extended FAB with both icon and label text](#extended)\n*   [API Documentation](#api)\n*   [Extended FAB without icon](#without-icon)\n\n## Usage\n\nFABs should have an icon, such as a font `md-icon`, an `svg`, or an `img`.\n\n<!-- no-catalog-start -->\n\n![A standard surface fab](images/fab/usage-fab.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-fab.html\" -->\n\n```html\n<md-fab aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n### Lowered\n\nFABs can be set to a lower elevation with the `lowered` attribute.\n\n<!-- no-catalog-start -->\n\n![A standard fab with an edit icon and lowered in elevation](images/fab/usage-lowered.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-lowered.html\" -->\n\n```html\n<md-fab lowered aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n## Accessibility\n\nIcon-only FABs must include an `aria-label` that describes its action. Otherwise\nif `aria-label` is not provided, the FAB will default to announcing its visible\ncontents.\n\n```html\n<md-fab aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\nExtended FABs use their `label` for accessibility. Add an `aria-label` for\nadditional context if needed. By supplying the `label` attribute, the extended\nFAB will make sure that the icon is not announced.\n\n```html\n<md-fab label=\"Edit\" aria-label=\"Edit Comment\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n## FAB\n\nFABs should display a clear and understandable icon.\n\n<!-- no-catalog-start -->\n\n![A standard surface fab](images/fab/usage-fab.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-fab.html\" -->\n\n```html\n<md-fab aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n### Extended\n\nFABs may be extended with a label for additional emphasis. Extended FABs can\nomit their icon.\n\n<!-- no-catalog-start -->\n\n![An extended FAB with an edit icon and the visible text edit](images/fab/usage-extended.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-extended.html\" -->\n\n```html\n<md-fab label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n#### Without icon\n\nExtended FABs are the only FABs that can be used without an icon.\n\n<!-- no-catalog-start -->\n\n![An extended FAB with a visible label saying reroute](images/fab/usage-without-icon.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-without-icon.html\" -->\n\n```html\n<md-fab label=\"Reroute\"></md-fab>\n```\n\n### Colors\n\nFAB colors may be changed with the `variant` attribute. It can be set to\n\"surface\" (default), \"primary\", \"secondary\", or \"tertiary\".\n\n<!-- no-catalog-start -->\n\n![Three fabs with edit icons next to each other but the first is primary\ncolored, second is secondary, and the last is tertiary\ncolored.](images/fab/usage-color.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-color.html\" -->\n\n```html\n<md-fab variant=\"primary\" aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n<md-fab variant=\"secondary\" aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n<md-fab variant=\"tertiary\" aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n### Sizes\n\nFABs may be small, medium (default), or large by setting the `size` attribute.\nSmall FABs can optionally further reduce their touch target.\n\n<!-- no-catalog-start -->\n\n![Four surface fabs side by side with edit icons of visual size size small,\nsmall, medium, and large](images/fab/usage-sizes.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-sizes.html\" -->\n\n```html\n<md-fab size=\"small\" touch-target=\"none\" aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n<md-fab size=\"small\" aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n<md-fab aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n<md-fab size=\"large\" aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n## Branded FAB\n\n<!-- no-catalog-start -->\n\n<!-- go/md-branded-fab -->\n\n<!-- no-catalog-end -->\n\nBranded FABs use a brightly colored logo for their icon. Unlike [FAB](#fab),\nbranded FABs do not have color variants.\n\n<!-- no-catalog-start -->\n\n![A branded FAB with a google-colored plus icon.](images/fab/usage-branded.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-branded.html\" -->\n\n```html\n<md-branded-fab size=\"small\" aria-label=\"Add\">\n  <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n    <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n    <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n    <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n    <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n    <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n  </svg>\n</md-branded-fab>\n```\n\n### Extended\n\nBranded FABs may be extended with a label for additional emphasis. Unlike\n[FAB](#fab), branded FABs should always display their logo icon.\n\n<!-- no-catalog-start -->\n\n![An extended branded fab with a google-colored plus icon and the visible text\nAdd](images/fab/usage-branded-extended.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-branded-extended.html\" -->\n\n```html\n<md-branded-fab label=\"Add\">\n  <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n    <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n    <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n    <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n    <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n    <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n  </svg>\n</md-branded-fab>\n```\n\n### Sizes\n\nBranded FABs may be medium (default) or large by setting the `size` attribute.\n\n<!-- no-catalog-start -->\n\n![Two branded FABs next to each other with a google-branded plus icon. A medium\nsized one and a large one.](images/fab/usage-branded-sizes.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/usage-branded-sizes.html\" -->\n\n```html\n<md-branded-fab aria-label=\"Add\">\n  <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n    <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n    <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n    <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n    <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n    <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n  </svg>\n</md-branded-fab>\n<md-branded-fab size=\"large\" aria-label=\"Add\">\n  <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n    <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n    <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n    <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n    <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n    <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n  </svg>\n</md-branded-fab>\n```\n\n## Theming\n\nFAB supports [Material theming](../theming/README.md) and can be customized in\nterms of color, typography, and shape.\n\n### FAB tokens\n\nToken                              | Default value\n---------------------------------- | ---------------------------------------\n`--md-fab-container-color`         | `--md-sys-color-surface-container-high`\n`--md-fab-lowered-container-color` | `--md-sys-color-surface-container-low`\n`--md-fab-container-shape`         | `--md-sys-shape-corner-large`\n`--md-fab-icon-color`              | `--md-sys-color-primary`\n`--md-fab-icon-size`               | `24px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab.scss)\n    <!-- {.external} -->\n\n### FAB example\n\n<!-- no-catalog-start -->\n\n![Image of a fab with a different theme applied](images/fab/theming-fab.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/theming-fab.html\" -->\n\n```html\n<style>\n  :root {\n    --md-sys-color-surface-container-high: #e3e9e9;\n    --md-sys-color-primary: #006a6a;\n    --md-fab-container-shape: 0px;\n    --md-fab-icon-size: 36px;\n    background-color: #f4fbfa;\n  }\n</style>\n<md-fab aria-label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n#### Sizes tokens\n\nToken                            | Default value\n-------------------------------- | -------------\n`--md-fab-small-container-shape` | `--md-sys-shape-corner-medium`\n`--md-fab-small-icon-size`       | `24px`\n`--md-fab-large-container-shape` | `--md-sys-shape-corner-extra-large`\n`--md-fab-large-icon-size`       | `36px`\n\n#### Extended FAB tokens\n\nToken                      | Default value\n-------------------------- | -------------------------------------\n`--md-fab-label-text-font` | `--md-sys-typescale-label-large-font`\n\n#### Extended FAB example\n\n<!-- no-catalog-start -->\n\n![Image of an extended FAB with a different theme applied](images/fab/theming-extended.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/theming-extended.html\" -->\n\n```html\n<style>\n  :root {\n    --md-sys-color-surface-container-high: #e3e9e9;\n    --md-sys-color-on-surface: #161d1d;\n    --md-sys-color-primary: #006a6a;\n    --md-fab-container-shape: 0px;\n    --md-fab-icon-size: 36px;\n    background-color: #f4fbfa;\n  }\n</style>\n<md-fab label=\"Edit\">\n  <md-icon slot=\"icon\">edit</md-icon>\n</md-fab>\n```\n\n### Branded FAB tokens\n\nToken                              | Default value\n---------------------------------- | ---------------------------------------\n`--md-fab-branded-container-color` | `--md-sys-color-surface-container-high`\n`--md-fab-branded-container-shape` | `--md-sys-shape-corner-large`\n`--md-fab-branded-icon-size`       | `36px`\n`--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab-branded.scss)\n    <!-- {.external} -->\n\n### Branded FAB example\n\n<!-- no-catalog-start -->\n\n![Image of two branded fabs, one regular, one extended with the visible label\nAdd with a different theme applied](images/fab/theming-branded.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/fab/theming-branded.html\" -->\n\n```html\n<style>\n  :root {\n    --md-sys-color-surface-container-high: #e3e9e9;\n    --md-sys-color-on-surface: #161d1d;\n    --md-fab-branded-icon-size: 48px;\n    --md-fab-branded-container-shape: 0px;\n    background-color: #f4fbfa;\n  }\n</style>\n<md-branded-fab size=\"small\" aria-label=\"Add\">\n  <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n    <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n    <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n    <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n    <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n    <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n  </svg>\n</md-branded-fab>\n<md-branded-fab size=\"small\" label=\"Add\">\n  <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n    <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n    <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n    <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n    <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n    <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n  </svg>\n</md-branded-fab>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdFab <code>&lt;md-fab&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |\n| `size` | `size` | `string` | `'medium'` | The size of the FAB.<br>NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |\n| `label` | `label` | `string` | `''` | The text to display on the FAB. |\n| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdBrandedFab <code>&lt;md-branded-fab&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |\n| `size` | `size` | `string` | `'medium'` | The size of the FAB.<br>NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |\n| `label` | `label` | `string` | `''` | The text to display on the FAB. |\n| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/figures/checkbox/theming.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    style=\"justify-content: center; align-items: center\"\n    class=\"styled-example\"\n    aria-label=\"Image of a checkbox with a different theme applied\"\n  >\n    <style>\n      .styled-example {\n        background-color: white;\n        border-radius: 28px;\n        /* System tokens */\n        --md-sys-color-primary: #006a6a;\n        --md-sys-color-on-primary: #ffffff;\n        --md-sys-color-on-surface-variant: #3f4948;\n        /* Component tokens */\n        --md-checkbox-container-shape: 0px;\n      }\n    </style>\n    <md-checkbox touch-target=\"wrapper\"></md-checkbox>\n    <md-checkbox touch-target=\"wrapper\" checked></md-checkbox>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/checkbox/usage-label.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    style=\"justify-content: center; align-items: center\"\n    aria-label=\"Two checkboxes with labels\"\n  >\n    <label style=\"display: flex; align-items: center\">\n      <md-checkbox touch-target=\"wrapper\"></md-checkbox>\n      Checkbox one\n    </label>\n    <md-checkbox id=\"checkbox-two\" touch-target=\"wrapper\"></md-checkbox>\n    <label for=\"checkbox-two\">Checkbox two</label>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/checkbox/usage.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;\"\n      aria-label=\"Three checkboxes in a row that are unselected, selected, and indeterminate\">\n    <md-checkbox touch-target=\"wrapper\"></md-checkbox>\n    <md-checkbox touch-target=\"wrapper\" checked></md-checkbox>\n    <md-checkbox touch-target=\"wrapper\" indeterminate></md-checkbox>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/extended-fabs.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"types-image\"\n      style=\"justify-content:center;\"\n      title=\"There are two types of extended FABs with and without icon\"\n      aria-label=\"2 examples of extended FABs\">\n    <div class=\"wrapper\">\n      <div>\n        <div class=\"fab-wrapper\">\n          <md-fab label=\"navigate\" variant=\"primary\">\n            <md-icon slot=\"icon\">navigation</md-icon>\n          </md-fab>\n        </div>\n        <span>1</span>\n      </div>\n      <div>\n        <div class=\"fab-wrapper\">\n          <md-fab variant=\"surface\" label=\"reroute\">\n          </md-fab>\n        </div>\n        <span>2</span>\n      </div>\n    </div>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/fab/fabs.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"types-image\"\n      style=\"justify-content:center;\"\n      title=\"There are three sizes of floating action buttons: FAB, small FAB, and large FAB\"\n      aria-label=\"The 3 sizes of FAB\">\n    <style>\n      .types-image .wrapper,\n      .types-image .wrapper > * {\n        display: flex;\n        padding: 8px;\n        flex-wrap: wrap;\n        justify-content: center;\n      }\n      .types-image .wrapper > * {\n        flex-direction: column;\n        align-items: center;\n        padding-inline: 16px;\n      }\n      .types-image span {\n        display: inline-flex;\n        background-color: var(--md-sys-color-inverse-surface);\n        color: var(--md-sys-color-inverse-on-surface);\n        padding: 8px;\n        margin-block-start: 8px;\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        justify-content: center;\n        align-items: center;\n      }\n      .types-image .fab-wrapper {\n        height: 96px;\n        display: flex;\n        align-items: center;\n      }\n    </style>\n    <div class=\"wrapper\">\n      <div>\n        <div class=\"fab-wrapper\">\n          <md-fab variant=\"primary\" aria-label=\"Accessibility\">\n            <md-icon slot=\"icon\">accessible_forward</md-icon>\n          </md-fab>\n        </div>\n        <span>1</span>\n      </div>\n      <div>\n        <div class=\"fab-wrapper\">\n          <md-fab variant=\"tertiary\" size=\"small\" aria-label=\"Edit\">\n            <md-icon slot=\"icon\">edit</md-icon>\n          </md-fab>\n        </div>\n        <span>2</span>\n      </div>\n      <div>\n        <div class=\"fab-wrapper\">\n          <md-fab size=\"large\" aria-label=\"Color Palette\">\n            <md-icon slot=\"icon\">palette</md-icon>\n          </md-fab>\n        </div>\n        <span>3</span>\n      </div>\n    </div>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/theming-branded.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example branded\"\n      aria-label=\"Image of two branded fabs, one regular, one extended with the visible label Add with a different theme applied\"\n      style=\"padding-block: 16px;gap: 16px;display: flex;\">\n    <style>\n      .styled-example.branded {\n        --md-sys-color-on-surface: #161d1d;\n        --md-fab-branded-label-text-font: system-ui;\n        --md-fab-branded-icon-size: 48px;\n        --md-fab-branded-container-shape: 0px;\n      }\n    </style>\n    <md-branded-fab size=\"small\" aria-label=\"Add\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n        <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n        <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n        <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n        <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n      </svg>\n    </md-branded-fab>\n    <md-branded-fab size=\"small\" label=\"Add\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n        <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n        <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n        <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n        <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n      </svg>\n    </md-branded-fab>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/fab/theming-extended.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example extended\"\n      aria-label=\"Image of an extended FAB with a different theme applied\"\n      style=\"padding-block: 16px;\">\n    <style>\n      .styled-example.extended {\n        --md-fab-label-text-font: system-ui;\n        --md-fab-icon-size: 36px;\n        --md-fab-container-shape: 0px;\n      }\n    </style>\n    <md-fab label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/fab/theming-fab.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example fab\"\n      aria-label=\"Image of a fab with a different theme applied\"\n      style=\"padding-block: 16px;\">\n    <style>\n      .styled-example {\n        --md-sys-color-surface-container-high: #e3e9e9;\n        --md-sys-color-primary: #006a6a;\n        background-color: #f4fbfa;\n      }\n      .styled-example.fab {\n        --md-fab-icon-size: 36px;\n        --md-fab-container-shape: 0px;\n      }\n    </style>\n    <md-fab aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/usage-branded-extended.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      aria-label=\"An extended branded fab with a google-colored plus icon and the visible text Add\"\n      style=\"padding-block: 16px;\">\n    <md-branded-fab label=\"Add\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n        <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n        <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n        <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n        <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n      </svg>\n    </md-branded-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/usage-branded-sizes.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"Two branded FABs next to each other with a google-branded plus icon. A medium sized one and a large one.\"\n    style=\"padding-block: 16px; gap: 16px; display: flex\"\n  >\n    <md-branded-fab aria-label=\"Add\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n        <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n        <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n        <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n        <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n      </svg>\n    </md-branded-fab>\n    <md-branded-fab size=\"large\" aria-label=\"Add\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n        <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n        <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n        <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n        <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n      </svg>\n    </md-branded-fab>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/fab/usage-branded.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      aria-label=\"A branded FAB with a google-colored plus icon.\"\n      style=\"padding-block: 16px;\">\n    <md-branded-fab size=\"small\" aria-label=\"Add\">\n      <svg slot=\"icon\" viewBox=\"0 0 36 36\">\n        <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n        <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n        <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n        <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n        <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n      </svg>\n    </md-branded-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/usage-color.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      aria-label=\"Three fabs with edit icons next to each other but the first is primary colored, second is secondary, and the last is tertiary colored.\"\n      style=\"padding-block: 16px;gap: 16px;display: flex;\">\n    <md-fab variant=\"primary\" aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n    <md-fab variant=\"secondary\" aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n    <md-fab variant=\"tertiary\" aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/usage-extended.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      aria-label=\"An extended FAB with an edit icon and the visible text edit\"\n      style=\"padding-block: 16px;\">\n    <md-fab label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/usage-fab.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      aria-label=\"A standard surface fab\"\n      style=\"padding-block: 16px;\">\n    <md-fab aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/usage-lowered.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      aria-label=\"A standard fab with an edit icon and lowered in elevation\"\n      style=\"padding-block: 16px;\">\n    <md-fab lowered aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/fab/usage-sizes.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"Four surface fabs side by side with edit icons of visual size size small, small, medium, and large\"\n    style=\"padding-block: 16px; gap: 16px; display: flex\"\n  >\n    <md-fab size=\"small\" touch-target=\"none\" aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n    <md-fab size=\"small\" aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n    <md-fab aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n    <md-fab size=\"large\" aria-label=\"Edit\">\n      <md-icon slot=\"icon\">edit</md-icon>\n    </md-fab>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/fab/usage-without-icon.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      aria-label=\"An extended FAB with a visible label saying reroute\"\n      style=\"padding-block: 16px;\">\n    <md-fab label=\"Reroute\"></md-fab>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/iconbutton/buttons.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"types-image\"\n      style=\"justify-content:center;\"\n      title=\"1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)\"\n      aria-label=\"Side by side view of standard and contained icon buttons\">\n    <style>\n      .types-image .wrapper,\n      .types-image .wrapper > * {\n        display: flex;\n        padding: 8px;\n        flex-wrap: wrap;\n        justify-content: center;\n      }\n      .types-image .wrapper > * {\n        flex-direction: column;\n        align-items: center;\n        padding-inline: 16px;\n      }\n      .types-image span {\n        display: inline-flex;\n        background-color: var(--md-sys-color-inverse-surface);\n        color: var(--md-sys-color-inverse-on-surface);\n        padding: 8px;\n        margin-block-start: 8px;\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        justify-content: center;\n        align-items: center;\n      }\n      .types-image .wrapper > div > div {\n        display: flex;\n        gap: 8px;\n      }\n    </style>\n    <div class=\"wrapper\">\n      <div>\n        <div>\n          <md-icon-button>\n            <md-icon>favorite</md-icon>\n          </md-icon-button>\n          <md-icon-button toggle selected>\n            <md-icon slot=\"selected\" class=\"filled\">bookmark</md-icon>\n            <md-icon class=\"filled\">bookmark</md-icon>\n          </md-icon-button>\n        </div>\n        <span>1</span>\n      </div>\n      <div>\n        <div>\n          <md-filled-icon-button>\n            <md-icon>videocam</md-icon>\n          </md-filled-icon-button>\n          <md-filled-tonal-icon-button>\n            <md-icon>settings</md-icon>\n          </md-filled-tonal-icon-button>\n          <md-outlined-icon-button>\n            <md-icon>more_vert</md-icon>\n          </md-outlined-icon-button>\n        </div>\n        <span>2</span>\n      </div>\n    </div>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/iconbutton/theming-filled-tonal.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example tonal\"\n      title=\"Filled tonal icon button theming example.\"\n      aria-label=\"Image of a filled tonal icon button with a different theme applied\">\n    <style>\n      .styled-example.tonal {\n        --md-filled-tonal-icon-button-container-width: 80px;\n        --md-filled-tonal-icon-button-container-height: 80px;\n        --md-filled-tonal-icon-button-container-shape: 0px;\n        --md-filled-tonal-icon-button-icon-size: 40px;\n        --md-sys-color-secondary-container: #006A6A;\n        padding-block: 8px;\n      }\n      </style>\n      <md-filled-tonal-icon-button>\n        <md-icon>check</md-icon>\n      </md-filled-tonal-icon-button>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/iconbutton/theming-filled.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example filled red\"\n      title=\"Filled icon button theming example.\"\n      aria-label=\"Image of a filled icon button with a different theme applied\">\n    <style>\n      .styled-example.filled {\n        --md-filled-icon-button-container-width: 80px;\n        --md-filled-icon-button-container-height: 80px;\n        --md-filled-icon-button-icon-size: 40px;\n        --md-filled-icon-button-container-shape: 0px;\n        --md-sys-color-primary: #dc362e;\n        padding-block: 8px;\n      }\n      </style>\n      <md-filled-icon-button>\n        <md-icon>check</md-icon>\n      </md-filled-icon-button>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/iconbutton/theming-outlined.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example outlined\"\n      title=\"Outlined icon button theming example.\"\n      aria-label=\"Image of an outlined icon button with a different theme applied\">\n    <style>\n      .styled-example.outlined > * {\n        --md-outlined-icon-button-container-width: 80px;\n        --md-outlined-icon-button-container-height: 80px;\n        --md-outlined-icon-button-container-shape: 0px;\n        --md-outlined-icon-button-icon-size: 40px;\n        --md-outlined-icon-button-unselected-outline-width: 4px;\n        --md-sys-color-outline: #006A6A;\n        padding-block: 8px;\n      }\n      </style>\n      <md-outlined-icon-button>\n        <md-icon>check</md-icon>\n      </md-outlined-icon-button>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/iconbutton/theming-standard.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example standard red\"\n      title=\"Standard icon button theming example.\"\n      aria-label=\"Image of a standard icon button with a different theme applied\">\n    <style>\n      .styled-example {\n        background-color: white;\n      }\n      .styled-example.red {\n        background-color: #fff8f6;\n      }\n      .styled-example.standard {\n        --md-icon-button-icon-size: 32px;\n        --md-sys-color-on-surface-variant: #dc362e;\n      }\n      </style>\n      <md-icon-button>\n        <md-icon>check</md-icon>\n      </md-icon-button>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/iconbutton/usage-filled-tonal.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;gap: 8px;\"\n      title=\"Filled Tonal Icon Button\"\n      aria-label=\"A filled tonal icon button with a check icon\">\n    <md-filled-tonal-icon-button>\n      <md-icon>check</md-icon>\n    </md-filled-tonal-icon-button>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/iconbutton/usage-filled.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;gap: 8px;\"\n      title=\"Filled Icon Button\"\n      aria-label=\"A circular button with a check icon\">\n    <md-filled-icon-button>\n      <md-icon>check</md-icon>\n    </md-filled-icon-button>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/iconbutton/usage-outlined.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;gap: 8px;\"\n      title=\"Outlined Icon button\"\n      aria-label=\"An outlined circular icon button with a check icon\">\n    <md-outlined-icon-button>\n      <md-icon>check</md-icon>\n    </md-outlined-icon-button>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/iconbutton/usage-standard.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;gap: 8px;\"\n      title=\"Standard Icon Button with Check icon\"\n      aria-label=\"A check icon\">\n    <md-icon-button>\n      <md-icon>check</md-icon>\n    </md-icon-button>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/iconbutton/usage-toggle.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      style=\"gap:8px;flex-direction:column;padding-block:8px;\"\n      aria-label=\"Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected\">\n    <div style=\"display:flex;gap:8px;\">\n      <md-icon-button toggle>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-icon-button>\n      <md-filled-icon-button toggle>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-filled-icon-button>\n      <md-filled-tonal-icon-button toggle>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-filled-tonal-icon-button>\n      <md-outlined-icon-button toggle>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-outlined-icon-button>\n    </div>\n    <div style=\"display:flex;gap:8px;\">\n      <md-icon-button toggle selected>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-icon-button>\n      <md-filled-icon-button toggle selected>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-filled-icon-button>\n      <md-filled-tonal-icon-button toggle selected>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-filled-tonal-icon-button>\n      <md-outlined-icon-button toggle selected>\n        <md-icon>close</md-icon>\n        <md-icon slot=\"selected\">check</md-icon>\n      </md-outlined-icon-button>\n    </div>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/iconbutton/usage.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;gap: 8px;\"\n      title=\"Icon buttons can be used within other components, such as a bottom app bar\"\n      aria-label=\"A row of icon buttons\">\n    <md-icon-button>\n      <md-icon>check</md-icon>\n    </md-icon-button>\n    <md-filled-icon-button>\n      <md-icon>check</md-icon>\n    </md-filled-icon-button>\n    <md-filled-tonal-icon-button>\n      <md-icon>check</md-icon>\n    </md-filled-tonal-icon-button>\n    <md-outlined-icon-button>\n      <md-icon>check</md-icon>\n    </md-outlined-icon-button>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/list/theming-icon.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example icon\"\n      aria-label=\"Image of a list and icon list items of food names with a different theme applied\"\n      style=\"padding-block: 16px;\">\n    <style>\n      .styled-example.icon md-list {\n        --md-list-container-color: #f4fbfa;\n        --md-list-item-label-text-color: #161d1d;\n        --md-list-item-supporting-text-color: #3f4948;\n        --md-list-item-trailing-supporting-text-color: #3f4948;\n        --md-list-item-leading-icon-color: #006a6a;\n        --md-list-item-trailing-icon-color: #006a6a;\n        --md-list-item-leading-icon-size: 20px;\n        --md-list-item-trailing-icon-size: 20px;\n      }\n      .styled-example.icon md-list .unhealthy {\n        --md-list-item-trailing-icon-color: #ba1a1a;\n      }\n    </style>\n    <md-list>\n      <md-list-item>\n        <div slot=\"headline\">Eggs</div>\n        <md-icon slot=\"start\">egg</md-icon>\n        <md-icon slot=\"end\">recommend</md-icon>\n      </md-list-item>\n      <md-list-item class=\"unhealthy\">\n        <div slot=\"headline\">Ice Cream</div>\n        <md-icon slot=\"start\">icecream</md-icon>\n        <md-icon slot=\"end\">dangerous</md-icon>\n      </md-list-item>\n      <md-list-item>\n        <div slot=\"headline\">Orange</div>\n        <md-icon slot=\"start\">nutrition</md-icon>\n        <md-icon slot=\"end\">recommend</md-icon>\n      </md-list-item>\n    </md-list>\n  </figure>\n</div>"
  },
  {
    "path": "docs/components/figures/list/theming-image.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    class=\"styled-example image\"\n    aria-label=\"Image of a list and image list items of cats with a different theme applied\"\n    style=\"padding-block: 16px\"\n  >\n    <style>\n      .styled-example.image md-list {\n        --md-list-container-color: #f4fbfa;\n        --md-list-item-label-text-color: #161d1d;\n        --md-list-item-supporting-text-color: #3f4948;\n        --md-list-item-trailing-supporting-text-color: #3f4948;\n      }\n      .styled-example.image md-list img {\n        height: 50px;\n        width: 100px;\n        border-radius: 25px;\n      }\n    </style>\n    <md-list>\n      <md-list-item>\n        <div slot=\"headline\">Wide Cat</div>\n        <img loading=\"lazy\" slot=\"start\" src=\"https://placekitten.com/200/100\">\n      </md-list-item>\n      <md-list-item>\n        <div slot=\"headline\">Round kitty cat</div>\n        <img loading=\"lazy\" slot=\"start\" src=\"https://placekitten.com/202/101\">\n      </md-list-item>\n      <md-list-item>\n        <div slot=\"headline\">Softe cate</div>\n        <img loading=\"lazy\" slot=\"start\" src=\"https://placekitten.com/212/106\">\n      </md-list-item>\n    </md-list>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/list/theming-list.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n      class=\"styled-example list\"\n      aria-label=\"Image of a list and list items of foods with their inventory stock number with a different theme applied\"\n      style=\"padding-block: 16px;\">\n    <style>\n      .styled-example {\n        background-color: #f4fbfa;\n      }\n      .styled-example.list md-list {\n        --md-list-container-color: #f4fbfa;\n        --md-list-item-label-text-color: #161d1d;\n        --md-list-item-supporting-text-color: #3f4948;\n        --md-list-item-trailing-supporting-text-color: #3f4948;\n        --md-list-item-label-text-font: system-ui;\n        --md-list-item-supporting-text-font: system-ui;\n        --md-list-item-trailing-supporting-text-font: system-ui;\n      }\n      .styled-example.list md-list [slot=\"trailing-supporting-text\"] {\n        width: 30px;\n        text-align: end;\n      }\n    </style>\n    <md-list>\n      <md-list-item type=\"button\">\n        <div slot=\"headline\">Apple</div>\n        <div slot=\"supporting-text\">In stock</div>\n        <div slot=\"trailing-supporting-text\">+100</div>\n      </md-list-item>\n      <md-list-item type=\"button\">\n        <div slot=\"headline\">Banana</div>\n        <div slot=\"supporting-text\">In stock</div>\n        <div slot=\"trailing-supporting-text\">56</div>\n      </md-list-item>\n      <md-list-item type=\"button\">\n        <div slot=\"headline\">Cucumber</div>\n        <div slot=\"supporting-text\">Low stock</div>\n        <div slot=\"trailing-supporting-text\">5</div>\n      </md-list-item>\n    </md-list>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/list/usage-icon.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure aria-label=\"A list with three items and dividers separating each item. The first item has the Lit logo and the text Lit. The second item has the Polymer logo and the text Polymer. The third item has the Angular logo and the text Angular.\">\n    <md-list style=\"max-width: 300px\">\n      <md-list-item>\n        Lit\n        <svg  slot=\"start\" style=\"height: 24px\" viewBox=\"0 0 160 200\">\n          <path\n            fill=\"currentColor\"\n            d=\"m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z\"\n          />\n        </svg>\n      </md-list-item>\n      <md-divider></md-divider>\n      <md-list-item>\n        Polymer\n        <md-icon slot=\"start\">polymer</md-icon>\n      </md-list-item>\n      <md-divider></md-divider>\n      <md-list-item>\n        Angular\n        <svg slot=\"start\" style=\"height: 24px\" viewBox=\"0 0 250 250\">\n          <polygon points=\"108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 \t\" />\n          <path\n            d=\"M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0\n              l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z\"\n          />\n        </svg>\n      </md-list-item>\n    </md-list>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/list/usage-image.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"A list with three image items. The first item is a square picture of a cat and the text Cat. The second is a picture of a kitten with the text Kitty Cat. The third item is a square image of an older kitten with the text Cate.\"\n  >\n    <md-list style=\"max-width: 300px\">\n      <md-list-item>\n        Cat\n        <img slot=\"start\" style=\"width: 56px\" src=\"https://placekitten.com/112/112\" />\n      </md-list-item>\n      <md-divider></md-divider>\n      <md-list-item>\n        Kitty Cat\n        <img slot=\"start\" style=\"width: 56px\" src=\"https://placekitten.com/114/114\" />\n      </md-list-item>\n      <md-divider></md-divider>\n      <md-list-item>\n        Cate\n        <img slot=\"start\" style=\"width: 56px\" src=\"https://placekitten.com/116/116\" />\n      </md-list-item>\n    </md-list>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/list/usage.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"Three items in a list. The first item says Apple as its headline. The second one says Banana in its headline as well as Banana is a yellow fruit as its sub header. The third list item says Cucumber in its headline and Cucumbers are long green fruits that are just as long as this multi-line description as its sub header which is on two lines.\"\n  >\n  <md-list style=\"max-width: 300px;\">\n    <md-list-item>\n      Fruits\n    </md-list-item>\n    <md-divider></md-divider>\n    <md-list-item>\n      Apple\n    </md-list-item>\n    <md-list-item>\n      Banana\n    </md-list-item>\n    <md-list-item>\n      <div slot=\"headline\">Cucumber</div>\n      <div slot=\"supporting-text\">Cucumbers are long green fruits that are just as long as this multi-line description</div>\n    </md-list-item>\n    <md-list-item\n        interactive\n        href=\"https://google.com/search?q=buy+kiwis&tbm=shop\"\n        target=\"_blank\">\n      <div slot=\"headline\">Shop for Kiwis</div>\n      <div slot=\"supporting-text\">This will link you out in a new tab</div>\n      <md-icon slot=\"end\">open_in_new</md-icon>\n    </md-list-item>\n  </md-list>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/menu/theming.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    class=\"styled-example menu\"\n    aria-label=\"A green, filled button with the text Themed menu. Interact with the button to open the green themed menu with 0 border-radius.\"\n    style=\"padding-block: 16px\"\n  >\n    <style>\n      .styled-example {\n        background-color: #f4fbfa;\n      }\n      .styled-example md-filled-button {\n        --md-sys-color-primary: #006a6a;\n        --md-sys-color-on-primary: #ffffff;\n      }\n      .styled-example.menu md-menu {\n        --md-menu-container-color: #f4fbfa;\n        --md-menu-container-shape: 0px;\n        --md-sys-color-on-surface: #161d1d;\n        --md-sys-typescale-body-large-font: system-ui;\n      }\n      .styled-example.menu md-menu-item {\n        border-radius: 28px;\n      }\n      .styled-example.menu md-menu-item::part(focus-ring) {\n        border-radius: 28px;\n      }\n    </style>\n    <span style=\"position: relative\">\n      <md-filled-button id=\"theming-anchor\">Themed menu</md-filled-button>\n      <md-menu id=\"theming-menu\" anchor=\"theming-anchor\">\n        <md-menu-item>\n          <div slot=\"headline\">Apple</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Banana</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Cucumber</div>\n        </md-menu-item>\n      </md-menu>\n    </span>\n    <script type=\"module\">\n      const anchorEl = document.body.querySelector(\"#theming-anchor\");\n      const menuEl = document.body.querySelector(\"#theming-menu\");\n      anchorEl.addEventListener(\"click\", () => {\n        menuEl.show();\n      });\n    </script>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/menu/usage-document.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    style=\"justify-content: center\"\n    aria-label=\"A filled button that says open document menu. Interact with the button to open a document menu.\"\n  >\n    <div>\n      <div style=\"margin: 16px\">\n        <md-filled-button id=\"usage-document-anchor\">Open document menu</md-filled-button>\n      </div>\n      <md-menu positioning=\"document\" id=\"usage-document\" anchor=\"usage-document-anchor\">\n        <md-menu-item>\n          <div slot=\"headline\">Apple</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Banana</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Cucumber</div>\n        </md-menu-item>\n      </md-menu>\n    </div>\n    <script type=\"module\">\n      const anchorEl = document.body.querySelector(\"#usage-document-anchor\");\n      const menuEl = document.body.querySelector(\"#usage-document\");\n      anchorEl.addEventListener(\"click\", () => {\n        menuEl.open = !menuEl.open;\n      });\n    </script>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/menu/usage-fixed.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    style=\"justify-content: center\"\n    aria-label=\"A filled button that says open fixed menu. Interact with the button to open a fixed menu.\"\n  >\n    <div>\n      <div style=\"margin: 16px\">\n        <md-filled-button id=\"usage-fixed-anchor\">Open fixed menu</md-filled-button>\n      </div>\n      <md-menu positioning=\"fixed\" id=\"usage-fixed\" anchor=\"usage-fixed-anchor\">\n        <md-menu-item>\n          <div slot=\"headline\">Apple</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Banana</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Cucumber</div>\n        </md-menu-item>\n      </md-menu>\n    </div>\n    <script type=\"module\">\n      const anchorEl = document.body.querySelector(\"#usage-fixed-anchor\");\n      const menuEl = document.body.querySelector(\"#usage-fixed\");\n      anchorEl.addEventListener(\"click\", () => {\n        menuEl.open = !menuEl.open;\n      });\n    </script>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/menu/usage-popover.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    style=\"justify-content: center\"\n    aria-label=\"A filled button that says open popover menu. Interact with the button to open a popover menu.\"\n  >\n    <div>\n      <div style=\"margin: 16px\">\n        <md-filled-button id=\"usage-popover-anchor\">Open popover menu</md-filled-button>\n      </div>\n      <md-menu positioning=\"popover\" id=\"usage-popover\" anchor=\"usage-popover-anchor\">\n        <md-menu-item>\n          <div slot=\"headline\">Apple</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Banana</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Cucumber</div>\n        </md-menu-item>\n      </md-menu>\n    </div>\n    <script type=\"module\">\n      const anchorEl = document.body.querySelector(\"#usage-popover-anchor\");\n      const menuEl = document.body.querySelector(\"#usage-popover\");\n      anchorEl.addEventListener(\"click\", () => {\n        menuEl.open = !menuEl.open;\n      });\n    </script>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/menu/usage-submenu.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    style=\"justify-content: center\"\n    aria-label=\"A filled button that says menu with submenus. Interact with the button to interact with a menu that has two sub menus.\"\n  >\n    <span style=\"position: relative\">\n      <md-filled-button id=\"usage-submenu-anchor\"> Menu with Submenus </md-filled-button>\n      <!-- Note the has-overflow attribute -->\n      <md-menu has-overflow id=\"usage-submenu\" anchor=\"usage-submenu-anchor\">\n        <md-sub-menu>\n          <md-menu-item slot=\"item\">\n            <div slot=\"headline\">Fruits with A</div>\n            <!-- Arrow icons are helpful affordances -->\n            <md-icon slot=\"end\">arrow_right</md-icon>\n          </md-menu-item>\n          <!-- Submenu must be slotted into sub-menu's menu slot -->\n          <md-menu slot=\"menu\">\n            <md-menu-item>\n              <div slot=\"headline\">Apricot</div>\n            </md-menu-item>\n            <md-menu-item>\n              <div slot=\"headline\">Avocado</div>\n            </md-menu-item>\n            <!-- Nest as many as you want and control menu anchoring -->\n            <md-sub-menu menu-corner=\"start-end\" anchor-corner=\"start-start\">\n              <md-menu-item slot=\"item\">\n                <div slot=\"headline\">Apples</div>\n                <!-- Arrow icons are helpful affordances -->\n                <md-icon slot=\"start\">\n                  arrow_left\n                </md-icon>\n              </md-menu-item>\n              <md-menu slot=\"menu\">\n                <md-menu-item>\n                  <div slot=\"headline\">Fuji</div>\n                </md-menu-item>\n                <md-menu-item>\n                  <div slot=\"headline\" style=\"white-space: nowrap;\">Granny Smith</div>\n                </md-menu-item>\n                <md-menu-item>\n                  <div slot=\"headline\" style=\"white-space: nowrap;\">Red Delicious</div>\n                </md-menu-item>\n              </md-menu>\n            </md-sub-menu>\n          </md-menu>\n        </md-sub-menu>\n        <md-menu-item>\n          <div slot=\"headline\">Banana</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Cucumber</div>\n        </md-menu-item>\n      </md-menu>\n    </span>\n    <script type=\"module\">\n      const anchorEl = document.body.querySelector(\"#usage-submenu-anchor\");\n      const menuEl = document.body.querySelector(\"#usage-submenu\");\n      anchorEl.addEventListener(\"click\", () => {\n        menuEl.open = !menuEl.open;\n      });\n    </script>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/menu/usage.html",
    "content": "<div class=\"figure-wrapper\">\n  <style>\n    main > .figure-wrapper {\n      /* prevent scrolling bars on menu open */\n      overflow: visible;\n      /* unset page styles */\n      --md-list-item-container-shape: 0px;\n    }\n  </style>\n  <figure\n    style=\"justify-content: center\"\n    aria-label=\"Two filled buttons next to each other. The first one says set with idref and the other says set with element ref. Interact with them to open their respective menus.\"\n  >\n    <span style=\"position: relative; margin-inline-end: 8px\">\n      <md-filled-button id=\"usage-anchor\">Set with idref</md-filled-button>\n      <md-menu id=\"usage-menu\" anchor=\"usage-anchor\">\n        <md-menu-item>\n          <div slot=\"headline\">Apple</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Banana</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Cucumber</div>\n        </md-menu-item>\n      </md-menu>\n    </span>\n    <script type=\"module\">\n      const anchorEl = document.body.querySelector(\"#usage-anchor\");\n      const menuEl = document.body.querySelector(\"#usage-menu\");\n      anchorEl.addEventListener(\"click\", () => {\n        menuEl.open = !menuEl.open;\n      });\n    </script>\n    <span style=\"position: relative\">\n      <md-filled-button id=\"usage-anchor-2\">Set with element ref</md-filled-button>\n      <md-menu id=\"usage-menu-2\">\n        <md-menu-item>\n          <div slot=\"headline\">Apple</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Banana</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Cucumber</div>\n        </md-menu-item>\n      </md-menu>\n    </span>\n    <script type=\"module\">\n      const anchorEl = document.body.querySelector(\"#usage-anchor-2\");\n      const menuEl = document.body.querySelector(\"#usage-menu-2\");\n      menuEl.anchorElement = anchorEl;\n      anchorEl.addEventListener(\"click\", () => {\n        menuEl.open = !menuEl.open;\n      });\n    </script>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/select/theming-filled.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    class=\"styled-example filled\"\n    title=\"Filled select theming example\"\n    aria-label=\"Image of a filled select with a different theme applied\"\n  >\n    <style>\n      .styled-example.filled {\n        --md-filled-select-text-field-container-shape: 0px;\n        --md-filled-select-text-field-container-color: #f7faf9;\n        --md-filled-select-text-field-input-text-color: #005353;\n        --md-filled-select-text-field-input-text-font: system-ui;\n      }\n      .styled-example.filled md-filled-select::part(menu) {\n        --md-menu-container-color: #f4fbfa;\n        --md-menu-container-shape: 0px;\n      }\n    </style>\n    <md-filled-select>\n      <md-select-option selected value=\"apple\">\n        <div slot=\"headline\">Apple</div>\n      </md-select-option>\n      <md-select-option value=\"tomato\">\n        <div slot=\"headline\">Tomato</div>\n      </md-select-option>\n    </md-filled-select>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/select/theming-outlined.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    class=\"styled-example outlined\"\n    title=\"Outlined select theming example\"\n    aria-label=\"Image of an outlined select with a different theme applied\"\n  >\n    <style>\n      .figure-wrapper figure {\n        padding-block: 16px;\n      }\n      .styled-example {\n        background-color: #f4fbfa;\n      }\n      .styled-example.outlined {\n        --md-outlined-select-text-field-outline-color: #6e7979;\n        --md-outlined-select-text-field-container-shape: 0px;\n        --md-outlined-select-text-field-input-text-color: #005353;\n        --md-outlined-select-text-field-input-text-font: system-ui;\n      }\n      .styled-example.outlined md-outlined-select::part(menu) {\n        --md-menu-container-color: #f4fbfa;\n        --md-menu-container-shape: 0px;\n      }\n    </style>\n    <md-outlined-select>\n      <md-select-option selected value=\"apple\">\n        <div slot=\"headline\">Apple</div>\n      </md-select-option>\n      <md-select-option value=\"tomato\">\n        <div slot=\"headline\">Tomato</div>\n      </md-select-option>\n    </md-outlined-select>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/select/usage.html",
    "content": "<div class=\"figure-wrapper\">\n  <style>\n    main > .figure-wrapper {\n      /* prevent scrolling bars on dropdown menu open */\n      overflow: visible;\n      /* unset page styles */\n      --md-list-item-container-shape: 0px;\n    }\n  </style>\n  <figure\n    style=\"justify-content: center; gap: 8px\"\n    title=\"Example usage of an outlined dropdown menu and a filled dropdown menu.\"\n    aria-label=\"An outlined dropdown menu filled with Apple, and a filled dropdown menu.\"\n  >\n    <md-outlined-select>\n      <md-select-option aria-label=\"blank\"></md-select-option>\n      <md-select-option selected value=\"apple\">\n        <div slot=\"headline\">Apple</div>\n      </md-select-option>\n      <md-select-option value=\"apricot\">\n        <div slot=\"headline\">Apricot</div>\n      </md-select-option>\n    </md-outlined-select>\n    <md-filled-select>\n      <md-select-option aria-label=\"blank\"></md-select-option>\n      <md-select-option value=\"apple\">\n        <div slot=\"headline\">Apple</div>\n      </md-select-option>\n      <md-select-option value=\"apricot\">\n        <div slot=\"headline\">Apricot</div>\n      </md-select-option>\n    </md-filled-select>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/theming-filled.html",
    "content": "<div class=\"figure-wrapper\">\n  <style>\n    figure.themed {\n      background-color: #f4fbfa;\n    }\n    figure.themed.filled {\n      --md-filled-text-field-container-shape: 0px;\n      --md-sys-typescale-body-large: 400 1rem system-ui;\n      --md-sys-color-primary: #006a6a;\n      --md-sys-color-surface-container-highest: #e0e3e2;\n      --md-filled-text-field-label-text-color: #3f4948;\n      --md-filled-text-field-input-text-color: #161d1d;\n    }\n  </style>\n  <figure\n    class=\"themed filled\"\n    aria-label=\"A filled text field with the label filled themed to a greenish color\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-filled-text-field label=\"Filled\" value=\"Value\"> </md-filled-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/theming-outlined.html",
    "content": "<div class=\"figure-wrapper\">\n  <style>\n    figure.themed.outlined {\n      --md-outlined-text-field-container-shape: 0px;\n      --md-sys-typescale-body-large: 400 1rem system-ui;\n      --md-sys-color-primary: #006a6a;\n      --md-outlined-text-field-label-text-color: #3f4948;\n      --md-outlined-text-field-input-text-color: #161d1d;\n    }\n  </style>\n  <figure\n    class=\"themed outlined\"\n    aria-label=\"An outlined text field with the label outlined themed to a greenish color\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-outlined-text-field label=\"Outlined\" value=\"Value\"></md-outlined-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage-char-counter.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"An outlined textfield with a floating label that says Title and a filled value that says Short and the text 5 / 10 under the field at the end\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-outlined-text-field label=\"Title\" value=\"Short\" maxlength=\"10\"></md-outlined-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage-icons.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"Three outlined textfields next to each other the first has a search icon at the start the label Search Messages, the second a label that says Password and an eye icon toggle button at the end, and a red, visually errored outlined textfield with the label Username with an exclamation icon at the end and helper error text under the field that says Username not available\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-outlined-text-field placeholder=\"Search for messages\" has-leading-icon>\n      <md-icon slot=\"leading-icon\">search</md-icon>\n    </md-outlined-text-field>\n    <md-outlined-text-field label=\"Password\" type=\"password\" has-trailing-icon>\n      <md-icon-button toggle slot=\"trailing-icon\">\n        <md-icon>visibility</md-icon>\n        <md-icon slot=\"selected\">visibility_off</md-icon>\n      </md-icon-button>\n    </md-outlined-text-field>\n    <md-outlined-text-field label=\"Username\" error error-text=\"Username not available\" has-trailing-icon>\n      <md-icon slot=\"trailing-icon\">error</md-icon>\n    </md-outlined-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage-label.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"Three outlined textfields next to each other. the first has a label of Favorite food, the second one a placeholder of email@domain.com and there is a label that says First name and an empty outlined textfield next to it\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-outlined-text-field label=\"Favorite food\"></md-outlined-text-field>\n    <md-outlined-text-field placeholder=\"email@domain.com\"></md-outlined-text-field>\n    <div>First name</div>\n    <md-outlined-text-field aria-label=\"First name\"></md-outlined-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage-prefix.html",
    "content": "<div class=\"figure-wrapper textarea\">\n  <figure\n    aria-label=\"An outlined textfield with a floating label that says Dollar amount, a prefix dollar sign, the number zero as a value and a suffix of decimal zero zero at the end of the field\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-outlined-text-field\n      label=\"Dollar amount\"\n      type=\"number\"\n      value=\"0\"\n      prefix-text=\"$\"\n      suffix-text=\".00\"\n    ></md-outlined-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage-supporting-text.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"Two filled fields next to each other. The first has a label that says comments and supporting text under the field that says Provide comments for the issue. The second field has a label of Name with an asterisk and supporting text under the field that has an asterisk followed by the word required\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-filled-text-field\n      label=\"Comments\"\n      supporting-text=\"Provide comments for the issue\"\n    ></md-filled-text-field>\n    <md-filled-text-field\n      label=\"Name\"\n      required\n      supporting-text=\"*required\"\n      error-text=\"Please fill out this field\"\n    ></md-filled-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage-textarea.html",
    "content": "<div class=\"figure-wrapper textarea\">\n  <figure\n    aria-label=\"A filled textarea that is vertically larger and has a label that says Vertical resize\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n  <style>\n    .figure-wrapper.textarea md-filled-text-field {\n      resize: vertical;\n    }\n  </style>\n  <md-filled-text-field type=\"textarea\" label=\"Vertical resize\" rows=\"3\"></md-filled-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage-type.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"Two filled textfields next to each other. The first has a label of Username and the outlined one has a label of Password\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-filled-text-field label=\"Username\" type=\"email\"></md-filled-text-field>\n    <md-filled-text-field label=\"Password\" type=\"password\"></md-filled-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/figures/textfield/usage.html",
    "content": "<div class=\"figure-wrapper\">\n  <figure\n    aria-label=\"A filled textfield next to an outlined textfield. Both have a value of Value prefilled\"\n    style=\"padding-block: 16px; gap: 16px\"\n  >\n    <md-filled-text-field label=\"Label\" value=\"Value\"></md-filled-text-field>\n    <md-outlined-text-field label=\"Label\" value=\"Value\"></md-outlined-text-field>\n  </figure>\n</div>\n"
  },
  {
    "path": "docs/components/focus-ring.md",
    "content": "# Focus ring\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-focus-ring -->\n\n<!-- [TOC] -->\n\nFocus rings are accessible outlines for components to show keyboard focus.\n\nFocus rings follow the same heuristics as\n[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)<!-- {.external} -->\nto determine when they are visible.\n\n![Three elements with a focus ring that moves between them.](images/focus/hero.gif \"A focus ring moving across elements.\")\n\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/focus)\n    <!-- {.external} -->\n\n## Usage\n\nFocus rings display on keyboard navigation. They may be attached to a control in\none of three ways.\n\n![An element with a focus ring.](images/focus/usage.gif \"A focus ring.\")\n\n1.  Attached to the parent element\n\n    ```html\n    <button style=\"position: relative\">\n      <md-focus-ring style=\"--md-focus-ring-shape: 8px\"></md-focus-ring>\n    </button>\n    ```\n\n1.  Attached to a referenced element\n\n    ```html\n    <div style=\"position: relative\">\n      <md-focus-ring for=\"control\" style=\"--md-focus-ring-shape: 8px\"></md-focus-ring>\n      <input id=\"control\">\n    </div>\n    ```\n\n1.  Attached imperatively\n\n    ```html\n    <div style=\"position: relative\">\n      <md-focus-ring id=\"ring\" style=\"--md-focus-ring-shape: 8px\"></md-focus-ring>\n      <button id=\"ring-control\"></button>\n    </div>\n    <script>\n      const focusRing = document.querySelector('#ring');\n      const control = document.querySelector('#ring-control');\n      focusRing.attach(control);\n    </script>\n    ```\n\n> Note: focus rings must be placed within a `position: relative` container.\n\n### Inward\n\nFocus rings can be changed to animate inwards by adding an `inward` attribute.\nThis is useful for components like list items.\n\n![An element with a focus ring that animates inward.](images/focus/usage-inward.gif \"A focus ring animating inward.\")\n\n```html\n<button style=\"position: relative\">\n  <md-focus-ring inward style=\"--md-focus-ring-shape: 8px\"></md-focus-ring>\n</button>\n```\n\n### Animation\n\nThe focus ring animation may be customized or disabled using CSS custom\nproperties.\n\n![An element with a focus ring that does not animate.](images/focus/usage-animation.gif \"A focus ring with disabled animations.\")\n\n```html\n<style>\n  md-focus-ring {\n    --md-focus-ring-duration: 0s; /* disabled animation */\n  }\n</style>\n```\n\n## Accessibility\n\nFocus rings are visual components and do not have assistive technology\nrequirements.\n\n## Theming\n\nFocus rings supports [Material theming](../theming/README.md) and can be\ncustomized in terms of color and shape.\n\n### Tokens\n\nToken                   | Default value\n----------------------- | --------------------------\n`--md-focus-ring-color` | `--md-sys-color-secondary`\n`--md-focus-ring-shape` | `--md-sys-shape-corner-full`\n`--md-focus-ring-width` | `3px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss)\n    <!-- {.external} -->\n\n### Example\n\n![Image of a focus ring with a different theme applied](images/focus/theming.gif \"Focus ring theming example.\")\n\n```html\n<style>\nmd-focus-ring {\n  --md-focus-ring-shape: 0px;\n  --md-focus-ring-width: 2px;\n  --md-focus-ring-active-width: 4px;\n  --md-sys-color-secondary: #4A6363;\n}\n</style>\n\n<button>\n  <md-focus-ring></md-focus-ring>\n</button>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdFocusRing <code>&lt;md-focus-ring&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `visible` | `visible` | `boolean` | `false` | Makes the focus ring visible. |\n| `inward` | `inward` | `boolean` | `false` | Makes the focus ring animate inwards instead of outwards. |\n| `htmlFor` |  | `string` | `undefined` |  |\n| `control` |  | `HTMLElement` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `attach` | `control` | `void` |  |\n| `detach` | _None_ | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `visibility-changed` | `Event` | No | No | Fired whenever `visible` changes. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/icon-button.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Icon Buttons\ndirname: iconbutton\n-----><!-- catalog-only-end -->\n\n<catalog-component-header>\n<catalog-component-header-title slot=\"title\">\n\n# Icon Buttons\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-icon-button -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/icon-button/).**\n<!-- external-only-end -->\n\n[Icon buttons](https://m3.material.io/components/icon-buttons)<!-- {.external} --> help\npeople take supplementary actions with a single tap.\n\n</catalog-component-header-title>\n<img\n    class=\"hero\"\n    alt=\"The top half of a phone application with a back icon button at the top left and three icon buttons on the top right, heart, share, and three dot.\"\n    src=\"images/iconbutton/hero.webp\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/icon-buttons) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/iconbutton)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname, previewHeight=700 %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Types\n\n<!-- no-catalog-start -->\n\n![Side by side view of standard and contained icon buttons](images/iconbutton/buttons.webp \"1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/buttons.html\" -->\n\n1.  [Icon Button](#icon-button)\n2.  [Filled Icon Button](#filled-icon-button)\n3.  [Filled Tonal Icon Button](#filled-tonal-icon-button)\n4.  [Outlined Icon Button](#outlined-icon-button)\n\n## Usage\n\nUse icon buttons to display actions in a compact layout. Icon buttons can\nrepresent opening actions such as opening an overflow menu or search, or\nrepresent binary actions that can be toggled on and off, such as favorite or\nbookmark.\n\nIcon buttons can be grouped together or they can stand alone.\n\nTo use icons by name, see the [Icon](icon.md#usage) documentation for loading\nthe icon font.\n\n<!-- no-catalog-start -->\n\n![A row of icon buttons](images/iconbutton/usage.webp \"Icon buttons can be used within other components, such as a bottom app bar\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/usage.html\" -->\n\n```html\n<md-icon-button>\n  <md-icon>check</md-icon>\n</md-icon-button>\n<md-filled-icon-button>\n  <md-icon>check</md-icon>\n</md-filled-icon-button>\n<md-filled-tonal-icon-button>\n  <md-icon>check</md-icon>\n</md-filled-tonal-icon-button>\n<md-outlined-icon-button>\n  <md-icon>check</md-icon>\n</md-outlined-icon-button>\n```\n\n### Links\n\nAdd an\n[`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)<!-- {.external} -->\nand optionally a\n[`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)<!-- {.external} -->\nattribute to turn the icon button into a link.\n\n```html\n<md-icon-button href=\"https://google.com\">\n  <md-icon>check</md-icon>\n</md-icon-button>\n```\n\n### Toggle\n\n<!-- no-catalog-start -->\n\n![Two rows of toggling icon buttons, the top row is unselected and the bottom\nrow is\nselected](images/iconbutton/usage-toggle.webp \"Unselected and Selected Icon Button\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/usage-toggle.html\" -->\n\nToggle icon buttons allow a single choice to be selected or deselected, such as\nadding or removing something from favorites.\n\nAdd a second icon in the `slot=\"selected\"` slot to change the icon when\nselected. Toggle icon buttons can be pre-selected by adding the `selected`\nattribute.\n\n```html\n<div>\n  <md-icon-button toggle>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-icon-button>\n  <md-filled-icon-button toggle>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-filled-icon-button>\n  <md-filled-tonal-icon-button toggle>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-filled-tonal-icon-button>\n  <md-outlined-icon-button toggle>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-outlined-icon-button>\n</div>\n<div>\n  <md-icon-button toggle selected>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-icon-button>\n  <md-filled-icon-button toggle selected>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-filled-icon-button>\n  <md-filled-tonal-icon-button toggle selected>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-filled-tonal-icon-button>\n  <md-outlined-icon-button toggle selected>\n    <md-icon>close</md-icon>\n    <md-icon slot=\"selected\">check</md-icon>\n  </md-outlined-icon-button>\n</div>\n```\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to icon buttons whose labels need a more descriptive label.\n\n```html\n<md-icon-button aria-label=\"Search for Contact\">\n  <md-icon>search</md-icon>\n</md-icon-button>\n```\n\n### Toggle\n\nAdd an `aria-label-selected` attribute to toggle buttons whose labels need a\nmore descriptive label when selected.\n\n```html\n<md-icon-button toggle\n  aria-label=\"Unselected\"\n  aria-label-selected=\"Selected\">\n  <md-icon>close</md-icon>\n  <md-icon slot=\"selected\">check</md-icon>\n</md-icon-button>\n```\n\n### Focusable and disabled\n\nBy default, disabled icon buttons are not focusable with the keyboard, while\n\"soft-disabled\" icon buttons are. Some use cases encourage focusability of\ndisabled toolbar items to increase their discoverability.\n\nSee the\n[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls)<!-- {.external} -->\nfor guidance on when this is recommended.\n\n```html\n<div role=\"toolbar\">\n  <md-icon-button aria-label=\"Copy\">\n    <md-icon>copy</md-icon>\n  </md-icon-button>\n  <md-icon-button aria-label=\"Cut\">\n    <md-icon>cut</md-icon>\n  </md-icon-button>\n  <!--\n    This icon button is disabled but kept focusable to improve its\n    discoverability in the toolbar.\n  -->\n  <md-icon-button aria-label=\"Paste\" soft-disabled>\n    <md-icon>paste</md-icon>\n  </md-icon-button>\n</div>\n```\n\n## Icon Button\n\nStandard icon buttons do not have a background or outline, and have the lowest\nemphasis of the icon buttons.\n\n<!-- no-catalog-start -->\n\n![A check icon](images/iconbutton/usage-standard.webp \"Standard Icon Button with Check icon\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/usage-standard.html\" -->\n\n```html\n<md-icon-button>\n  <md-icon>check</md-icon>\n</md-icon-button>\n```\n\n## Filled Icon Button\n\n<!-- go/md-filled-icon-button -->\n\n<!-- no-catalog-start -->\n\n![A circular button with a check icon](images/iconbutton/usage-filled.webp \"Filled Icon Button\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/usage-filled.html\" -->\n\nFilled icon buttons have higher visual impact and are best for high emphasis\nactions.\n\n```html\n<md-filled-icon-button>\n  <md-icon>check</md-icon>\n</md-filled-icon-button>\n```\n\n## Filled Tonal Icon Button\n\n<!-- go/md-filled-tonal-icon-button -->\n\n<!-- no-catalog-start -->\n\n![A filled tonal icon button with a check icon](images/iconbutton/usage-filled-tonal.webp \"Filled Tonal Icon Button\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/usage-filled-tonal.html\" -->\n\nFilled tonal icon buttons are a middle ground between filled and outlined icon\nbuttons. They're useful in contexts where the button requires slightly more\nemphasis than an outline would give, such as a secondary action paired with a\nhigh emphasis action.\n\n```html\n<md-filled-tonal-icon-button>\n  <md-icon>check</md-icon>\n</md-filled-tonal-icon-button>\n```\n\n## Outlined Icon Button\n\n<!-- go/md-outlined-icon-button -->\n\n<!-- no-catalog-start -->\n\n![An outlined circular icon button with a check icon](images/iconbutton/usage-outlined.webp \"Outlined Icon button\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/usage-outlined.html\" -->\n\nOutlined icon buttons are medium-emphasis buttons. They're useful when an icon\nbutton needs more emphasis than a standard icon button but less than a filled or\nfilled tonal icon button.\n\n```html\n<md-outlined-icon-button>\n  <md-icon>check</md-icon>\n</md-outlined-icon-button>\n```\n\n## Theming\n\nIcon Button supports [Material theming](../theming/README.md) and can be\ncustomized in terms of color, and shape.\n\n### Icon Button tokens\n\nToken                                | Default value\n------------------------------------ | -----------------------------------\n`--md-icon-button-icon-color`        | `--md-sys-color-on-surface-variant`\n`--md-icon-button-state-layer-shape` | `--md-sys-shape-corner-full`\n`--md-icon-button-icon-size`         | `24px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)\n    <!-- {.external} -->\n\n### Icon Button example\n\n<!-- no-catalog-start -->\n\n![Image of a standard icon button with a different theme applied](images/iconbutton/theming-standard.webp \"Standard icon button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/theming-standard.html\" -->\n\n```html\n<style>\n:root {\n  --md-icon-button-icon-size: 32px;\n  --md-sys-color-on-surface-variant: #dc362e;\n  background-color: #fff8f6;\n}\n</style>\n\n<md-icon-button>\n  <md-icon>check</md-icon>\n</md-icon-button>\n```\n\n### Filled Icon Button tokens\n\nToken                                              | Default value\n-------------------------------------------------- | -------------\n`--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary`\n`--md-filled-icon-button-container-shape`          | `--md-sys-shape-corner-full`\n`--md-filled-icon-button-container-width`          | `40px`\n`--md-filled-icon-button-container-height`         | `40px`\n`--md-filled-icon-button-icon-size`                | `24px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-icon-button.scss)\n    <!-- {.external} -->\n\n### Filled Icon Button example\n\n<!-- no-catalog-start -->\n\n![Image of a filled icon button with a different theme applied](images/iconbutton/theming-filled.webp \"Filled icon button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/theming-filled.html\" -->\n\n```html\n<style>\n:root {\n  --md-filled-icon-button-container-width: 80px;\n  --md-filled-icon-button-container-height: 80px;\n  --md-filled-icon-button-icon-size: 40px;\n  --md-filled-icon-button-container-shape: 0px;\n  --md-sys-color-primary: #dc362e;\n  background-color: #fff8f6;\n}\n</style>\n<md-filled-icon-button>\n  <md-icon>check</md-icon>\n</md-filled-icon-button>\n```\n\n### Filled Tonal Icon Button tokens\n\nToken                                                    | Default value\n-------------------------------------------------------- | -------------\n`--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container`\n`--md-filled-tonal-icon-button-container-shape`          | `--md-sys-shape-corner-full`\n`--md-filled-tonal-icon-button-container-width`          | `40px`\n`--md-filled-tonal-icon-button-container-height`         | `40px`\n`--md-filled-tonal-icon-button-icon-size`                | `24px`\n\n### Filled Tonal Icon Button example\n\n<!-- no-catalog-start -->\n\n![Image of a filled tonal icon button with a different theme applied](images/iconbutton/theming-filled-tonal.webp \"Filled tonal icon button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/theming-filled-tonal.html\" -->\n\n```html\n<style>\n:root {\n  --md-filled-tonal-icon-button-container-width: 80px;\n  --md-filled-tonal-icon-button-container-height: 80px;\n  --md-filled-tonal-icon-button-container-shape: 0px;\n  --md-filled-tonal-icon-button-icon-size: 40px;\n  --md-sys-color-secondary-container: #006A6A;\n}\n</style>\n<md-filled-tonal-icon-button>\n  <md-icon>check</md-icon>\n</md-filled-tonal-icon-button>\n```\n\n### Outlined Icon Button tokens\n\nToken                                        | Default value\n-------------------------------------------- | ----------------------------\n`--md-outlined-icon-button-outline-color`    | `--md-sys-color-outline`\n`--md-outlined-icon-button-outline-width`    | `1px`\n`--md-outlined-icon-button-container-shape`  | `--md-sys-shape-corner-full`\n`--md-outlined-icon-button-container-width`  | `40px`\n`--md-outlined-icon-button-container-height` | `40px`\n`--md-outlined-icon-button-icon-size`        | `24px`\n\n### Outlined Icon Button example\n\n<!-- no-catalog-start -->\n\n![Image of an outlined icon button with a different theme applied](images/iconbutton/theming-outlined.webp \"Outlined icon button theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/iconbutton/theming-outlined.html\" -->\n\n```html\n<style>\n:root {\n  --md-outlined-icon-button-container-width: 80px;\n  --md-outlined-icon-button-container-height: 80px;\n  --md-outlined-icon-button-container-shape: 0px;\n  --md-outlined-icon-button-icon-size: 40px;\n  --md-outlined-icon-button-outline-width: 4px;\n  --md-sys-color-outline: #006A6A;\n}\n</style>\n<md-outlined-icon-button>\n  <md-icon>check</md-icon>\n</md-outlined-icon-button>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdIconButton <code>&lt;md-icon-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | \"Soft-disables\" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |\n| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |\n| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |\n| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |\n| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot=\"selected\"` icon is provided. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n| `labels` |  | `NodeList` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |\n| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdFilledIconButton <code>&lt;md-filled-icon-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | \"Soft-disables\" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |\n| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |\n| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |\n| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |\n| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot=\"selected\"` icon is provided. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n| `labels` |  | `NodeList` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |\n| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdFilledTonalIconButton <code>&lt;md-filled-tonal-icon-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | \"Soft-disables\" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |\n| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |\n| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |\n| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |\n| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot=\"selected\"` icon is provided. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n| `labels` |  | `NodeList` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |\n| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdOutlinedIconButton <code>&lt;md-outlined-icon-button&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |\n| `softDisabled` | `soft-disabled` | `boolean` | `false` | \"Soft-disables\" the icon button (disabled but still focusable).<br>Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |\n| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |\n| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |\n| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |\n| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |\n| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |\n| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |\n| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot=\"selected\"` icon is provided. |\n| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be \"button\", \"reset\", or \"submit\" (default). |\n| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |\n| `name` |  | `string` | `undefined` |  |\n| `form` |  | `HTMLFormElement` | `undefined` |  |\n| `labels` |  | `NodeList` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `input` | `InputEvent` | Yes | Yes | Dispatched when a toggle button toggles |\n| `change` | `Event` | Yes | No | Dispatched when a toggle button toggles |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/icon.md",
    "content": "# Icon\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'dfreedm' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-icon -->\n\n<!-- [TOC] -->\n\n[Icons](https://m3.material.io/styles/icons/overview)<!-- {.external} --> can be used to\nrepresent common actions. Material Symbols are a set of variable icon fonts\ncreated at seven weights across three different styles.\n\n![Array of icons with various stylistic attributes](images/icon/hero.gif)\n\n*   [Design article](https://m3.material.io/styles/icons) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/icon)\n    <!-- {.external} -->\n\n## Usage\n\nIcons can be specified by name, unicode code point, or have an `<svg>` child\nelement.\n\n![Settings icon as ligature, check box icon as codepoint, and house icon as SVG](images/icon/usage.webp \"Example icons\")\n\n```html\n<md-icon>settings</md-icon>\n<md-icon>&#xe834</md-icon>\n<md-icon><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M10 40V24H4L24 6l10 8.85V9h4v9.55L44 24h-6v16H26.5V28h-5v12Zm3-3h5.5V25h11v12H35V19.95l-11-10-11 10Zm5.5-12h11-11Zm1.25-5.5h8.5q0-1.65-1.275-2.725Q25.7 15.7 24 15.7q-1.7 0-2.975 1.075Q19.75 17.85 19.75 19.5Z\"/></svg></md-icon>\n```\n\nThe full range of icons can be found on the\n[Material Symbols](https://fonts.google.com/icons)<!-- {.external} --> font page.\n\nMaterial Symbols icons are available in three styles: **outlined**, **rounded**,\nand **sharp**.\n\nIn addition, Material Symbols have four adjustable stylistic variable font\nattributes called axes. An axis is a typographic term referring to the attribute\nof a symbol that can be altered to create visual variations.\n\nEach style symbol contains four axes: **weight**, **fill**, **grade**, and\n**optical size**.\n\nThe `weight` and `optical size` attributes are handled automatically, but the\n`fill` and `grade` attributes are custom to the Material Symbols font, and must\nbe set with the\n[`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)<!-- {.external} -->\nproperty.\n\n### Outlined\n\nOutlined symbols use stroke and fill attributes for a light, clean style that\nworks well in dense UIs. The stroke weight of outlined icons can be adjusted to\ncomplement or contrast the weight of your typography.\n\nLoad the font with\n\n```html\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined\" rel=\"stylesheet\">\n```\n\n### Rounded\n\n![Settings, checkbox, and house icons in Rounded style](images/icon/usage_rounded.webp \"Rounded Icons\")\n\nRounded symbols use a corner radius that pairs well with brands that use heavier\ntypography, curved logos, or circular elements to express their style.\n\nLoad the font with\n\n```html\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded\" rel=\"stylesheet\">\n```\n\nTo use Rounded icons, set `--md-icon-font` to `'Material Symbols Rounded'`.\n\n### Sharp\n\n![Settings, checkbox, and house icons in Sharp style](images/icon/usage_sharp.webp \"Sharp Icons\")\n\nSharp symbols display corners with straight edges, for a crisp style that\nremains legible even at smaller scales. These rectangular shapes can support\nbrand styles that aren’t well-reflected by rounded shapes.\n\nLoad the font with\n\n```html\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Symbols+Sharp\" rel=\"stylesheet\">\n```\n\nTo use Sharp icons, set `font-family` to `'Material Symbols Sharp'`.\n\n### Fill\n\n![Filed settings, checkbox, and house icons](images/icon/usage_filled.webp \"Filled Icons\")\n\nFilled Icons gives you the ability to transition from a more outlined style to a\nreversed or more filled style.\n\nA fill attribute can be used to convey a state of transition, such as unfilled\nand filled states. Values range from `0` to `1`, with `1` being completely\nfilled. Along with weight, fill is a primary attribute that impacts the overall\nlook of a symbol.\n\nAll styles of Material Symbols can be filled by setting\n`font-variation-settings` to `'FILL' 1`.\n\n## Accessibility\n\nIcons are mostly intended to be used inside of other components that have\naccessibility settings.\n\nIf used on their own, Icons should be given an accessible name if they are\nfocusable. If you use icons by name, they will be announced by screen readers\nwithout any extra steps.\n\nIf using codepoints, wrap the codepoint in a `<span>` with an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute.\n\n```html\n<md-icon tabindex=\"-1\"><span aria-label=\"home\">&#xe88a</span></md-icon>\n```\n\nIf using SVG icons, add an `aria-label` attribute to the SVG element.\n\n```html\n<md-icon tabindex=\"-1\"><svg aria-label=\"paper airplane\" viewBox=\"0 0 48 48\"><path d=\"M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z\"/></svg></md-icon>\n```\n\n## Theming\n\n### Tokens\n\nToken            | Default value\n---------------- | -----------------------------\n`--md-icon-font` | `'Material Symbols Outlined'`\n`--md-icon-size` | `24px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon.scss)\n    <!-- {.external} -->\n\n### Example\n\n![Image of icons with a different theme applied](images/icon/theming.webp \"Icon theming example.\")\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n<link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"  rel=\"stylesheet\">\n<link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n\n<style>\nmd-icon {\n  color: #006A6A;\n  --md-icon-size: 48px;\n}\n.rounded {\n  --md-icon-font: 'Material Symbols Rounded';\n}\n.sharp {\n  --md-icon-font: 'Material Symbols Sharp';\n}\nmd-icon[filled] {\n  font-variation-settings: 'FILL' 1;\n}\n</style>\n\n<h3>Outlined</h3>\n<span>\n  <md-icon>settings</md-icon>\n  <md-icon>check_box</md-icon>\n  <md-icon>house</md-icon>\n  <md-icon filled>settings</md-icon>\n  <md-icon filled>check_box</md-icon>\n  <md-icon filled>house</md-icon>\n</span>\n<h3>Rounded</h3>\n<span class=\"rounded\">\n  <md-icon>settings</md-icon>\n  <md-icon>check_box</md-icon>\n  <md-icon>house</md-icon>\n  <md-icon filled>settings</md-icon>\n  <md-icon filled>check_box</md-icon>\n  <md-icon filled>house</md-icon>\n</span>\n<h3>Sharp</h3>\n<span class=\"sharp\">\n  <md-icon>settings</md-icon>\n  <md-icon>check_box</md-icon>\n  <md-icon>house</md-icon>\n  <md-icon filled>settings</md-icon>\n  <md-icon filled>check_box</md-icon>\n  <md-icon filled>house</md-icon>\n</span>\n```\n\n<!-- auto-generated API docs start -->\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/list.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Lists\ndirname: list\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Lists\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- no-catalog-start -->\n\n<!-- go/md-list -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/list/)**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Lists](https://m3.material.io/components/lists)<!-- {.external} --> are continuous,\nvertical indexes of text and images\n\n</catalog-component-header-title>\n\n<img class=\"hero\" src=\"images/list/hero.webp\" alt=\"CImage of a mobile phone screen with a Recipies page and a list recipies in a material list. The first item is Fresh baked breads with an image of someone holding bread on the left and a horizontal three dot menu on the right. Then Tacos with an image of tacos and the same three dot menu\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/lists) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/list)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname, previewHeight=600, editorHeight=600 %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\n`<md-list>` is a container composed of `<md-list-item>`s of different types.\n\n<!-- no-catalog-start -->\n\n![Three items in a list. The first item says Apple as its headline. The second\none says Banana in its headline as well as Banana is a yellow fruit as its sub\nheader. The third list item says Cucumber in its headline and Cucumbers are long\ngreen fruits that are just as long as this multi-line description as its sub\nheader which is on two lines.](images/list/usage.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/list/usage.html\" -->\n\n```html\n<md-list style=\"max-width: 300px;\">\n  <md-list-item>\n    Fruits\n  </md-list-item>\n  <md-divider></md-divider>\n  <md-list-item>\n    Apple\n</md-list-item>\n  <md-list-item>\n    Banana\n  </md-list-item>\n  <md-list-item>\n    <div slot=\"headline\">Cucumber</div>\n    <div slot=\"supporting-text\">Cucumbers are long green fruits that are just as long as this multi-line description</div>\n  </md-list-item>\n  <md-list-item\n      type=\"link\"\n      href=\"https://google.com/search?q=buy+kiwis&tbm=shop\"\n      target=\"_blank\">\n    <div slot=\"headline\">Shop for Kiwis</div>\n    <div slot=\"supporting-text\">This will link you out in a new tab</div>\n    <md-icon slot=\"end\">open_in_new</md-icon>\n  </md-list-item>\n</md-list>\n```\n\n## Icon Items\n\nIcons can be slotted into list-items' `start` or `end` slot.\n\n<!-- no-catalog-start -->\n\n![A list with three items and dividers separating each item. The first item has\nthe Lit logo and the text Lit. The second item has the Polymer logo and the text\nPolymer. The third item has the Angular logo and the text\nAngular.](images/list/usage-icon.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/list/usage-icon.html\" -->\n\n```html\n<md-list style=\"max-width: 300px\">\n  <md-list-item>\n    Lit\n    <svg  slot=\"start\" style=\"height: 24px\" viewBox=\"0 0 160 200\">\n      <path\n        fill=\"currentColor\"\n        d=\"m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z\"\n      />\n    </svg>\n  </md-list-item>\n  <md-divider></md-divider>\n  <md-list-item>\n    Polymer\n    <md-icon slot=\"start\">polymer</md-icon>\n  </md-list-item>\n  <md-divider></md-divider>\n  <md-list-item>\n    Angular\n    <svg slot=\"start\" style=\"height: 24px\" viewBox=\"0 0 250 250\">\n      <polygon points=\"108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5   \" />\n      <path\n        d=\"M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0\n          l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z\"\n      />\n    </svg>\n  </md-list-item>\n</md-list>\n```\n\n## Image Items\n\nImages should be slotted into list-items' `start` slot.\n\n<!-- no-catalog-start -->\n\n![A list with three image items. The first item is a square picture of a cat and\nthe text Cat. The second is a picture of a kitten with the text Kitty Cat. The\nthird item is a square image of an older kitten with the text\nCate.](images/list/usage-image.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/list/usage-image.html\" -->\n\n```html\n<md-list style=\"max-width: 300px;\">\n  <md-list-item>\n    Cat\n    <img slot=\"start\" style=\"width: 56px\" src=\"https://placekitten.com/112/112\">\n  </md-list-item>\n  <md-divider></md-divider>\n  <md-list-item>\n    Kitty Cat\n    <img slot=\"start\" style=\"width: 56px\" src=\"https://placekitten.com/114/114\">\n  </md-list-item>\n  <md-divider></md-divider>\n  <md-list-item>\n    Cate\n    <img slot=\"start\" style=\"width: 56px\" src=\"https://placekitten.com/116/116\">\n  </md-list-item>\n</md-list>\n```\n\n## Accessibility\n\nList can have its `role` and `tabindex` set via the `role` and `tabindex`\nattributes, and list items can have their `role` and `tabindex` set via the\n`type` and `tabindex` attributes respectively.\n\n> NOTE: List item has a limited set of `type`s that can be set on it. This is to\n> ensure that your list remains accessible with all other properties and options\n> presented to it. See the `ListItemType` TypeScript type exported by list item\n> for the current accepted values.\n\nBy default these values are set to\n[`role=\"list\"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role)<!-- {.external} -->\nand `tabindex=\"-1\"` for list, and\n[`role=\"listitem\"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role)<!-- {.external} -->\nand `tabindex=\"0\"` for list items.\n\n## Theming\n\nList and List Item supports\n[Material theming](https://github.com/material-components/material-web/blob/main/docs/theming/README.md)<!-- {.external} -->\nand can be customized in terms of color, typography, and shape.\n\n### List & List Item\n\nToken                                           | Default value\n----------------------------------------------- | -------------\n`--md-list-container-color`                     | `--md-sys-color-surface`\n`--md-list-item-container-shape`                | `--md-sys-shape-corner-none`\n`--md-list-item-label-text-color`               | `--md-sys-color-on-surface`\n`--md-list-item-supporting-text-color`          | `--md-sys-color-on-surface-variant`\n`--md-list-item-trailing-supporting-text-color` | `--md-sys-color-on-surface-variant`\n`--md-list-item-label-text-font`                | `--md-sys-typescale-label-large-font`\n`--md-list-item-supporting-text-font`           | `--md-sys-typescale-body-medium-font`\n`--md-list-item-trailing-supporting-text-font`  | `--md-sys-typescale-label-small-font`\n\n*   [All List tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list.scss)\n    <!-- {.external} -->\n*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)\n    <!-- {.external} -->\n\n### List & List Item Example\n\n<!-- no-catalog-start -->\n\n![Image of a list and list items of foods with their inventory stock number with\na different theme applied](images/list/theming-list.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/list/theming-list.html\" -->\n\n```html\n<style>\n  :root {\n    --md-list-container-color: #f4fbfa;\n    --md-list-item-label-text-color: #161d1d;\n    --md-list-item-supporting-text-color: #3f4948;\n    --md-list-item-trailing-supporting-text-color: #3f4948;\n    --md-list-item-label-text-font: system-ui;\n    --md-list-item-supporting-text-font: system-ui;\n    --md-list-item-trailing-supporting-text-font: system-ui;\n  }\n  [slot=\"trailing-supporting-text\"] {\n    width: 30px;\n    text-align: end;\n  }\n</style>\n<md-list>\n  <md-list-item type=\"button\">\n    <div slot=\"headline\">Apple</div>\n    <div slot=\"supporting-text\">In stock</div>\n    <div slot=\"trailing-supporting-text\">+100</div>\n  </md-list-item>\n  <md-list-item type=\"button\">\n    <div slot=\"headline\">Banana</div>\n    <div slot=\"supporting-text\">In stock</div>\n    <div slot=\"trailing-supporting-text\">56</div>\n  </md-list-item>\n  <md-list-item type=\"button\">\n    <div slot=\"headline\">Cucumber</div>\n    <div slot=\"supporting-text\">Low stock</div>\n    <div slot=\"trailing-supporting-text\">5</div>\n  </md-list-item>\n</md-list>\n```\n\n### Icon List Item\n\nToken                                | Default value\n------------------------------------ | -----------------------------------\n`--md-list-item-leading-icon-color`  | `--md-sys-color-on-surface-variant`\n`--md-list-item-trailing-icon-color` | `--md-sys-color-on-surface-variant`\n`--md-list-item-leading-icon-size`   | `18px`\n`--md-list-item-trailing-icon-size`  | `24px`\n\n*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)\n    <!-- {.external} -->\n\n### Icon List Item Example\n\n<!-- no-catalog-start -->\n\n![Image of a list and icon list items of food names with a different theme\napplied](images/list/theming-icon.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/list/theming-icon.html\" -->\n\n```html\n<style>\n  :root {\n    background-color: #f4fbfa;\n    --md-list-container-color: #f4fbfa;\n    --md-list-item-label-text-color: #161d1d;\n    --md-list-item-leading-icon-color: #006a6a;\n    --md-list-item-trailing-icon-color: #006a6a;\n    --md-list-item-leading-icon-size: 20px;\n    --md-list-item-trailing-icon-size: 20px;\n  }\n  md-list-item.unhealthy {\n    --md-list-item-trailing-icon-color: #ba1a1a;\n  }\n</style>\n<md-list>\n  <md-list-item>\n    <div slot=\"headline\">Eggs</div>\n    <md-icon slot=\"start\">egg</md-icon>\n    <md-icon slot=\"end\">recommend</md-icon>\n  </md-list-item>\n  <md-list-item class=\"unhealthy\">\n    <div slot=\"headline\">Ice Cream</div>\n    <md-icon slot=\"start\">icecream</md-icon>\n    <md-icon slot=\"end\">dangerous</md-icon>\n  </md-list-item>\n  <md-list-item>\n    <div slot=\"headline\">Orange</div>\n    <md-icon slot=\"start\">nutrition</md-icon>\n    <md-icon slot=\"end\">recommend</md-icon>\n  </md-list-item>\n</md-list>\n```\n\n### Avatar List Item\n\nToken                                       | Default value\n------------------------------------------- | -------------\n`--md-list-item-leading-avatar-label-color` | `--md-sys-color-on-primary-container`\n`--md-list-item-leading-avatar-label-font`  | `--md-sys-typescale-title-medium-font`\n`--md-list-item-leading-avatar-color`       | `--md-sys-color-primary-container`\n`--md-list-item-leading-avatar-size`        | `40px`\n`--md-list-item-leading-avatar-shape`       | `--md-sys-shape-corner-full`\n\n*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)\n    <!-- {.external} -->\n\n### Image List Item\n\nToken                                 | Default value\n------------------------------------- | -------------\n`--md-list-item-leading-image-height` | `56px`\n`--md-list-item-leading-image-width`  | `56px`\n`--md-list-item-leading-image-shape`  | `--md-sys-shape-corner-none`\n\n*   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)\n    <!-- {.external} -->\n\n### Image List Item Example\n\n<!-- no-catalog-start -->\n\n![Image of a list and image list items of cats with a different theme applied](images/list/theming-image.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/list/theming-image.html\" -->\n\n```html\n<style>\n  :root {\n    background-color: #f4fbfa;\n    --md-list-container-color: #f4fbfa;\n    --md-list-item-label-text-color: #161d1d;\n    --md-list-item-leading-image-height: 50px;\n    --md-list-item-leading-image-width: 100px;\n    --md-list-item-leading-image-shape: 25px;\n  }\n  img {\n    width: 40px;\n  }\n</style>\n<md-list>\n  <md-list-item headline=\"Wide Cat\">\n    <img slot=\"start\" src=\"https://placekitten.com/200/100\">\n  </md-list-item>\n  <md-list-item headline=\"Round kitty cat\">\n    <img slot=\"start\" src=\"https://placekitten.com/202/101\">\n  </md-list-item>\n  <md-list-item headline=\"Softe cate\">\n    <img slot=\"start\" src=\"https://placekitten.com/212/106\">\n  </md-list-item>\n</md-list>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdList <code>&lt;md-list&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `items` |  | `ListItem[]` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `activateNextItem` | _None_ | `ListItem` | Activates the next item in the list. If at the end of the list, the first item will be activated. |\n| `activatePreviousItem` | _None_ | `ListItem` | Activates the previous item in the list. If at the start of the list, the last item will be activated. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdListItem <code>&lt;md-list-item&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |\n| `type` | `type` | `string` | `'text'` | Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or \"button\" for interactive items. |\n| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |\n| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `click` | _None_ | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `request-activation` | `Event` | Yes | Yes | Requests the list to set `tabindex=0` on the item and focus it. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/menu.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Menus\ndirname: menu\n-----><!-- catalog-only-end -->\n\n<catalog-component-header>\n<catalog-component-header-title slot=\"title\">\n\n# Menus\n\n<!-- no-catalog-start -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-menu -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/menu/).**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Menus](https://m3.material.io/components/menus)<!-- {.external} --> display a list of\nchoices on a temporary surface.\n\n</catalog-component-header-title>\n\n<img\n    class=\"hero\"\n    alt=\"A phone showing a vertical threedot, pressed, icon button and a menu floating below it with the following visible items: Revert, Settings, and Send Feedback\"\n    src=\"images/menu/hero.webp\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/menus) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/menu)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname,previewHeight=1000,editorHeight=700 %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nWhen opened, menus position themselves to an anchor. Thus, either `anchor` or\n`anchorElement` must be supplied to `md-menu` before opening. Additionally, a\nshared parent of `position:relative` should be present around the menu and it's\nanchor, because the default menu is positioned relative to the anchor element.\n\nMenus also render menu items such as `md-menu-item` and handle keyboard\nnavigation between `md-menu-item`s as well as typeahead functionality.\nAdditionally, `md-menu` interacts with `md-menu-item`s to help you determine how\na menu was closed. Listen for and inspect the `close-menu` custom event's\n`details` to determine what action and items closed the menu.\n\n<!-- no-catalog-start -->\n\n![\"Two filled buttons next to each other. The first one says set with idref and\nthe other says set with element ref. There is an opened menu anchored to the\nbottom of the right button with the items: Apple, Banana,\nCucumber.\"](images/menu/usage.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/menu/usage.html\" -->\n\n```html\n<!-- Note the position: relative style -->\n<span style=\"position: relative\">\n  <md-filled-button id=\"usage-anchor\">Set with idref</md-filled-button>\n  <md-menu id=\"usage-menu\" anchor=\"usage-anchor\">\n    <md-menu-item>\n      <div slot=\"headline\">Apple</div>\n    </md-menu-item>\n    <md-menu-item>\n      <div slot=\"headline\">Banana</div>\n    </md-menu-item>\n    <md-menu-item>\n      <div slot=\"headline\">Cucumber</div>\n    </md-menu-item>\n  </md-menu>\n</span>\n\n<script type=\"module\">\n  // This example uses anchor as an ID reference\n  const anchorEl = document.body.querySelector('#usage-anchor');\n  const menuEl = document.body.querySelector('#usage-menu');\n\n  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });\n</script>\n\n<span style=\"position: relative\">\n  <md-filled-button id=\"usage-anchor-2\">Set with element ref</md-filled-button>\n  <md-menu id=\"usage-menu-2\">\n    <md-menu-item>\n      <div slot=\"headline\">Apple</div>\n    </md-menu-item>\n    <md-menu-item>\n      <div slot=\"headline\">Banana</div>\n    </md-menu-item>\n    <md-menu-item>\n      <div slot=\"headline\">Cucumber</div>\n    </md-menu-item>\n  </md-menu>\n</span>\n\n<script type=\"module\">\n  // This example uses MdMenu.prototype.anchorElement to set the anchor as an\n  // HTMLElement reference.\n  const anchorEl = document.body.querySelector('#usage-anchor-2');\n  const menuEl = document.body.querySelector('#usage-menu-2');\n  menuEl.anchorElement = anchorEl;\n\n  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });\n</script>\n```\n\n### Submenus\n\nYou can compose `<md-menu>`s inside of an `<md-sub-menu>`'s `menu` slot, but\nfirst the `has-overflow` attribute must be set on the root `<md-menu>` to\ndisable overflow scrolling and display the nested submenus.\n\n<!-- no-catalog-start -->\n\n![\"A filled button that says menu with submenus. There is a menu anchored to the\nbottom of it with the first item selected that says fruits with A followed by a\nright arrow. To the right is anchored a submenu with 3 items, Apricot, Avocado,\nApples. The Apples item is selected and has a left arrow before the text and\nanother submenu anchored to it on the left. That menu has three items, Fuji,\nGranny Smith, and Red Delicious.\"](images/menu/usage-submenu.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/menu/usage-submenu.html\" -->\n\n```html\n<!-- Note the position: relative style -->\n<span style=\"position: relative\">\n  <md-filled-button id=\"usage-submenu-anchor\">\n    Menu with Submenus\n  </md-filled-button>\n  <!-- Note the has-overflow attribute -->\n  <md-menu has-overflow id=\"usage-submenu\" anchor=\"usage-submenu-anchor\">\n    <md-sub-menu>\n      <md-menu-item slot=\"item\">\n      <div slot=\"headline\">Fruits with A</div>\n        <!-- Arrow icons are helpful affordances -->\n        <md-icon slot=\"end\">arrow_right</md-icon>\n      </md-menu-item>\n      <!-- Submenu must be slotted into sub-menu's menu slot -->\n      <md-menu slot=\"menu\">\n        <md-menu-item>\n          <div slot=\"headline\">Apricot</div>\n        </md-menu-item>\n        <md-menu-item>\n          <div slot=\"headline\">Avocado</div>\n        </md-menu-item>\n\n        <!-- Nest as many as you want and control menu anchoring -->\n        <md-sub-menu\n            menu-corner=\"start-end\"\n            anchor-corner=\"start-start\">\n          <md-menu-item slot=\"item\">\n            <div slot=\"headline\">Apples</div>\n            <!-- Arrow icons are helpful affordances -->\n            <md-icon slot=\"start\">\n              arrow_left\n            </md-icon>\n          </md-menu-item>\n          <md-menu slot=\"menu\">\n            <md-menu-item>\n              <div slot=\"headline\">Fuji</div>\n            </md-menu-item>\n            <md-menu-item>\n              <div slot=\"headline\" style=\"white-space: nowrap;\">Granny Smith</div>\n            </md-menu-item>\n            <md-menu-item>\n              <div slot=\"headline\" style=\"white-space: nowrap;\">Red Delicious</div>\n            </md-menu-item>\n          </md-menu>\n\n        </md-sub-menu>\n      </md-menu>\n    </md-sub-menu>\n\n    <md-menu-item>\n      <div slot=\"headline\">Banana</div>\n    </md-menu-item>\n    <md-menu-item>\n      <div slot=\"headline\">Cucumber</div>\n    </md-menu-item>\n  </md-menu>\n</span>\n\n<script type=\"module\">\n  const anchorEl = document.body.querySelector('#usage-submenu-anchor');\n  const menuEl = document.body.querySelector('#usage-submenu');\n\n  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });\n</script>\n```\n\n### Popover-positioned menus\n\nInternally menu uses `position: absolute` by default. Though there are cases\nwhen the anchor and the node cannot share a common ancestor that is `position:\nrelative`, or sometimes, menu will render below another item due to limitations\nwith `position: absolute`.\n\nPopover-positioned menus use the native\n[Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)<!-- {.external} -->\nto render above all other content. This may fix most issues where the default\nmenu positioning (`positioning=\"absolute\"`) is not positioning as expected by\nrendering into the\n[top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)<!-- {.external} -->.\n\n> Warning: Popover API support was added in Chrome 114 and Safari 17. At the\n> time of writing, Firefox does not support the Popover API\n> ([see latest browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility)<!-- {.external} -->).\n>\n> For browsers that do not support the Popover API, `md-menu` will fall back to\n> using [fixed-positioned menus](#fixed-positioned-menus).\n\n<!-- no-catalog-start -->\n\n![\"A filled button that says open popover menu. There is an open menu anchored\nto the bottom of the button with three items, Apple, Banana, and\nCucumber.\"](images/menu/usage-popover.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/menu/usage-popover.html\" -->\n\n```html\n<!-- Note the lack of position: relative parent. -->\n<div style=\"margin: 16px;\">\n  <md-filled-button id=\"usage-popover-anchor\">Open popover menu</md-filled-button>\n</div>\n\n<!-- popover menus do not require a common ancestor with the anchor. -->\n<md-menu positioning=\"popover\" id=\"usage-popover\" anchor=\"usage-popover-anchor\">\n  <md-menu-item>\n    <div slot=\"headline\">Apple</div>\n  </md-menu-item>\n  <md-menu-item>\n    <div slot=\"headline\">Banana</div>\n  </md-menu-item>\n  <md-menu-item>\n    <div slot=\"headline\">Cucumber</div>\n  </md-menu-item>\n</md-menu>\n\n<script type=\"module\">\n  const anchorEl = document.body.querySelector('#usage-popover-anchor');\n  const menuEl = document.body.querySelector('#usage-popover');\n\n  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });\n</script>\n```\n\n### Fixed-positioned menus\n\nThis is the fallback implementation of\n[popover-positioned menus](#popover-positioned-menus) and uses `position: fixed`\nrather than the default `position: absolute` which calculates its position\nrelative to the window rather than the element.\n\n> Note: Fixed menu positions are positioned relative to the window and not the\n> document. This means that the menu will not scroll with the anchor as the page\n> is scrolled.\n\n<!-- no-catalog-start -->\n\n![\"A filled button that says open fixed menu. There is an open menu anchored to\nthe bottom of the button with three items, Apple, Banana, and\nCucumber.\"](images/menu/usage-fixed.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/menu/usage-fixed.html\" -->\n\n```html\n<!-- Note the lack of position: relative parent. -->\n<div style=\"margin: 16px;\">\n  <md-filled-button id=\"usage-fixed-anchor\">Open fixed menu</md-filled-button>\n</div>\n\n<!-- Fixed menus do not require a common ancestor with the anchor. -->\n<md-menu positioning=\"fixed\" id=\"usage-fixed\" anchor=\"usage-fixed-anchor\">\n  <md-menu-item>\n    <div slot=\"headline\">Apple</div>\n  </md-menu-item>\n  <md-menu-item>\n    <div slot=\"headline\">Banana</div>\n  </md-menu-item>\n  <md-menu-item>\n    <div slot=\"headline\">Cucumber</div>\n  </md-menu-item>\n</md-menu>\n\n<script type=\"module\">\n  const anchorEl = document.body.querySelector('#usage-fixed-anchor');\n  const menuEl = document.body.querySelector('#usage-fixed');\n\n  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });\n</script>\n```\n\n### Document-positioned menus\n\nWhen set to `positioning=\"document\"`, `md-menu` will position itself relative to\nthe document as opposed to the element or the window from `\"absolute\"` and\n`\"fixed\"` values respectively.\n\nDocument level positioning is useful for the following cases:\n\n-   There are no ancestor elements that produce a `relative` positioning\n    context.\n    -   `position: relative`\n    -   `position: absolute`\n    -   `position: fixed`\n    -   `transform: translate(x, y)`\n    -   etc.\n-   The menu is hoisted to the top of the DOM\n    -   The last child of `<body>`\n    -   [Top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)\n        <!-- {.external} -->\n-   The same `md-menu` is being reused and the contents and anchors are being\n    dynamically changed\n\n<!-- no-catalog-start -->\n\n![\"A filled button that says open document menu. There is an open menu anchored\nto the bottom of the button with three items, Apple, Banana, and\nCucumber.\"](images/menu/usage-document.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/menu/usage-document.html\" -->\n\n```html\n<!-- Note the lack of position: relative parent. -->\n<div style=\"margin: 16px;\">\n  <md-filled-button id=\"usage-document-anchor\">Open document menu</md-filled-button>\n</div>\n\n<!-- document menus do not require a common ancestor with the anchor. -->\n<md-menu positioning=\"document\" id=\"usage-document\" anchor=\"usage-document-anchor\">\n  <md-menu-item>\n    <div slot=\"headline\">Apple</div>\n  </md-menu-item>\n  <md-menu-item>\n    <div slot=\"headline\">Banana</div>\n  </md-menu-item>\n  <md-menu-item>\n    <div slot=\"headline\">Cucumber</div>\n  </md-menu-item>\n</md-menu>\n\n<script type=\"module\">\n  const anchorEl = document.body.querySelector('#usage-document-anchor');\n  const menuEl = document.body.querySelector('#usage-document');\n\n  anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });\n</script>\n```\n\n## Accessibility\n\nBy default Menu is set up to function as a `role=\"menu\"` with children as\n`role=\"menuitem\"`. A common use case for this is the menu button example, where\nyou would need to add keyboard interactions to the button to open the menu\n([see W3C example](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/)<!-- {.external} -->).\n\nMenu can also be adapted for other use cases.\n\nThe role of the `md-list` inside the menu can be set with the `type` attribute.\nThe role of each individual `md-menu-item` can also be set with the `type`\nattribute. Anything else slotted into the menu that is not a list item in most\ncases should be set to `role=\"none\"`, and `md-divider` should have\n`role=\"separator\"` and `tabindex=\"-1\"`.\n\n```html\n<!--\n  A simplified example of an autocomplete component – missing javascript logic for interaction.\n-->\n<md-filled-text-field\n    id=\"textfield\"\n    type=\"combobox\"\n    aria-controls=\"menu\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"true\"\n    aria-activedescendant=\"1\"\n    value=\"Ala\">\n</md-filled-text-field>\n<md-menu\n    id=\"menu\"\n    anchor=\"textfield\"\n    role=\"listbox\"\n    aria-label=\"states\"\n    open>\n  <md-menu-item type=\"option\" id=\"0\">\n    <div slot=\"headline\">Alabama</div>\n  </md-menu-item>\n  <md-divider role=\"separator\" tabindex=\"-1\"></md-divider>\n  <md-menu-item type=\"option\" id=\"1\" selected aria-selected=\"true\">\n    <div slot=\"headline\">Alabama</div>\n  </md-menu-item>\n</md-menu>\n```\n\n## Theming\n\nMenus support [Material theming](../theming/README.md) and can be customized in\nterms of color. Additionally, `md-menu` composes `md-list`, and each menu item\nextends `md-list-item` ([see theming documentation](./list#theming)), so most\nthe tokens for those components can also be used for Menu.\n\n### Menu Tokens\n\nToken                                     | Default value\n----------------------------------------- | ------------------------------------\n`--md-menu-container-color`               | `--md-sys-color-surface-container`\n`--md-menu-container-shape`               | `--md-sys-shape-corner-extra-small`\n`--md-menu-item-container-color`          | `--md-sys-color-surface-container`\n`--md-menu-item-selected-container-color` | `--md-sys-color-secondary-container`\n\n*   [Menu tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-menu.scss)\n    <!-- {.external} -->\n*   [Menu item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-menu-item.scss)\n    <!-- {.external} -->\n*   [List tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list.scss)\n    <!-- {.external} -->\n*   [List item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)\n    <!-- {.external} -->\n\n### Example\n\n<!-- no-catalog-start -->\n\n![A filled button with the text Themed menu. Attached is a 3 item menu with the\nitems Apple, Banana, and Cucumber. They are both in a green hue and the menu has\na sharp 0px border radius.](images/menu/theming.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/menu/theming.html\" -->\n\n```html\n<style>\n  :root {\n    background-color: #f4fbfa;\n    --md-menu-container-color: #f4fbfa;\n    --md-menu-container-shape: 0px;\n    --md-sys-color-on-surface: #161d1d;\n    --md-sys-typescale-body-large-font: system-ui;\n  }\n  md-menu-item {\n    border-radius: 28px;\n  }\n  md-menu-item::part(focus-ring) {\n    border-radius: 28px;\n  }\n  /* Styles for button and not relevant to menu */\n  md-filled-button {\n    --md-sys-color-primary: #006a6a;\n    --md-sys-color-on-primary: #ffffff;\n  }\n</style>\n\n<span style=\"position: relative\">\n  <md-filled-button id=\"theming-anchor\">Themed menu</md-filled-button>\n  <md-menu id=\"theming-menu\" anchor=\"theming-anchor\">\n    <md-menu-item>\n      <div slot=\"headline\">Apple</div>\n    </md-menu-item>\n    <md-menu-item>\n      <div slot=\"headline\">Banana</div>\n    </md-menu-item>\n    <md-menu-item>\n      <div slot=\"headline\">Cucumber</div>\n    </md-menu-item>\n  </md-menu>\n</span>\n\n<script type=\"module\">\n  const anchorEl = document.body.querySelector(\"#theming-anchor\");\n  const menuEl = document.body.querySelector(\"#theming-menu\");\n\n  anchorEl.addEventListener(\"click\", () => {\n    menuEl.show();\n  });\n</script>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdMenu <code>&lt;md-menu&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `anchor` | `anchor` | `string` | `''` | The ID of the element in the same root node in which the menu should align to. Overrides setting `anchorElement = elementReference`.<br>__NOTE__: anchor or anchorElement must either be an HTMLElement or resolve to an HTMLElement in order for menu to open. |\n| `positioning` | `positioning` | `string` | `'absolute'` | Whether the positioning algorithm should calculate relative to the parent of the anchor element (`absolute`), relative to the window (`fixed`), or relative to the document (`document`). `popover` will use the popover API to render the menu in the top-layer. If your browser does not support the popover API, it will fall back to `fixed`.<br>__Examples for `position = 'fixed'`:__<br>- If there is no `position:relative` in the given parent tree and the surface is `position:absolute` - If the surface is `position:fixed` - If the surface is in the \"top layer\" - The anchor and the surface do not share a common `position:relative` ancestor<br>When using `positioning=fixed`, in most cases, the menu should position itself above most other `position:absolute` or `position:fixed` elements when placed inside of them. e.g. using a menu inside of an `md-dialog`.<br>__NOTE__: Fixed menus will not scroll with the page and will be fixed to the window instead.<br>__Examples for `position = 'document'`:__<br>- There is no parent that creates a relative positioning context e.g. `position: relative`, `position: absolute`, `transform: translate(x, y)`, etc. - You put the effort into hoisting the menu to the top of the DOM like the end of the `<body>` to render over everything or in a top-layer. - You are reusing a single `md-menu` element that dynamically renders content.<br>__Examples for `position = 'popover'`:__<br>- Your browser supports `popover`. - Most cases. Once popover is in browsers, this will become the default. |\n| `quick` | `quick` | `boolean` | `false` | Skips the opening and closing animations. |\n| `hasOverflow` | `has-overflow` | `boolean` | `false` | Displays overflow content like a submenu. Not required in most cases when using `positioning=\"popover\"`.<br>__NOTE__: This may cause adverse effects if you set `md-menu {max-height:...}` and have items overflowing items in the \"y\" direction. |\n| `open` | `open` | `boolean` | `false` | Opens the menu and makes it visible. Alternative to the `.show()` and `.close()` methods |\n| `xOffset` | `x-offset` | `number` | `0` | Offsets the menu's inline alignment from the anchor by the given number in pixels. This value is direction aware and will follow the LTR / RTL direction.<br>e.g. LTR: positive -> right, negative -> left RTL: positive -> left, negative -> right |\n| `yOffset` | `y-offset` | `number` | `0` | Offsets the menu's block alignment from the anchor by the given number in pixels.<br>e.g. positive -> down, negative -> up |\n| `noHorizontalFlip` | `no-horizontal-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the horizontal axis when the surface would render outside the viewport. |\n| `noVerticalFlip` | `no-vertical-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the vertical axis when the surface would render outside the viewport. |\n| `typeaheadDelay` | `typeahead-delay` | `number` | `200` | The max time between the keystrokes of the typeahead menu behavior before it clears the typeahead buffer. |\n| `anchorCorner` | `anchor-corner` | `string` | `Corner.END_START` | The corner of the anchor which to align the menu in the standard logical property style of <block>-<inline> e.g. `'end-start'`.<br>NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value |\n| `menuCorner` | `menu-corner` | `string` | `Corner.START_START` | The corner of the menu which to align the anchor in the standard logical property style of <block>-<inline> e.g. `'start-start'`.<br>NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value |\n| `stayOpenOnOutsideClick` | `stay-open-on-outside-click` | `boolean` | `false` | Keeps the user clicks outside the menu.<br>NOTE: clicking outside may still cause focusout to close the menu so see `stayOpenOnFocusout`. |\n| `stayOpenOnFocusout` | `stay-open-on-focusout` | `boolean` | `false` | Keeps the menu open when focus leaves the menu's composed subtree.<br>NOTE: Focusout behavior will stop propagation of the focusout event. Set this property to true to opt-out of menu's focusout handling altogether. |\n| `skipRestoreFocus` | `skip-restore-focus` | `boolean` | `false` | After closing, does not restore focus to the last focused element before the menu was opened. |\n| `defaultFocus` | `default-focus` | `string` | `FocusState.FIRST_ITEM` | The element that should be focused by default once opened.<br>NOTE: When setting default focus to 'LIST_ROOT', remember to change `tabindex` to `0` and change md-menu's display to something other than `display: contents` when necessary. |\n| `noNavigationWrap` | `no-navigation-wrap` | `boolean` | `false` | Turns off navigation wrapping. By default, navigating past the end of the menu items will wrap focus back to the beginning and vice versa. Use this for ARIA patterns that do not wrap focus, like combobox. |\n| `isSubmenu` |  | `boolean` | `false` | Whether or not the current menu is a submenu and should not handle specific navigation keys. |\n| `typeaheadController` |  | `TypeaheadController` | `function { ... }` | Handles typeahead navigation through the menu. |\n| `anchorElement` |  | `HTMLElement & Partial<SurfacePositionTarget>` | `undefined` |  |\n| `items` |  | `MenuItem[]` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `getBoundingClientRect` | _None_ | `DOMRect` |  |\n| `getClientRects` | _None_ | `DOMRectList` |  |\n| `close` | _None_ | `void` |  |\n| `show` | _None_ | `void` |  |\n| `activateNextItem` | _None_ | `MenuItem` | Activates the next item in the menu. If at the end of the menu, the first item will be activated. |\n| `activatePreviousItem` | _None_ | `MenuItem` | Activates the previous item in the menu. If at the start of the menu, the last item will be activated. |\n| `reposition` | _None_ | `void` | Repositions the menu if it is open.<br>Useful for the case where document or window-positioned menus have their anchors moved while open. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `opening` | `Event` | No | No | Fired before the opening animation begins |\n| `opened` | `Event` | No | No | Fired once the menu is open, after any animations |\n| `closing` | `Event` | No | No | Fired before the closing animation begins |\n| `closed` | `Event` | No | No | Fired once the menu is closed, after any animations |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdMenuItem <code>&lt;md-menu-item&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |\n| `type` | `type` | `string` | `'menuitem'` | Sets the behavior and role of the menu item, defaults to \"menuitem\". |\n| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |\n| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |\n| `keepOpen` | `keep-open` | `boolean` | `false` | Keeps the menu open if clicked or keyboard selected. |\n| `selected` | `selected` | `boolean` | `false` | Sets the item in the selected visual state when a submenu is opened. |\n| `typeaheadText` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `close-menu` | `CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>` | Yes | Yes | Closes the encapsulating menu on closable interaction. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdSubMenu <code>&lt;md-sub-menu&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `anchorCorner` | `anchor-corner` | `string` | `Corner.START_END` | The anchorCorner to set on the submenu. |\n| `menuCorner` | `menu-corner` | `string` | `Corner.START_START` | The menuCorner to set on the submenu. |\n| `hoverOpenDelay` | `hover-open-delay` | `number` | `400` | The delay between mouseenter and submenu opening. |\n| `hoverCloseDelay` | `hover-close-delay` | `number` | `400` | The delay between ponterleave and the submenu closing. |\n| `isSubMenu` | `md-sub-menu` | `boolean` | `true` | READONLY: self-identifies as a menu item and sets its identifying attribute |\n| `item` |  | `MenuItem` | `undefined` |  |\n| `menu` |  | `Menu` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `show` | _None_ | `Promise<void>` | Shows the submenu. |\n| `close` | _None_ | `Promise<void>` | Closes the submenu. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `deactivate-items` | `Event` | Yes | Yes | Requests the parent menu to deselect other items when a submenu opens. |\n| `request-activation` | `Event` | Yes | Yes | Requests the parent to make the slotted item focusable and focus the item. |\n| `deactivate-typeahead` | `Event` | Yes | Yes | Requests the parent menu to deactivate the typeahead functionality when a submenu opens. |\n| `activate-typeahead` | `Event` | Yes | Yes | Requests the parent menu to activate the typeahead functionality when a submenu closes. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/progress.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Progress indicators\ndirname: progress\nssrOnly: true\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"end\">\n<catalog-component-header-title slot=\"title\">\n\n# Progress indicators\n\n<!-- no-catalog-start -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-progress -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/progress/).**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Progress indicators](https://m3.material.io/components/progress-indicators)<!-- {.external} -->\ninform users about the status of ongoing processes, such as loading an app or\nsubmitting a form.\n\nThere are two types of progress indicators: linear and circular.\n\n</catalog-component-header-title>\n\n<img\n    src=\"images/progress/hero.webp\"\n    alt=\"Circular and linear progress indicators showing indetermine and determinate examples\"\n    title=\"Progress indicators can be used to show indeterminate or determinate progress.\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/progress-indicators)\n    <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/progress)\n    <!-- {.external} -->\n\n## Types\n\n1.  [Circular progress](#circular-progress)\n1.  [Linear progress](#linear-progress)\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nProgress indicators may be determinate to show progress, or indeterminate for an\nunspecified amount of progress.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center; gap: 16px\"\n      title=\"Determinate and indeterminate progress indicators.\"\n      aria-label=\"Two circular and linear progress indicator examples, one with three quarters of the track full\nand the other\nindeterminate.\">\n    <md-circular-progress value=\"0.75\"></md-circular-progress>\n    <md-circular-progress indeterminate></md-circular-progress>\n    <div style=\"display: flex; flex-direction: column; align-self: stretch; justify-content: space-evenly;\">\n      <md-linear-progress value=\"0.75\"></md-linear-progress>\n      <md-linear-progress indeterminate></md-linear-progress>\n    </div>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-circular-progress value=\"0.75\"></md-circular-progress>\n<md-circular-progress indeterminate></md-circular-progress>\n\n<md-linear-progress indeterminate></md-linear-progress>\n<md-linear-progress value=\"0.5\"></md-linear-progress>\n```\n\n### Four colors\n\nIndeterminate progress indicators may cycle between four colors (primary,\nprimary container, tertiary, and tertiary container by default).\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center; gap: 16px;\"\n      title=\"A four-color indeterminate circular and linear progress indicator\"\n      aria-label=\"Indeterminate progress indicators that cycles between four colors.\">\n    <md-circular-progress four-color indeterminate></md-circular-progress>\n    <md-linear-progress four-color indeterminate></md-linear-progress>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-circular-progress four-color indeterminate></md-circular-progress>\n<md-linear-progress four-color indeterminate></md-linear-progress>\n```\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to progress indicators to give them a descriptive name.\n\n```html\n<md-circular-progress value=\"0.5\" aria-label=\"Page refresh progress\"></md-circular-progress>\n\n<md-linear-progress value=\"0.5\" aria-label=\"Download progress\"></md-linear-progress>\n```\n\n## Circular progress\n\n<!-- go/md-circular-progress -->\n\nCircular progress indicators display progress by animating along an invisible\ncircular track in a clockwise direction.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center; gap: 16px;\"\n      title=\"Circular progress indicators\"\n      aria-label=\"An indeterminate and determinate circular progress indicator.\">\n    <md-circular-progress indeterminate></md-circular-progress>\n    <md-circular-progress value=\"0.6\"></md-circular-progress>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-circular-progress indeterminate></md-circular-progress>\n<md-circular-progress value=\"0.6\"></md-circular-progress>\n```\n\n## Linear progress\n\n<!-- go/md-linear-progress -->\n\nLinear progress indicators display progress by animating along the length of a\nfixed, visible track.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center; gap: 16px;\"\n      title=\"Linear progress indicators\"\n      aria-label=\"An indeterminate and determinate linear progress indicator.\">\n    <md-linear-progress indeterminate></md-linear-progress>\n    <md-linear-progress value=\"0.6\"></md-linear-progress>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-linear-progress indeterminate></md-linear-progress>\n<md-linear-progress value=\"0.6\"></md-linear-progress>\n```\n\n### Buffer\n\nLinear progress indicators may show a buffer to communicate both determinate and\nindeterminate progress. The progress bar and track represent known progress\nwhile the buffer dots represent unknown progress.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;\"\n      title=\"Progress and buffer\"\n      aria-label=\"A linear progress indicator with partial progress and an indeterminate buffer.\">\n    <md-linear-progress value=\"0.5\" buffer=\"0.8\"></md-linear-progress>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<md-linear-progress value=\"0.5\" buffer=\"0.8\"></md-linear-progress>\n```\n\n## Theming\n\nProgress indicators supports [Material theming](../theming/README.md) and can be\ncustomized in terms of color.\n\n### Circular progress tokens\n\nToken                                           | Default value\n----------------------------------------------- | ------------------------\n`--md-circular-progress-active-indicator-color` | `--md-sys-color-primary`\n`--md-circular-progress-size`                   | `48px`\n`--md-circular-progress-active-indicator-width` | `8.3333` (%)\n\n> Note: the active indicator width must be specified as a unit-less percentage\n> of the size.\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-circular-progress.scss)\n    <!-- {.external} -->\n\n### Circular progress example\n\n<!-- no-catalog-start -->\n\n![Image of a circular progress indicator with a different theme applied](images/progress/theming-circular.webp \"Circular progress indicator theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"justify-content:center;align-items:center;\"\n      class=\"styled-example\"\n      title=\"Circular progress indicator theming example.\"\n      aria-label=\"Image of a circular progress indicator with a different theme applied\">\n    <style>\n      .styled-example {\n        background-color: white;\n        --md-circular-progress-size: 32px;\n        --md-circular-progress-active-indicator-width: 20;\n        --md-sys-color-primary: #006A6A;\n      }\n    </style>\n\n    <md-circular-progress value=\"0.5\"></md-circular-progress>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<style>\n:root {\n  --md-circular-progress-size: 32px;\n  --md-circular-progress-active-indicator-width: 20;\n  --md-sys-color-primary: #006A6A;\n}\n</style>\n\n<md-circular-progress value=\"0.5\"></md-circular-progress>\n```\n\n### Linear progress tokens\n\nToken                                          | Default value\n---------------------------------------------- | -------------\n`--md-linear-progress-track-color`             | `--md-sys-color-surface-container-highest`\n`--md-linear-progress-track-height`            | `4px`\n`--md-linear-progress-track-shape`             | `--md-sys-shape-corner-none`\n`--md-linear-progress-active-indicator-color`  | `--md-sys-color-primary`\n`--md-linear-progress-active-indicator-height` | `4px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-linear-progress.scss)\n    <!-- {.external} -->\n\n### Linear progress example\n\n<!-- no-catalog-start -->\n\n![Image of a linear progress indicator with a different theme applied](images/progress/theming-linear.webp \"Linear progress theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-only-start -->\n\n<!--\n\n<div class=\"figure-wrapper\">\n  <figure\n      style=\"min-width:300px;\"\n      class=\"styled-example\"\n      aria-label=\"Image of a linear progress indicator with a different theme applied\"\n      title=\"Linear progress theming example.\">\n  <style>\n    .styled-example {\n      background-color: white;\n      --md-linear-progress-track-height: 8px;\n      --md-linear-progress-track-shape: 8px;\n      --md-linear-progress-active-indicator-height: 8px;\n      --md-sys-color-primary: #006A6A;\n      --md-sys-color-surface-container-highest: #DDE4E3;\n    }\n    .styled-example md-linear-progress {\n      flex-grow: 1;\n    }\n  </style>\n  <md-linear-progress value=\"0.5\"></md-linear-progress>\n  </figure>\n</div>\n\n-->\n\n<!-- catalog-only-end -->\n\n```html\n<style>\n:root {\n  --md-linear-progress-track-height: 8px;\n  --md-linear-progress-track-shape: 8px;\n  --md-linear-progress-active-indicator-height: 8px;\n  --md-sys-color-primary: #006A6A;\n  --md-sys-color-surface-container-highest: #DDE4E3;\n}\n</style>\n\n<md-linear-progress value=\"0.5\"></md-linear-progress>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdLinearProgress <code>&lt;md-linear-progress&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `buffer` | `buffer` | `number` | `0` | Buffer amount to display, a fraction between 0 and `max`. If the value is 0 or negative, the buffer is not displayed. |\n| `value` | `value` | `number` | `0` | Progress to display, a fraction between 0 and `max`. |\n| `max` | `max` | `number` | `1` | Maximum progress to display, defaults to 1. |\n| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not to display indeterminate progress, which gives no indication to how long an activity will take. |\n| `fourColor` | `four-color` | `boolean` | `false` | Whether or not to render indeterminate mode using 4 colors instead of one. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdCircularProgress <code>&lt;md-circular-progress&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `value` | `value` | `number` | `0` | Progress to display, a fraction between 0 and `max`. |\n| `max` | `max` | `number` | `1` | Maximum progress to display, defaults to 1. |\n| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not to display indeterminate progress, which gives no indication to how long an activity will take. |\n| `fourColor` | `four-color` | `boolean` | `false` | Whether or not to render indeterminate mode using 4 colors instead of one. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/radio.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Radio\ndirname: radio\nssrOnly: true\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Radio button\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- github-only-start -->\n\n<!-- go/md-radio -->\n\n<!-- [TOC] -->\n\n<!-- github-only-end -->\n\n[Radio buttons](https://m3.material.io/components/radio-button)<!-- {.external} --> let\npeople select one option from a set of options.\n\n</catalog-component-header-title>\n\n<img\n    class=\"hero\"\n    src=\"images/radio/hero.webp\"\n    alt=\"A list of items with radio buttons and one selected.\"\n    title=\"Radio buttons\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/radio-button) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/radio)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nRadios behave like\n[`<input type=\"radio\">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)<!-- {.external} -->\nelements and form a group with the same `name` attribute. Only one radio can be\nselected in a group.\n\nRadios can be pre-selected by adding a `checked` attribute.\n\nAdd a `value` to identify which radio is selected in a form.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<form>\n  <md-radio name=\"animals\" value=\"cats\"></md-radio>\n  <md-radio name=\"animals\" value=\"dogs\"></md-radio>\n  <md-radio name=\"animals\" value=\"birds\" checked></md-radio>\n</form>\n```\n\n### Label\n\nAssociate a label with a radio using the `<label>` element.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-radio id=\"cats-radio\" name=\"animals\" value=\"cats\"></md-radio>\n<label for=\"cats-radio\">Cats</label>\n\n<md-radio id=\"dogs-radio\" name=\"animals\" value=\"dogs\"></md-radio>\n<label for=\"dogs-radio\">Dogs</label>\n```\n\n> Note: do not wrap radios inside of a `<label>`, which stops screen readers\n> from correctly announcing the number of radios in a group.\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to radios without labels or radios whose labels need to be more\ndescriptive.\n\nPlace radios inside a\n[`role=\"radiogroup\"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role)<!-- {.external} -->.\nRadio groups must display a label, either with `aria-label` or\n`aria-labelledby`.\n\n```html\n<div role=\"radiogroup\" aria-labelledby=\"group-title\">\n  <h3 id=\"group-title\">Starting position</h3>\n  <div>\n    <md-radio id=\"first-radio\" name=\"group\" value=\"1\"\n        aria-label=\"First\"></md-radio>\n    <label for=\"first-radio\">1st</label>\n  </div>\n  <div>\n    <md-radio id=\"second-radio\" name=\"group\" value=\"2\"\n        aria-label=\"Second\"></md-radio>\n    <label for=\"second-radio\">2nd</label>\n  </div>\n</div>\n```\n\n> Note: radios are not automatically labelled by `<label>` elements and always\n> need an `aria-label`. See b/294081528.\n\n## Theming\n\nRadios support [Material theming](../theming/README.md) and can be customized in\nterms of color.\n\n### Tokens\n\nToken                            | Default value\n-------------------------------- | -----------------------------------\n`--md-radio-icon-color`          | `--md-sys-color-on-surface-variant`\n`--md-radio-selected-icon-color` | `--md-sys-color-primary`\n`--md-radio-icon-size`           | `20px`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-radio.scss)\n    <!-- {.external} -->\n\n### Example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<style>\n:root {\n  --md-sys-color-primary: #006A6A;\n  --md-radio-icon-size: 16px;\n}\n</style>\n\n<md-radio name=\"group\"></md-radio>\n<md-radio name=\"group\" checked></md-radio>\n<md-radio name=\"group\"></md-radio>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdRadio <code>&lt;md-radio&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `required` | `required` | `boolean` | `false` | Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. |\n| `value` | `value` | `string` | `'on'` | The element value to use in form submission when checked. |\n| `checked` | `checked` | `boolean` | `undefined` |  |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `input` | `InputEvent` | Yes | No | Dispatched when the value changes from user interaction. |\n| `change` | `Event` | Yes | Yes | Dispatched when the value changes from user interaction. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/ripple.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Ripple\ndirname: ripple\nssrOnly: true\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Ripple\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- no-catalog-start -->\n\n<!-- go/md-ripple -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/ripple/)<!-- {.external} -->**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\nRipples are\n[state layers](https://m3.material.io/foundations/interaction/states/state-layers)<!-- {.external} -->\nused to communicate the status of a component or interactive element.\n\nA state layer is a semi-transparent covering on an element that indicates its\nstate. A layer can be applied to an entire element or in a circular shape.\n\n</catalog-component-header-title>\n\n<img src=\"images/ripple/hero.gif\" alt=\"Two containers that display a bounded and unbounded ripple on interaction.\"\ntitle=\"A bounded and unbounded ripple.\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/foundations/interaction/states/state-layers)\n    <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/ripple)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nRipples display on hover and press pointer interactions. They may be attached to\na control in one of three ways.\n\n<!-- no-catalog-start -->\n\n![A container that displays a bounded ripple on interaction.](images/ripple/usage.gif \"A bounded ripple.\")\n\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n1.  Attached to the parent element\n\n    ```html\n    <style>\n      .container {\n        position: relative;\n      }\n    </style>\n    <button class=\"container\">\n      <md-ripple></md-ripple>\n    </button>\n    ```\n\n1.  Attached to a referenced element\n\n    ```html\n    <style>\n      .container {\n        position: relative;\n      }\n    </style>\n    <div class=\"container\">\n      <md-ripple for=\"control\"></md-ripple>\n      <input id=\"control\">\n    </div>\n    ```\n\n1.  Attached imperatively\n\n    ```html\n    <style>\n      .container {\n        position: relative;\n      }\n    </style>\n    <div class=\"container\">\n      <md-ripple id=\"ripple\"></md-ripple>\n      <button id=\"ripple-control\"></button>\n    </div>\n    <script>\n      const ripple = document.querySelector('#ripple');\n      const control = document.querySelector('#ripple-control');\n      ripple.attach(control);\n    </script>\n    ```\n\n> Note: ripples must be placed within a `position: relative` container.\n\n### Unbounded\n\nTo create an unbounded circular ripple centered on an element, use the following styles.\n\n```css\n.container {\n  display: flex;\n  place-content: center;\n  place-items: center;\n  position: relative;\n}\n\nmd-ripple.unbounded {\n  border-radius: 50%;\n  inset: unset;\n  height: var(--state-layer-size);\n  width: var(--state-layer-size);\n}\n```\n\n<!-- no-catalog-start -->\n\n![A circular container with an inner circle that displays an unbounded ripple around it on interaction.](images/ripple/usage-unbounded.gif \"An unbounded ripple.\")\n\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<style>\n  .container {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n\n    /* Needed for unbounded ripple */\n    display: flex;\n    place-content: center;\n    place-items: center;\n    position: relative;\n  }\n\n  md-ripple.unbounded {\n    /* Needed for unbounded ripple */\n    border-radius: 50%;\n    inset: unset;\n    height: 64px;\n    width: 64px;\n  }\n</style>\n<button class=\"container\">\n  <md-ripple class=\"unbounded\"></md-ripple>\n</button>\n```\n\n## Accessibility\n\nRipples are visual components and do not have assistive technology requirements.\n\n## Theming\n\nRipples support [Material theming](../theming/README.md) and can be customized\nin terms of color.\n\n### Tokens\n\nToken                    | Default value\n------------------------ | ------------------------\n`--md-ripple-hover-color` | `--md-sys-color-on-surface`\n`--md-ripple-pressed-color` | `--md-sys-color-on-surface`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-ripple.scss)\n    <!-- {.external} -->\n\n### Example\n\n<!-- no-catalog-start -->\n\n![Image of a ripple with a different theme applied](images/ripple/theming.gif \"Ripple theming example.\")\n\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<style>\n:root {\n  --md-sys-color-primary: #006A6A;\n  --md-ripple-hover-color: var(--md-sys-color-primary);\n  --md-ripple-pressed-color: var(--md-sys-color-primary);\n}\n\n.container {\n  position: relative;\n}\n</style>\n<button class=\"container\">\n  <md-ripple></md-ripple>\n</button>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdRipple <code>&lt;md-ripple&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the ripple. |\n| `htmlFor` |  | `string` | `undefined` |  |\n| `control` |  | `HTMLElement` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `attach` | `control` | `void` |  |\n| `detach` | _None_ | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/select.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Select\ndirname: select\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Select\n\n<!-- no-catalog-start -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'material-web-team' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-select -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/select/)**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Select menus](https://m3.material.io/components/menus/overview#b1704de4-94b7-4177-9e96-b677ae767cb4)<!-- {.external} -->\ndisplay a list of choices on temporary surfaces and display the currently\nselected menu item above the menu.\n\n</catalog-component-header-title>\n\n<img class=\"hero\" src=\"images/select/hero.webp\" alt=\"A textfield containing the text Item 2, with a dropdown menu containing Item 1, Item 2, and Item 3.\">\n\n</catalog-component-header>\n\n*   Design article (*coming soon*)\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/select)\n    <!-- {.external} -->\n\n## Usage\n\nSelect (also referred to as a dropdown menu) allows choosing a value from a\nfixed list of available options. It is analogous to the native HTML\n[`<select>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)<!-- {.external} -->.\n\n<!-- no-catalog-start -->\n\n![Example usage of an outlined dropdown menu and a filled dropdown menu.](images/select/usage.webp \"An outlined dropdown menu filled with Apple, and a filled dropdown menu.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/select/usage.html\" -->\n\n```html\n<md-outlined-select>\n  <md-select-option aria-label=\"blank\"></md-select-option>\n  <md-select-option selected value=\"apple\">\n    <div slot=\"headline\">Apple</div>\n  </md-select-option>\n  <md-select-option value=\"apricot\">\n    <div slot=\"headline\">Apricot</div>\n  </md-select-option>\n</md-outlined-select>\n\n<md-filled-select>\n  <md-select-option aria-label=\"blank\"></md-select-option>\n  <md-select-option value=\"apple\">\n    <div slot=\"headline\">Apple</div>\n  </md-select-option>\n  <md-select-option value=\"apricot\">\n    <div slot=\"headline\">Apricot</div>\n  </md-select-option>\n</md-filled-select>\n```\n\n### Required select\n\nIndicate that a selection is mandatory by adding the `required` attribute.\n\n```html\n<md-filled-select required>\n  <md-select-option value=\"one\">\n    <div slot=\"headline\">One</div>\n  </md-select-option>\n  <md-select-option value=\"two\">\n    <div slot=\"headline\">Two</div>\n  </md-select-option>\n</md-filled-select>\n```\n\n<!--\n## Accessibility\n\n*Insert a 1-2 sentence description of a common accessibility scenario, followed\nby a code snippet. Do not include a rendered image for accessibility examples.*\n\n```html\n<component-name aria-label=\"Example\">\n```\n\n*Repeat with additional examples as needed to explain how to make the component\naccessible.* -->\n\n## Theming\n\nSelect supports\n[Material theming](https://github.com/material-components/material-web/blob/main/docs/theming/README.md)<!-- {.external} -->\nand can be customized in terms of color, typography, and shape.\n\n### Filled Select tokens\n\nToken                                            | Default value\n------------------------------------------------ | -------------\n`--md-filled-select-text-field-container-color`  | `--md-sys-color-surface-container-highest`\n`--md-filled-select-text-field-container-shape`  | `--md-sys-shape-corner-extra-small`\n`--md-filled-select-text-field-input-text-color` | `--md-sys-color-on-surface`\n`--md-filled-select-text-field-input-text-font`  | `--md-sys-typescale-body-large-font`\n\n*   [Filled Select tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-select.scss)\n    <!-- {.external} -->\n\nTo theme the select's dropdown menu, use the `md-menu` component tokens on the\n`::part(menu)` selector.\n\n### Filled Select example\n\n<!-- no-catalog-start -->\n\n![Image of a filled select with a different theme applied](images/select/theming-filled.webp \"Filled select theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/select/theming-filled.html\" -->\n\n```html\n<style>\n:root {\n  --md-filled-select-text-field-container-shape: 0px;\n  --md-filled-select-text-field-container-color: #f7faf9;\n  --md-filled-select-text-field-input-text-color: #005353;\n  --md-filled-select-text-field-input-text-font: system-ui;\n}\n\nmd-filled-select::part(menu) {\n  --md-menu-container-color: #f4fbfa;\n  --md-menu-container-shape: 0px;\n}\n</style>\n\n<md-filled-select>\n  <md-select-option selected value=\"apple\">\n    <div slot=\"headline\">Apple</div>\n  </md-select-option>\n  <md-select-option value=\"tomato\">\n    <div slot=\"headline\">Tomato</div>\n  </md-select-option>\n</md-filled-select>\n```\n\n### Outlined Select tokens\n\nToken                                              | Default value\n-------------------------------------------------- | -------------\n`--md-outlined-select-text-field-outline-color`    | `--md-sys-color-outline`\n`--md-outlined-select-text-field-container-shape`  | `--md-sys-shape-corner-extra-small`\n`--md-outlined-select-text-field-input-text-color` | `--md-sys-color-on-surface`\n`--md-outlined-select-text-field-input-text-font`  | `--md-sys-typescale-body-large-font`\n\n*   [Outlined Select tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-select.scss)\n    <!-- {.external} -->\n\n### Outlined Select example\n\n<!-- no-catalog-start -->\n\n![Image of a outlined select with a different theme applied](images/select/theming-outlined.webp \"Outlined select theming example.\")\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/select/theming-outlined.html\" -->\n\n```html\n<style>\n:root {\n  --md-outlined-select-text-field-outline-color: #6e7979;\n  --md-outlined-select-text-field-container-shape: 0px;\n  --md-outlined-select-text-field-input-text-color: #005353;\n  --md-outlined-select-text-field-input-text-font: system-ui;\n}\n\nmd-outlined-select::part(menu) {\n  --md-menu-container-color: #f4fbfa;\n  --md-menu-container-shape: 0px;\n}\n</style>\n\n<md-outlined-select>\n  <md-select-option selected value=\"apple\">\n    <div slot=\"headline\">Apple</div>\n  </md-select-option>\n  <md-select-option value=\"tomato\">\n    <div slot=\"headline\">Tomato</div>\n  </md-select-option>\n</md-outlined-select>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdFilledSelect <code>&lt;md-filled-select&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `quick` | `quick` | `boolean` | `false` | Opens the menu synchronously with no animation. |\n| `required` | `required` | `boolean` | `false` | Whether or not the select is required. |\n| `errorText` | `error-text` | `string` | `''` | The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.<br>This error message overrides the error message displayed by `reportValidity()`. |\n| `label` | `label` | `string` | `''` | The floating label for the field. |\n| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the select is required. |\n| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the select, such as how it should be used. |\n| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the select is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |\n| `menuPositioning` | `menu-positioning` | `string` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute.<br>position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |\n| `clampMenuWidth` | `clamp-menu-width` | `boolean` | `false` | Clamps the menu-width to the width of the select. |\n| `typeaheadDelay` | `typeahead-delay` | `number` | `DEFAULT_TYPEAHEAD_BUFFER_TIME` | The max time between the keystrokes of the typeahead select / menu behavior before it clears the typeahead buffer. |\n| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |\n| `displayText` | `display-text` | `string` | `''` | Text to display in the field. Only set for SSR. |\n| `menuAlign` | `menu-align` | `string` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |\n| `value` | `value` | `string` | `undefined` |  |\n| `selectedIndex` | `selected-index` | `number` | `undefined` |  |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n| `options` |  | `SelectOption[]` | `undefined` |  |\n| `selectedOptions` |  | `SelectOption[]` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `select` | `value` | `void` | Selects an option given the value of the option, and updates MdSelect's value. |\n| `selectIndex` | `index` | `void` | Selects an option given the index of the option, and updates MdSelect's value. |\n| `reset` | _None_ | `void` | Reset the select to its default value. |\n| `showPicker` | _None_ | `void` | Shows the picker. If it's already open, this is a no-op. |\n| `getUpdateComplete` | _None_ | `Promise<boolean>` |  |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n| `click` | _None_ | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |\n| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |\n| `opening` | `Event` | No | No | Fired when the select's menu is about to open. |\n| `opened` | `Event` | No | No | Fired when the select's menu has finished animations and opened. |\n| `closing` | `Event` | No | No | Fired when the select's menu is about to close. |\n| `closed` | `Event` | No | No | Fired when the select's menu has finished animations and closed. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdOutlinedSelect <code>&lt;md-outlined-select&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `quick` | `quick` | `boolean` | `false` | Opens the menu synchronously with no animation. |\n| `required` | `required` | `boolean` | `false` | Whether or not the select is required. |\n| `errorText` | `error-text` | `string` | `''` | The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.<br>This error message overrides the error message displayed by `reportValidity()`. |\n| `label` | `label` | `string` | `''` | The floating label for the field. |\n| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the select is required. |\n| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the select, such as how it should be used. |\n| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the select is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |\n| `menuPositioning` | `menu-positioning` | `string` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute.<br>position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |\n| `clampMenuWidth` | `clamp-menu-width` | `boolean` | `false` | Clamps the menu-width to the width of the select. |\n| `typeaheadDelay` | `typeahead-delay` | `number` | `DEFAULT_TYPEAHEAD_BUFFER_TIME` | The max time between the keystrokes of the typeahead select / menu behavior before it clears the typeahead buffer. |\n| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |\n| `displayText` | `display-text` | `string` | `''` | Text to display in the field. Only set for SSR. |\n| `menuAlign` | `menu-align` | `string` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |\n| `value` | `value` | `string` | `undefined` |  |\n| `selectedIndex` | `selected-index` | `number` | `undefined` |  |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n| `options` |  | `SelectOption[]` | `undefined` |  |\n| `selectedOptions` |  | `SelectOption[]` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `select` | `value` | `void` | Selects an option given the value of the option, and updates MdSelect's value. |\n| `selectIndex` | `index` | `void` | Selects an option given the index of the option, and updates MdSelect's value. |\n| `reset` | _None_ | `void` | Reset the select to its default value. |\n| `showPicker` | _None_ | `void` | Shows the picker. If it's already open, this is a no-op. |\n| `getUpdateComplete` | _None_ | `Promise<boolean>` |  |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n| `click` | _None_ | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |\n| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |\n| `opening` | `Event` | No | No | Fired when the select's menu is about to open. |\n| `opened` | `Event` | No | No | Fired when the select's menu has finished animations and opened. |\n| `closing` | `Event` | No | No | Fired when the select's menu is about to close. |\n| `closed` | `Event` | No | No | Fired when the select's menu has finished animations and closed. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdSelectOption <code>&lt;md-select-option&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |\n| `selected` | `selected` | `boolean` | `false` | Sets the item in the selected visual state when a submenu is opened. |\n| `value` | `value` | `string` | `''` | Form value of the option. |\n| `type` |  | `string` | `'option' as const` |  |\n| `typeaheadText` |  | `string` | `undefined` |  |\n| `displayText` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `close-menu` | `CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>` | Yes | Yes | Closes the encapsulating menu on closable interaction. |\n| `request-selection` | `Event` | Yes | Yes | Requests the parent md-select to select this element (and deselect others if single-selection) when `selected` changed to `true`. |\n| `request-deselection` | `Event` | Yes | Yes | Requests the parent md-select to deselect this element when `selected` changed to `false`. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/slider.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Sliders\ndirname: slider\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Sliders\n\n<!-- no-catalog-start -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'material-web-team' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-slider -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/slider/)**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Sliders](https://m3.material.io/components/sliders)<!-- {.external} --> allow users to\nview and select a value (or range) along a track. They're ideal for adjusting\nsettings such as volume and brightness, or for applying image filters.\n\nSliders can use icons or labels to represent a numeric or relative scale.\n\n</catalog-component-header-title>\n\n<img\n    class=\"hero\"\n    alt=\"Sound settings screen with sliders labeled 'Media volume', and 'Call volume'.\"\n    src=\"images/slider/hero.webp\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/sliders) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/slider)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname, previewHeight=650 %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nSliders may be continuous or discrete, and may also represent a range.\n\n```html\n<md-slider></md-slider>\n<md-slider ticks value=\"50\"></md-slider>\n<md-slider range value-start=\"25\" value-end=\"75\"></md-slider>\n```\n\n### Continuous\n\nAllows users to select a value along a subjective range.\n\n```html\n<md-slider min=\"0\" max=\"100\" value=\"50\"></md-slider>\n```\n\n### Discrete\n\nAllows users to select a specific value from a predetermined range. Tick marks\nmay be used to indicate available values.\n\n```html\n<md-slider step=\"5\" ticks min=\"0\" max=\"20\"></md-slider>\n```\n\n### Range\n\nA range slider has two handles, and indicates a minimum and maximum value in a\nrange.\n\n```html\n<md-slider range value-start=\"25\" value-end=\"50\"></md-slider>\n```\n\n### Value label\n\nA value label displays the specific value that corresponds with the handle's\nplacement.\n\nThe label appears when the handle is selected. For range sliders, labels appear\nwhen either handle is selected.\n\n```html\n<md-slider labeled></md-slider>\n```\n\n<!-- TODO(b/318567101): ## Accessibility -->\n\n## Theming\n\nSlider supports [Material theming](../theming/README.md) and can be customized\nin terms of color and shape.\n\n### Tokens\n\nToken                              | Default value\n---------------------------------- | ------------------------------------------\n`--md-slider-active-track-color`   | `--md-sys-color-primary`\n`--md-slider-active-track-shape`   | `--md-sys-shape-corner-full`\n`--md-slider-inactive-track-color` | `--md-sys-color-surface-container-highest`\n`--md-slider-inactive-track-shape` | `--md-sys-shape-corner-full`\n`--md-slider-handle-color`         | `--md-sys-color-primary`\n`--md-slider-handle-shape`         | `--md-sys-shape-corner-full`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-slider.scss)\n    <!-- {.external} -->\n\n### Example\n\n<!-- no-catalog-start -->\n\n![Image of a slider with a different theme applied](images/slider/theming.webp \"Slider theming example.\")\n\n<!-- no-catalog-end -->\n\n```html\n<style>\n:root {\n  /* System tokens */\n  --md-sys-color-primary: #006A6A;\n\n  /* Component tokens */\n  --md-slider-handle-shape: 0px;\n}\n</style>\n\n<md-slider\n  range\n  value-start=\"25\"\n  value-end=\"75\"\n  ticks\n  step=\"5\"\n></md-slider>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdSlider <code>&lt;md-slider&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `min` | `min` | `number` | `0` | The slider minimum value |\n| `max` | `max` | `number` | `100` | The slider maximum value |\n| `value` | `value` | `number` | `undefined` | The slider value displayed when range is false. |\n| `valueStart` | `value-start` | `number` | `undefined` | The slider start value displayed when range is true. |\n| `valueEnd` | `value-end` | `number` | `undefined` | The slider end value displayed when range is true. |\n| `valueLabel` | `value-label` | `string` | `''` | An optional label for the slider's value displayed when range is false; if not set, the label is the value itself. |\n| `valueLabelStart` | `value-label-start` | `string` | `''` | An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself. |\n| `valueLabelEnd` | `value-label-end` | `string` | `''` | An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself. |\n| `ariaLabelStart` | `aria-label-start` | `string` | `''` | Aria label for the slider's start handle displayed when range is true. |\n| `ariaValueTextStart` | `aria-valuetext-start` | `string` | `''` | Aria value text for the slider's start value displayed when range is true. |\n| `ariaLabelEnd` | `aria-label-end` | `string` | `''` | Aria label for the slider's end handle displayed when range is true. |\n| `ariaValueTextEnd` | `aria-valuetext-end` | `string` | `''` | Aria value text for the slider's end value displayed when range is true. |\n| `step` | `step` | `number` | `1` | The step between values. |\n| `ticks` | `ticks` | `boolean` | `false` | Whether or not to show tick marks. |\n| `labeled` | `labeled` | `boolean` | `false` | Whether or not to show a value label when activated. |\n| `range` | `range` | `boolean` | `false` | Whether or not to show a value range. When false, the slider displays a slideable handle for the value property; when true, it displays slideable handles for the valueStart and valueEnd properties. |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n| `nameStart` |  | `string` | `undefined` |  |\n| `nameEnd` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |\n| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/switch.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Switch\ndirname: switch\n-----><!-- catalog-only-end -->\n\n<catalog-component-header>\n<catalog-component-header-title slot=\"title\">\n\n# Switch\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- no-catalog-start -->\n\n<!-- go/md-switch -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/switch/).**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Switches](https://m3.material.io/components/switch)<!-- {.external} --> toggle the state\nof an item on or off.\n\n</catalog-component-header-title>\n\n<img\n    class=\"hero\"\n    src=\"images/switch/hero.webp\"\n    alt=\"Two switches on a settings page for Wi-Fi and Bluetooth. The first is on and the second is off.\"\n    title=\"Switches on a settings page.\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/switch) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/switch)\n    <!-- {.external} -->\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nSwitches are similar to checkboxes, and can be unselected or selected.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-switch></md-switch>\n<md-switch selected></md-switch>\n```\n\n### Icons\n\nIcons can be used to visually emphasize the switch's selected state. Switches\ncan choose to display both icons or only selected icons.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-switch icons></md-switch>\n<md-switch icons selected></md-switch>\n\n<md-switch icons show-only-selected-icon></md-switch>\n<md-switch icons show-only-selected-icon selected></md-switch>\n```\n\n### Label\n\nAssociate a label with a switch using the `<label>` element.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<label>\n  Wi-Fi\n  <md-switch selected></md-switch>\n</label>\n\n<label for=\"switch\">Bluetooth</label>\n<md-switch id=\"switch\"></md-switch>\n```\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to switches without labels or switches whose labels need to be more\ndescriptive.\n\n```html\n<md-switch aria-label=\"Lights\"></md-switch>\n\n<label>\n  All\n  <md-switch aria-label=\"All notifications\"></md-switch>\n</label>\n```\n\n> Note: switches are not automatically labelled by `<label>` elements and always\n> need an `aria-label`. See b/294081528.\n\n## Theming\n\nSwitches supports [Material theming](../theming/README.md) and can be customized\nin terms of color and shape.\n\n### Tokens\n\nToken                               | Default value\n----------------------------------- | ------------------------------------------\n`--md-switch-handle-color`          | `--md-sys-color-outline`\n`--md-switch-handle-shape`          | `--md-sys-shape-corner-full`\n`--md-switch-track-color`           | `--md-sys-color-surface-container-highest`\n`--md-switch-track-shape`           | `--md-sys-shape-corner-full`\n`--md-switch-selected-handle-color` | `--md-sys-color-on-primary`\n`--md-switch-selected-track-color`  | `--md-sys-color-primary`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-switch.scss)\n    <!-- {.external} -->\n\n### Example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<style>\n  :root {\n    /* System tokens */\n    --md-sys-color-primary: #006a6a;\n    --md-sys-color-on-primary: #ffffff;\n    --md-sys-color-outline: #6f7979;\n    --md-sys-color-surface-container-highest: #dde4e3;\n\n    /* Component tokens */\n    --md-switch-handle-shape: 0px;\n    --md-switch-track-shape: 0px;\n  }\n</style>\n\n<md-switch></md-switch>\n<md-switch selected></md-switch>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdSwitch <code>&lt;md-switch&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `selected` | `selected` | `boolean` | `false` | Puts the switch in the selected state and sets the form submission value to the `value` property. |\n| `icons` | `icons` | `boolean` | `false` | Shows both the selected and deselected icons. |\n| `showOnlySelectedIcon` | `show-only-selected-icon` | `boolean` | `false` | Shows only the selected icon, and not the deselected icon. If `true`, overrides the behavior of the `icons` property. |\n| `required` | `required` | `boolean` | `false` | When true, require the switch to be selected when participating in form submission.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation |\n| `value` | `value` | `string` | `'on'` | The value associated with this switch on form submission. `null` is submitted when `selected` is `false`. |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `input` | `InputEvent` | No | No | Fired whenever `selected` changes due to user interaction (bubbles and composed). |\n| `change` | `Event` | No | No | Fired whenever `selected` changes due to user interaction (bubbles). |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/tabs.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Tabs\ndirname: tabs\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Tabs\n\n<!-- no-catalog-start -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- go/md-tabs -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/tabs/)**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Tabs](https://m3.material.io/components/tabs)<!-- {.external} --> organize groups of\nrelated content that are at the same level of hierarchy.\n\n</catalog-component-header-title>\n\n<img\n  class=\"hero\"\n  src=\"images/tabs/hero.webp\"\n  alt=\"Media gallery screen with tabs labeled 'Video', 'Photos', and 'Audio'.\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/tabs) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/tabs)\n    <!-- {.external} -->\n\n## Types\n\n1.  [Primary tabs](#primary-tabs)\n1.  [Secondary tabs](#secondary-tabs)\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nTabs contain multiple primary or secondary tab children. Use the same type of\ntab in a tab bar.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-tabs>\n  <md-primary-tab>Video</md-primary-tab>\n  <md-primary-tab>Photos</md-primary-tab>\n  <md-primary-tab>Audio</md-primary-tab>\n</md-tabs>\n\n<md-tabs>\n  <md-secondary-tab>Birds</md-secondary-tab>\n  <md-secondary-tab>Cats</md-secondary-tab>\n  <md-secondary-tab>Dogs</md-secondary-tab>\n</md-tabs>\n```\n\n### Selection\n\nAdd an `active` attribute to change which tab is selected.\n\n```html\n<md-tabs>\n  <md-primary-tab>Video</md-primary-tab>\n  <md-primary-tab active>Photos</md-primary-tab>\n  <md-primary-tab>Audio</md-primary-tab>\n</md-tabs>\n```\n\nTo observe changes to tab selections, add an event listener to `<md-tabs>`,\nlistening for the `change` event.\n\n```ts\ntabs.addEventListener('change', (event: Event) => {\n  if (event.target.activeTabIndex === 2) {\n    // ... perform logic only if index of selected item is 2.\n  }\n});\n```\n\n### Icons\n\nTabs may optionally show an icon.\n\nIcons communicate the type of content within a tab. Icons should be simple and\nrecognizable.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-tabs>\n  <md-primary-tab>\n    <md-icon slot=\"icon\">piano</md-icon>\n    Keyboard\n  </md-primary-tab>\n  <md-primary-tab>\n    <md-icon slot=\"icon\">tune</md-icon>\n    Guitar\n  </md-primary-tab>\n</md-tabs>\n```\n\nTabs may optionally show icons without a label.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-tabs>\n  <md-primary-tab>\n    <md-icon slot=\"icon\">piano</md-icon>\n  </md-primary-tab>\n  <md-primary-tab>\n    <md-icon slot=\"icon\">tune</md-icon>\n  </md-primary-tab>\n</md-tabs>\n```\n\n## Primary tabs\n\n<!-- go/md-primary-tab -->\n\nPrimary tabs are placed at the top of the content pane under a top app bar. They\ndisplay the main content destinations.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-tabs>\n  <md-primary-tab>\n    <md-icon slot=\"icon\">piano</md-icon>\n    Keyboard\n  </md-primary-tab>\n  <md-primary-tab>\n    <md-icon slot=\"icon\">tune</md-icon>\n    Guitar\n  </md-primary-tab>\n</md-tabs>\n```\n\n### Inline icons\n\nPrimary tabs can show their icons inline, like secondary tabs.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-tabs>\n  <md-primary-tab inline-icon>\n    <md-icon slot=\"icon\">piano</md-icon>\n    Keyboard\n  </md-primary-tab>\n  <md-primary-tab inline-icon>\n    <md-icon slot=\"icon\">tune</md-icon>\n    Guitar\n  </md-primary-tab>\n</md-tabs>\n```\n\n## Secondary tabs\n\n<!-- go/md-secondary-tab -->\n\nSecondary tabs are used within a content area to further separate related\ncontent and establish hierarchy.\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n<!-- Need to add catalog-include \"figures/<component>/usage.html\" -->\n\n```html\n<md-tabs>\n  <md-secondary-tab>\n    <md-icon slot=\"icon\">flight</md-icon>\n    Travel\n  </md-secondary-tab>\n  <md-secondary-tab>\n    <md-icon slot=\"icon\">hotel</md-icon>\n    Hotel\n  </md-secondary-tab>\n  <md-secondary-tab>\n    <md-icon slot=\"icon\">hiking</md-icon>\n    Activities\n  </md-secondary-tab>\n</md-tabs>\n```\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to `<md-tabs>` and any individual tab whose label needs to be more\ndescriptive, such as icon-only tabs.\n\n```html\n<md-tabs aria-label=\"Content to view\">\n  <md-primary-tab aria-label=\"Photos\">\n    <md-icon slot=\"icon\">photo</md-icon>\n  </md-primary-tab>\n  <md-primary-tab aria-label=\"Videos\">\n    <md-icon slot=\"icon\">videocam</md-icon>\n  </md-primary-tab>\n  <md-primary-tab aria-label=\"Music\">\n    <md-icon slot=\"icon\">audiotrack</md-icon>\n  </md-primary-tab>\n</md-tabs>\n```\n\n### Tab panels\n\nEvery tab must reference a\n[`role=\"tabpanel\"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)<!-- {.external} -->\nelement with `aria-controls`. Tab panels must be labelled with `aria-label` or\n`aria-labelledby`.\n\nIt's common to reference the panel's tab with `aria-labelledby`.\n\n```html\n<md-tabs aria-label=\"Content to view\">\n  <md-primary-tab id=\"photos-tab\" aria-controls=\"photos-panel\">\n    Photos\n  </md-primary-tab>\n  <md-primary-tab id=\"videos-tab\" aria-controls=\"videos-panel\">\n    Videos\n  </md-primary-tab>\n  <md-primary-tab id=\"music-tab\" aria-controls=\"music-panel\">\n    Music\n  </md-primary-tab>\n</md-tabs>\n\n<div id=\"photos-panel\" role=\"tabpanel\" aria-labelledby=\"photos-tab\">\n  ...\n</div>\n<div id=\"videos-panel\" role=\"tabpanel\" aria-labelledby=\"videos-tab\" hidden>\n  ...\n</div>\n<div id=\"music-panel\" role=\"tabpanel\" aria-labelledby=\"music-tab\" hidden>\n  ...\n</div>\n```\n\n## Theming\n\nTabs supports [Material theming](../theming/README.md) and can be customized in\nterms of color, typography, and shape.\n\n### Primary tab tokens\n\nToken                                     | Default value\n----------------------------------------- | -------------\n`--md-primary-tab-container-color`        | `--md-sys-color-surface`\n`--md-primary-tab-label-text-font`        | `--md-sys-typescale-title-small-font`\n`--md-primary-tab-active-indicator-color` | `--md-sys-color-primary`\n`--md-primary-tab-icon-color`             | `--md-sys-color-on-surface-variant`\n`--md-primary-tab-container-shape`        | `--md-sys-shape-corner-none`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-primary-tab.scss)\n    <!-- {.external} -->\n\n### Primary tab example\n\n<!-- no-catalog-start -->\n\n![Image of tabs with a different theme applied](images/tabs/theming.webp \"Tab theming example.\")\n\n<!-- no-catalog-end -->\n\n```html\n<style>\n:root {\n  /* System tokens */\n  --md-sys-color-surface: #f7faf9;\n  --md-sys-color-primary: #005353;\n\n  /* Component tokens */\n  --md-primary-tab-label-text-font: cursive, system-ui;\n  --md-primary-tab-label-text-size: 0.8em;\n}\n</style>\n\n<md-tabs>\n  <md-primary-tab>Tab 1</md-primary-tab>\n  <md-primary-tab>Tab 2</md-primary-tab>\n  <md-primary-tab>Tab 3</md-primary-tab>\n</md-tabs>\n```\n\n### Secondary tab tokens\n\nToken                                       | Default value\n------------------------------------------- | -------------\n`--md-secondary-tab-container-color`        | `--md-sys-color-surface`\n`--md-secondary-tab-label-text-font`        | `--md-sys-typescale-title-small-font`\n`--md-secondary-tab-active-indicator-color` | `--md-sys-color-primary`\n`--md-secondary-tab-icon-color`             | `--md-sys-color-on-surface-variant`\n`--md-secondary-tab-container-shape`        | `--md-sys-shape-corner-none`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-secondary-tab.scss)\n    <!-- {.external} -->\n\n### Secondary tab example\n\n<!-- no-catalog-start -->\n<!-- Need to add image -->\n<!-- no-catalog-end -->\n\n```html\n<style>\n:root {\n  /* System tokens */\n  --md-sys-color-surface: #f7faf9;\n  --md-sys-color-primary: #005353;\n\n  /* Component tokens */\n  --md-secondary-tab-label-text-font: cursive, system-ui;\n  --md-secondary-tab-label-text-size: 0.8em;\n}\n</style>\n\n<md-tabs>\n  <md-secondary-tab>Tab 1</md-secondary-tab>\n  <md-secondary-tab>Tab 2</md-secondary-tab>\n  <md-secondary-tab>Tab 3</md-secondary-tab>\n</md-tabs>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdTabs <code>&lt;md-tabs&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `autoActivate` | `auto-activate` | `boolean` | `false` | Whether or not to automatically select a tab when it is focused. |\n| `activeTabIndex` | `active-tab-index` | `number` | `undefined` |  |\n| `tabs` |  | `Tab[]` | `undefined` | The tabs of this tab bar. |\n| `activeTab` |  | `Tab` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `scrollToTab` | `tabToScrollTo` | `Promise<void>` | Scrolls the toolbar, if overflowing, to the active tab, or the provided tab. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `change` | `Event` | Yes | No | Fired when the selected tab changes. The target's `activeTabIndex` or `activeTab` provide information about the selection change. The change event is fired when a user interaction like a space/enter key or click cause a selection change. The tab selection based on these actions can be cancelled by calling preventDefault on the triggering `keydown` or `click` event. |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdPrimaryTab <code>&lt;md-primary-tab&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `inlineIcon` | `inline-icon` | `boolean` | `false` | Whether or not the icon renders inline with label or stacked vertically. |\n| `isTab` | `md-tab` | `boolean` | `true` | The attribute `md-tab` indicates that the element is a tab for the parent element, `<md-tabs>`. Make sure if you're implementing your own `md-tab` component that you have an `md-tab` attribute set. |\n| `active` | `active` | `boolean` | `false` | Whether or not the tab is selected. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | In SSR, set this to true when an icon is present. |\n| `iconOnly` | `icon-only` | `boolean` | `false` | In SSR, set this to true when there is no label and only an icon. |\n| `selected` | `selected` | `boolean` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdSecondaryTab <code>&lt;md-secondary-tab&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `isTab` | `md-tab` | `boolean` | `true` | The attribute `md-tab` indicates that the element is a tab for the parent element, `<md-tabs>`. Make sure if you're implementing your own `md-tab` component that you have an `md-tab` attribute set. |\n| `active` | `active` | `boolean` | `false` | Whether or not the tab is selected. |\n| `hasIcon` | `has-icon` | `boolean` | `false` | In SSR, set this to true when an icon is present. |\n| `iconOnly` | `icon-only` | `boolean` | `false` | In SSR, set this to true when there is no label and only an icon. |\n| `selected` | `selected` | `boolean` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/components/text-field.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Text field\ndirname: textfield\n-----><!-- catalog-only-end -->\n\n<catalog-component-header image-align=\"start\">\n<catalog-component-header-title slot=\"title\">\n\n# Text field\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:reference'\n*-->\n\n<!-- no-catalog-start -->\n\n<!-- go/md-text-field -->\n\n<!-- [TOC] -->\n\n<!-- external-only-start -->\n**This documentation is fully rendered on the\n[Material Web catalog](https://material-web.dev/components/text-field/)**\n<!-- external-only-end -->\n\n<!-- no-catalog-end -->\n\n[Text fields](https://m3.material.io/components/text-fields)<!-- {.external} --> let\nusers enter text into a UI.\n\n</catalog-component-header-title>\n\n<img class=\"hero\" src=\"images/textfield/hero.webp\" alt=\"Several text fields in a form\"\ntitle=\"Text fields\">\n\n</catalog-component-header>\n\n*   [Design article](https://m3.material.io/components/text-fields) <!-- {.external} -->\n*   [API Documentation](#api)\n*   [Source code](https://github.com/material-components/material-web/tree/main/textfield)\n    <!-- {.external} -->\n\n## Types\n\n1.  [Filled text field](#filled-text-field)\n1.  [Outlined text field](#outlined-text-field)\n\n<!-- catalog-only-start -->\n\n<!--\n\n## Interactive Demo\n\n{% playgroundexample dirname=dirname %}\n\n-->\n\n<!-- catalog-only-end -->\n\n## Usage\n\nText fields behave like\n[`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)<!-- {.external} -->\nelements. They provide a container with labels for user input.\n\n<!-- no-catalog-start -->\n\n![A filled textfield next to an outlined textfield. Both have a value of Value\nprefilled](images/textfield/usage.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage.html\" -->\n\n```html\n<md-filled-text-field label=\"Label\" value=\"Value\">\n</md-filled-text-field>\n\n<md-outlined-text-field label=\"Label\" value=\"Value\">\n</md-outlined-text-field>\n```\n\n### Input type\n\nA text field's `type` attribute changes how the text field works, such as\ndisplaying a different keyboard or providing default validation.\n\n-   [`type=\"text\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)<!-- {.external} -->\n    (default)\n-   [`type=\"email\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email)\n    <!-- {.external} -->\n-   [`type=\"number\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)\n    <!-- {.external} -->\n-   [`type=\"password\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)\n    <!-- {.external} -->\n-   [`type=\"search\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)\n    <!-- {.external} -->\n-   [`type=\"tel\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel)\n    <!-- {.external} -->\n-   [`type=\"url\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url)\n    <!-- {.external} -->\n-   [`type=\"textarea\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)\n    <!-- {.external} -->\n\n<!-- no-catalog-start -->\n\n![Two filled textfields next to each other. The first has a label of Username\nand the outlined one has a label of Password](images/textfield/usage-type.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage-type.html\" -->\n\n```html\n<md-filled-text-field label=\"Username\" type=\"email\">\n</md-filled-text-field>\n\n<md-filled-text-field label=\"Password\" type=\"password\">\n</md-filled-text-field>\n```\n\n> Tip: use the\n> [`inputmode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)<!-- {.external} -->\n> attribute for more control over the displayed keyboard.\n\n### Labels\n\nText fields should label their value with a floating `label`, a `placeholder`,\nor an external label. Labels help the user understand what value to input.\n\n<!-- no-catalog-start -->\n\n![Three outlined textfields next to each other. the first has a label of\nFavorite food, the second one a placeholder of email@domain.com and there is a\nlabel that says First name and an empty outlined textfield next to\nit](images/textfield/usage-label.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage-label.html\" -->\n\n```html\n<md-outlined-text-field label=\"Favorite food\">\n</md-outlined-text-field>\n\n<md-outlined-text-field placeholder=\"email@domain.com\">\n</md-outlined-text-field>\n\n<div>First name</div>\n<md-outlined-text-field aria-label=\"First name\">\n</md-outlined-text-field>\n```\n\n> Note: text fields do not currently support `aria-labelledby`. External labels\n> must provide an `aria-label`. See b/276484803.\n\n### Textarea\n\nMulti-line text fields behave like\n[`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)<!-- {.external} -->\nelements.\n\nTextareas can specify the initial number of `rows`. Use CSS `width`, `height`,\nand `resize` to control the resize behavior of a textarea.\n\n<!-- no-catalog-start -->\n\n![A filled textarea that is vertically larger and has a label that says Vertical\nresize](images/textfield/usage-textarea.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage-textarea.html\" -->\n\n```html\n<style>\n  md-filled-text-field {\n    resize: vertical;\n  }\n</style>\n<md-filled-text-field\n    type=\"textarea\"\n    label=\"Vertical resize\"\n    rows=\"3\">\n</md-filled-text-field>\n```\n\n### Icons\n\nText fields may display optional icons. Use icons to describe the input method\n(such as a search icon), provide additional functionality (such as a clear\nicon), or to express errors.\n\n<!-- no-catalog-start -->\n\n![Three outlined textfields next to each other the first has a search icon at\nthe start the label Search Messages, the second a label that says Password and\nan eye icon toggle button at the end, and a red, visually errored outlined\ntextfield with the label Username with an exclamation icon at the end and helper\nerror text under the field that says Username not\navailable](images/textfield/usage-icons.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage-icons.html\" -->\n\n```html\n<md-outlined-text-field placeholder=\"Search for messages\">\n  <md-icon slot=\"leading-icon\">search</md-icon>\n</md-outlined-text-field>\n\n<md-outlined-text-field label=\"Password\" type=\"password\">\n  <md-icon-button toggle slot=\"trailing-icon\">\n    <md-icon>visibility</md-icon>\n    <md-icon slot=\"selected\">visibility_off</md-icon>\n  </md-icon-button>\n</md-outlined-text-field>\n\n<md-outlined-text-field\n    label=\"Username\"\n    error\n    error-text=\"Username not available\">\n  <md-icon slot=\"trailing-icon\">error</md-icon>\n</md-outlined-text-field>\n```\n\n### Prefix and suffix\n\nAdd `prefix-text` and `suffix-text` attributes to text fields to display\nadditional context for the value.\n\n<!-- no-catalog-start -->\n\n![An outlined textfield with a floating label that says Dollar amount, a prefix\ndollar sign, the number zero as a value and a suffix of decimal zero zero at the\nend of the field](images/textfield/usage-prefix.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage-prefix.html\" -->\n\n```html\n<md-outlined-text-field\n    label=\"Dollar amount\"\n    type=\"number\"\n    value=\"0\"\n    prefix-text=\"$\"\n    suffix-text=\".00\">\n</md-outlined-text-field>\n```\n\n### Supporting text\n\nSupporting text conveys additional information about the input field, such as\nhow it will be used. Supporting text can be replaced with error text when\n[validating](#validation).\n\n<!-- no-catalog-start -->\n\n![Two filled fields next to each other. The first has a label that says comments\nand supporting text under the field that says Provide comments for the issue.\nThe second field has a label of Name with an asterisk and supporting text under\nthe field that has an asterisk followed by the word\nrequired](images/textfield/usage-supporting-text.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage-supporting-text.html\" -->\n\n```html\n<md-filled-text-field\n    label=\"Comments\"\n    supporting-text=\"Provide comments for the issue\">\n</md-filled-text-field>\n\n<md-filled-text-field\n    label=\"Name\"\n    required\n    supporting-text=\"*required\"\n    error-text=\"Please fill out this field\">\n</md-filled-text-field>\n```\n\n### Character counter\n\nText fields with a `maxlength` attribute will display a character counter.\n\n<!-- no-catalog-start -->\n\n![An outlined textfield with a floating label that says Title and a filled value\nthat says Short and the text 5 / 10 under the field at the\nend](images/textfield/usage-char-counter.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/usage-char-counter.html\" -->\n\n```html\n<md-outlined-text-field label=\"Title\" value=\"Short\" maxlength=\"10\">\n</md-outlined-text-field>\n```\n\n### Validation\n\nText fields that validate can use\n[constraint validation](#constraint-validation) or\n[manual validation](#manual-validation).\n\n#### Constraint validation\n\nText fields may validate using the browser's\n[constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation)<!-- {.external} -->\nAPI. Each [input type](#input-type) above links to an article that describes how\nto validate it.\n\nText fields in a `<form>` will validate on submission, or by calling\n`textField.reportValidity()`.\n\n```html\n<form>\n  <md-filled-text-field\n      name=\"name\"\n      label=\"Name\"\n      required>\n  </md-filled-text-field>\n  <md-filled-text-field\n      name=\"email\"\n      label=\"Email\"\n      pattern=\"[\\w\\d-]+\"\n      suffix-text=\"@gmail.com\">\n  </md-filled-text-field>\n</form>\n```\n\nUse the following properties and methods to check and report validation errors.\n\n-   `validity` is the text field's current\n    [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)<!-- {.external} -->.\n-   [`setCustomValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity)<!-- {.external} -->\n    sets a custom error message.\n-   [`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)<!-- {.external} -->\n    dispatches an\n    [`invalid` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)<!-- {.external} -->.\n-   [`reportValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)<!-- {.external} -->\n    dispatches an\n    [`invalid` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)<!-- {.external} -->\n    and displays the error in the text field's supporting text.\n\n#### Manual validation\n\nAlternatively, text fields can manually control their error state and error\nmessage. Use manual validation if the text fields are driven by application\nstate logic.\n\n```html\n<md-outlined-text-field\n    label=\"Username\"\n    value=\"jdoe\"\n    error\n    error-text=\"Username is not available\">\n</md-outlined-text-field>\n```\n\n> Tip: Prefer [constraint validation](#constraint-validation) when possible for\n> more platform features, such as `<form>` validation and listening to `invalid`\n> events.\n\n## Accessibility\n\nAdd an\n[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->\nattribute to text fields with external labels or text fields whose labels need\nto be more descriptive.\n\n```html\n<div>Username</div>\n<md-filled-text-field aria-label=\"Username\"></md-filled-text-field>\n\n<md-filled-text-field label=\"First\" aria-label=\"First name\"></md-filled-text-field>\n```\n\n## Filled text field\n\n<!-- go/md-filled-text-field -->\n\nFilled and outlined text fields are functionally identical. See\n[choosing a text field](https://m3.material.io/components/text-fields/guidelines#83956188-4d8f-4c11-9389-aaba30b10214)<!-- {.external} -->\nfor guidance on which one to use.\n\n```html\n<md-filled-text-field label=\"Filled\" value=\"Value\"></md-filled-text-field>\n```\n\n## Outlined text field\n\n<!-- go/md-outlined-text-field -->\n\nFilled and outlined text fields are functionally identical. See\n[choosing a text field](https://m3.material.io/components/text-fields/guidelines#83956188-4d8f-4c11-9389-aaba30b10214)<!-- {.external} -->\nfor guidance on which one to use.\n\n```html\n<md-outlined-text-field label=\"Outlined\" value=\"Value\"></md-outlined-text-field>\n```\n\n## Theming\n\nText fields support [Material theming](../theming/README.md) and can be\ncustomized in terms of color, typography, and shape.\n\n### Filled text field tokens\n\nToken                                                 | Default value\n----------------------------------------------------- | -------------\n`--md-filled-text-field-container-shape`              | `--md-sys-shape-corner-extra-small`\n`--md-filled-text-field-container-color`              | `--md-sys-color-surface-container-highest`\n`--md-filled-text-field-focus-active-indicator-color` | `--md-sys-color-primary`\n`--md-filled-text-field-input-text-font`              | `--md-sys-typescale-body-large-font`\n`--md-filled-text-field-label-text-font`              | `--md-sys-typescale-body-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-text-field.scss)\n    <!-- {.external} -->\n\n### Filled text field example\n\n<!-- no-catalog-start -->\n\n![A filled text field with the label filled themed to a greenish color](images/textfield/theming-filled.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/theming-filled.html\" -->\n\n```html\n<style>\n:root {\n  --md-filled-text-field-container-shape: 0px;\n  --md-sys-typescale-body-large: 400 1rem system-ui;\n  --md-sys-color-primary: #006a6a;\n  --md-sys-color-surface-container-highest: #e0e3e2;\n  --md-filled-text-field-label-text-color: #3f4948;\n  --md-filled-text-field-input-text-color: #161d1d;\n}\n</style>\n\n<md-filled-text-field label=\"Filled\" value=\"Value\">\n</md-filled-text-field>\n```\n\n### Outlined text field tokens\n\nToken                                          | Default value\n---------------------------------------------- | -------------\n`--md-outlined-text-field-container-shape`     | `--md-sys-shape-corner-extra-small`\n`--md-outlined-text-field-focus-outline-color` | `--md-sys-color-primary`\n`--md-outlined-text-field-input-text-font`     | `--md-sys-typescale-body-large-font`\n`--md-outlined-text-field-label-text-font`     | `--md-sys-typescale-body-large-font`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-text-field.scss)\n    <!-- {.external} -->\n\n### Outlined text field example\n\n<!-- no-catalog-start -->\n\n![An outlined text field with the label outlined themed to a greenish color](images/textfield/theming-outlined.webp)\n\n<!-- no-catalog-end -->\n<!-- catalog-include \"figures/textfield/theming-outlined.html\" -->\n\n```html\n<style>\n:root {\n  --md-outlined-text-field-container-shape: 0px;\n  --md-sys-typescale-body-large: 400 1rem system-ui;\n  --md-sys-color-primary: #006a6a;\n  --md-outlined-text-field-label-text-color: #3f4948;\n  --md-outlined-text-field-input-text-color: #161d1d;\n}\n</style>\n\n<md-outlined-text-field label=\"Outlined\" value=\"Value\"></md-outlined-text-field>\n```\n\n<!-- auto-generated API docs start -->\n\n## API\n\n\n### MdFilledTextField <code>&lt;md-filled-text-field&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the text field is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |\n| `errorText` | `error-text` | `string` | `''` | The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.<br>This error message overrides the error message displayed by `reportValidity()`. |\n| `label` | `label` | `string` | `''` | The floating Material label of the textfield component. It informs the user about what information is requested for a text field. It is aligned with the input text, is always visible, and it floats when focused or when text is entered into the textfield. This label also sets accessibilty labels, but the accessible label is overriden by `aria-label`.<br>Learn more about floating labels from the Material Design guidelines: https://m3.material.io/components/text-fields/guidelines |\n| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the text field is required. |\n| `required` | `required` | `boolean` | `false` | Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `\"*\"` when true.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required |\n| `value` | `value` | `string` | `''` | The current value of the text field. It is always a string. |\n| `prefixText` | `prefix-text` | `string` | `''` | An optional prefix to display before the input value. |\n| `suffixText` | `suffix-text` | `string` | `''` | An optional suffix to display after the input value. |\n| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |\n| `hasTrailingIcon` | `has-trailing-icon` | `boolean` | `false` | Whether or not the text field has a trailing icon. Used for SSR. |\n| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the text field, such as how it should be used. |\n| `textDirection` | `text-direction` | `string` | `''` | Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. |\n| `rows` | `rows` | `number` | `2` | The number of rows to display for a `type=\"textarea\"` text field. Defaults to 2. |\n| `cols` | `cols` | `number` | `20` | The number of cols to display for a `type=\"textarea\"` text field. Defaults to 20. |\n| `inputMode` | `inputmode` | `string` | `''` |  |\n| `max` | `max` | `string` | `''` | Defines the greatest value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max |\n| `maxLength` | `maxlength` | `number` | `-1` | The maximum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength |\n| `min` | `min` | `string` | `''` | Defines the most negative value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min |\n| `minLength` | `minlength` | `number` | `-1` | The minimum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength |\n| `noSpinner` | `no-spinner` | `boolean` | `false` | When true, hide the spinner for `type=\"number\"` text fields. |\n| `pattern` | `pattern` | `string` | `''` | A regular expression that the text field's value must match to pass constraint validation.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern |\n| `placeholder` | `placeholder` | `string` | `''` | Defines the text displayed in the textfield when it has no value. Provides a brief hint to the user as to the expected type of data that should be entered into the control. Unlike `label`, the placeholder is not visible and does not float when the textfield has a value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder |\n| `readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly |\n| `multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple |\n| `step` | `step` | `string` | `''` | Returns or sets the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step |\n| `type` | `type` | `string` | `'text'` | The `<input>` type to use, defaults to \"text\". The type greatly changes how the text field behaves.<br>Text fields support a limited number of `<input>` types:<br>- text - textarea - email - number - password - search - tel - url<br>See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |\n| `autocomplete` | `autocomplete` | `string` | `''` | Describes what, if any, type of autocomplete functionality the input should provide.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n| `selectionDirection` |  | `string` | `undefined` |  |\n| `selectionEnd` |  | `number` | `undefined` |  |\n| `selectionStart` |  | `number` | `undefined` |  |\n| `valueAsNumber` |  | `number` | `undefined` |  |\n| `valueAsDate` |  | `Date` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `select` | _None_ | `void` | Selects all the text in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select |\n| `setRangeText` | `args` | `void` |  |\n| `setSelectionRange` | `start`, `end`, `direction` | `void` | Sets the start and end positions of a selection in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange |\n| `showPicker` | _None_ | `void` | Shows the browser picker for an input element of type \"date\", \"time\", etc.<br>For a full list of supported types, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker |\n| `stepDown` | `stepDecrement` | `void` | Decrements the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown |\n| `stepUp` | `stepIncrement` | `void` | Increments the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp |\n| `reset` | _None_ | `void` | Reset the text field to its default value. |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `select` | `Event` | Yes | No | The native `select` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event) |\n| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |\n| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n### MdOutlinedTextField <code>&lt;md-outlined-text-field&gt;</code>\n\n#### Properties\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Property | Attribute | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the text field is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`. |\n| `errorText` | `error-text` | `string` | `''` | The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.<br>This error message overrides the error message displayed by `reportValidity()`. |\n| `label` | `label` | `string` | `''` | The floating Material label of the textfield component. It informs the user about what information is requested for a text field. It is aligned with the input text, is always visible, and it floats when focused or when text is entered into the textfield. This label also sets accessibilty labels, but the accessible label is overriden by `aria-label`.<br>Learn more about floating labels from the Material Design guidelines: https://m3.material.io/components/text-fields/guidelines |\n| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the text field is required. |\n| `required` | `required` | `boolean` | `false` | Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when `reportValidity()` is invoked when value is empty. Additionally the floating label will render an asterisk `\"*\"` when true.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required |\n| `value` | `value` | `string` | `''` | The current value of the text field. It is always a string. |\n| `prefixText` | `prefix-text` | `string` | `''` | An optional prefix to display before the input value. |\n| `suffixText` | `suffix-text` | `string` | `''` | An optional suffix to display after the input value. |\n| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |\n| `hasTrailingIcon` | `has-trailing-icon` | `boolean` | `false` | Whether or not the text field has a trailing icon. Used for SSR. |\n| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the text field, such as how it should be used. |\n| `textDirection` | `text-direction` | `string` | `''` | Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions. |\n| `rows` | `rows` | `number` | `2` | The number of rows to display for a `type=\"textarea\"` text field. Defaults to 2. |\n| `cols` | `cols` | `number` | `20` | The number of cols to display for a `type=\"textarea\"` text field. Defaults to 20. |\n| `inputMode` | `inputmode` | `string` | `''` |  |\n| `max` | `max` | `string` | `''` | Defines the greatest value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max |\n| `maxLength` | `maxlength` | `number` | `-1` | The maximum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength |\n| `min` | `min` | `string` | `''` | Defines the most negative value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min |\n| `minLength` | `minlength` | `number` | `-1` | The minimum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength |\n| `noSpinner` | `no-spinner` | `boolean` | `false` | When true, hide the spinner for `type=\"number\"` text fields. |\n| `pattern` | `pattern` | `string` | `''` | A regular expression that the text field's value must match to pass constraint validation.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern |\n| `placeholder` | `placeholder` | `string` | `''` | Defines the text displayed in the textfield when it has no value. Provides a brief hint to the user as to the expected type of data that should be entered into the control. Unlike `label`, the placeholder is not visible and does not float when the textfield has a value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder |\n| `readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly |\n| `multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple |\n| `step` | `step` | `string` | `''` | Returns or sets the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step |\n| `type` | `type` | `string` | `'text'` | The `<input>` type to use, defaults to \"text\". The type greatly changes how the text field behaves.<br>Text fields support a limited number of `<input>` types:<br>- text - textarea - email - number - password - search - tel - url<br>See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |\n| `autocomplete` | `autocomplete` | `string` | `''` | Describes what, if any, type of autocomplete functionality the input should provide.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete |\n| `disabled` |  | `boolean` | `undefined` |  |\n| `name` |  | `string` | `undefined` |  |\n| `selectionDirection` |  | `string` | `undefined` |  |\n| `selectionEnd` |  | `number` | `undefined` |  |\n| `selectionStart` |  | `number` | `undefined` |  |\n| `valueAsNumber` |  | `number` | `undefined` |  |\n| `valueAsDate` |  | `Date` | `undefined` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Methods\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Method | Parameters | Returns | Description |\n| --- | --- | --- | --- |\n| `select` | _None_ | `void` | Selects all the text in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select |\n| `setRangeText` | `args` | `void` |  |\n| `setSelectionRange` | `start`, `end`, `direction` | `void` | Sets the start and end positions of a selection in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange |\n| `showPicker` | _None_ | `void` | Shows the browser picker for an input element of type \"date\", \"time\", etc.<br>For a full list of supported types, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker |\n| `stepDown` | `stepDecrement` | `void` | Decrements the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown |\n| `stepUp` | `stepIncrement` | `void` | Increments the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp |\n| `reset` | _None_ | `void` | Reset the text field to its default value. |\n| `formResetCallback` | _None_ | `void` |  |\n| `formStateRestoreCallback` | `state` | `void` |  |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n#### Events\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |\n| --- | --- | --- | --- | --- |\n| `select` | `Event` | Yes | No | The native `select` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event) |\n| `change` | `Event` | Yes | No | The native `change` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) |\n| `input` | `InputEvent` | Yes | Yes | The native `input` event on [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- auto-generated API docs end -->\n"
  },
  {
    "path": "docs/intro.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Introduction\ntitle: Introduction\norder: 1\n-----><!-- catalog-only-end -->\n\n# Intro to Material Web Components\n\n<!-- go/mwc-intro -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\n*-->\n\nMaterial web, also known as Material Web Components or MWC, is a library of\n[web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)<!-- {.external} -->\nthat follows Google's [Material Design](https://material.io/)<!-- {.external} -->\nguidelines.\n\n<!-- [TOC] -->\n\n## What is Material?\n\nMaterial Design is a design system built and supported by Google designers and\ndevelopers. Guidelines for building Material apps and components are published\non [material.io](https://material.io)<!-- {.external} -->.\n\nThe latest version, Material 3, enables personal, adaptive, and expressive\nexperiences – from dynamic color and enhanced accessibility, to foundations for\nlarge screen layouts and design tokens.\n\n![An example of a Material Design application.](images/what-is-material.webp \"What is Material?\")\n\n## What are web components?\n\n[Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)<!-- {.external} -->\nare custom HTML elements with encapsulated styles and behavior. They work across\nmany different frameworks (such as Lit, React, Vue, and Svelte) as well as web\nenvironments (such as Eleventy, Wordpress, and Ruby on Rails).\n\nMany components in\nthis library are drop-in replacements for browser elements like `<button>` and `<input>`.\n\n```html\n<!-- Browser elements -->\n<form>\n  <label>\n    Email\n    <input type=\"email\" name=\"email\" required>\n  </label>\n  <label>\n    Subscribe\n    <input type=\"checkbox\" name=\"subscribe\">\n  </label>\n\n  <button type=\"reset\">Reset</button>\n  <button>Submit</button>\n</form>\n\n<!-- Material elements -->\n<form>\n  <md-outlined-text-field label=\"Email\" type=\"email\"\n      name=\"email\" required></md-outlined-text-field>\n  <label>\n    Subscribe\n    <md-checkbox name=\"subscribe\"></md-checkbox>\n  </label>\n\n  <md-text-button type=\"reset\">Reset</md-text-button>\n  <md-outlined-button>Submit</md-outlined-button>\n</form>\n```\n\n## What are tokens?\n\n[Design tokens](https://m3.material.io/foundations/design-tokens/overview)<!-- {.external} -->\nare the building blocks of all UI elements. In MWC, tokens are\n[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)\nthat can be used to style components.\n\n```css\n:root {\n  --md-sys-color-primary: olive;\n  --md-sys-color-secondary: tomato;\n  --md-ref-typeface-brand: 'Open Sans';\n  --md-ref-typeface-plain: system-ui;\n}\n```\n\n<!--#include file=\"../googlers/intro-who-should-use-mwc.md\" -->\n"
  },
  {
    "path": "docs/quick-start.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Quick Start\ntitle: Quick Start\norder: 2\n-----><!-- catalog-only-end -->\n\n# Quick start\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:gettingStarted'\n*-->\n\n<!-- go/mwc-quick-start -->\n\n<!-- [TOC] -->\n\n## CDN\n\nFor fast prototyping, we recommend using [esm.run](https://esm.run/)<!-- {.external} -->,\na CDN that allows you to use `@material/web` without installing and building\nfrom NPM.\n\n<!-- LINT.IfChange -->\n\n```html\n<head>\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n  <script type=\"importmap\">\n    {\n      \"imports\": {\n        \"@material/web/\": \"https://esm.run/@material/web/\"\n      }\n    }\n  </script>\n  <script type=\"module\">\n    import '@material/web/all.js';\n    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\n\n    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);\n  </script>\n</head>\n<body>\n  <h1 class=\"md-typescale-display-medium\">Hello Material!</h1>\n  <form>\n    <p class=\"md-typescale-body-medium\">Check out these controls in a form!</p>\n    <md-checkbox></md-checkbox>\n    <div>\n      <md-radio name=\"group\"></md-radio>\n      <md-radio name=\"group\"></md-radio>\n      <md-radio name=\"group\"></md-radio>\n    </div>\n    <md-outlined-text-field label=\"Favorite color\" value=\"Purple\"></md-outlined-text-field>\n    <md-outlined-button type=\"reset\">Reset</md-outlined-button>\n  </form>\n  <style>\n    form {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 16px;\n    }\n  </style>\n</body>\n```\n\n<!-- LINT.ThenChange(../../README.md) -->\n\nFor production, follow the [install](#install) and [build](#building) steps\nbelow.\n\n## Install\n\n<!--#include file=\"../googlers/quick-start-install.md\" -->\n\nInstall Material web components using\n[npm and node](https://nodejs.org)<!-- {.external} -->.\n\n```shell\nnpm install @material/web\n```\n\n## Import\n\nImport element definitions from\n`@material/web/<component>/<component-variant>.js`.\n\n```js\n// index.js\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/checkbox/checkbox.js';\n```\n\n<!--#include file=\"../googlers/quick-start-import.md\" -->\n\n## Usage\n\nUse the `<component-name>` tag in HTML markup. Refer to the\n[component docs](components/) for more guidance on using each component.\n\n[Playground](https://lit.dev/playground/#gist=37d28012c5ec6de30809bdf4a6e26cb6)<!-- {.external} -->\n\n```html\n<script type=\"module\" src=\"./index.js\"></script>\n\n<label>\n  Material 3\n  <md-checkbox checked></md-checkbox>\n</label>\n\n<md-outlined-button>Back</md-outlined-button>\n<md-filled-button>Next</md-filled-button>\n```\n\n## Building\n\n<!--#include file=\"../googlers/quick-start-build.md\" -->\n\nMaterial web components uses bare module specifiers that must be resolved with\ntools until [import maps](https://github.com/WICG/import-maps)<!-- {.external} --> are\nadopted.\n\nWe recommend following\n[lit.dev's modern build for production](https://lit.dev/docs/tools/production/#modern-only-build)<!-- {.external} -->\nfor a more in-depth build guide.\n\n### Rollup quick start\n\nFor a quick start, we recommend using [Rollup](https://rollupjs.org/)<!-- {.external} -->\nto resolve bare module specifiers into a bundled file.\n\nInstall Rollup and a plugin to resolve bare module specifiers.\n\n```shell\nnpm install rollup @rollup/plugin-node-resolve\n```\n\nCreate a bundle from an entrypoint `index.js` file and use it in a `<script>`\n`\"src\"` attribute.\n\n```shell\nnpx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js\n```\n\n```html\n<script src=\"./bundle.js\"></script>\n```\n"
  },
  {
    "path": "docs/roadmap.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Roadmap\ntitle: Roadmap\norder: 3\n-----><!-- catalog-only-end -->\n\n# Roadmap\n\n<!-- go/mwc-roadmap -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\n*-->\n\n<!-- [TOC] -->\n\nThis roadmap describes current, future, and past goals for Material Web\nComponents.\n\n<!--#include file=\"../googlers/roadmap.md\" -->\n\n## Current\n\n**MWC is currently in maintenance mode,\n[see this announcement](https://github.com/material-components/material-web/discussions/5642)\nfor more details.**\n\nThere is no current work planned for new features or components. Bug fixes or\nother contributions may be added on a case-by-case basis.\n\n## Future\n\n**Note: No future work is planned while MWC is in\n[maintenance mode](https://github.com/material-components/material-web/discussions/5642).**\nThese roadmap items represent what used to be planned.\n\n### New components\n\nThese are components we have not built yet.\n\n*   Autocomplete\n*   Badge\n*   Banner\n*   Bottom app bar\n*   Bottom sheet\n*   Card\n*   Data table\n*   Date picker\n*   Navigation bar\n*   Navigation drawer\n*   Navigation rail\n*   Search\n*   Segmented button\n*   Snackbar\n*   Time picker\n*   Top app bar\n*   Tooltip\n\n### Expand Material Design tokens\n\nWe are adding shape and motion system tokens to support building expressive\nMaterial experiences.\n\nWe also want to make it easier to use Material Design tokens, such as applying\nMaterial typescale, shape, and color to your own components.\n\n### Density and spacing tokens\n\nDensity allows components to take up less vertical space for larger displays.\nWhile we have some spacing tokens already, we need a comprehensive spacing\nsystem to fully support density across components.\n\n### Create TSX components\n\n[TSX](https://www.typescriptlang.org/docs/handbook/jsx.html) is a popular\nlanguage extension for frameworks like [React](https://reactjs.org/). We want to\nmake it easier and more seamless to use Material Web Components in TSX.\n\n### Explore Material Design layouts\n\nComponents are only part of the story to build fully expressive Material Design\napplications. We want to explore ways to support building applications that\nfollow\n[Material's layout patterns](https://m3.material.io/foundations/layout/understanding-layout/overview).\n\n## Past\n\n### Follow accessibility best practices\n\n*Completed in Q1 2024*\n\nEveryone should be able to access and enjoy the web. We want our components to\nhelp others build accessible experiences. The following screen readers are fully\nsupported:\n\n*   VoiceOver\n*   Talkback\n*   ChromeVox\n*   JAWS\n*   NVDA\n\n### Cards and more\n\n*Completed in Q4 2023*\n\n*   Components\n    *   ✅\n        [Card preview](https://github.com/material-components/material-web/tree/c9360e2310dee2896592649f8a8f9b03e2737bf2/labs/card)\n*   Features\n    *   🟡 Prevent event default behavior\n        *   *We fixed lots of bugs, but there's still ways we can improve.*\n    *   ✅\n        [Size tracking](https://github.com/material-components/material-web/blob/c9360e2310dee2896592649f8a8f9b03e2737bf2/docs/size.md)\n    *   ✅ [Docs and examples](https://material-web.dev/)\n\n### Material 1.0\n\n*Completed in Q3 2023*\n\n*   Features\n    *   ✅ Color theming\n    *   ✅ Typography theming\n*   Components\n    *   ✅ Button\n    *   ✅ FAB\n    *   ✅ Icon button\n    *   ✅ Checkbox\n    *   ✅ Chips\n    *   ✅ Dialog\n    *   ✅ Divider\n    *   ✅ Elevation\n    *   ✅ Focus ring\n    *   ✅ List\n    *   ✅ Menu\n    *   ✅ Progress indicators\n    *   ✅ Radio\n    *   ✅ Ripple\n    *   ✅ Select\n    *   ✅ Slider\n    *   ✅ Switch\n    *   ✅ Tabs\n    *   ✅ Text field\n"
  },
  {
    "path": "docs/sass/sass-ext.md",
    "content": "<!-- go/g3mark-in-g3doc -->\n\n# Sass ext\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-25' }\ntag: 'docType:reference'\n*-->\n\ngo/sass-ext\n\nA collection of useful Sass modules that extend and complement the functionality\nprovided by built-in `sass:*` modules.\n\n<!-- [TOC] -->\n\n## Usage\n\nThese Sass utilities are intended to reduce boilerplate for common Sass\nmetaprogramming use cases, such as type checking.\n\n```scss\n@use '@material/web/sass/ext/assert';\n@use '@material/web/sass/ext/map_ext';\n\n@mixin theme($values) {\n  $values: assert.is-type($values, 'map');\n  --primary: #{map_ext.get-strict($values, 'primary')};\n  --secondary: #{map_ext.get-strict($values, 'secondary')};\n  --tertiary: #{map_ext.get-strict($values, 'tertiary')};\n}\n```\n\nThe same logic using built-in modules requires more boilerplate.\n\n```scss\n@use 'sass:map';\n@use 'sass:meta';\n\n@mixin theme($values) {\n  @if meta.type-of($values) != 'map' {\n    @error 'Argument is not a map: #{meta.inspect($values)}';\n  }\n  @if not map.has-key($values, 'primary') {\n    @error 'Map is missing key \"primary\": #{meta.inspect($values)}';\n  }\n  @if not map.has-key($values, 'secondary') {\n    @error 'Map is missing key \"secondary\": #{meta.inspect($values)}';\n  }\n  @if not map.has-key($values, 'tertiary') {\n    @error 'Map is missing key \"tertiary\": #{meta.inspect($values)}';\n  }\n\n  --primary: #{map.get($values, 'primary')};\n  --secondary: #{map.get($values, 'secondary')};\n  --tertiary: #{map.get($values, 'tertiary')};\n}\n```\n\n## Who should use `sass/ext`?\n\nThese utilities should be used by Sass libraries that need to perform\n*repetitive* and *complex* Sass metaprogramming logic.\n\nPrefer using built-in Sass functionality for simple use cases where `sass/ext`\nwould not reduce complexity.\n\n```scss {.bad}\n// Using sass/ext here does not reduce boilerplate, and adds another API to\n// learn and maintain.\n@use '@material/web/sass/ext/type';\n\n@function value-or-default($value, $default) {\n  @if type.matches($value, 'null') {\n    @return $default;\n  }\n  @return $value;\n}\n```\n\n```scss {.good}\n// For simple use cases, built-in Sass functionality should be preferred.\n@function value-or-default($value, $default) {\n  @if $value == null {\n    @return $default;\n  }\n  @return $value;\n}\n```\n\n<!-- mdformat off(autogenerated docs) -->\n<!-- generated_docs_start -->\n\n## `assert`\n\n### `is-type` {#assert.is-type}\n\n```scss\nassert.is-type($arg, $type, $message, $source)\n\n/// @param {*} $arg - The argument to check.\n/// @param {string} $type - The string type to assert the argument matches. Multiple types may be separated by '|'.\n/// @param {string} $message - Optional custom error message.\n/// @param {string} $source - Optional source of the error message.\n/// @return {*} The argument if it matches the type string.\n/// @throw Error if the argument does not match the type string.\n```\n\nAsserts that the argument is a specific type. If it is, the argument is\nreturned, otherwise an error is thrown.\n\n```scss\n@mixin multiply($a, $b) {\n  $a: assert.is-type($a, 'number');\n  $b: assert.is-type($b, 'number');\n  @return $a * $b;\n}\n\n@function is-empty($value) {\n  $value: assert.is-type(\n    $value,\n    'list|map|null',\n    $message: '$value must be a list, map, or null',\n    $source: 'is-empty'\n  );\n  @return $value and list.length($value) == 0;\n}\n```\n\n### `not-type` {#assert.not-type}\n\n```scss\nassert.not-type($arg, $type, $message, $source)\n\n/// @param {*} $arg - The argument to check.\n/// @param {string} $type - The string type to assert the argument does not match. Multiple types may be separated by '|'.\n/// @param {string} $message - Optional custom error message.\n/// @param {string} $source - Optional source of the error message.\n/// @return {*} The argument if it does not match the type string.\n/// @throw Error if the argument matches the type string.\n```\n\nAsserts that the argument is not a specific type. The argument is returned\nif it does not match. An error is thrown if the argument matches the type.\n\n```scss\n@function get-strict($map, $key) {\n  @return assert.not-type(\n    map.get($map, $key),\n    'null',\n    $message: 'Key must be in the map'\n  );\n}\n```\n\n## `list_ext`\n\n### `difference` {#list_ext.difference}\n\n```scss\nlist_ext.difference($listA, $listB) //=> list\n\n/// @param {list} $listA - The first list to compare.\n/// @param {list} $listB - The second list to compare.\n/// @return {list} All items in $listA that are not in $listB.\n```\n\nReturns the difference between two lists.\n\n```scss\n$listA: ('apple', 'banana', 'cherry', 'date');\n$listB: ('banana', 'cherry', 'apple');\n$listC: ('apple', 'banana', 'date');\n\n@debug list_ext.difference($listA, $listB); // ('date')\n@debug list_ext.difference($listA, $listC); // ('cherry')\n```\n\n### `are-equal` {#list_ext.are-equal}\n\n```scss\nlist_ext.are-equal($listA, $listB) //=> boolean\n\n/// @param {list} $listA - The first list to compare.\n/// @param {list} $listB - The second list to compare.\n/// @return {boolean} `true` if the lists contain the same elements, otherwise `false`.\n```\n\nChecks if two lists contain the same elements, regardless of their order.\n\nThe function iterates through each list and verifies that every element in\none list is present in the other. The order of elements does not affect the\nresult.\n\n```scss\n$listA: ('apple', 'banana', 'cherry');\n$listB: ('banana', 'cherry', 'apple');\n$listC: ('apple', 'banana', 'date');\n\n@debug list_ext.are-equal($listA, $listB); // true\n@debug list_ext.are-equal($listA, $listC); // false\n```\n\n### `intersection` {#list_ext.intersection}\n\n```scss\nlist_ext.intersection($listA, $listB) //=> list\n\n/// @param {list} $listA - The first list to compare.\n/// @param {list} $listB - The second list to compare.\n/// @return {list} All items in $listA that are also in $listB.\n```\n\nReturns the intersection of two lists.\n\n```scss\n$listA: ('apple', 'banana', 'cherry', 'date');\n$listB: ('banana', 'cherry', 'apple');\n$listC: ('apple', 'banana', 'date');\n\n@debug list_ext.intersection($listA, $listB); // ('apple', 'banana', 'cherry')\n@debug list_ext.intersection($listA, $listC); // ('apple', 'banana')\n```\n\n## `map_ext`\n\n### `get-strict` {#map_ext.get-strict}\n\n```scss\nmap_ext.get-strict($map, $key, $keys)\n\n/// @param {map} $map - The map to retrieve the value from.\n/// @param {string} $key - The key of the value to retrieve.\n/// @param {list} $keys - Additional keys to retrieve deeply nested values.\n/// @return {*} The value at the given key.\n/// @throw Error if the key does not exist in the map.\n```\n\nThe same as `map.get()` but throws an error if the key is not found.\n\nThis is useful over `map.get()` when using Sass maps like records, where\nthe key is expected to exist.\n\n```scss\n$map: (\n  'name': 'foo',\n  'value': blue,\n);\n\n@debug map_ext.get-strict($map, 'name'); // 'foo'\n@debug map_ext.get-strict($map, 'bar'); // ERROR: Key \"bar\" expected but not found in $map: ('name': 'foo', 'value': blue)\n```\n\n### `split` {#map_ext.split}\n\n```scss\nmap_ext.split($map, $keys) //=> list\n\n/// @param {map} $map - The Map to split.\n/// @param {list} $keys - List of keys to split the Map by.\n/// @return {list} A List pair with two new Maps: the first with the keys provided, and the second with the remaining keys.\n```\n\nSplits a Map and returns a List pair with two new Maps: the first with the\nprovided keys and the second without.\n\n```scss\n$map: (\n  'focus': blue,\n  'focus-within': blue,\n  'hover': teal,\n  'active': green,\n);\n\n$pair: map_ext.split($map, ('focus', 'focus-within'));\n\n$map-with-focus-keys: list.nth($pair, 1);\n@debug $map-with-focus-keys; // ('focus': blue, 'focus-within': blue)\n\n$map-with-remaining-keys: list.nth($pair, 2);\n@debug $map-with-remaining-keys; // ('hover': teal, 'active': green)\n```\n\n### `pick` {#map_ext.pick}\n\n```scss\nmap_ext.pick($map, $keys) //=> map\n\n/// @param {map} $map - The Map to split.\n/// @param {list} $keys - List of keys to include in the new Map.\n/// @return {map} Map with only the keys provided.\n```\n\nSplits a Map and returns a new Map that only includes the provided keys.\n\n```scss\n$map: (\n  'focus': blue,\n  'focus-within': blue,\n  'hover': teal,\n  'active': green,\n);\n\n$map-with-focus-keys: map_ext.pick($map, ('focus', 'focus-within'));\n@debug $map-with-focus-keys; // ('focus': blue, 'focus-within': blue)\n```\n\n### `omit` {#map_ext.omit}\n\n```scss\nmap_ext.omit($map, $keys) //=> map\n\n/// @param {map} $map - The Map to split.\n/// @param {list} $keys - List of keys to exclude from the new Map.\n/// @return {map} Map without the keys provided.\n```\n\nSplits a Map and returns a new Map that excludes the provided keys.\n\n```scss\n$map: (\n  'focus': blue,\n  'focus-within': blue,\n  'hover': teal,\n  'active': green,\n);\n\n$map-without-focus-keys: map_ext.omit($map, ('focus', 'focus-within'));\n@debug $map-without-focus-keys; // ('hover': teal, 'active': green)\n```\n\n### `rename-keys` {#map_ext.rename-keys}\n\n```scss\nmap_ext.rename-keys($map, $keys-to-rename) //=> map\n\n/// @param {map} $map - The map to rename keys within.\n/// @param {map} $keys-to-rename - A map of keys and their new names.\n/// @return {map} The map with any matching keys renamed.\n```\n\nReturns the given map with any matching keys renamed according to the\nprovided Map of keys to rename.\n\n```scss\n$map: ('foo': red);\n\n$new-map: map_ext.rename-keys($map, ('foo': 'bar'));\n@debug $new-map; // ('bar': red)\n```\n\n### `difference` {#map_ext.difference}\n\n```scss\nmap_ext.difference($mapA, $mapB) //=> list\n\n/// @param {map} $mapA - The reference map.\n/// @param {map} $mapB - The map to compare against the reference.\n/// @return {list} A list of keys where $mapB diverges from $mapA.\n```\n\nReturns a list of keys where $mapB diverges from $mapA.\nDivergence occurs when:\n  1. A key exists in $mapB but not in $mapA.\n  2. A key exists in both maps but with different values.\n\n```scss\n$mapA: ('foo': red, 'bar': yellow, 'baz': 10);\n$mapB: ('foo': red, 'bar': green,  'baz': 10, 'fooBar': blue);\n\n$differences: map_ext.difference($mapA, $mapB);\n@debug $differences; // ('bar', 'fooBar')\n```\n\n## `string_ext`\n\n### `starts-with` {#string_ext.starts-with}\n\n```scss\nstring_ext.starts-with($string, $prefix) //=> boolean\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```\n\nChecks if a string starts with a given prefix.\n\n```scss\n@debug string_ext.starts-with('var(--foo)', 'var('); // true\n```\n\n### `ends-with` {#string_ext.ends-with}\n\n```scss\nstring_ext.ends-with($string, $suffix) //=> boolean\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```\n\nChecks if a string ends with a given suffix.\n\n```scss\n@debug string_ext.ends-with('var(--foo)', ')'); // true\n```\n\n### `trim-start` {#string_ext.trim-start}\n\n```scss\nstring_ext.trim-start($string) //=> string\n\n/// @param {string} $string - The string to trim.\n/// @return {string} The string with whitespace trimmed from the start.\n```\n\nTrims leading whitespace from the start of a string.\n\n```scss\n@debug string_ext.trim-start('  foo bar  '); // \"foo bar  \"\n```\n\n### `trim-end` {#string_ext.trim-end}\n\n```scss\nstring_ext.trim-end($string) //=> string\n\n/// @param {string} $string - The string to trim.\n/// @return {string} The string with trailing whitespace trimmed from the end.\n```\n\nTrims trailing whitespace from the end of a string.\n\n```scss\n@debug string_ext.trim-end('  foo bar  '); // \"  foo bar\"\n```\n\n### `trim` {#string_ext.trim}\n\n```scss\nstring_ext.trim($string) //=> string\n\n/// @param {string} $string - The string to trim.\n/// @return {string} The string with leading and trailing whitespace trimmed.\n```\n\nTrims leading and trailing whitespace from a string.\n\n```scss\n@debug string_ext.trim('  foo bar  '); // \"foo bar\"\n```\n\n### `replace` {#string_ext.replace}\n\n```scss\nstring_ext.replace($string, $pattern, $replacement) //=> string\n\n/// @param {string} $string - The string to be searched.\n/// @param {string} $pattern - The pattern to search for.\n/// @param {string} $replacement - The value to replace the pattern.\n/// @return {string} The string with the first match of pattern replaced by the replacement or the initial string itself.\n```\n\nReturns a new string with the first match of a pattern replaced by a given\nstring.\n\n```scss\n@debug string_ext.replace('foo bar baz', 'bar', 'quux'); // \"foo quux baz\"\n```\n\n### `replace-all` {#string_ext.replace-all}\n\n```scss\nstring_ext.replace-all($string, $pattern, $replacement) //=> string\n\n/// @param {string} $string - The string to be searched.\n/// @param {string} $pattern - The pattern to search for.\n/// @param {string} $replacement - The value to replace the pattern.\n/// @return {string} The string with all matches of pattern replaced by the replacement or the initial string itself.\n```\n\nReturns a new string with all matches of a pattern replaced by a given\nstring.\n\n```scss\n@debug string_ext.replace-all('foo bar baz', 'ba', 'qua'); // \"foo quar quaz\"\n```\n\n### `replace-start` {#string_ext.replace-start}\n\n```scss\nstring_ext.replace-start($string, $prefix, $replacement) //=> string\n\n/// @param {string} $string - The string to be searched.\n/// @param {string} $prefix - The prefix string to replace.\n/// @param {string} $replacement - The value to replace the prefix.\n/// @return {string} The string with the prefix replaced.\n```\n\nReturns a new string that replaces a prefix at the start of the string.\n\n```scss\n@debug string_ext.replace-start('var(--foo)', 'var(', ''); // \"--foo)\"\n```\n\n### `replace-end` {#string_ext.replace-end}\n\n```scss\nstring_ext.replace-end($string, $suffix, $replacement) //=> string\n\n/// @param {string} $string - The string to be searched.\n/// @param {string} $suffix - The suffix string to replace.\n/// @param {string} $replacement - The value to replace the suffix.\n/// @return {string} The string with the suffix trimmed from the end.\n```\n\nReturns a new string that replaces a suffix at the end of the string.\n\n```scss\n@debug string_ext.replace-end('var(--foo)', ')', ''); // \"var(--foo\"\n```\n\n## `throw`\n\n### `get-error` {#throw.get-error}\n\n```scss\nthrow.get-error($error, $errors)\n\n/// @param {*} $error - The value to check.\n/// @param {list} $errors - Additional values to check. Useful for checking multiple errors at the same time.\n/// @return {string|boolean} The error string if any value is an error, or false otherwise.\n```\n\nReturns false if none of the given values are error strings, or returns an\nerror string if any value has an error.\n\nThis is used to support testing error behavior with `sass-true`, since\n`@error` messages cannot be caught at build time.\n\n```scss\n// A function that may return an \"ERROR:\" string in a test.\n@function get-value($map, $key) {\n  @if meta.type-of($map) != 'map' {\n    // Identical to `@error 'ERROR: Arg is not a map'` outside of tests.\n    @return throw.error('Arg is not a map');\n  }\n  @return map.get($map, $key);\n}\n\n// A function that needs to handle potential errors from other functions.\n@function mix-primary-on-surface($values) {\n  $primary: get-value($values, 'primary');\n  $surface: get-value($values, 'surface');\n  $error: throw.get-error($primary, $surface);\n  @if $error {\n    // Return early to guard logic against additional errors since\n    // $primary or $surface may be a string instead of a color.\n    @return $error;\n  }\n\n  @return color.mix($primary, $surface, 10%);\n}\n```\n\nNote: `throw.error()` and `throw.get-error()` are only useful when testing\nerror behavior using `sass-true`. If you are not testing a function, use\n`@error` instead.\n\n```scss\n// In a `sass-true` test, `throw.get-error()` can be used to assert that\n// an error is thrown.\n@use 'true' as test with ($catch-errors: true);\n\n@include test.describe('module.get-value()') {\n  @include test.it('throws an error if the value is not a map') {\n    $result: module.get-value('not a map', 'primary');\n    @include test.assert-truthy(throw.get-error($result), '$result is an error');\n  }\n}\n```\n\n## `type`\n\n### `matches` {#type.matches}\n\n```scss\ntype.matches($value, $type-string) //=> boolean\n\n/// @param {*} $value - The value to check the type of.\n/// @param {string} $type-string - The type to check. May be multiple types separated by `|`.\n/// @return {boolean} True if the value matches the type string.\n```\n\nReturns true if the given value matches the provided type string.\n\nThe type string supports multiple types separated by `|`, such as\n`'string|null'`. Type options are any values returned by `meta.type-of()`.\n\n```scss\n@function is-empty($value) {\n  @if type.matches($value, 'list|map') {\n    @return list.length($value) == 0;\n  }\n  @if type.matches($value, 'string') {\n    @return $value == '';\n  }\n  @return type.matches($value, 'null');\n}\n```\n\n## `var`\n\n### `create` {#var.create}\n\n```scss\nvar.create($name, $fallback) //=> string\n\n/// @param {string} $name - The name of the custom property.\n/// @param {*} $fallback [null] - Optional `var()` fallback value.\n/// @return {string} A custom property `var()` string.\n```\n\nCreates a custom property `var()` string.\n\n```scss\n@debug var.create(--foo); // \"var(--foo)\"\n@debug var.create(--foo, 8px); // \"var(--foo, 8px)\"\n```\n\n### `name` {#var.name}\n\n```scss\nvar.name($var) //=> string\n\n/// @param {string} $var - A custom property `var()` string.\n/// @return {string} The custom property variable name.\n/// @throw If the value is not a custom property.\n```\n\nReturns the custom property variable name of `var()` string.\n\n```scss\n$var: var(--foo);\n@debug var.name($var); // \"--foo\"\n```\n\n### `fallback` {#var.fallback}\n\n```scss\nvar.fallback($var) //=> string\n\n/// @param {string} $var - A custom property `var()` string.\n/// @return {string} The fallback value of the `var()` string. May be null if the `var()` does not have a fallback value.\n/// @throw If the value is not a custom property.\n```\n\nReturns the fallback value of a custom property `var()` string. The value\nmay be null if the `var()` does not have a fallback value.\n\n```scss\n$var: var(--foo, var(--bar, 8px));\n@debug var.fallback($var); // \"var(--bar, 8px)\"\n```\n\n### `deep-fallback` {#var.deep-fallback}\n\n```scss\nvar.deep-fallback($var) //=> string\n\n/// @param {string} $var - A custom property `var()` string.\n/// @return {string} The deep fallback value of the `var()` string. May be null if the `var()` does not have a fallback value.\n/// @throw If the value is not a custom property.\n```\n\nReturns the deep fallback value of a custom property `var()` string. The\nvalue may be null if the `var()` does not have a fallback value.\n\nIf a fallback value is another `var()`, this function will return the final\nconcrete value in the chain.\n\n```scss\n$var: var(--foo, var(--bar, 8px));\n@debug var.deep-fallback($var); // \"8px\"\n```\n\n### `set-fallback` {#var.set-fallback}\n\n```scss\nvar.set-fallback($var, $new-fallback) //=> string\n\n/// @param {string} $var - A custom property `var()` string.\n/// @param {*} $new-fallback - The new fallback value. May be null to remove a value.\n/// @return {string} A custom property `var()` string with the new fallback value.\n/// @throw If the value is not a custom property.\n```\n\nCreates a new custom property `var()` string and returns it with the\nspecified new fallback value.\n\n```scss\n$var: var(--foo, var(--bar, 8px));\n$new-var: set-fallback($var, 16px);\n@debug $new-var; // \"var(--foo, 16px)\"\n```\n\n### `deep-set-fallback` {#var.deep-set-fallback}\n\n```scss\nvar.deep-set-fallback($var, $new-fallback) //=> string\n\n/// @param {string} $var - A custom property `var()` string.\n/// @param {*} $new-fallback - The new fallback value. May be null to remove a value.\n/// @return {string} A custom property `var()` string with the new deep fallback value.\n/// @throw If the value is not a custom property.\n```\n\nCreates a new custom property `var()` string and returns it with the\nspecified new deep fallback value.\n\nIf the provided `var()` string's fallback value is another `var()`, this\nfunction will set the final fallback value in the chain.\n\n```scss\n$var: var(--foo, var(--bar, 8px));\n$new-var: var.deep-set-fallback($var, 16px);\n@debug $new-var; // \"var(--foo, var(--bar, 16px))\"\n```\n\n### `is-var` {#var.is-var}\n\n```scss\nvar.is-var($var) //=> boolean\n\n/// @param {*} $var - The value to test.\n/// @return {boolean} True if the value is a custom property `var()` string, or false if not.\n```\n\nIndicates whether or not a value is a custom property `var()` string.\n\n```scss\n$var: var(--foo);\n@debug var.is-var($var); // true\n```\n"
  },
  {
    "path": "docs/size.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Bundle Sizes\ntitle: Bundle Sizes\norder: 5\nhasToc: false\n-----><!-- catalog-only-end -->\n\n# Sizes\n\n<!-- go/mwc-size -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\n*-->\n\n<!-- [TOC] -->\n\nThis doc tracks important size metrics for Material Web Components.\n\nSizes are tracked in bundles. A bundle is a single `.js` file for one or more\ncomponents that includes all of the JavaScript and CSS needed, minus external\ndependencies. We track three metrics:\n\n-   **gzip** - minified and compressed. This impacts download size, which can\n    take longer over slow networks.\n\n-   **minified** - minified and unpacked. This impacts the time it takes a page\n    to be interactive, which can take longer on some devices.\n\n-   **% CSS** - the amount of CSS compared to JavaScript. The bundle includes\n    both JS and CSS, so this helps track changes to JS logic and CSS styles\n    separately.\n\n<!-- Autogenerated below, do not update! -->\n<!-- MWC_UPDATE_TRACKING_START -->\n\n<sub>Last updated 2025-08-20.</sub>\n\n<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n| Component | gzip | minified | *% CSS* | Import |\n| --- | --- | --- | --- | --- |\n| **All** | **72.1kb** | 455.5kb | *64% CSS* | `@material/web/all.js` |\n| **Common** | **53.7kb** | 287.6kb | *52% CSS* | `@material/web/common.js` |\n| **Button** | **8.4kb** | 48.4kb | *64% CSS* |  |\n|  | 7.0kb | 29.0kb | *47% CSS* | `@material/web/button/elevated-button.js` |\n|  | 7.0kb | 28.9kb | *47% CSS* | `@material/web/button/filled-button.js` |\n|  | 7.0kb | 29.3kb | *48% CSS* | `@material/web/button/filled-tonal-button.js` |\n|  | 6.8kb | 27.4kb | *46% CSS* | `@material/web/button/outlined-button.js` |\n|  | 6.6kb | 25.8kb | *43% CSS* | `@material/web/button/text-button.js` |\n| **Checkbox** | **7.0kb** | 27.3kb | *37% CSS* | `@material/web/checkbox/checkbox.js` |\n| **Chips** | **10.5kb** | 62.6kb | *62% CSS* |  |\n|  | 5.1kb | 17.7kb | *21% CSS* | `@material/web/chips/chip-set.js` |\n|  | 6.8kb | 28.5kb | *49% CSS* | `@material/web/chips/assist-chip.js` |\n|  | 8.3kb | 38.6kb | *53% CSS* | `@material/web/chips/filter-chip.js` |\n|  | 7.8kb | 35.4kb | *52% CSS* | `@material/web/chips/input-chip.js` |\n|  | 6.8kb | 28.9kb | *49% CSS* | `@material/web/chips/suggestion-chip.js` |\n| **Dialog** | **5.0kb** | 17.1kb | *27% CSS* | `@material/web/dialog/dialog.js` |\n| **Divider** | **0.6kb** | 1.3kb | *34% CSS* | `@material/web/divider/divider.js` |\n| **Elevation** | **0.6kb** | 1.7kb | *62% CSS* | `@material/web/elevation/elevation.js` |\n| **Fab** | **7.2kb** | 38.5kb | *66% CSS* |  |\n|  | 6.9kb | 34.0kb | *63% CSS* | `@material/web/fab/fab.js` |\n|  | 6.1kb | 25.7kb | *50% CSS* | `@material/web/fab/branded-fab.js` |\n| **Field** | **6.1kb** | 41.5kb | *83% CSS* |  |\n|  | 4.7kb | 25.5kb | *74% CSS* | `@material/web/field/filled-field.js` |\n|  | 5.0kb | 27.7kb | *76% CSS* | `@material/web/field/outlined-field.js` |\n| **Focus** | **1.5kb** | 5.4kb | *49% CSS* | `@material/web/focus/md-focus-ring.js` |\n| **Icon** | **0.7kb** | 1.3kb | *47% CSS* | `@material/web/icon/icon.js` |\n| **Icon button** | **7.7kb** | 44.9kb | *64% CSS* |  |\n|  | 6.2kb | 24.8kb | *40% CSS* | `@material/web/iconbutton/icon-button.js` |\n|  | 6.4kb | 26.9kb | *44% CSS* | `@material/web/iconbutton/filled-icon-button.js` |\n|  | 6.4kb | 27.5kb | *45% CSS* | `@material/web/iconbutton/filled-tonal-icon-button.js` |\n|  | 6.4kb | 26.5kb | *44% CSS* | `@material/web/iconbutton/outlined-icon-button.js` |\n| **List** | **7.3kb** | 28.4kb | *33% CSS* |  |\n|  | 1.6kb | 4.7kb | *4% CSS* | `@material/web/list/list.js` |\n|  | 6.1kb | 23.9kb | *39% CSS* | `@material/web/list/list-item.js` |\n| **Menu** | **14.1kb** | 55.9kb | *22% CSS* |  |\n|  | 8.2kb | 30.2kb | *17% CSS* | `@material/web/menu/menu.js` |\n|  | 6.8kb | 26.5kb | *36% CSS* | `@material/web/menu/menu-item.js` |\n|  | 8.6kb | 33.0kb | *11% CSS* | `@material/web/menu/sub-menu.js` |\n| **Progress** | **3.8kb** | 14.8kb | *65% CSS* |  |\n|  | 2.9kb | 9.6kb | *56% CSS* | `@material/web/progress/linear-progress.js` |\n|  | 2.5kb | 8.3kb | *51% CSS* | `@material/web/progress/circular-progress.js` |\n| **Radio** | **6.6kb** | 24.4kb | *28% CSS* | `@material/web/radio/radio.js` |\n| **Ripple** | **2.7kb** | 7.7kb | *13% CSS* | `@material/web/ripple/ripple.js` |\n| **Select** | **26.6kb** | 146.9kb | *56% CSS* |  |\n|  | 18.8kb | 93.6kb | *47% CSS* | `@material/web/select/filled-select.js` |\n|  | 19.0kb | 94.1kb | *47% CSS* | `@material/web/select/outlined-select.js` |\n|  | 6.9kb | 27.6kb | *35% CSS* | `@material/web/select/select-option.js` |\n| **Slider** | **9.9kb** | 43.2kb | *45% CSS* | `@material/web/slider/slider.js` |\n| **Switch** | **8.0kb** | 33.5kb | *45% CSS* | `@material/web/switch/switch.js` |\n| **Tabs** | **7.7kb** | 35.2kb | *50% CSS* |  |\n|  | 6.1kb | 21.9kb | *25% CSS* | `@material/web/tabs/tabs.js` |\n|  | 6.2kb | 25.6kb | *49% CSS* | `@material/web/tabs/primary-tab.js` |\n|  | 6.1kb | 25.2kb | *48% CSS* | `@material/web/tabs/secondary-tab.js` |\n| **Text field** | **14.7kb** | 97.2kb | *73% CSS* |  |\n|  | 11.5kb | 64.1kb | *61% CSS* | `@material/web/textfield/filled-text-field.js` |\n|  | 11.7kb | 64.6kb | *61% CSS* | `@material/web/textfield/outlined-text-field.js` |\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->\n\n<!-- MWC_UPDATE_TRACKING_END -->\n"
  },
  {
    "path": "docs/support.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Support\ntitle: Support\norder: 4\n-----><!-- catalog-only-end -->\n\n# Support\n\n<!-- go/mwc-support -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\n*-->\n\n<!-- [TOC] -->\n\n<!--#include file=\"../googlers/support.md\" -->\n\n## Browsers\n\n<!-- go/mwc-browsers -->\n\nMWC aims to support the latest two major versions of browsers at the time of\neach release.\n\nCurrent browsers and versions supported:\n\nBrowser | Version\n------- | -------\nChrome  | 120 +\nEdge    | 120 +\nFirefox | 119 +\nSafari* | 16.4 +\n\n*\\* previous versions of Safari may be supported with an\n[`ElementInternals` polyfill](https://www.npmjs.com/package/element-internals-polyfill).*\n\n## FAQ\n\n<!-- go/mwc-faq -->\n\n*If you have a question that isn't listed here, consider asking it so we can\ninclude it!*\n\n### How do I change the color of a button?\n\nMany components have multiple tokens for a color, including \"hover\", \"focus\",\nand \"pressed\" states.\n\nUse `--md-sys-color-*` tokens to change the key color that the component uses.\n\n```css\n/* Buttons use the `primary` key color */\nmd-filled-button.spooky {\n  --md-sys-color-primary: black;\n  --md-sys-color-on-primary: yellow;\n}\n\nmd-filled-button.error {\n  --md-sys-color-primary: var(--md-sys-color-error);\n  --md-sys-color-on-primary: var(--md-sys-color-on-error);\n}\n```\n\n### Why does my color change on hover/focus/pressed?\n\nMany colors have multiple tokens, including \"hover\", \"focus\", and \"pressed\"\nstates.\n\nRather than setting all of them, or use the `--md-sys-color-*` token that the\ncomponent maps to (see the previous question).\n\n### Why doesn't `prefers-color-scheme: dark` work?\n\nIt's up to the app to decide when and how dark mode is applied. Any selector can\nbe used with `--md-sys-color-*` dark theme tokens to scope how the changes\napply.\n\nFor example, using Sass:\n\n```scss\n@use '@material/web/color/color';\n\n:root {\n  @media (prefers-color-scheme: dark) {\n    @include color.dark-theme;\n  }\n}\n```\n\n> **Why not automatically?** Not all apps need dark mode, and the CSS size for\n> automatically supporting it is much higher and not as flexible.\n\nSee\n[How do I use `--md-sys-*` custom properties in my styles?](#how-do-i-use-md-sys-custom-properties-in-my-styles)\nfor more info on how to generate a set of dark theme tokens.\n\n### How do I use `--md-sys-*` custom properties in my styles?\n\n-   Use Sass APIs.\n\n    ```scss\n    @use '@material/web/color/color';\n    @use '@material/web/color/typography';\n\n    :root {\n      @include color.light-theme;\n      @include typography.theme;\n\n      @media (prefers-color-scheme: dark) {\n        @include color.dark-theme;\n      }\n    }\n    ```\n\n-   Use the\n    [Material theme builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder)<!-- {.external} -->\n    to generate a color scheme.\n\n-   Use the\n    [`material-color-utilities` library](https://www.npmjs.com/package/@material/material-color-utilities)<!-- {.external} -->\n    to generate color schemes at runtime.\n\n### How do I customize an `<md-*>` element that is inside another component?\n\nUse [CSS `::part()`s](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\nto access sub-components. The part name is the sub-component's tag name without\nthe \"md-\" prefix.\n\n```css\nmd-checkbox::part(focus-ring) {\n  width: 32px;\n  height: 32px;\n}\n```\n"
  },
  {
    "path": "docs/theming/README.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Material Theming\ntitle: Theming\norder: 1\n-----><!-- catalog-only-end -->\n\n# Theming\n\n<!-- go/mwc-theming -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:concepts'\n*-->\n\n<!-- [TOC] -->\n\n[Material Design theming](https://m3.material.io/foundations/customization)<!-- {.external} -->\ncreates unique branded products with familiar patterns and accessible\ninteractions.\n\n![collage of views of a mobile UI that show a user's setting and preference for\na green primary color flows through system UI\nharmoniously](images/theming.webp \"A user-generated color scheme can flow through apps that use a custom theme.\")\n\n## Tokens\n\nMaterial is expressed in\n[design tokens](https://m3.material.io/foundations/design-tokens/overview)<!-- {.external} -->,\nwhich are the building blocks of all UI elements.\n\nEach component token maps to a system token, which has a concrete reference\nvalue.\n\n![A diagram showing the heirachy of component tokens to system tokens to\nreference\ntokens](images/token-types.webp \"The relationship between reference, system, and component tokens.\")\n\nOn the web, design tokens are\n[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->\nand can be scoped with CSS selectors.\n\n```css\n.square-buttons {\n  /* Changes all <md-filled-button> instances matching the selector */\n  --md-filled-button-container-shape: 0px;\n}\n```\n\n### Reference\n\nReference tokens hold concrete values, such as a hex color, pixel size, or font\nfamily name.\n\n#### Typeface\n\n[`--md-ref-typeface` tokens](typography.md#typeface) can be used to change font\nfamilies and weights across all system and component tokens.\n\n```css\n:root {\n  --md-ref-typeface-brand: 'Open Sans';\n  --md-ref-typeface-plain: 'Open Sans';\n}\n```\n\n#### Palette\n\n*MWC does not currently support `--md-ref-palette` tokens.*\n\n### System\n\nSystem tokens define decisions and roles that give the design system its\ncharacter, from color and typography, to elevation and shape.\n\n#### Color\n\n[`--md-sys-color` tokens](color.md#tokens) define dynamic color roles that map\nto components. See the [color guide](color.md) for more details.\n\n```css\n:root {\n  --md-sys-color-primary: red;\n  --md-sys-color-secondary: blue;\n}\n```\n\n#### Typography\n\n[`--md-sys-typescale` tokens](typography.md#typescale) define typescale roles\nthat map to components. See the [typography guide](typography.md) for more\ndetails.\n\n```css\n:root {\n  --md-sys-typescale-body-medium-size: 1rem;\n  --md-sys-typescale-body-medium-line-height: 1.5rem;\n}\n```\n\n#### Shape\n\n[`--md-sys-shape` tokens](shape.md#tokens) define corner shapes used in\ncomponents. See the [shape guide](shape.md) for more details.\n\n```css\n:root {\n  --md-sys-shape-corner-small: 4px;\n  --md-sys-shape-corner-medium: 6px;\n  --md-sys-shape-corner-large: 8px;\n}\n```\n\n#### Motion\n\n*MWC does not currently support `--md-sys-motion` tokens.*\n\n### Component\n\nComponent tokens are design attributes assigned to elements. They can be system\ntokens or concrete values.\n\n```css\n:root {\n  --md-filled-button-container-shape: 0px;\n}\n\nmd-filled-button.error {\n  --md-filled-button-container-color: var(--md-sys-color-error);\n  --md-filled-button-label-text-color: var(--md-sys-color-on-error);\n}\n```\n\nRefer to each [components' documentation](../components/) for available tokens.\n\n> Note: unlike `--md-ref-*` and `--md-sys-*` tokens, which are prefixed with\n> `ref` and `sys`, component tokens are *not* prefixed with `comp`.\n"
  },
  {
    "path": "docs/theming/color.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Color\ntitle: Color\norder: 2\n-----><!-- catalog-only-end -->\n\n# Color\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:howTo'\n*-->\n\n<!-- go/mwc-color -->\n\n<!-- [TOC] -->\n\n[Color](https://m3.material.io/styles/color/overview)<!-- {.external} --> creates meaning\nand communicates hierarchy, state, and brand.\n\n## Color scheme\n\n<!-- go/md-sys-color -->\n\nA\n[color scheme](https://m3.material.io/styles/color/the-color-system/color-roles#55d2b7d2-0202-4616-887e-f575a7946aac)<!-- {.external} -->\nis the group of\n[key color tones](https://m3.material.io/styles/color/the-color-system/key-colors-tones#5fdf196d-1e21-4d03-ae63-e802d61ad5ee)<!-- {.external} -->\nassigned to specific roles that get mapped to components.\n\n![Full palette derived from baseline colors](images/color-scheme-light.webp \"From five key colors, roles are automatically assigned that map to light theme components\")\n\n![Dark palette derived from baseline colors](images/color-scheme-dark.webp \"From five key colors, roles are automatically assigned that map to dark theme components\")\n\n> Tip: use the\n> [Material theme builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder)<!-- {.external} -->\n> to generate a color scheme.\n>\n> Alternatively, use the\n> [`material-color-utilities` library](https://www.npmjs.com/package/@material/material-color-utilities)<!-- {.external} -->\n> to generate color schemes at runtime.\n\n### Tokens\n\nA color scheme can be set using\n[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->.\nTokens follow the naming convention `--md-sys-color-<token>`.\n\nAll tokens have a corresponding `--md-sys-color-on-<token>` for content color\nwith accessible contrast.\n\nKey color | Tokens\n--------- | --------------------------------------------\nPrimary   | `--md-sys-color-primary`\n&nbsp;    | `--md-sys-color-primary-container`\nSecondary | `--md-sys-color-secondary`\n&nbsp;    | `--md-sys-color-secondary-container`\nTertiary  | `--md-sys-color-tertiary`\n&nbsp;    | `--md-sys-color-tertiary-container`\nError     | `--md-sys-color-error`\n&nbsp;    | `--md-sys-color-error-container`\nNeutral   | `--md-sys-color-background`\n&nbsp;    | `--md-sys-color-surface`\n&nbsp;    | `--md-sys-color-surface-bright` *\n&nbsp;    | `--md-sys-color-surface-dim` *\n&nbsp;    | `--md-sys-color-surface-container` *\n&nbsp;    | `--md-sys-color-surface-container-lowest` *\n&nbsp;    | `--md-sys-color-surface-container-low` *\n&nbsp;    | `--md-sys-color-surface-container-high` *\n&nbsp;    | `--md-sys-color-surface-container-highest` *\n&nbsp;    | `--md-sys-color-outline`\n&nbsp;    | `--md-sys-color-outline-variant`\n\n*\\* all surface tokens use `--md-sys-color-on-surface` or\n`--md-sys-color-on-surface-variant` for their content.*\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-sys-color.scss)\n    <!-- {.external} -->\n\n```css\n:root {\n  /* Generated from Material Theme Builder Figma plugin\n     or `material-color-utilities`. */\n  --md-sys-color-primary: #006A6A;\n  --md-sys-color-on-primary: #FFFFFF;\n  --md-sys-color-primary-container: #6FF7F6;\n  --md-sys-color-on-primary-container: #002020;\n  /* ... */\n}\n\n/* Usage in custom components */\n.primary {\n  background: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n}\n```\n\n<!--#include file=\"../../googlers/theming-color.md\" -->\n"
  },
  {
    "path": "docs/theming/shape.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Shape\ntitle: Shape\norder: 4\n-----><!-- catalog-only-end -->\n\n# Shape\n\n<!-- go/mwc-shape -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:howTo'\n*-->\n\n<!-- [TOC] -->\n\n[Shape](https://m3.material.io/styles/shape)<!-- {.external} --> can direct attention,\ncommunicate state, and express brand.\n\n## Shape\n\n<!-- go/md-sys-shape -->\n\nCorners use a\n[range of shape scales](https://m3.material.io/styles/shape/shape-scale-tokens#b85fe884-325c-45e6-b7fb-e753c6e03c82)<!-- {.external} -->\nfor their roundness, from straight to fully round.\n\n> Note: \"cut\" corners are not supported.\n\n### Tokens\n\nShape corners can be set using\n[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->.\nTokens follow the naming convention `--md-sys-shape-<token>`.\n\nShape  | Token\n------ | -----------------------------------\nCorner | `--md-sys-shape-corner-none`\n&nbsp; | `--md-sys-shape-corner-extra-small`\n&nbsp; | `--md-sys-shape-corner-small`\n&nbsp; | `--md-sys-shape-corner-medium`\n&nbsp; | `--md-sys-shape-corner-large`\n&nbsp; | `--md-sys-shape-corner-extra-large`\n&nbsp; | `--md-sys-shape-corner-full`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-sys-shape.scss)\n    <!-- {.external} -->\n\n```css\n:root {\n  --md-sys-shape-corner-small: 4px;\n  --md-sys-shape-corner-medium: 6px;\n  --md-sys-shape-corner-large: 8px;\n}\n```\n"
  },
  {
    "path": "docs/theming/typography.md",
    "content": "<!-- catalog-only-start --><!-- ---\nname: Typography\ntitle: Typography\norder: 3\n-----><!-- catalog-only-end -->\n\n# Typography\n\n<!-- go/mwc-typography -->\n\n<!--*\n# Document freshness: For more information, see go/fresh-source.\nfreshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }\ntag: 'docType:howTo'\n*-->\n\n<!-- [TOC] -->\n\n[Typography](https://m3.material.io/styles/typography)<!-- {.external} --> helps make\nwriting legible and beautiful.\n\n> Tip: \"typeface\" and \"typescale\" can be confusing. \"face\" refers to\n> `font-family` and `font-weight`.\n>\n> \"scale\" refers to a group of `font-family`, `font-size`, `line-height`, and\n> `font-weight` tokens.\n\n## Typeface\n\n<!-- go/md-ref-typeface -->\n\nA [typeface](https://m3.material.io/styles/typography/fonts)<!-- {.external} --> is a\n`font-family`. In Material there are plain and brand typefaces.\n\nEach typeface has normal, medium, and bold styles (defaults to `400`, `500`, and\n`700`). All three weight styles need to be included for a font.\n\n> Important: if you do not change the typeface, be sure to load the default\n> `'Roboto'` font. For example, from\n> [fonts.google.com](https://fonts.google.com/share?selection.family=Roboto:wght@400;500;700).\n\n### Tokens\n\nTypefaces can be set using\n[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->.\nTokens follow the naming convention `--md-ref-typeface-<token>`.\n\nTypeface | Token\n-------- | -------------------------\nBrand    | `--md-ref-typeface-brand`\nPlain    | `--md-ref-typeface-plain`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-ref-typeface.scss)\n    <!-- {.external} -->\n\n```css\n@import url('https://fonts.googleapis.com/css2?family=Open%20Sans:wght@400;500;700&display=swap');\n\n:root {\n  --md-ref-typeface-brand: 'Open Sans';\n  --md-ref-typeface-plain: system-ui;\n}\n```\n\n## Typescale\n\n<!-- go/md-sys-typescale -->\n\nA\n[typescale](https://m3.material.io/styles/typography/type-scale-tokens)<!-- {.external} -->\nis a collection of font styles: `font-family`, `font-size`, `line-height`, and\n`font-weight`. They are organized into roles that describe their purpose.\n\nMaterial's\n[applying type guidelines](https://m3.material.io/styles/typography/applying-type)<!-- {.external} -->\nexplains when to use each typescale role.\n\n### Classes\n\n<!-- go/md-typescale -->\n\nTypescales can be applied to an element using the classes from the typescale\nstylesheet.\n\nClass names follow the naming convention `.md-typescale-<scale>-<size>`.\n\n```ts\nimport {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\n\n// `typescaleStyles.styleSheet` is a `CSSStyleSheet` that can be added to a\n// document or shadow root's `adoptedStyleSheets` to use the `.md-typescale-*`\n// classes.\ndocument.adoptedStyleSheets.push(typescaleStyles.styleSheet);\n\n// `typescaleStyles` can also be added to a `LitElement` component's styles.\nclass App extends LitElement {\n  static styles = [typescaleStyles, css`...`];\n\n  render() {\n    return html`\n      <h1 class=\"md-typescale-display-large\">Large display</h1>\n      <p class=\"md-typescale-body-medium\">Body text</p>\n    `;\n  }\n}\n```\n\n### Tokens\n\nTypescales can be set using\n[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->.\nEach typescale has three sizes: `small`, `medium`, and `large`. Each size has\nfour properties: `font` (family), `size`, `line-height`, and `weight`.\n\nTokens follow the naming convention\n`--md-sys-typescale-<scale>-<size>-<property>`.\n\nTypescale | Tokens\n--------- | ------------------------------------------------\nDisplay   | `--md-sys-typescale-display-medium-font`\n&nbsp;    | `--md-sys-typescale-display-medium-size`\n&nbsp;    | `--md-sys-typescale-display-medium-line-height`\n&nbsp;    | `--md-sys-typescale-display-medium-weight`\nHeadline  | `--md-sys-typescale-headline-medium-font`\n&nbsp;    | `--md-sys-typescale-headline-medium-size`\n&nbsp;    | `--md-sys-typescale-headline-medium-line-height`\n&nbsp;    | `--md-sys-typescale-headline-medium-weight`\nTitle     | `--md-sys-typescale-title-medium-font`\n&nbsp;    | `--md-sys-typescale-title-medium-size`\n&nbsp;    | `--md-sys-typescale-title-medium-line-height`\n&nbsp;    | `--md-sys-typescale-title-medium-weight`\nBody      | `--md-sys-typescale-body-medium-font`\n&nbsp;    | `--md-sys-typescale-body-medium-size`\n&nbsp;    | `--md-sys-typescale-body-medium-line-height`\n&nbsp;    | `--md-sys-typescale-body-medium-weight`\nLabel     | `--md-sys-typescale-label-medium-font`\n&nbsp;    | `--md-sys-typescale-label-medium-size`\n&nbsp;    | `--md-sys-typescale-label-medium-line-height`\n&nbsp;    | `--md-sys-typescale-label-medium-weight`\n\n*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-sys-typescale.scss)\n    <!-- {.external} -->\n\n```css\n:root {\n  --md-sys-typescale-body-medium-size: 1rem;\n  --md-sys-typescale-body-medium-line-height: 1.5rem;\n  /* ... */\n}\n```\n\n> Tip: to change all font families across typescales, prefer setting\n> `--md-ref-typeface-brand` and `--md-ref-typeface-plain`, which map to each\n> typescale.\n>\n> Use `--md-sys-typescale-<scale>-<size>-font` to change the typeface that a\n> font is mapped to. This is useful for custom typefaces.\n>\n> ```css\n> :root {\n>   --my-brand-font: 'Open Sans';\n>   --my-headline-font: 'Montserrat';\n>   --my-title-font: 'Montserrat';\n>   --my-plain-font: system-ui;\n>\n>   --md-ref-typeface-brand: var(--my-brand-font);\n>   --md-ref-typeface-plain: var(--my-plain-font);\n>\n>   --md-sys-typescale-headline-font: var(--my-headline-font);\n>   --md-sys-typescale-title-font: var(--my-title-font);\n> }\n> ```\n\n<!--#include file=\"../../googlers/theming-typography.md\" -->\n"
  },
  {
    "path": "elevation/_elevation.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/elevation' show theme;\n"
  },
  {
    "path": "elevation/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {Knob, numberInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Elevation',\n  [new Knob('level', {defaultValue: 1, ui: numberInput()})],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "elevation/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "elevation/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/elevation/elevation.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for elevation stories. */\nexport interface StoryKnobs {\n  level: number;\n}\n\nconst styles = css`\n  .row {\n    display: flex;\n    gap: 16px;\n  }\n\n  .box {\n    align-items: center;\n    background: var(--md-sys-color-primary-container);\n    border: 1px solid;\n    border-radius: 16px;\n    color: var(--md-sys-color-on-primary-container);\n    display: flex;\n    font-family: sans-serif;\n    height: 64px;\n    justify-content: center;\n    position: relative;\n    transition-duration: 250ms;\n    transition-timing-function: ease-in-out;\n    width: 64px;\n  }\n\n  .level0 {\n    --md-elevation-level: 0;\n  }\n\n  .level1 {\n    --md-elevation-level: 1;\n  }\n\n  .level2 {\n    --md-elevation-level: 2;\n  }\n\n  .level3 {\n    --md-elevation-level: 3;\n  }\n\n  .level4 {\n    --md-elevation-level: 4;\n  }\n\n  .level5 {\n    --md-elevation-level: 5;\n  }\n`;\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'Elevation',\n  styles,\n  render({level}) {\n    const clampedLevel = Math.min(Math.max(level, 0), 5);\n    return html`\n      <div class=\"box level${clampedLevel}\">\n        ${clampedLevel}\n        <md-elevation></md-elevation>\n      </div>\n    `;\n  },\n};\n\nconst all: MaterialStoryInit<StoryKnobs> = {\n  name: 'Levels',\n  styles,\n  render() {\n    return html`\n      <div class=\"row\">\n        <div class=\"box level0\">\n          0\n          <md-elevation></md-elevation>\n        </div>\n        <div class=\"box level1\">\n          1\n          <md-elevation></md-elevation>\n        </div>\n        <div class=\"box level2\">\n          2\n          <md-elevation></md-elevation>\n        </div>\n        <div class=\"box level3\">\n          3\n          <md-elevation></md-elevation>\n        </div>\n        <div class=\"box level4\">\n          4\n          <md-elevation></md-elevation>\n        </div>\n        <div class=\"box level5\">\n          5\n          <md-elevation></md-elevation>\n        </div>\n      </div>\n    `;\n  },\n};\n\n/** Elevation stories. */\nexport const stories = [standard, all];\n"
  },
  {
    "path": "elevation/elevation.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Elevation} from './internal/elevation.js';\nimport {styles} from './internal/elevation-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevation': MdElevation;\n  }\n}\n\n/**\n * The `<md-elevation>` custom element with default styles.\n *\n * Elevation is the relative distance between two surfaces along the z-axis.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevation')\nexport class MdElevation extends Elevation {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "elevation/elevation_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdElevation} from './elevation.js';\n\ndescribe('<md-elevation>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdElevation.styles);\n  });\n});\n"
  },
  {
    "path": "elevation/internal/_elevation.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-elevation-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-elevation-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-elevation-values();\n\n  :host,\n  .shadow,\n  .shadow::before,\n  .shadow::after {\n    border-radius: inherit;\n    inset: 0;\n    position: absolute;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n  }\n\n  :host {\n    display: flex;\n    pointer-events: none;\n    transition-property: box-shadow, opacity;\n  }\n\n  .shadow::before,\n  .shadow::after {\n    content: '';\n    transition-property: box-shadow, opacity;\n\n    // Elevation doesn't share styles with multiple variants, so we normally\n    // would not use private custom properties. However, these variables are\n    // repeated several times in the styles below, and a shorter custom property\n    // reduces the CSS size, minified and gzip.\n    --_level: #{map.get($tokens, 'level')};\n    --_shadow-color: #{map.get($tokens, 'shadow-color')};\n  }\n\n  // Key box shadow\n  .shadow::before {\n    // level0: box-shadow: 0px 0px 0px 0px;\n    // level1: box-shadow: 0px 1px 2px 0px;\n    // level2: box-shadow: 0px 1px 2px 0px;\n    // level3: box-shadow: 0px 1px 3px 0px;\n    // level4: box-shadow: 0px 2px 3px 0px;\n    // level5: box-shadow: 0px 4px 4px 0px;\n\n    // Add a clamped value for each level to build the correct values.\n    // Sass will simplify nested calc()s.\n\n    // 0 + 0 = 0\n    // $level0-y: 0; // +0 is a no-op\n    // 0 + 1 = 1\n    $level1-y: clamp(0, var(--_level), 1);\n    // 1 + 0 = 1\n    // $level2-y: 0; // +0 is a no-op\n    // 1 + 0 = 1\n    // $level3-y: 0; // +0 is a no-op\n    // 1 + 1 = 2\n    $level4-y: clamp(0, var(--_level) - 3, 1);\n    // 2 + 2 = 4\n    $level5-y: calc(2 * clamp(0, var(--_level) - 4, 1));\n    // Convert to px.\n    $y: calc(1px * ($level1-y + $level4-y + $level5-y));\n\n    // 0 + 0 = 0\n    // $level0-blur: 0; // +0 is a no-op\n    // 0 + 2 = 2\n    $level1-blur: calc(2 * clamp(0, var(--_level), 1));\n    // 2 + 0 = 2\n    // $level2-blur: 0; // +0 is a no-op\n    // 2 + 1 = 3\n    $level3-blur: clamp(0, var(--_level) - 2, 1);\n    // 3 + 0 = 3\n    // $level4-blur: 0; // +0 is a no-op\n    // 3 + 1 = 4\n    $level5-blur: clamp(0, var(--_level) - 4, 1);\n    // Convert to px.\n    $blur: calc(1px * ($level1-blur + $level3-blur + $level5-blur));\n\n    box-shadow: 0px $y $blur 0px var(--_shadow-color);\n    opacity: 0.3;\n  }\n\n  // Ambient box shadow\n  .shadow::after {\n    // level0: box-shadow: 0px 0px 0px 0px;\n    // level1: box-shadow: 0px 1px 3px 1px;\n    // level2: box-shadow: 0px 2px 6px 2px;\n    // level3: box-shadow: 0px 4px 8px 3px;\n    // level4: box-shadow: 0px 6px 10px 4px;\n    // level5: box-shadow: 0px 8px 12px 6px;\n\n    // Add a clamped value for each level to build the correct values.\n    // Sass will simplify nested calc()s.\n\n    // 0 + 0 = 0\n    // $level0-y: 0; // +0 is a no-op\n    // 0 + 1 = 1\n    $level1-y: clamp(0, var(--_level), 1);\n    // 1 + 1 = 2\n    $level2-y: clamp(0, var(--_level) - 1, 1);\n    // 2 + 2 = 4\n    // $level3-y: 2 * clamp(0, var(--_level) - 2, 1);\n    // 4 + 2 = 6\n    // $level4-y: 2 * clamp(0, var(--_level) - 3, 1);\n    // 6 + 2 = 8\n    // $level5-y: 2 * clamp(0, var(--_level) - 4, 1);\n    // Levels 3-5 can be simplified by changing the max clamp value.\n    $level3to5-y: calc(2 * clamp(0, var(--_level) - 2, 3));\n    // Convert to px.\n    $y: calc(1px * ($level1-y + $level2-y + $level3to5-y));\n\n    // 0 + 0 = 0\n    // $level0-blur: 0; // +0 is a no-op\n    // 0 + 3 = 3\n    // $level1-blur: 3 * clamp(0, var(--_level), 1);\n    // 3 + 3 = 6\n    // $level2-blur: 3 * clamp(0, var(--_level) - 1, 1);\n    // Levels 1-2 can be simplified by changing the max clamp value.\n    $level1to2-blur: calc(3 * clamp(0, var(--_level), 2));\n    // 6 + 2 = 8\n    // $level3-blur: 2 * clamp(0, var(--_level) - 2, 1);\n    // 8 + 2 = 10\n    // $level4-blur: 2 * clamp(0, var(--_level) - 3, 1);\n    // 10 + 2 = 12\n    // $level5-blur: 2 * clamp(0, var(--_level) - 4, 1);\n    // Levels 3-5 can be simplified by changing the max clamp value.\n    $level3to5-blur: calc(2 * clamp(0, var(--_level) - 2, 3));\n    // Convert to px.\n    $blur: calc(1px * ($level1to2-blur + $level3to5-blur));\n\n    // 0 + 0 = 0\n    // $level0-spread: 0; // +0 is a no-op\n    // 0 + 1 = 1\n    // $level1-spread: clamp(0, var(--_level), 1);\n    // 1 + 1 = 2\n    // $level2-spread: clamp(0, var(--_level) - 1, 1);\n    // 2 + 1 = 3\n    // $level3-spread: clamp(0, var(--_level) - 2, 1);\n    // 3 + 1 = 4\n    // $level4-spread: clamp(0, var(--_level) - 3, 1);\n    // 4 + 2 = 6\n    // Levels 1-4 can be simplified by changing the max clamp value\n    $level1to4-spread: clamp(0, var(--_level), 4);\n    $level5-spread: calc(2 * clamp(0, var(--_level) - 4, 1));\n    // Convert to px.\n    $spread: calc(1px * ($level1to4-spread + $level5-spread));\n\n    box-shadow: 0px $y $blur $spread var(--_shadow-color);\n    opacity: 0.15;\n  }\n}\n"
  },
  {
    "path": "elevation/internal/elevation-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './elevation';\n// go/keep-sorted end\n\n@include elevation.styles;\n"
  },
  {
    "path": "elevation/internal/elevation.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * A component for elevation.\n */\nexport class Elevation extends LitElement {\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  protected override render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"
  },
  {
    "path": "fab/_fab.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/fab-branded' as branded-* show branded-theme;\n@forward './internal/fab' show theme;\n"
  },
  {
    "path": "fab/branded-fab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab, FabVariant} from './internal/fab.js';\nimport {styles} from './internal/fab-branded-styles.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\nexport {type FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-branded-fab': MdBrandedFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small. Branded\n * FABs are used to specifically call attention to branded logo icons.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-branded-fab')\nexport class MdBrandedFab extends Fab {\n  /**\n   * Branded FABs have no variants\n   */\n  declare variant: FabVariant;\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': false,\n      'secondary': false,\n      'tertiary': false,\n      'small': false,\n    };\n  }\n  static override styles: CSSResultOrNative[] = [\n    sharedStyles,\n    styles,\n    forcedColors,\n  ];\n}\n"
  },
  {
    "path": "fab/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {FabSize} from '@material/web/fab/fab.js';\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {\n  boolInput,\n  Knob,\n  selectDropdown,\n  textInput,\n} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('FAB', [\n  new Knob('icon', {defaultValue: 'edit', ui: textInput()}),\n  new Knob('label', {defaultValue: '', ui: textInput()}),\n  new Knob('lowered', {defaultValue: false, ui: boolInput()}),\n  new Knob('size', {\n    defaultValue: 'medium' as FabSize,\n    ui: selectDropdown<FabSize>({\n      options: [\n        {label: 'medium', value: 'medium'},\n        {label: 'small', value: 'small'},\n        {label: 'large', value: 'large'},\n      ],\n    }),\n  }),\n]);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {icons: 'material-symbols'});\n"
  },
  {
    "path": "fab/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "fab/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/fab/branded-fab.js';\nimport '@material/web/fab/fab.js';\nimport '@material/web/icon/icon.js';\n\nimport {FabSize} from '@material/web/fab/fab.js';\nimport {\n  labelStyles,\n  MaterialStoryInit,\n} from './material-collection.js';\nimport {css, html, nothing} from 'lit';\n\n/** Knob types for fab stories. */\nexport interface StoryKnobs {\n  icon: string;\n  label: string;\n  lowered: boolean;\n  size: FabSize | undefined;\n}\n\nconst styles = css`\n  .row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n\n  label {\n    flex-direction: column;\n    gap: 16px;\n  }\n`;\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'Floating action buttons',\n  styles: [labelStyles, styles],\n  render({icon, label, lowered, size}) {\n    return html`\n      <div class=\"row\">\n        <label>\n          <span aria-hidden=\"true\">Surface</span>\n          <md-fab\n            aria-label=${label ? nothing : 'An example surface FAB'}\n            variant=\"surface\"\n            .lowered=${lowered}\n            .label=${label}\n            .size=${size!}>\n            <md-icon slot=\"icon\">${icon}</md-icon>\n          </md-fab>\n        </label>\n\n        <label>\n          <span aria-hidden=\"true\">Primary</span>\n          <md-fab\n            aria-label=${label ? nothing : 'An example primary FAB'}\n            variant=\"primary\"\n            .lowered=${lowered}\n            .label=${label}\n            .size=${size!}>\n            <md-icon slot=\"icon\">${icon}</md-icon>\n          </md-fab>\n        </label>\n\n        <label>\n          <span aria-hidden=\"true\">Secondary</span>\n          <md-fab\n            aria-label=${label ? nothing : 'An example secondary FAB'}\n            variant=\"secondary\"\n            .lowered=${lowered}\n            .label=${label}\n            .size=${size!}>\n            <md-icon slot=\"icon\">${icon}</md-icon>\n          </md-fab>\n        </label>\n\n        <label>\n          <span aria-hidden=\"true\">Tertiary</span>\n          <md-fab\n            aria-label=${label ? nothing : 'An example tertiary FAB'}\n            variant=\"tertiary\"\n            .lowered=${lowered}\n            .label=${label}\n            .size=${size!}>\n            <md-icon slot=\"icon\">${icon}</md-icon>\n          </md-fab>\n        </label>\n\n        <label>\n          <span aria-hidden=\"true\">Branded</span>\n          <md-branded-fab\n            aria-label=${label ? nothing : 'An example branded FAB'}\n            .lowered=${lowered}\n            .label=${label}\n            .size=${size!}>\n            <svg slot=\"icon\" width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n              <path fill=\"#34A853\" d=\"M16 16v14h4V20z\"></path>\n              <path fill=\"#4285F4\" d=\"M30 16H20l-4 4h14z\"></path>\n              <path fill=\"#FBBC05\" d=\"M6 16v4h10l4-4z\"></path>\n              <path fill=\"#EA4335\" d=\"M20 16V6h-4v14z\"></path>\n              <path fill=\"none\" d=\"M0 0h36v36H0z\"></path>\n            </svg>\n          </md-branded-fab>\n        </label>\n      </div>\n    `;\n  },\n};\n\n/** Checkbox stories. */\nexport const stories = [standard];\n"
  },
  {
    "path": "fab/fab.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab} from './internal/fab.js';\nimport {styles} from './internal/fab-styles.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\nexport {type FabVariant} from './internal/fab.js';\nexport {type FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles, forcedColors];\n}\n"
  },
  {
    "path": "fab/fab_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, render} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdBrandedFab} from './branded-fab.js';\nimport {MdFab} from './fab.js';\nimport {FabHarness} from './harness.js';\n\ndescribe('<md-fab>', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const element = env.render(html`<md-fab></md-fab>`).querySelector('md-fab');\n    if (!element) {\n      throw new Error('Could not query rendered <md-fab>.');\n    }\n\n    await env.waitForStability();\n    const button = element.renderRoot.querySelector('button');\n    if (!button) {\n      throw new Error('Could not query rendered <button>.');\n    }\n\n    return {\n      button,\n      harness: new FabHarness(element),\n    };\n  }\n\n  describe('.styles', () => {\n    createTokenTests(MdFab.styles);\n  });\n\n  describe('basic', () => {\n    it('initializes as an md-fab', async () => {\n      const {harness} = await setupTest();\n      expect(harness.element).toBeInstanceOf(MdFab);\n      expect(harness.element.lowered).toEqual(false);\n      expect(harness.element.label).toEqual('');\n      expect(harness.element.variant).toEqual('surface');\n      expect(harness.element.size).toEqual('medium');\n      expect(harness.element.label).toEqual('');\n    });\n\n    describe('variants', () => {\n      it('variant classes are set', async () => {\n        const {harness, button} = await setupTest();\n        harness.element.variant = 'primary';\n        await env.waitForStability();\n\n        expect(button.classList.contains('primary')).toBeTrue();\n        expect(button.classList.contains('secondary')).toBeFalse();\n        expect(button.classList.contains('tertiary')).toBeFalse();\n\n        harness.element.variant = 'secondary';\n        await env.waitForStability();\n\n        expect(button.classList.contains('primary')).toBeFalse();\n        expect(button.classList.contains('secondary')).toBeTrue();\n        expect(button.classList.contains('tertiary')).toBeFalse();\n\n        harness.element.variant = 'tertiary';\n        await env.waitForStability();\n\n        expect(button.classList.contains('primary')).toBeFalse();\n        expect(button.classList.contains('secondary')).toBeFalse();\n        expect(button.classList.contains('tertiary')).toBeTrue();\n      });\n\n      it('size classes are set', async () => {\n        const {harness, button} = await setupTest();\n        harness.element.size = 'small';\n        await env.waitForStability();\n\n        expect(button.classList.contains('small')).toBeTrue();\n        expect(button.classList.contains('large')).toBeFalse();\n\n        harness.element.size = 'large';\n        await env.waitForStability();\n\n        expect(button.classList.contains('small')).toBeFalse();\n        expect(button.classList.contains('large')).toBeTrue();\n      });\n    });\n\n    it('size classes are not set when extended', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.size = 'small';\n      await env.waitForStability();\n\n      expect(button.classList.contains('small')).toBeTrue();\n\n      harness.element.label = 'label';\n      await env.waitForStability();\n\n      expect(button.classList.contains('small')).toBeFalse();\n      expect(button.classList.contains('large')).toBeFalse();\n\n      harness.element.size = 'large';\n      await env.waitForStability();\n\n      expect(button.classList.contains('small')).toBeFalse();\n      expect(button.classList.contains('large')).toBeFalse();\n    });\n  });\n\n  describe('lowered', () => {\n    it('sets the correct classes', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.lowered = true;\n      await env.waitForStability();\n\n      expect(button.classList.contains('lowered')).toBeTrue();\n    });\n  });\n\n  describe('icon', () => {\n    it('node with `slot=icon` will serve as the fab icon', async () => {\n      const {harness} = await setupTest();\n      render(html`<i slot=\"icon\">star</i>`, harness.element);\n      const icon = harness.element.querySelector<HTMLElement>('[slot=\"icon\"]')!;\n      expect(icon.textContent!.trim()).toEqual('star');\n    });\n  });\n\n  describe('label', () => {\n    it('displays label text', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.label = 'foo';\n      await env.waitForStability();\n\n      const content = button.querySelector('.label')!;\n      expect(content.textContent!.trim()).toEqual('foo');\n    });\n\n    it('serves as `aria-label` of native button', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.ariaLabel = 'foo';\n      await env.waitForStability();\n\n      expect(button.getAttribute('aria-label')).toEqual('foo');\n    });\n  });\n});\n\ndescribe('<md-branded-fab>', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const element = env\n      .render(html`<md-branded-fab></md-branded-fab>`)\n      .querySelector('md-branded-fab');\n    if (!element) {\n      throw new Error('Could not query rendered <md-branded-fab>.');\n    }\n\n    await env.waitForStability();\n    const button = element.renderRoot.querySelector('button');\n    if (!button) {\n      throw new Error('Could not query rendered <button>.');\n    }\n\n    return {\n      button,\n      harness: new FabHarness(element),\n    };\n  }\n\n  describe('.styles', () => {\n    createTokenTests(MdBrandedFab.styles);\n  });\n\n  describe('variants', () => {\n    it('variant classes are not set', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.variant = 'primary';\n      await env.waitForStability();\n\n      expect(button.classList.contains('primary')).toBeFalse();\n      expect(button.classList.contains('secondary')).toBeFalse();\n      expect(button.classList.contains('tertiary')).toBeFalse();\n\n      harness.element.variant = 'secondary';\n      await env.waitForStability();\n\n      expect(button.classList.contains('primary')).toBeFalse();\n      expect(button.classList.contains('secondary')).toBeFalse();\n      expect(button.classList.contains('tertiary')).toBeFalse();\n\n      harness.element.variant = 'tertiary';\n      await env.waitForStability();\n\n      expect(button.classList.contains('primary')).toBeFalse();\n      expect(button.classList.contains('secondary')).toBeFalse();\n      expect(button.classList.contains('tertiary')).toBeFalse();\n    });\n\n    it('small size classes are not set', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.size = 'small';\n      await env.waitForStability();\n\n      expect(button.classList.contains('small')).toBeFalse();\n      expect(button.classList.contains('large')).toBeFalse();\n    });\n  });\n\n  describe('accessibility', () => {\n    it('sets aria-hidden on the icon slot when aria-label is set', async () => {\n      const {button, harness} = await setupTest();\n      await env.waitForStability();\n\n      const iconSlot = button.querySelector('slot[name=\"icon\"]')!;\n\n      expect(button.hasAttribute('aria-label')).toBeFalse();\n      expect(iconSlot.hasAttribute('aria-hidden')).toBeFalse();\n\n      const element = harness.element;\n      element.ariaLabel = 'foo';\n      await env.waitForStability();\n\n      expect(button.hasAttribute('aria-label')).toBeTrue();\n      expect(iconSlot.getAttribute('aria-hidden')).toEqual('true');\n    });\n\n    it('sets aria-hidden on the icon slot when label is set', async () => {\n      const {button, harness} = await setupTest();\n      await env.waitForStability();\n      const element = harness.element;\n\n      const iconSlot = button.querySelector('slot[name=\"icon\"]')!;\n\n      expect(!!element.label).toBeFalse();\n      expect(iconSlot.hasAttribute('aria-hidden')).toBeFalse();\n\n      element.label = 'foo';\n      await env.waitForStability();\n\n      expect(!!element.label).toBeTrue();\n      expect(iconSlot.getAttribute('aria-hidden')).toEqual('true');\n    });\n  });\n});\n"
  },
  {
    "path": "fab/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Fab} from './internal/fab.js';\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.fab') as HTMLButtonElement;\n  }\n}\n"
  },
  {
    "path": "fab/internal/_fab-branded.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-fab-branded-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-fab-branded-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-fab-branded-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape', 'large-container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "fab/internal/_fab.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: ltokens.$md-comp-fab-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-fab-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-fab-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove(\n      $tokens,\n      'container-shape',\n      'large-container-shape',\n      'small-container-shape'\n    );\n\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    cursor: pointer;\n  }\n\n  :host([size='small'][touch-target='wrapper']) {\n    margin: max(0px, 48px - var(--_small-container-height));\n  }\n\n  .fab {\n    @include color(\n      (\n        'focus-icon-color': var(--_focus-icon-color),\n        'hover-icon-color': var(--_hover-icon-color),\n        'icon-color': var(--_icon-color),\n        'pressed-icon-color': var(--_pressed-icon-color),\n      )\n    );\n\n    cursor: inherit;\n\n    &.primary {\n      @include color(\n        (\n          'container-color': var(--_primary-container-color),\n          'focus-icon-color': var(--_primary-focus-icon-color),\n          'hover-icon-color': var(--_primary-hover-icon-color),\n          'hover-state-layer-color': var(--_primary-hover-state-layer-color),\n          'icon-color': var(--_primary-icon-color),\n          'pressed-icon-color': var(--_primary-pressed-icon-color),\n          'pressed-state-layer-color': var(--_primary-pressed-state-layer-color),\n          'label-text-color': var(--_primary-label-text-color),\n          'hover-label-text-color': var(--_primary-hover-label-text-color),\n          'focus-label-text-color': var(--_primary-focus-label-text-color),\n          'pressed-label-text-color': var(--_primary-pressed-label-text-color),\n        )\n      );\n    }\n\n    &.secondary {\n      @include color(\n        (\n          'container-color': var(--_secondary-container-color),\n          'focus-icon-color': var(--_secondary-focus-icon-color),\n          'hover-icon-color': var(--_secondary-hover-icon-color),\n          'hover-state-layer-color': var(--_secondary-hover-state-layer-color),\n          'icon-color': var(--_secondary-icon-color),\n          'pressed-icon-color': var(--_secondary-pressed-icon-color),\n          'pressed-state-layer-color':\n            var(--_secondary-pressed-state-layer-color),\n          'label-text-color': var(--_secondary-label-text-color),\n          'hover-label-text-color': var(--_secondary-hover-label-text-color),\n          'focus-label-text-color': var(--_secondary-focus-label-text-color),\n          'pressed-label-text-color': var(--_secondary-pressed-label-text-color),\n        )\n      );\n    }\n\n    &.tertiary {\n      @include color(\n        (\n          'container-color': var(--_tertiary-container-color),\n          'focus-icon-color': var(--_tertiary-focus-icon-color),\n          'hover-icon-color': var(--_tertiary-hover-icon-color),\n          'hover-state-layer-color': var(--_tertiary-hover-state-layer-color),\n          'icon-color': var(--_tertiary-icon-color),\n          'pressed-icon-color': var(--_tertiary-pressed-icon-color),\n          'pressed-state-layer-color':\n            var(--_tertiary-pressed-state-layer-color),\n          'label-text-color': var(--_tertiary-label-text-color),\n          'hover-label-text-color': var(--_tertiary-hover-label-text-color),\n          'focus-label-text-color': var(--_tertiary-focus-label-text-color),\n          'pressed-label-text-color': var(--_tertiary-pressed-label-text-color),\n        )\n      );\n    }\n  }\n\n  // The default content is needed because we do a bit of trickery. If there is\n  // no slotted icon we need to have `padding-inline: 20px` but if there is, we\n  // need `padding-inline: 16px 20px`.\n  //\n  // So what this approach does is make the margin / padding-inline of the outer\n  // button `padding-inline: 16px 20px`, so if there is something slotted, it\n  // renders correctly. This default content span then fills the extra `4px`\n  // inline spacing if nothing is slotted which effectively makes the button's\n  // inline spacing `20px/20px`.\n  .fab.extended slot span {\n    padding-inline-start: 4px;\n  }\n\n  .fab.small {\n    width: var(--_small-container-width);\n    height: var(--_small-container-height);\n\n    .icon ::slotted(*) {\n      width: var(--_small-icon-size);\n      height: var(--_small-icon-size);\n      font-size: var(--_small-icon-size);\n    }\n\n    &,\n    .ripple {\n      border-start-start-radius: var(--_small-container-shape-start-start);\n      border-start-end-radius: var(--_small-container-shape-start-end);\n      border-end-start-radius: var(--_small-container-shape-end-start);\n      border-end-end-radius: var(--_small-container-shape-end-end);\n    }\n\n    md-focus-ring {\n      @include focus-ring.theme(\n        (\n          'shape-start-start': var(--_small-container-shape-start-start),\n          'shape-start-end': var(--_small-container-shape-start-end),\n          'shape-end-end': var(--_small-container-shape-end-end),\n          'shape-end-start': var(--_small-container-shape-end-start),\n        )\n      );\n    }\n  }\n}\n\n@mixin color($colors) {\n  background-color: map.get($colors, 'container-color');\n\n  @include ripple.theme(\n    (\n      hover-color: map.get($colors, hover-state-layer-color),\n      pressed-color: map.get($colors, pressed-state-layer-color),\n    )\n  );\n\n  .icon ::slotted(*) {\n    color: map.get($colors, icon-color);\n  }\n\n  &:focus {\n    color: map.get($colors, focus-icon-color);\n  }\n\n  &:hover {\n    color: map.get($colors, hover-icon-color);\n  }\n\n  &:active {\n    color: map.get($colors, pressed-icon-color);\n  }\n\n  .label {\n    color: map.get($colors, label-text-color);\n\n    .fab:hover & {\n      color: map.get($colors, hover-label-text-color);\n    }\n\n    .fab:focus & {\n      color: map.get($colors, focus-label-text-color);\n    }\n\n    .fab:active & {\n      color: map.get($colors, pressed-label-text-color);\n    }\n  }\n}\n"
  },
  {
    "path": "fab/internal/_shared.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../elevation/elevation';\n@use '../../focus/focus-ring';\n@use '../../ripple/ripple';\n@use '../../tokens';\n@use './fab';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n\n@mixin styles() {\n  :host {\n    @include ripple.theme(\n      (\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n\n    display: inline-flex;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([size='medium'][touch-target='wrapper']) {\n    margin: max(0px, 48px - var(--_container-height));\n  }\n\n  :host([size='large'][touch-target='wrapper']) {\n    margin: max(0px, 48px - var(--_large-container-height));\n  }\n\n  .fab,\n  .icon,\n  .icon ::slotted(*) {\n    display: flex;\n  }\n\n  .fab {\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    padding: 0;\n    position: relative;\n    height: var(--_container-height);\n    transition-property: background-color;\n    border-width: 0px;\n    outline: none;\n    // Required for elevation and ripple to stay below content\n    z-index: 0;\n    // Override the user-agent text-transform: none of <button>\n    text-transform: inherit;\n\n    &.extended {\n      width: inherit;\n      box-sizing: border-box;\n      padding-inline-start: 16px;\n      padding-inline-end: 20px;\n    }\n\n    &:not(.extended) {\n      width: var(--_container-width);\n    }\n\n    &.large {\n      width: var(--_large-container-width);\n      height: var(--_large-container-height);\n\n      .icon ::slotted(*) {\n        width: var(--_large-icon-size);\n        height: var(--_large-icon-size);\n        font-size: var(--_large-icon-size);\n      }\n\n      &,\n      .ripple {\n        border-start-start-radius: var(--_large-container-shape-start-start);\n        border-start-end-radius: var(--_large-container-shape-start-end);\n        border-end-start-radius: var(--_large-container-shape-end-start);\n        border-end-end-radius: var(--_large-container-shape-end-end);\n      }\n\n      md-focus-ring {\n        @include focus-ring.theme(\n          (\n            'shape-start-start': var(--_large-container-shape-start-start),\n            'shape-start-end': var(--_large-container-shape-start-end),\n            'shape-end-end': var(--_large-container-shape-end-end),\n            'shape-end-start': var(--_large-container-shape-end-start),\n          )\n        );\n      }\n    }\n\n    @include _elevation(\n      (\n        'default': var(--_container-elevation),\n        'focus': var(--_focus-container-elevation),\n        'hover': var(--_hover-container-elevation),\n        'pressed': var(--_pressed-container-elevation),\n      ),\n      var(--_container-shadow-color)\n    );\n\n    &.lowered {\n      background-color: var(--_lowered-container-color);\n\n      @include _elevation(\n        (\n          'default': var(--_lowered-container-elevation),\n          'focus': var(--_lowered-focus-container-elevation),\n          'hover': var(--_lowered-hover-container-elevation),\n          'pressed': var(--_lowered-pressed-container-elevation),\n        )\n      );\n    }\n\n    @include fab.color(\n      (\n        'container-color': var(--_container-color),\n        'hover-state-layer-color': var(--_hover-state-layer-color),\n        'pressed-state-layer-color': var(--_pressed-state-layer-color),\n        'label-text-color': var(--_label-text-color),\n        'hover-label-text-color': var(--_hover-label-text-color),\n        'focus-label-text-color': var(--_focus-label-text-color),\n        'pressed-label-text-color': var(--_pressed-label-text-color),\n      )\n    );\n  }\n\n  .label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-family: var(--_label-text-font);\n    font-size: var(--_label-text-size);\n    line-height: var(--_label-text-line-height);\n    font-weight: var(--_label-text-weight);\n  }\n\n  .fab.extended .icon ::slotted(*) {\n    margin-inline-end: 12px;\n  }\n\n  .ripple {\n    overflow: hidden;\n  }\n\n  .ripple,\n  md-elevation {\n    // puts both behind content\n    z-index: -1;\n  }\n\n  .touch-target {\n    position: absolute;\n    top: 50%;\n    height: 48px;\n    left: 50%;\n    width: 48px;\n    transform: translate(-50%, -50%);\n  }\n\n  :host([touch-target='none']) .touch-target {\n    display: none;\n  }\n\n  md-elevation,\n  .fab {\n    // TODO: replace duration with animation tokens\n    transition-duration: 280ms;\n    transition-timing-function: map.get($_md-sys-motion, 'easing-emphasized');\n  }\n\n  .fab,\n  .ripple {\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n    border-end-end-radius: var(--_container-shape-end-end);\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape-start-start': var(--_container-shape-start-start),\n        'shape-start-end': var(--_container-shape-start-end),\n        'shape-end-end': var(--_container-shape-end-end),\n        'shape-end-start': var(--_container-shape-end-start),\n      )\n    );\n  }\n\n  .icon ::slotted(*) {\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    font-size: var(--_icon-size);\n  }\n}\n\n@mixin _elevation($states, $shadow-color: null) {\n  @include elevation.theme(\n    (\n      'level': map.get($states, 'default'),\n    )\n  );\n\n  @if $shadow-color {\n    @include elevation.theme(\n      (\n        'shadow-color': $shadow-color,\n      )\n    );\n  }\n\n  // apply elevation in order of focused, hovered, pressed, disabled\n  // this ensures a button will have hover elevation after being focused\n  &:focus {\n    @include elevation.theme(\n      (\n        'level': map.get($states, 'focus'),\n      )\n    );\n  }\n\n  &:hover {\n    @include elevation.theme(\n      (\n        'level': map.get($states, 'hover'),\n      )\n    );\n  }\n\n  &:active {\n    @include elevation.theme(\n      (\n        'level': map.get($states, 'pressed'),\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "fab/internal/fab-branded-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './fab-branded';\n// go/keep-sorted end\n\n@include fab-branded.styles;\n"
  },
  {
    "path": "fab/internal/fab-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './fab';\n// go/keep-sorted end\n\n@include fab.styles;\n"
  },
  {
    "path": "fab/internal/fab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property} from 'lit/decorators.js';\n\nimport {SharedFab} from './shared.js';\n\n/**\n * The variants available to non-branded FABs.\n */\nexport type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class Fab extends SharedFab {\n  /**\n   * The FAB color variant to render.\n   */\n  @property() variant: FabVariant = 'surface';\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': this.variant === 'primary',\n      'secondary': this.variant === 'secondary',\n      'tertiary': this.variant === 'tertiary',\n    };\n  }\n}\n"
  },
  {
    "path": "fab/internal/forced-colors-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n// go/keep-sorted end\n\n@media (forced-colors: active) {\n  .fab {\n    border: 1px solid ButtonText;\n\n    &.extended {\n      // Adjust the padding-inline to account for the 1px border in HCM.\n      padding-inline-start: 15px;\n      padding-inline-end: 19px;\n    }\n  }\n\n  md-focus-ring {\n    // Adjust the focus ring padding to account for the 1px border in HCM.\n    @include focus-ring.theme(\n      (\n        'outward-offset': 3px,\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "fab/internal/shared-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "fab/internal/shared.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\n\n/**\n * Sizes variants available to non-extended FABs.\n */\nexport type FabSize = 'medium' | 'small' | 'large';\n\n// Separate variable needed for closure.\nconst fabBaseClass = mixinDelegatesAria(LitElement);\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class SharedFab extends fabBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open' as const,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The size of the FAB.\n   *\n   * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not\n   * have different sizes.\n   */\n  @property({reflect: true}) size: FabSize = 'medium';\n\n  /**\n   * The text to display on the FAB.\n   */\n  @property() label = '';\n\n  /**\n   * Lowers the FAB's elevation.\n   */\n  @property({type: Boolean}) lowered = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"fab ${classMap(this.getRenderClasses())}\"\n        aria-label=${ariaLabel || nothing}>\n        <md-elevation part=\"elevation\"></md-elevation>\n        <md-focus-ring part=\"focus-ring\"></md-focus-ring>\n        <md-ripple class=\"ripple\"></md-ripple>\n        ${this.renderTouchTarget()} ${this.renderIcon()} ${this.renderLabel()}\n      </button>\n    `;\n  }\n\n  protected getRenderClasses() {\n    const isExtended = !!this.label;\n    return {\n      'lowered': this.lowered,\n      'small': this.size === 'small' && !isExtended,\n      'large': this.size === 'large' && !isExtended,\n      'extended': isExtended,\n    };\n  }\n\n  private renderTouchTarget() {\n    return html`<div class=\"touch-target\"></div>`;\n  }\n\n  private renderLabel() {\n    return this.label ? html`<span class=\"label\">${this.label}</span>` : '';\n  }\n\n  private renderIcon() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<span class=\"icon\">\n      <slot\n        name=\"icon\"\n        aria-hidden=${ariaLabel || this.label\n          ? 'true'\n          : (nothing as unknown as 'false')}>\n        <span></span>\n      </slot>\n    </span>`;\n  }\n}\n"
  },
  {
    "path": "field/_filled-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-field' show theme;\n"
  },
  {
    "path": "field/_outlined-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/outlined-field' show theme;\n"
  },
  {
    "path": "field/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {\n  boolInput,\n  Knob,\n  numberInput,\n  textInput,\n} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Field',\n  [\n    new Knob('label', {ui: textInput(), defaultValue: 'Label'}),\n    new Knob('Supporting text', {\n      ui: textInput(),\n      defaultValue: 'Supporting text',\n    }),\n    new Knob('Error text', {ui: textInput(), defaultValue: 'Error text'}),\n    new Knob('count', {ui: numberInput(), defaultValue: 0}),\n    new Knob('max', {ui: numberInput(), defaultValue: 0}),\n    new Knob('disabled', {ui: boolInput(), defaultValue: false}),\n    new Knob('error', {ui: boolInput(), defaultValue: false}),\n    new Knob('focused', {ui: boolInput(), defaultValue: false}),\n    new Knob('populated', {ui: boolInput(), defaultValue: false}),\n    new Knob('required', {ui: boolInput(), defaultValue: false}),\n    new Knob('noAsterisk', {ui: boolInput(), defaultValue: false}),\n    new Knob('Leading icon', {ui: boolInput(), defaultValue: false}),\n    new Knob('Trailing icon', {ui: boolInput(), defaultValue: false}),\n    new Knob('resizable', {ui: boolInput(), defaultValue: false}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});\n"
  },
  {
    "path": "field/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "field/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/field/filled-field.js';\nimport '@material/web/field/outlined-field.js';\nimport '@material/web/icon/icon.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html, nothing} from 'lit';\nimport {styleMap} from 'lit/directives/style-map.js';\n\n/** Knob types for field stories. */\nexport interface StoryKnobs {\n  label: string;\n  'Supporting text': string;\n  'Error text': string;\n  disabled: boolean;\n  error: boolean;\n  focused: boolean;\n  populated: boolean;\n  required: boolean;\n  noAsterisk: boolean;\n  'Leading icon': boolean;\n  'Trailing icon': boolean;\n  resizable: boolean;\n  count: number;\n  max: number;\n}\n\nconst START_CONTENT = html`<md-icon slot=\"start\">search</md-icon>`;\nconst END_CONTENT = html`<md-icon slot=\"end\">event</md-icon>`;\n\nconst styles = css`\n  md-filled-field,\n  md-outlined-field {\n    width: 256px;\n  }\n`;\n\nconst filled: MaterialStoryInit<StoryKnobs> = {\n  name: 'Filled',\n  styles,\n  render(knobs) {\n    const {\n      label,\n      disabled,\n      error,\n      focused,\n      noAsterisk,\n      populated,\n      required,\n      resizable,\n      count,\n      max,\n    } = knobs;\n    const supportingText = knobs['Supporting text'];\n    const errorText = knobs['Error text'];\n    const hasStart = knobs['Leading icon'];\n    const hasEnd = knobs['Trailing icon'];\n\n    const content = resizable\n      ? html`<textarea rows=\"1\" ?disabled=${disabled}></textarea>`\n      : html`<input ?disabled=${disabled} />`;\n\n    const styles = {resize: resizable ? 'both' : null};\n    return html`\n      <md-filled-field\n        style=${styleMap(styles)}\n        .label=${label}\n        ?disabled=${disabled}\n        .error=${error}\n        .focused=${focused}\n        .hasStart=${hasStart}\n        .hasEnd=${hasEnd}\n        .noAsterisk=${noAsterisk}\n        .populated=${populated}\n        .required=${required}\n        supporting-text=${supportingText}\n        error-text=${errorText}\n        count=${count}\n        max=${max}>\n        ${hasStart ? START_CONTENT : nothing} ${content}\n        ${hasEnd ? END_CONTENT : nothing}\n      </md-filled-field>\n    `;\n  },\n};\n\nconst outlined: MaterialStoryInit<StoryKnobs> = {\n  name: 'Outlined',\n  styles,\n  render(knobs) {\n    const {\n      label,\n      disabled,\n      error,\n      focused,\n      noAsterisk,\n      populated,\n      required,\n      resizable,\n      count,\n      max,\n    } = knobs;\n    const supportingText = knobs['Supporting text'];\n    const errorText = knobs['Error text'];\n    const hasStart = knobs['Leading icon'];\n    const hasEnd = knobs['Trailing icon'];\n    const content = resizable\n      ? html`<textarea\n          rows=\"1\"\n          ?disabled=${disabled}\n          aria-describedby=\"description\"></textarea>`\n      : html`<input ?disabled=${disabled} aria-describedby=\"description\" />`;\n\n    const styles = {resize: resizable ? 'both' : null};\n    return html`\n      <md-outlined-field\n        style=${styleMap(styles)}\n        .label=${label}\n        ?disabled=${disabled}\n        .error=${error}\n        .focused=${focused}\n        .hasStart=${hasStart}\n        .hasEnd=${hasEnd}\n        .noAsterisk=${noAsterisk}\n        .populated=${populated}\n        .required=${required}\n        supporting-text=${supportingText}\n        error-text=${errorText}\n        count=${count}\n        max=${max}>\n        <div id=\"description\" slot=\"aria-describedby\" hidden></div>\n        ${hasStart ? START_CONTENT : nothing} ${content}\n        ${hasEnd ? END_CONTENT : nothing}\n      </md-outlined-field>\n    `;\n  },\n};\n\n/** Field stories. */\nexport const stories = [filled, outlined];\n"
  },
  {
    "path": "field/filled-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledField} from './internal/filled-field.js';\nimport {styles as filledStyles} from './internal/filled-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-field': MdFilledField;\n  }\n}\n\n/**\n * TODO(b/228525797): add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-field')\nexport class MdFilledField extends FilledField {\n  static override styles: CSSResultOrNative[] = [sharedStyles, filledStyles];\n}\n"
  },
  {
    "path": "field/filled-field_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilledField} from './filled-field.js';\n\ndescribe('<md-filled-field>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledField.styles);\n  });\n});\n"
  },
  {
    "path": "field/harness.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Field} from './internal/field.js';\n\n/**\n * Test harness for field elements.\n */\nexport class FieldHarness extends Harness<Field> {\n  override async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    this.element.focused = true;\n    await super.focusWithKeyboard(init);\n  }\n\n  override async focusWithPointer() {\n    this.element.focused = true;\n    await super.focusWithPointer();\n  }\n\n  override async blur() {\n    this.element.focused = false;\n    await super.blur();\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (this.element.querySelector(':not([slot])') ||\n      this.element.renderRoot.querySelector('.field')) as HTMLElement;\n  }\n}\n"
  },
  {
    "path": "field/internal/_content.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:math';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n// Duration of the label animation.\n$_label-duration: map.get($_md-sys-motion, 'duration-short3');\n// Duration of the content's visibility animation.\n$_visible-duration: math.round(math.div($_label-duration * 5, 9));\n// Short delay when entering (focusing/populating) so that the label may move\n// out of the way before the content starts to appear.\n$_enter-delay: $_label-duration - $_visible-duration;\n\n@mixin styles() {\n  @layer styles {\n    .start,\n    .middle,\n    .end {\n      display: flex;\n      box-sizing: border-box;\n      height: 100%;\n      // Relative position for absolutely positioned labels (to avoid interfering\n      // with baseline alignment).\n      position: relative;\n    }\n\n    .start {\n      color: var(--_leading-content-color);\n    }\n\n    .end {\n      color: var(--_trailing-content-color);\n    }\n\n    .start,\n    .end {\n      align-items: center;\n      justify-content: center;\n    }\n\n    .with-start .start {\n      margin-inline: var(--_with-leading-content-leading-space)\n        var(--_content-space);\n    }\n\n    .with-end .end {\n      margin-inline: var(--_content-space)\n        var(--_with-trailing-content-trailing-space);\n    }\n\n    .middle {\n      align-items: stretch;\n      // The container of the field aligns sections by \"center\". Only the middle\n      // section opts in to baseline alignment.\n      //\n      // Labels are absolutely positioned, which leaves only the content as the\n      // evaluated baseline for the field.\n      //\n      // See https://www.w3.org/TR/css-flexbox-1/#baseline-participation\n      align-self: baseline;\n      flex: 1;\n    }\n\n    .content {\n      color: var(--_content-color);\n      display: flex;\n      flex: 1;\n      opacity: 0;\n      transition: opacity $_visible-duration\n        map.get($_md-sys-motion, 'easing-emphasized');\n    }\n\n    .no-label .content,\n    .focused .content,\n    .populated .content {\n      opacity: 1;\n      transition-delay: $_enter-delay;\n    }\n\n    :is(.disabled, .disable-transitions) .content {\n      transition: none;\n    }\n\n    .content ::slotted(*) {\n      all: unset;\n      // Use `currentColor` to inherit the various state colors that are set\n      // below.\n      color: currentColor;\n      font-family: var(--_content-font);\n      font-size: var(--_content-size);\n      line-height: var(--_content-line-height);\n      font-weight: var(--_content-weight);\n      width: 100%;\n      // Reverting values before \"all: unset\"\n      overflow-wrap: revert; // Needed to break words in textarea\n      white-space: revert; // Needed for Firefox textarea\n    }\n\n    .content ::slotted(:not(textarea)) {\n      padding-top: var(--_top-space);\n      padding-bottom: var(--_bottom-space);\n    }\n\n    .content ::slotted(textarea) {\n      // Use margin for textareas since they will scroll over the label if not.\n      margin-top: var(--_top-space);\n      margin-bottom: var(--_bottom-space);\n    }\n\n    :hover .content {\n      color: var(--_hover-content-color);\n    }\n\n    :hover .start {\n      color: var(--_hover-leading-content-color);\n    }\n\n    :hover .end {\n      color: var(--_hover-trailing-content-color);\n    }\n\n    .focused .content {\n      color: var(--_focus-content-color);\n    }\n\n    .focused .start {\n      color: var(--_focus-leading-content-color);\n    }\n\n    .focused .end {\n      color: var(--_focus-trailing-content-color);\n    }\n\n    .disabled .content {\n      color: var(--_disabled-content-color);\n    }\n\n    .disabled.no-label .content,\n    .disabled.focused .content,\n    .disabled.populated .content {\n      opacity: var(--_disabled-content-opacity);\n    }\n\n    .disabled .start {\n      color: var(--_disabled-leading-content-color);\n      opacity: var(--_disabled-leading-content-opacity);\n    }\n\n    .disabled .end {\n      color: var(--_disabled-trailing-content-color);\n      opacity: var(--_disabled-trailing-content-opacity);\n    }\n\n    .error .content {\n      color: var(--_error-content-color);\n    }\n\n    .error .start {\n      color: var(--_error-leading-content-color);\n    }\n\n    .error .end {\n      color: var(--_error-trailing-content-color);\n    }\n\n    .error:hover .content {\n      color: var(--_error-hover-content-color);\n    }\n\n    .error:hover .start {\n      color: var(--_error-hover-leading-content-color);\n    }\n\n    .error:hover .end {\n      color: var(--_error-hover-trailing-content-color);\n    }\n\n    .error.focused .content {\n      color: var(--_error-focus-content-color);\n    }\n\n    .error.focused .start {\n      color: var(--_error-focus-leading-content-color);\n    }\n\n    .error.focused .end {\n      color: var(--_error-focus-trailing-content-color);\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .disabled :is(.start, .content, .end) {\n        color: GrayText;\n        opacity: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "field/internal/_filled-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n\n@mixin theme($tokens) {\n  $supported-tokens: list.join(\n    tokens.$md-comp-filled-field-supported-tokens,\n    (\n      'container-shape-start-start',\n      'container-shape-start-end',\n      'container-shape-end-end',\n      'container-shape-end-start'\n    )\n  );\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $token == 'container-shape' and meta.type-of($value) == 'list' {\n      @error 'Filled field `container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';\n    }\n\n    @if $value {\n      --md-filled-field-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-field-values();\n\n  @layer styles {\n    :host {\n      // Only use the logical properties.\n      $tokens: map.remove($tokens, 'container-shape');\n      @each $token, $value in $tokens {\n        --_#{$token}: #{$value};\n      }\n    }\n\n    .background,\n    .state-layer {\n      border-radius: inherit;\n      inset: 0;\n      pointer-events: none;\n      position: absolute;\n    }\n\n    .background {\n      background: var(--_container-color);\n    }\n\n    .state-layer {\n      visibility: hidden;\n    }\n\n    .field:not(.disabled):hover .state-layer {\n      visibility: visible;\n    }\n\n    .label.floating {\n      position: absolute;\n      top: var(--_with-label-top-space);\n    }\n\n    .field:not(.with-start) .label-wrapper {\n      margin-inline-start: var(--_leading-space);\n    }\n\n    .field:not(.with-end) .label-wrapper {\n      margin-inline-end: var(--_trailing-space);\n    }\n\n    .active-indicator {\n      inset: auto 0 0 0;\n      // Prevent click events on the indicator element since it has no width and\n      // causes bugs when handled by the foundation for updating transform-origin.\n      pointer-events: none;\n      position: absolute;\n      width: 100%;\n      z-index: 1;\n\n      &::before,\n      &::after {\n        border-bottom: var(--_active-indicator-height) solid\n          var(--_active-indicator-color);\n        inset: auto 0 0 0;\n        content: '';\n        position: absolute;\n        width: 100%;\n      }\n\n      // focused indicator\n      &::after {\n        opacity: 0;\n        transition: opacity map.get($_md-sys-motion, 'duration-short3')\n          map.get($_md-sys-motion, 'easing-emphasized');\n      }\n    }\n\n    .focused .active-indicator::after {\n      opacity: 1;\n    }\n\n    .field:not(.with-start) .content ::slotted(*) {\n      padding-inline-start: var(--_leading-space);\n    }\n\n    .field:not(.with-end) .content ::slotted(*) {\n      padding-inline-end: var(--_trailing-space);\n    }\n\n    .field:not(.no-label) .content ::slotted(:not(textarea)) {\n      padding-bottom: var(--_with-label-bottom-space);\n      padding-top: calc(\n        var(--_with-label-top-space) + var(--_label-text-populated-line-height)\n      );\n    }\n\n    .field:not(.no-label) .content ::slotted(textarea) {\n      // Use margin for textareas since they will scroll over the label if not.\n      margin-bottom: var(--_with-label-bottom-space);\n      margin-top: calc(\n        var(--_with-label-top-space) + var(--_label-text-populated-line-height)\n      );\n    }\n\n    :hover .active-indicator::before {\n      border-bottom-color: var(--_hover-active-indicator-color);\n      border-bottom-width: var(--_hover-active-indicator-height);\n    }\n\n    // Focus is on a separate element and does not need a focus selector\n    .active-indicator::after {\n      border-bottom-color: var(--_focus-active-indicator-color);\n      border-bottom-width: var(--_focus-active-indicator-height);\n    }\n\n    :hover .state-layer {\n      background: var(--_hover-state-layer-color);\n      opacity: var(--_hover-state-layer-opacity);\n    }\n\n    .disabled .active-indicator::before {\n      border-bottom-color: var(--_disabled-active-indicator-color);\n      border-bottom-width: var(--_disabled-active-indicator-height);\n      opacity: var(--_disabled-active-indicator-opacity);\n    }\n\n    .disabled .background {\n      background: var(--_disabled-container-color);\n      opacity: var(--_disabled-container-opacity);\n    }\n\n    .error .active-indicator::before {\n      border-bottom-color: var(--_error-active-indicator-color);\n    }\n\n    .error:hover .active-indicator::before {\n      border-bottom-color: var(--_error-hover-active-indicator-color);\n    }\n\n    .error:hover .state-layer {\n      background: var(--_error-hover-state-layer-color);\n      opacity: var(--_error-hover-state-layer-opacity);\n    }\n\n    // Focus is on a separate element and does not need a focus selector\n    .error .active-indicator::after {\n      border-bottom-color: var(--_error-focus-active-indicator-color);\n    }\n\n    // Move the container up so that the resize handle doesn't overlap the focus\n    // indicator. Content is moved back the opposite direction.\n    .resizable .container {\n      bottom: var(--_focus-active-indicator-height);\n      // Ensures the container doesn't create an overhang that can be clicked on.\n      clip-path: inset(var(--_focus-active-indicator-height) 0 0 0);\n    }\n\n    .resizable .container > * {\n      top: var(--_focus-active-indicator-height);\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .disabled .active-indicator::before {\n        border-color: GrayText;\n        opacity: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "field/internal/_label.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles() {\n  @layer styles {\n    .label {\n      box-sizing: border-box;\n      color: var(--_label-text-color);\n      overflow: hidden;\n      max-width: 100%;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      z-index: 1;\n      font-family: var(--_label-text-font);\n      font-size: var(--_label-text-size);\n      line-height: var(--_label-text-line-height);\n      font-weight: var(--_label-text-weight);\n      width: min-content;\n    }\n\n    .label-wrapper {\n      inset: 0;\n      // The resting label at 100% height can block pointer events to the content\n      // if it's very long and spans the full width of the field. Additionally,\n      // selecting the label's text doesn't present a good UX, since the user\n      // selection should be re-focused to another element (such as the input)\n      // upon focusing. Finally, since the actual label elements are swapped, it\n      // is not easy to maintain the user's label text selection.\n      pointer-events: none;\n      position: absolute;\n    }\n\n    .label.resting {\n      position: absolute;\n      top: var(--_top-space);\n    }\n\n    .label.floating {\n      font-size: var(--_label-text-populated-size);\n      line-height: var(--_label-text-populated-line-height);\n      transform-origin: top left;\n    }\n\n    .label.hidden {\n      opacity: 0;\n    }\n\n    .no-label .label {\n      display: none;\n    }\n\n    // Labels need start/end padding when there isn't start/end content so they\n    // don't sit on the edge of the field. We use a wrapper element around the\n    // labels so as not to affect the dimensions used in the label keyframes.\n    .label-wrapper {\n      inset: 0;\n      position: absolute;\n      // Don't let setting text-align on the field change the label's alignment.\n      // It should only impact content text.\n      text-align: initial;\n    }\n\n    :hover .label {\n      color: var(--_hover-label-text-color);\n    }\n\n    .focused .label {\n      color: var(--_focus-label-text-color);\n    }\n\n    .disabled .label {\n      color: var(--_disabled-label-text-color);\n    }\n\n    .disabled .label:not(.hidden) {\n      opacity: var(--_disabled-label-text-opacity);\n    }\n\n    .error .label {\n      color: var(--_error-label-text-color);\n    }\n\n    .error:hover .label {\n      color: var(--_error-hover-label-text-color);\n    }\n\n    .error.focused .label {\n      color: var(--_error-focus-label-text-color);\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .disabled .label:not(.hidden) {\n        color: GrayText;\n        opacity: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "field/internal/_outlined-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n\n@mixin theme($tokens) {\n  $supported-tokens: list.join(\n    tokens.$md-comp-outlined-field-supported-tokens,\n    (\n      'container-shape-start-start',\n      'container-shape-start-end',\n      'container-shape-end-end',\n      'container-shape-end-start'\n    )\n  );\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-outlined-field-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-field-values();\n\n  @layer styles {\n    :host {\n      // Only use the logical properties.\n      $tokens: map.remove($tokens, 'container-shape');\n      @each $token, $value in $tokens {\n        --_#{$token}: #{$value};\n      }\n    }\n\n    .outline {\n      border-color: var(--_outline-color);\n      border-radius: inherit;\n      display: flex;\n      // Allow events to target elements underneath the outline, such as icons.\n      pointer-events: none;\n      height: 100%;\n      position: absolute;\n      width: 100%;\n      z-index: 1;\n    }\n\n    .outline-start,\n    .outline-panel-inactive,\n    .outline-panel-active,\n    .outline-end {\n      // ::before is inactive border, ::after is active border. Borders are\n      // absolutely positioned within their elements.\n      &::before,\n      &::after {\n        border: inherit;\n        content: '';\n        inset: 0;\n        position: absolute;\n      }\n    }\n\n    .outline-start,\n    .outline-end {\n      border: inherit;\n      border-radius: inherit;\n      box-sizing: border-box;\n      position: relative;\n\n      &::before,\n      &::after {\n        border-bottom-style: solid;\n        border-top-style: solid;\n      }\n\n      &::after {\n        opacity: 0;\n        transition: opacity map.get($_md-sys-motion, 'duration-short3')\n          map.get($_md-sys-motion, 'easing-emphasized');\n      }\n    }\n\n    .focused .outline-start::after,\n    .focused .outline-end::after {\n      opacity: 1;\n    }\n\n    .outline-start {\n      &::before,\n      &::after {\n        border-inline-start-style: solid;\n        border-inline-end-style: none;\n        border-start-start-radius: inherit;\n        border-start-end-radius: 0;\n        border-end-start-radius: inherit;\n        border-end-end-radius: 0;\n        margin-inline-end: var(--_outline-label-padding);\n      }\n    }\n\n    .outline-end {\n      flex-grow: 1;\n      margin-inline-start: calc(-1 * var(--_outline-label-padding));\n\n      &::before,\n      &::after {\n        border-inline-start-style: none;\n        border-inline-end-style: solid;\n        border-start-start-radius: 0;\n        border-start-end-radius: inherit;\n        border-end-start-radius: 0;\n        border-end-end-radius: inherit;\n      }\n    }\n\n    .outline-notch {\n      align-items: flex-start;\n      border: inherit;\n      display: flex;\n      margin-inline-start: calc(-1 * var(--_outline-label-padding));\n      margin-inline-end: var(--_outline-label-padding);\n      max-width: calc(100% - var(--_leading-space) - var(--_trailing-space));\n      padding: 0 var(--_outline-label-padding);\n      position: relative;\n    }\n\n    .no-label .outline-notch {\n      display: none;\n    }\n\n    .outline-panel-inactive,\n    .outline-panel-active {\n      border: inherit;\n      border-bottom-style: solid;\n      inset: 0;\n      position: absolute;\n\n      &::before,\n      &::after {\n        border-top-style: solid;\n        border-bottom: none;\n        bottom: auto;\n        transform: scaleX(1);\n        transition: transform map.get($_md-sys-motion, 'duration-short3')\n          map.get($_md-sys-motion, 'easing-emphasized');\n      }\n\n      // Note: no need to do any RTL flipping here. If RTLCSS flips this, it's also\n      // ok, we just need one to be left and one to be right.\n      &::before {\n        right: 50%;\n        transform-origin: top left;\n      }\n\n      &::after {\n        left: 50%;\n        transform-origin: top right;\n      }\n    }\n\n    .populated .outline-panel-inactive,\n    .populated .outline-panel-active,\n    .focused .outline-panel-inactive,\n    .focused .outline-panel-active {\n      &::before,\n      &::after {\n        transform: scaleX(0);\n      }\n    }\n\n    .outline-panel-active {\n      opacity: 0;\n      transition: opacity map.get($_md-sys-motion, 'duration-short3')\n        map.get($_md-sys-motion, 'easing-emphasized');\n    }\n\n    .focused .outline-panel-active {\n      opacity: 1;\n    }\n\n    .outline-label {\n      display: flex;\n      max-width: 100%;\n      // Center the floating label within the outline stroke\n      transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));\n    }\n\n    // Add padding that will grow to compensate for the outline's shape.\n    // This is needed to prevent the outline border from clipping with the label\n    // and is mirrored in the container padding to align the content and resting\n    // label with the adjusted floating label.\n    $shape-start: max(\n      var(--_container-shape-start-start),\n      var(--_container-shape-end-start)\n    );\n    $shape-end: max(\n      var(--_container-shape-start-end),\n      var(--_container-shape-end-end)\n    );\n    $start-space: max(\n      var(--_leading-space),\n      $shape-start + var(--_outline-label-padding)\n    );\n    $end-space: max(var(--_trailing-space), $shape-end);\n\n    .outline-start,\n    .field:not(.with-start) .content ::slotted(*) {\n      padding-inline-start: $start-space;\n    }\n\n    .field:not(.with-start) .label-wrapper {\n      margin-inline-start: $start-space;\n    }\n\n    .field:not(.with-end) .content ::slotted(*) {\n      padding-inline-end: $end-space;\n    }\n\n    .field:not(.with-end) .label-wrapper {\n      margin-inline-end: $end-space;\n    }\n\n    .outline-start::before,\n    .outline-end::before,\n    .outline-panel-inactive,\n    .outline-panel-inactive::before,\n    .outline-panel-inactive::after {\n      border-width: var(--_outline-width);\n    }\n\n    // States\n\n    :hover .outline {\n      border-color: var(--_hover-outline-color);\n      color: var(--_hover-outline-color); // Needed for Firefox HCM\n    }\n\n    :hover .outline-start::before,\n    :hover .outline-end::before,\n    :hover .outline-panel-inactive,\n    :hover .outline-panel-inactive::before,\n    :hover .outline-panel-inactive::after {\n      border-width: var(--_hover-outline-width);\n    }\n\n    .focused .outline {\n      border-color: var(--_focus-outline-color);\n      color: var(--_focus-outline-color); // Needed for Firefox HCM\n    }\n\n    .outline-start::after,\n    .outline-end::after,\n    .outline-panel-active,\n    .outline-panel-active::before,\n    .outline-panel-active::after {\n      border-width: var(--_focus-outline-width);\n    }\n\n    .disabled .outline {\n      border-color: var(--_disabled-outline-color);\n      color: var(--_disabled-outline-color); // Needed for Firefox HCM\n    }\n\n    .disabled .outline-start,\n    .disabled .outline-end,\n    .disabled .outline-panel-inactive {\n      opacity: var(--_disabled-outline-opacity);\n    }\n\n    .disabled .outline-start::before,\n    .disabled .outline-end::before,\n    .disabled .outline-panel-inactive,\n    .disabled .outline-panel-inactive::before,\n    .disabled .outline-panel-inactive::after {\n      border-width: var(--_disabled-outline-width);\n    }\n\n    .error .outline {\n      border-color: var(--_error-outline-color);\n      color: var(--_error-outline-color); // Needed for Firefox HCM\n    }\n\n    .error:hover .outline {\n      border-color: var(--_error-hover-outline-color);\n      // Needed for Firefox HCM\n      color: var(--_error-hover-outline-color);\n    }\n\n    .error.focused .outline {\n      border-color: var(--_error-focus-outline-color);\n      // Needed for Firefox HCM\n      color: var(--_error-focus-outline-color);\n    }\n\n    // Move the container up and to the left so that the resize handle doesn't\n    // overlap the focus outline. Content is moved back the opposite direction.\n    .resizable .container {\n      bottom: var(--_focus-outline-width);\n      inset-inline-end: var(--_focus-outline-width);\n      // Ensures the container doesn't create an overhang that can be clicked on.\n      clip-path: inset(\n        var(--_focus-outline-width) 0 0 var(--_focus-outline-width)\n      );\n    }\n\n    .resizable .container > * {\n      top: var(--_focus-outline-width);\n      inset-inline-start: var(--_focus-outline-width);\n    }\n\n    .resizable .container:dir(rtl) {\n      clip-path: inset(\n        var(--_focus-outline-width) var(--_focus-outline-width) 0 0\n      );\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .disabled .outline {\n        border-color: GrayText;\n        color: GrayText; // Needed for Firefox HCM\n      }\n\n      .disabled :is(.outline-start, .outline-end, .outline-panel-inactive) {\n        opacity: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "field/internal/_shared.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use './content';\n@use './label';\n@use './supporting-text';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    display: inline-flex;\n    resize: both;\n  }\n\n  .field {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    // Allow the use of block/inline reflexive RTL properties without impacting\n    // structure when languages change.\n    writing-mode: horizontal-tb;\n    max-width: 100%; // Do not allow field to grow beyond explicitly set width\n  }\n\n  // A separate wrapper is needed around the container for the outline, whose\n  // floating label needs overflow: visible. The container itself needs\n  // overflow: hidden when resizable.\n  .container-overflow {\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-end-radius: var(--_container-shape-end-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n    display: flex;\n    height: 100%;\n    position: relative;\n  }\n\n  .container {\n    align-items: center;\n    border-radius: inherit;\n    display: flex;\n    flex: 1;\n    max-height: 100%;\n    min-height: 100%;\n    min-width: min-content;\n    position: relative;\n  }\n\n  .field,\n  .container-overflow {\n    resize: inherit;\n  }\n\n  .resizable:not(.disabled) .container {\n    // `resize` is inherited from the host, but only applies to the container\n    // when resizable.\n    resize: inherit;\n    // Overflow is visible when not resizable to allow overflowing content such\n    // as popups or icon focus rings.\n    // Resizable fields cannot display overflowing content due to `resize` not\n    // allowing it.\n    overflow: hidden;\n  }\n\n  .disabled {\n    pointer-events: none;\n  }\n\n  slot[name='container'] {\n    border-radius: inherit;\n  }\n\n  slot[name='container']::slotted(*) {\n    border-radius: inherit;\n    inset: 0;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  @include content.styles;\n  @include label.styles;\n  @include supporting-text.styles;\n}\n"
  },
  {
    "path": "field/internal/_supporting-text.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles() {\n  @layer styles {\n    .supporting-text {\n      color: var(--_supporting-text-color);\n      display: flex;\n      font-family: var(--_supporting-text-font);\n      font-size: var(--_supporting-text-size);\n      line-height: var(--_supporting-text-line-height);\n      font-weight: var(--_supporting-text-weight);\n      gap: 16px;\n      justify-content: space-between;\n      padding-inline-start: var(--_supporting-text-leading-space);\n      padding-inline-end: var(--_supporting-text-trailing-space);\n      padding-top: var(--_supporting-text-top-space);\n    }\n\n    // Don't shrink the counter when the supporting text is long and wraps\n    .supporting-text :nth-child(2) {\n      flex-shrink: 0;\n    }\n\n    :hover .supporting-text {\n      color: var(--_hover-supporting-text-color);\n    }\n\n    .focus .supporting-text {\n      color: var(--_focus-supporting-text-color);\n    }\n\n    .disabled .supporting-text {\n      color: var(--_disabled-supporting-text-color);\n      opacity: var(--_disabled-supporting-text-opacity);\n    }\n\n    .error .supporting-text {\n      color: var(--_error-supporting-text-color);\n    }\n\n    .error:hover .supporting-text {\n      color: var(--_error-hover-supporting-text-color);\n    }\n\n    .error.focus .supporting-text {\n      color: var(--_error-focus-supporting-text-color);\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .disabled .supporting-text {\n        color: GrayText;\n        opacity: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "field/internal/field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  render,\n  TemplateResult,\n} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A field component.\n */\nexport class Field extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property() label = '';\n  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n  @property({type: Boolean}) resizable = false;\n  @property({attribute: 'supporting-text'}) supportingText = '';\n  @property({attribute: 'error-text'}) errorText = '';\n  @property({type: Number}) count = -1;\n  @property({type: Number}) max = -1;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean, attribute: 'has-start'}) hasStart = false;\n\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean, attribute: 'has-end'}) hasEnd = false;\n\n  @queryAssignedElements({slot: 'aria-describedby'})\n  private readonly slottedAriaDescribedBy!: HTMLElement[];\n\n  private get counterText() {\n    // Count and max are typed as number, but can be set to null when Lit removes\n    // their attributes. These getters coerce back to a number for calculations.\n    const countAsNumber = this.count ?? -1;\n    const maxAsNumber = this.max ?? -1;\n    // Counter does not show if count is negative, or max is negative or 0.\n    if (countAsNumber < 0 || maxAsNumber <= 0) {\n      return '';\n    }\n\n    return `${countAsNumber} / ${maxAsNumber}`;\n  }\n\n  private get supportingOrErrorText() {\n    return this.error && this.errorText ? this.errorText : this.supportingText;\n  }\n\n  @state() private isAnimating = false;\n  private labelAnimation?: Animation;\n  /**\n   * When set to true, the error text's `role=\"alert\"` will be removed, then\n   * re-added after an animation frame. This will re-announce an error message\n   * to screen readers.\n   */\n  @state() private refreshErrorAlert = false;\n  @state() private disableTransitions = false;\n  @query('.label.floating')\n  private readonly floatingLabelEl!: HTMLElement | null;\n  @query('.label.resting') private readonly restingLabelEl!: HTMLElement | null;\n  @query('.container') private readonly containerEl!: HTMLElement | null;\n\n  /**\n   * Re-announces the field's error supporting text to screen readers.\n   *\n   * Error text announces to screen readers anytime it is visible and changes.\n   * Use the method to re-announce the message when the text has not changed,\n   * but announcement is still needed (such as for `reportValidity()`).\n   */\n  reannounceError() {\n    this.refreshErrorAlert = true;\n  }\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\n    const isDisabledChanging =\n      props.has('disabled') && props.get('disabled') !== undefined;\n    if (isDisabledChanging) {\n      this.disableTransitions = true;\n    }\n\n    // When disabling, remove focus styles if focused.\n    if (this.disabled && this.focused) {\n      props.set('focused', true);\n      this.focused = false;\n    }\n\n    // Animate if focused or populated change.\n    this.animateLabelIfNeeded({\n      wasFocused: props.get('focused'),\n      wasPopulated: props.get('populated'),\n    });\n\n    super.update(props);\n  }\n\n  protected override render() {\n    const floatingLabel = this.renderLabel(/*isFloating*/ true);\n    const restingLabel = this.renderLabel(/*isFloating*/ false);\n    const outline = this.renderOutline?.(floatingLabel);\n    const classes = {\n      'disabled': this.disabled,\n      'disable-transitions': this.disableTransitions,\n      'error': this.error && !this.disabled,\n      'focused': this.focused,\n      'with-start': this.hasStart,\n      'with-end': this.hasEnd,\n      'populated': this.populated,\n      'resizable': this.resizable,\n      'required': this.required,\n      'no-label': !this.label,\n    };\n\n    return html`\n      <div class=\"field ${classMap(classes)}\">\n        <div class=\"container-overflow\">\n          ${this.renderBackground?.()}\n          <slot name=\"container\"></slot>\n          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${outline}\n          <div class=\"container\">\n            <div class=\"start\">\n              <slot name=\"start\"></slot>\n            </div>\n            <div class=\"middle\">\n              <div class=\"label-wrapper\">\n                ${restingLabel} ${outline ? nothing : floatingLabel}\n              </div>\n              <div class=\"content\">\n                <slot></slot>\n              </div>\n            </div>\n            <div class=\"end\">\n              <slot name=\"end\"></slot>\n            </div>\n          </div>\n        </div>\n        ${this.renderSupportingText()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Field>) {\n    if (\n      changed.has('supportingText') ||\n      changed.has('errorText') ||\n      changed.has('count') ||\n      changed.has('max')\n    ) {\n      this.updateSlottedAriaDescribedBy();\n    }\n\n    if (this.refreshErrorAlert) {\n      // The past render cycle removed the role=\"alert\" from the error message.\n      // Re-add it after an animation frame to re-announce the error.\n      requestAnimationFrame(() => {\n        this.refreshErrorAlert = false;\n      });\n    }\n\n    if (this.disableTransitions) {\n      requestAnimationFrame(() => {\n        this.disableTransitions = false;\n      });\n    }\n  }\n\n  protected renderBackground?(): TemplateResult;\n  protected renderStateLayer?(): TemplateResult;\n  protected renderIndicator?(): TemplateResult;\n  protected renderOutline?(floatingLabel: unknown): TemplateResult;\n\n  private renderSupportingText() {\n    const {supportingOrErrorText, counterText} = this;\n    if (!supportingOrErrorText && !counterText) {\n      return nothing;\n    }\n\n    // Always render the supporting text span so that our `space-around`\n    // container puts the counter at the end.\n    const start = html`<span>${supportingOrErrorText}</span>`;\n    // Conditionally render counter so we don't render the extra `gap`.\n    // TODO(b/244473435): add aria-label and announcements\n    const end = counterText\n      ? html`<span class=\"counter\">${counterText}</span>`\n      : nothing;\n\n    // Announce if there is an error and error text visible.\n    // If refreshErrorAlert is true, do not announce. This will remove the\n    // role=\"alert\" attribute. Another render cycle will happen after an\n    // animation frame to re-add the role.\n    const shouldErrorAnnounce =\n      this.error && this.errorText && !this.refreshErrorAlert;\n    const role = shouldErrorAnnounce ? 'alert' : nothing;\n    return html`\n      <div class=\"supporting-text\" role=${role}>${start}${end}</div>\n      <slot\n        name=\"aria-describedby\"\n        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>\n    `;\n  }\n\n  private updateSlottedAriaDescribedBy() {\n    for (const element of this.slottedAriaDescribedBy) {\n      render(html`${this.supportingOrErrorText} ${this.counterText}`, element);\n      element.setAttribute('hidden', '');\n    }\n  }\n\n  private renderLabel(isFloating: boolean) {\n    if (!this.label) {\n      return nothing;\n    }\n\n    let visible: boolean;\n    if (isFloating) {\n      // Floating label is visible when focused/populated or when animating.\n      visible = this.focused || this.populated || this.isAnimating;\n    } else {\n      // Resting label is visible when unfocused. It is never visible while\n      // animating.\n      visible = !this.focused && !this.populated && !this.isAnimating;\n    }\n\n    const classes = {\n      'hidden': !visible,\n      'floating': isFloating,\n      'resting': !isFloating,\n    };\n\n    // Add '*' if a label is present and the field is required\n    const labelText = `${this.label}${\n      this.required && !this.noAsterisk ? '*' : ''\n    }`;\n\n    return html`\n      <span class=\"label ${classMap(classes)}\" aria-hidden=${!visible}\n        >${labelText}</span\n      >\n    `;\n  }\n\n  private animateLabelIfNeeded({\n    wasFocused,\n    wasPopulated,\n  }: {\n    wasFocused?: boolean;\n    wasPopulated?: boolean;\n  }) {\n    if (!this.label) {\n      return;\n    }\n\n    wasFocused ??= this.focused;\n    wasPopulated ??= this.populated;\n    const wasFloating = wasFocused || wasPopulated;\n    const shouldBeFloating = this.focused || this.populated;\n    if (wasFloating === shouldBeFloating) {\n      return;\n    }\n\n    const keyframes = this.getLabelKeyframes();\n    if (!keyframes.length) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.labelAnimation?.cancel();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The floating label is visible and used during animation. At the end of\n    // the animation, it will either remain visible (if floating) or hide and\n    // the resting label will be shown.\n    //\n    // We don't use forward filling because if the dimensions of the text field\n    // change (leading icon removed, density changes, etc), then the animation\n    // will be inaccurate.\n    //\n    // Re-calculating the animation each time will prevent any visual glitches\n    // from appearing.\n    // TODO(b/241113345): use animation tokens\n    this.labelAnimation = this.floatingLabelEl?.animate(keyframes, {\n      duration: 150,\n      easing: EASING.STANDARD,\n    });\n\n    this.labelAnimation?.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n    });\n  }\n\n  private getLabelKeyframes() {\n    const {floatingLabelEl, restingLabelEl} = this;\n    if (!floatingLabelEl || !restingLabelEl) {\n      return [];\n    }\n\n    const {\n      x: floatingX,\n      y: floatingY,\n      height: floatingHeight,\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      height: restingHeight,\n    } = restingLabelEl.getBoundingClientRect();\n    const floatingScrollWidth = floatingLabelEl.scrollWidth;\n    const restingScrollWidth = restingLabelEl.scrollWidth;\n    // If either label has no dimensions (e.g., display: none), skip animation\n    if (floatingScrollWidth === 0 || restingScrollWidth === 0) {\n      return [];\n    }\n    // Scale by width ratio instead of font size since letter-spacing will scale\n    // incorrectly. Using the width we can better approximate the adjusted\n    // scale and compensate for tracking and overflow.\n    // (use scrollWidth instead of width to account for clipped labels)\n    const scale = restingScrollWidth / floatingScrollWidth;\n    const xDelta = restingX - floatingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the floating label down to the resting label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled floating label's height will be.\n    const yDelta =\n      restingY -\n      floatingY +\n      Math.round((restingHeight - floatingHeight * scale) / 2);\n\n    // Create the two transforms: floating to resting (using the calculations\n    // above), and resting to floating (re-setting the transform to initial\n    // values).\n    const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;\n    const floatTransform = `translateX(0) translateY(0) scale(1)`;\n\n    // Constrain the floating labels width to a scaled percentage of the\n    // resting label's width. This will prevent long clipped labels from\n    // overflowing the container.\n    const restingClientWidth = restingLabelEl.clientWidth;\n    const isRestingClipped = restingScrollWidth > restingClientWidth;\n    const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';\n    if (this.focused || this.populated) {\n      return [\n        {transform: restTransform, width},\n        {transform: floatTransform, width},\n      ];\n    }\n\n    return [\n      {transform: floatTransform, width},\n      {transform: restTransform, width},\n    ];\n  }\n\n  getSurfacePositionClientRect() {\n    return this.containerEl!.getBoundingClientRect();\n  }\n}\n"
  },
  {
    "path": "field/internal/field_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, TemplateResult} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {FieldHarness} from '../harness.js';\n\nimport {Field} from './field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-test-field': TestField;\n  }\n}\n\n@customElement('md-test-field')\nclass TestField extends Field {\n  get labelText() {\n    return this.renderRoot.querySelector('.label')?.textContent ?? '';\n  }\n\n  get supportingTextContent() {\n    return this.renderRoot.querySelector('.supporting-text')?.textContent ?? '';\n  }\n\n  didErrorAnnounce() {\n    return (\n      this.renderRoot\n        .querySelector('.supporting-text')\n        ?.getAttribute('role') === 'alert'\n    );\n  }\n\n  // Ensure floating/resting labels are both rendered\n  protected override renderOutline(floatingLabel: TemplateResult) {\n    return floatingLabel;\n  }\n}\n\ndescribe('Field', () => {\n  const env = new Environment();\n\n  async function setupTest(props: Partial<Field> = {}) {\n    // Variant type does not matter for shared tests\n    const template = html`\n      <md-test-field\n        .label=${props.label ?? ''}\n        ?no-asterisk=${props.noAsterisk ?? false}\n        ?disabled=${props.disabled ?? false}\n        .error=${props.error ?? false}\n        .populated=${props.populated ?? false}\n        .required=${props.required ?? false}\n        .supportingText=${props.supportingText ?? ''}\n        .errorText=${props.errorText ?? ''}>\n        <input />\n      </md-test-field>\n    `;\n    const root = env.render(template);\n    const instance = root.querySelector('md-test-field');\n    if (!instance) {\n      throw new Error('Could not query rendered <md-test-field>.');\n    }\n\n    await env.waitForStability();\n    return {\n      instance,\n      harness: new FieldHarness(instance),\n    };\n  }\n\n  it('should unfocus field when disabled', async () => {\n    // Setup.\n    const {instance, harness} = await setupTest();\n    await harness.focusWithKeyboard();\n    await env.waitForStability();\n    // Test case.\n    instance.disabled = true;\n    await env.waitForStability();\n    // Assertion.\n    expect(instance.focused)\n      .withContext('focused is false after disabled is set to true')\n      .toBe(false);\n  });\n\n  it('should not allow focus when disabled', async () => {\n    // Setup.\n    const {instance, harness} = await setupTest({disabled: true});\n    await harness.focusWithKeyboard();\n    // Test case.\n    await env.waitForStability();\n    // Assertion.\n    expect(instance.focused)\n      .withContext('focused set back to false when disabled')\n      .toBe(false);\n  });\n\n  /*\n    TODO(b/225951156): update animation tests since l2w refactor breaks them\n    describe('#animateLabelIfNeeded()', () => {\n      it('should update visible label type to resting before animation\n    finishes', async () => {\n           // Setup.\n           const {instance, harness} = await setupTest({label: 'Label'});\n           const floatingLabel = await instance.floatingLabelElement;\n           // Test case.\n           await harness.focusWithKeyboard();\n           await env.waitForStability();\n           // Assertion.\n           expect(floatingLabel.classList)\n               .withContext('should display resting label for animation')\n               .not.toContain('label--hidden');\n         });\n\n      it('should update visible label type to resting immediately when resting',\n         async () => {\n           // Setup.\n           const {instance, harness} = await setupTest({label: 'Label'});\n           const restingLabel = await instance.restingLabelElement;\n           await harness.focusWithKeyboard();\n           // Test case.\n           await harness.blur();\n           // Assertion.\n           expect(restingLabel.classList)\n               .withContext('should display resting label for animation')\n               .not.toContain('label--hidden');\n         });\n\n      it('should update visible label type after floating animation ends',\n         async () => {\n           // Setup.\n           const {instance, harness} = await setupTest({label: 'Label'});\n           const animation = new Animation();\n           const floatingLabel = await instance.floatingLabelElement;\n           const restingLabel = await instance.restingLabelElement;\n           spyOn(restingLabel, 'animate').and.returnValue(animation);\n           // Test case.\n           await harness.focusWithKeyboard();\n           await env.waitForStability();\n           animation.play();\n           await env.waitForStability();\n           // Assertion.\n           expect(floatingLabel.classList)\n               .withContext('visible label should be floating after focusing')\n               .not.toContain('label--hidden');\n         });\n\n      it('should update visible label type after resting animation ends',\n         async () => {\n           // Setup.\n           const {instance, harness} = await setupTest({label: 'Label'});\n           await harness.focusWithKeyboard();\n           const animation = new Animation();\n           const restingLabel = await instance.restingLabelElement;\n           spyOn(restingLabel, 'animate').and.returnValue(animation);\n           // Test case.\n           await harness.blur();\n           await env.waitForStability();\n           animation.play();\n           await env.waitForStability();\n           // Assertion.\n           expect(restingLabel.classList)\n               .withContext('visible label should be resting after unfocusing')\n               .not.toContain('label--hidden');\n         });\n\n      it('should animate label when focused changes', async () => {\n        // Setup.\n        const {instance, harness} = await setupTest({label: 'Label'});\n        const floatingLabel = await instance.floatingLabelElement;\n        spyOn(floatingLabel, 'animate').and.callThrough();\n        // Test case.\n        await harness.focusWithKeyboard();\n        await env.waitForStability();\n        // Assertion.\n        expect(floatingLabel.animate).toHaveBeenCalledTimes(1);\n      });\n\n      it('should animate label when populated changes', async () => {\n        // Setup.\n        const {instance} = await setupTest({label: 'Label'});\n        const floatingLabel = await instance.floatingLabelElement;\n        spyOn(floatingLabel, 'animate').and.callThrough();\n        // Test case.\n        instance.populated = true;\n        await env.waitForStability();\n        // Assertion.\n        expect(floatingLabel.animate).toHaveBeenCalledTimes(1);\n      });\n\n      it('should not animate when there is no label', async () => {\n        // Setup.\n        const {instance, harness} = await setupTest({label: undefined});\n        const floatingLabel = await instance.floatingLabelElement;\n        spyOn(floatingLabel, 'animate').and.callThrough();\n        // Test case.\n        await harness.focusWithKeyboard();\n        await env.waitForStability();\n        // Assertion.\n        expect(floatingLabel.animate)\n            .withContext('should not animate label when there is none')\n            .not.toHaveBeenCalled();\n      });\n\n      it('should still set the visible label type when there is no label',\n         async () => {\n           // Setup.\n           const {instance, harness} = await setupTest({label: undefined});\n           const floatingLabel = await instance.floatingLabelElement;\n           await harness.focusWithKeyboard();\n           // Test case.\n           await env.waitForStability();\n           // Assertion.\n           expect(floatingLabel.classList)\n               .withContext(\n                   'focusing should still set visible label type to floating')\n               .toContain('label--hidden');\n\n           // Test case.\n           await harness.blur();\n           await env.waitForStability();\n           // Test case.\n           expect(floatingLabel.classList)\n               .withContext(\n                   'unfocusing should still set visible label type to resting')\n               .not.toContain('label--hidden');\n         });\n\n      it('should not animate if focusing a populated field', async () => {\n        // Setup.\n        const {instance, harness} =\n            await setupTest({label: 'Label', populated: true});\n        const floatingLabel = await instance.floatingLabelElement;\n        spyOn(floatingLabel, 'animate').and.callThrough();\n        // Test case.\n        await harness.focusWithKeyboard();\n        await env.waitForStability();\n        // Assertion.\n        expect(floatingLabel.animate)\n            .withContext('should not animate when focusing a populated field')\n            .not.toHaveBeenCalled();\n      });\n\n      it('should not animate if populating a focused field', async () => {\n        // Setup.\n        const {instance, harness} = await setupTest({label: 'Label'});\n        await harness.focusWithKeyboard();\n        const floatingLabel = await instance.floatingLabelElement;\n        spyOn(floatingLabel, 'animate').and.callThrough();\n        // Test case.\n        instance.populated = true;\n        await env.waitForStability();\n        // Assertion.\n        expect(floatingLabel.animate)\n            .withContext('should not animate when populated a focused field')\n            .not.toHaveBeenCalled();\n      });\n\n      it('should cancel previous animation', async () => {\n        // Set up.\n        const {instance, harness} = await setupTest({label: 'Label'});\n        const restingLabel = await instance.restingLabelElement;\n        const firstAnimation = new Animation();\n        spyOn(firstAnimation, 'cancel').and.callThrough();\n        const secondAnimation = new Animation();\n        spyOn(secondAnimation, 'cancel').and.callThrough();\n        spyOn(restingLabel, 'animate')\n            .and.returnValues(firstAnimation, secondAnimation);\n        // Test case.\n        await harness.focusWithKeyboard();\n        await env.waitForStability();\n        await harness.blur();\n        await env.waitForStability();\n        // Assertion.\n        expect(firstAnimation.cancel)\n            .withContext('first animation should be cancelled')\n            .toHaveBeenCalled();\n        expect(secondAnimation.cancel)\n            .withContext('second animation should play')\n            .not.toHaveBeenCalled();\n      });\n    });\n  */\n  describe('.label', () => {\n    it('should render empty string when there is no label', async () => {\n      // Setup.\n      // Test case.\n      const {instance} = await setupTest({label: undefined});\n      // Assertion.\n      expect(instance.labelText)\n        .withContext(\n          'label text should be empty string if label is not provided',\n        )\n        .toBe('');\n    });\n\n    it('should render label', async () => {\n      // Setup.\n      // Test case.\n      const labelValue = 'Label';\n      const {instance} = await setupTest({label: labelValue});\n      // Assertion.\n      expect(instance.labelText)\n        .withContext('label text should equal label when not required')\n        .toBe(labelValue);\n    });\n\n    it('should adds asterisk if required', async () => {\n      // Setup.\n      // Test case.\n      const labelValue = 'Label';\n      const {instance} = await setupTest({required: true, label: labelValue});\n      // Assertion.\n      expect(instance.labelText)\n        .withContext(\n          'label text should equal label with asterisk when required',\n        )\n        .toBe(`${labelValue}*`);\n    });\n\n    it('should not render asterisk if required when there is no label', async () => {\n      // Setup.\n      // Test case.\n      const {instance} = await setupTest({required: true, label: undefined});\n      // Assertion.\n      expect(instance.labelText)\n        .withContext(\n          'label text should be empty string if label is not provided, even when required',\n        )\n        .toBe('');\n    });\n\n    it('should not render asterisk if required, but noAsterisk', async () => {\n      // Setup.\n      // Test case.\n      const labelValue = 'Label';\n      const {instance} = await setupTest({\n        required: true,\n        label: labelValue,\n        noAsterisk: true,\n      });\n      //Assertion\n      expect(instance.labelText)\n        .withContext(\n          'label test should equal label without asterisk, when required and noAsterisk',\n        )\n        .toBe(labelValue);\n    });\n  });\n\n  describe('supporting text', () => {\n    it('should update to errorText when error is true', async () => {\n      const errorText = 'Error message';\n      const {instance} = await setupTest({\n        error: true,\n        supportingText: 'Supporting text',\n        errorText,\n      });\n\n      expect(instance.supportingTextContent).toEqual(errorText);\n    });\n  });\n\n  describe('error announcement', () => {\n    it('should announce errors when both error and errorText are set', async () => {\n      const {instance} = await setupTest({\n        error: true,\n        errorText: 'Error message',\n      });\n\n      expect(instance.didErrorAnnounce())\n        .withContext('instance.didErrorAnnounce()')\n        .toBeTrue();\n    });\n\n    it('should not announce supporting text', async () => {\n      const {instance} = await setupTest();\n      instance.error = true;\n      instance.supportingText = 'Not an error';\n      await env.waitForStability();\n\n      expect(instance.didErrorAnnounce())\n        .withContext('instance.didErrorAnnounce()')\n        .toBeFalse();\n    });\n\n    it('should re-announce when reannounceError() is called', async () => {\n      const {instance} = await setupTest({\n        error: true,\n        errorText: 'Error message',\n      });\n\n      instance.reannounceError();\n      await env.waitForStability();\n      // After lit update, but before re-render refresh\n      expect(instance.didErrorAnnounce())\n        .withContext('didErrorAnnounce() before refresh')\n        .toBeFalse();\n\n      // After the second lit update render refresh\n      await env.waitForStability();\n      expect(instance.didErrorAnnounce())\n        .withContext('didErrorAnnounce() after refresh')\n        .toBeTrue();\n    });\n  });\n\n  describe('label animation', () => {\n    it('should not produce NaN transforms when populated while hidden', async () => {\n      const {instance} = await setupTest({label: 'Hidden Label'});\n      instance.style.display = 'none';\n      await env.waitForStability();\n\n      const floatingLabel =\n        instance.shadowRoot?.querySelector('.label.floating')!;\n      expect(floatingLabel).withContext('floating label element').toBeDefined();\n      const floatingLabelAnimateSpy = spyOn(\n        floatingLabel,\n        'animate',\n      ).and.callThrough();\n\n      instance.populated = true;\n      await env.waitForStability();\n\n      expect(floatingLabelAnimateSpy)\n        .withContext('floatingLabel.animate()')\n        .not.toHaveBeenCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "field/internal/filled-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Field} from './field.js';\n\n/**\n * A filled field component.\n */\nexport class FilledField extends Field {\n  protected override renderBackground() {\n    return html` <div class=\"background\"></div> `;\n  }\n\n  protected override renderStateLayer() {\n    return html` <div class=\"state-layer\"></div> `;\n  }\n\n  protected override renderIndicator() {\n    return html`<div class=\"active-indicator\"></div>`;\n  }\n}\n"
  },
  {
    "path": "field/internal/filled-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use './filled-field';\n\n@include filled-field.styles;\n"
  },
  {
    "path": "field/internal/outlined-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Field} from './field.js';\n\n/**\n * An outlined field component.\n */\nexport class OutlinedField extends Field {\n  protected override renderOutline(floatingLabel: unknown) {\n    return html`\n      <div class=\"outline\">\n        <div class=\"outline-start\"></div>\n        <div class=\"outline-notch\">\n          <div class=\"outline-panel-inactive\"></div>\n          <div class=\"outline-panel-active\"></div>\n          <div class=\"outline-label\">${floatingLabel}</div>\n        </div>\n        <div class=\"outline-end\"></div>\n      </div>\n    `;\n  }\n}\n"
  },
  {
    "path": "field/internal/outlined-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n@use './outlined-field';\n\n@include outlined-field.styles;\n"
  },
  {
    "path": "field/internal/shared-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use './shared';\n\n@include shared.styles;\n"
  },
  {
    "path": "field/outlined-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedField} from './internal/outlined-field.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-field': MdOutlinedField;\n  }\n}\n\n/**\n * TODO(b/228525797): add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-field')\nexport class MdOutlinedField extends OutlinedField {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"
  },
  {
    "path": "field/outlined-field_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdOutlinedField} from './outlined-field.js';\n\ndescribe('<md-outlined-field>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdOutlinedField.styles);\n  });\n});\n"
  },
  {
    "path": "focus/_focus-ring.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/focus-ring' show theme;\n"
  },
  {
    "path": "focus/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Focus',\n  [new Knob('inward', {ui: boolInput(), defaultValue: false})],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "focus/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "focus/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/md-focus-ring.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for focus ring stories. */\nexport interface StoryKnobs {\n  inward: boolean;\n}\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'Focus ring',\n  styles: css`\n    button {\n      appearance: none;\n      background: var(--md-sys-color-surface);\n      border: none;\n      border-radius: 16px;\n      --md-focus-ring-shape: 16px;\n      height: 64px;\n      outline: none;\n      position: relative;\n      margin: 8px;\n      vertical-align: top;\n      width: 64px;\n    }\n\n    button::before {\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: inherit;\n      content: '';\n      inset: 0;\n      position: absolute;\n    }\n\n    button:focus {\n      background: var(--md-sys-color-surface-variant);\n    }\n  `,\n  render({inward}) {\n    return html`\n      <button aria-label=\"A button with a focus ring\">\n        <md-focus-ring ?inward=${inward}></md-focus-ring>\n      </button>\n      <button aria-label=\"A button with a focus ring\">\n        <md-focus-ring ?inward=${inward}></md-focus-ring>\n      </button>\n      <button aria-label=\"A button with a focus ring\">\n        <md-focus-ring ?inward=${inward}></md-focus-ring>\n      </button>\n    `;\n  },\n};\n\nconst multiAction: MaterialStoryInit<StoryKnobs> = {\n  name: 'Multi-action components',\n  styles: css`\n    [role='list'] {\n      align-items: center;\n      appearance: none;\n      background: var(--md-sys-color-surface);\n      border-radius: 16px;\n      --md-focus-ring-shape: 16px;\n      display: flex;\n      gap: 8px;\n      height: 64px;\n      justify-content: stretch;\n      margin: 0;\n      padding: 0 16px;\n      position: relative;\n    }\n\n    [role='list']:focus-within {\n      background: var(--md-sys-color-surface-variant);\n    }\n\n    [role='listitem'] {\n      display: flex;\n      flex: 1;\n    }\n\n    button {\n      appearance: none;\n      background: none;\n      border: none;\n      outline: none;\n      position: relative;\n      vertical-align: top;\n    }\n\n    #primary {\n      flex: 1;\n    }\n\n    #secondary {\n      height: 32px;\n      width: 32px;\n      border-radius: 32px;\n      --md-focus-ring-shape: 32px;\n    }\n\n    [role='list']::before,\n    #secondary::before {\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: inherit;\n      content: '';\n      inset: 0;\n      position: absolute;\n    }\n  `,\n  render({inward}) {\n    return html`\n      <div role=\"list\">\n        <md-focus-ring for=\"primary\" ?inward=${inward}></md-focus-ring>\n\n        <div role=\"listitem\">\n          <button\n            id=\"primary\"\n            aria-label=\"The primary action for a multi-action component\">\n            Action\n          </button>\n        </div>\n\n        <div role=\"listitem\">\n          <button\n            id=\"secondary\"\n            aria-label=\"The secondary action for a multi-action component\">\n            X\n            <md-focus-ring ?inward=${inward}></md-focus-ring>\n          </button>\n        </div>\n      </div>\n    `;\n  },\n};\n\n/** Focus ring stories. */\nexport const stories = [standard, multiAction];\n"
  },
  {
    "path": "focus/internal/_focus-ring.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-focus-ring-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-focus-ring-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-focus-ring-values();\n\n  $active-width: map.get($tokens, 'active-width');\n  $color: map.get($tokens, 'color');\n  $duration: map.get($tokens, 'duration');\n  $width: map.get($tokens, 'width');\n  $inward-offset: map.get($tokens, 'inward-offset');\n  $outward-offset: map.get($tokens, 'outward-offset');\n  $start-start: map.get($tokens, 'shape-start-start');\n  $start-end: map.get($tokens, 'shape-start-end');\n  $end-end: map.get($tokens, 'shape-end-end');\n  $end-start: map.get($tokens, 'shape-end-start');\n\n  :host {\n    animation-delay: 0s, calc($duration * 0.25);\n    animation-duration: calc($duration * 0.25), calc($duration * 0.75);\n    animation-timing-function: map.get($_md-sys-motion, 'easing-emphasized');\n    box-sizing: border-box;\n    color: $color;\n    display: none;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  :host([visible]) {\n    display: flex;\n  }\n\n  :host(:not([inward])) {\n    animation-name: outward-grow, outward-shrink;\n    border-end-end-radius: calc($end-end + $outward-offset);\n    border-end-start-radius: calc($end-start + $outward-offset);\n    border-start-end-radius: calc($start-end + $outward-offset);\n    border-start-start-radius: calc($start-start + $outward-offset);\n    inset: calc(-1 * $outward-offset);\n    outline: $width solid currentColor;\n  }\n\n  :host([inward]) {\n    animation-name: inward-grow, inward-shrink;\n    border-end-end-radius: calc($end-end - $inward-offset);\n    border-end-start-radius: calc($end-start - $inward-offset);\n    border-start-end-radius: calc($start-end - $inward-offset);\n    border-start-start-radius: calc($start-start - $inward-offset);\n    border: $width solid currentColor;\n    inset: $inward-offset;\n  }\n\n  @keyframes outward-grow {\n    from {\n      outline-width: 0;\n    }\n    to {\n      outline-width: $active-width;\n    }\n  }\n\n  @keyframes outward-shrink {\n    from {\n      outline-width: $active-width;\n    }\n  }\n\n  @keyframes inward-grow {\n    from {\n      border-width: 0;\n    }\n    to {\n      border-width: $active-width;\n    }\n  }\n\n  @keyframes inward-shrink {\n    from {\n      border-width: $active-width;\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    :host {\n      animation: none;\n    }\n  }\n}\n"
  },
  {
    "path": "focus/internal/focus-ring-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './focus-ring';\n// go/keep-sorted end\n\n@include focus-ring.styles;\n"
  },
  {
    "path": "focus/internal/focus-ring.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, LitElement, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {\n  Attachable,\n  AttachableController,\n} from '../../internal/controller/attachable-controller.js';\n\n/**\n * Events that the focus ring listens to.\n */\nconst EVENTS = ['focusin', 'focusout', 'pointerdown'];\n\n/**\n * A focus ring component.\n *\n * @fires visibility-changed {Event} Fired whenever `visible` changes.\n */\nexport class FocusRing extends LitElement implements Attachable {\n  /**\n   * Makes the focus ring visible.\n   */\n  @property({type: Boolean, reflect: true}) visible = false;\n\n  /**\n   * Makes the focus ring animate inwards instead of outwards.\n   */\n  @property({type: Boolean, reflect: true}) inward = false;\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string | null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n  set control(control: HTMLElement | null) {\n    this.attachableController.control = control;\n  }\n\n  private readonly attachableController = new AttachableController(\n    this,\n    this.onControlChange.bind(this),\n  );\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  /** @private */\n  handleEvent(event: FocusRingEvent) {\n    if (event[HANDLED_BY_FOCUS_RING]) {\n      // This ensures the focus ring does not activate when multiple focus rings\n      // are used within a single component.\n      return;\n    }\n\n    switch (event.type) {\n      default:\n        return;\n      case 'focusin':\n        this.visible = this.control?.matches(':focus-visible') ?? false;\n        break;\n      case 'focusout':\n      case 'pointerdown':\n        this.visible = false;\n        break;\n    }\n\n    event[HANDLED_BY_FOCUS_RING] = true;\n  }\n\n  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {\n    if (isServer) return;\n\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this);\n      next?.addEventListener(event, this);\n    }\n  }\n\n  override update(changed: PropertyValues<FocusRing>) {\n    if (changed.has('visible')) {\n      // This logic can be removed once the `:has` selector has been introduced\n      // to Firefox. This is necessary to allow correct submenu styles.\n      this.dispatchEvent(new Event('visibility-changed'));\n    }\n    super.update(changed);\n  }\n}\n\nconst HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');\n\ninterface FocusRingEvent extends Event {\n  [HANDLED_BY_FOCUS_RING]: true;\n}\n"
  },
  {
    "path": "focus/internal/focus-ring_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, TemplateResult} from 'lit';\n\nimport {Environment} from '../../testing/environment.js';\nimport {Harness} from '../../testing/harness.js';\n\nimport {FocusRing} from './focus-ring.js';\n\ncustomElements.define('test-focus-ring', FocusRing);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-focus-ring': FocusRing;\n  }\n}\n\ndescribe('focus ring', () => {\n  const env = new Environment();\n\n  function setupTest(template: TemplateResult) {\n    const root = env.render(template);\n    const button = root.querySelector('button');\n    if (!button) {\n      throw new Error('Could not query rendered <button>.');\n    }\n\n    const focusRing = root.querySelector('test-focus-ring');\n    if (!focusRing) {\n      throw new Error('Could not query rendered <test-focus-ring>.');\n    }\n\n    return {\n      root,\n      button,\n      focusRing,\n      harness: new Harness(button),\n    };\n  }\n\n  describe('control', () => {\n    it('should be the parentElement by default', () => {\n      const {button, focusRing} = setupTest(html`\n        <button>\n          <test-focus-ring></test-focus-ring>\n        </button>\n      `);\n\n      expect(focusRing.control).withContext('focusRing.control').toBe(button);\n    });\n\n    it('should be a referenced element when using a for attribute', () => {\n      const {button, focusRing} = setupTest(html`\n        <button id=\"button\"></button>\n        <test-focus-ring for=\"button\"></test-focus-ring>\n      `);\n\n      expect(focusRing.control).withContext('focusRing.control').toBe(button);\n    });\n\n    it('should update a referenced element when for attribute changes', async () => {\n      const {root, focusRing} = setupTest(html`\n        <button id=\"first\"></button>\n        <button id=\"second\"></button>\n        <test-focus-ring for=\"first\"></test-focus-ring>\n      `);\n\n      const secondButton = root.querySelector<HTMLElement>('#second');\n      if (!secondButton) {\n        throw new Error('Could not query rendered <button id=\"second\">');\n      }\n\n      focusRing.setAttribute('for', 'second');\n      expect(focusRing.control)\n        .withContext('focusRing.control')\n        .toBe(secondButton);\n      await new Harness(secondButton).focusWithKeyboard();\n\n      expect(focusRing.visible).withContext('focusRing.visible').toBeTrue();\n    });\n\n    it('should be able to be imperatively attached', () => {\n      const {button, focusRing} = setupTest(html`\n        <button></button>\n        <test-focus-ring></test-focus-ring>\n      `);\n\n      focusRing.attach(button);\n      expect(focusRing.control).withContext('focusRing.control').toBe(button);\n    });\n\n    it('should do nothing if attaching the same control', () => {\n      const {button, focusRing} = setupTest(html`\n        <button>\n          <test-focus-ring></test-focus-ring>\n        </button>\n      `);\n\n      expect(focusRing.control)\n        .withContext('focusRing.control before attach')\n        .toBe(button);\n      focusRing.attach(button);\n      expect(focusRing.control)\n        .withContext('focusRing.control after attach')\n        .toBe(button);\n    });\n\n    it('should detach previous control when attaching a new one', async () => {\n      const {harness, focusRing} = setupTest(html`\n        <button>\n          <test-focus-ring></test-focus-ring>\n        </button>\n      `);\n\n      const newControl = document.createElement('div');\n      focusRing.attach(newControl);\n      // Focus the button. It should not trigger focus ring visible anymore.\n      await harness.focusWithKeyboard();\n      expect(focusRing.visible).withContext('focusRing.visible').toBeFalse();\n    });\n\n    it('should detach when removed from the DOM', async () => {\n      const {harness, focusRing} = setupTest(html`\n        <button>\n          <test-focus-ring></test-focus-ring>\n        </button>\n      `);\n\n      focusRing.remove();\n      // Focus the button. It should not trigger focus ring visible anymore.\n      await harness.focusWithKeyboard();\n      expect(focusRing.visible).withContext('focusRing.visible').toBeFalse();\n    });\n\n    it('should be able to be imperatively detached', () => {\n      const {focusRing} = setupTest(html`\n        <button>\n          <test-focus-ring></test-focus-ring>\n        </button>\n      `);\n\n      focusRing.detach();\n      expect(focusRing.control).withContext('focusRing.control').toBeNull();\n    });\n\n    it('should not be controlled with an empty for attribute', () => {\n      const {focusRing} = setupTest(html`\n        <button>\n          <test-focus-ring for=\"\"></test-focus-ring>\n        </button>\n      `);\n\n      expect(focusRing.control).withContext('focusRing.control').toBeNull();\n    });\n  });\n\n  it('should be hidden on non-keyboard focus', async () => {\n    const {harness, focusRing} = setupTest(html`\n      <button>\n        <test-focus-ring></test-focus-ring>\n      </button>\n    `);\n\n    await harness.clickWithMouse();\n    expect(focusRing.visible)\n      .withContext('focusRing.visible after clickWithMouse')\n      .toBeFalse();\n  });\n\n  it('should be visible on keyboard focus', async () => {\n    const {harness, focusRing} = setupTest(html`\n      <button>\n        <test-focus-ring></test-focus-ring>\n      </button>\n    `);\n\n    await harness.focusWithKeyboard();\n    expect(focusRing.visible)\n      .withContext('focusRing.visible after focusWithKeyboard')\n      .toBeTrue();\n  });\n\n  it('should hide on blur', async () => {\n    const {harness, focusRing} = setupTest(html`\n      <button>\n        <test-focus-ring></test-focus-ring>\n      </button>\n    `);\n\n    focusRing.visible = true;\n    await harness.blur();\n    expect(focusRing.visible)\n      .withContext('focusRing.visible after blur')\n      .toBeFalse();\n  });\n});\n"
  },
  {
    "path": "focus/md-focus-ring.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FocusRing} from './internal/focus-ring.js';\nimport {styles} from './internal/focus-ring-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-focus-ring': MdFocusRing;\n  }\n}\n\n/**\n * TODO(b/267336424): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-focus-ring')\nexport class MdFocusRing extends FocusRing {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "focus/md-focus-ring_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFocusRing} from './md-focus-ring.js';\n\ndescribe('<md-focus-ring>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFocusRing.styles);\n  });\n});\n"
  },
  {
    "path": "icon/_icon.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/icon' show theme;\n"
  },
  {
    "path": "icon/icon.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Icon} from './internal/icon.js';\nimport {styles} from './internal/icon-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-icon')\nexport class MdIcon extends Icon {\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "icon/icon_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\nimport './icon.js';\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdIcon} from './icon.js';\n\ndescribe('<md-icon>', () => {\n  const env = new Environment();\n\n  describe('.styles', () => {\n    createTokenTests(MdIcon.styles);\n  });\n\n  describe('accessiblity', () => {\n    it('sets aria-hidden to true by default', async () => {\n      const root = env.render(html` <md-icon>check</md-icon>`);\n      const icon = root.querySelector('md-icon')!;\n\n      await env.waitForStability();\n\n      expect(icon.getAttribute('aria-hidden')).toBe('true');\n    });\n\n    it('sets aria-hidden is removed when initalized as false', async () => {\n      const root = env.render(html` <md-icon aria-hidden=\"false\"\n        >check</md-icon\n      >`);\n      const icon = root.querySelector('md-icon')!;\n\n      await env.waitForStability();\n\n      expect(icon.hasAttribute('aria-hidden')).toBe(false);\n    });\n\n    it('allows overriding aria-hidden after first render', async () => {\n      const root = env.render(html` <md-icon>check</md-icon>`);\n      const icon = root.querySelector('md-icon')!;\n\n      await env.waitForStability();\n\n      expect(icon.getAttribute('aria-hidden')).toBe('true');\n\n      icon.removeAttribute('aria-hidden');\n      await env.waitForStability();\n\n      expect(icon.hasAttribute('aria-hidden')).toBe(false);\n    });\n\n    it('overrides invalid aria-hidden values to true', async () => {\n      const root =\n        env.render(html` <!-- @ts-ignore:disable-next-line:no-incompatible-type-binding -->\n          <md-icon aria-hidden=\"foo\">check</md-icon>`);\n      const icon = root.querySelector('md-icon')!;\n\n      await env.waitForStability();\n\n      expect(icon.getAttribute('aria-hidden')).toBe('true');\n    });\n  });\n});\n"
  },
  {
    "path": "icon/internal/_icon.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-icon-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-icon-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-icon-values();\n\n  :host {\n    font-size: map.get($tokens, 'size');\n    width: map.get($tokens, 'size');\n    height: map.get($tokens, 'size');\n    color: inherit;\n    font-variation-settings: inherit;\n    font-weight: 400;\n    font-family: map.get($tokens, 'font');\n    display: inline-flex;\n    font-style: normal;\n    place-items: center;\n    place-content: center;\n    line-height: 1;\n    // Avoid displaying overflowing text if font ligatures have not loaded.\n    overflow: hidden;\n    // Changing the letter-spacing for WCAG text spacing compliance will shift\n    // around font ligature icons, so we revert that to normal. Note: some a11y\n    // tools use `!important` style injection and may see shifting icons. Actual\n    // text spacing override implementations in projects should not set\n    // `letter-spacing` on icons, or revert it with a `text-indent` of the same\n    // size.\n    letter-spacing: normal;\n    text-transform: none;\n    user-select: none;\n    white-space: nowrap;\n    word-wrap: normal;\n    // Prevent icons from shrinking when placed in a flex container.\n    flex-shrink: 0;\n\n    /* Support for all WebKit browsers. */\n    -webkit-font-smoothing: antialiased;\n    /* Support for Safari and Chrome. */\n    text-rendering: optimizeLegibility;\n    /* Support for Firefox. */\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  ::slotted(svg) {\n    fill: currentColor;\n  }\n\n  ::slotted(*) {\n    height: 100%;\n    width: 100%;\n  }\n}\n"
  },
  {
    "path": "icon/internal/icon-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './icon';\n// go/keep-sorted end\n\n@include icon.styles;\n"
  },
  {
    "path": "icon/internal/icon.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * TODO(b/265336902): add docs\n */\nexport class Icon extends LitElement {\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    const ariaHidden = this.getAttribute('aria-hidden');\n    if (ariaHidden === 'false') {\n      // Allow the user to set `aria-hidden=\"false\"` to create an icon that is\n      // announced by screenreaders.\n      this.removeAttribute('aria-hidden');\n      return;\n    }\n\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n}\n"
  },
  {
    "path": "iconbutton/_filled-icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-icon-button' show theme;\n"
  },
  {
    "path": "iconbutton/_filled-tonal-icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-tonal-icon-button' show theme;\n"
  },
  {
    "path": "iconbutton/_icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/icon-button' show theme;\n"
  },
  {
    "path": "iconbutton/_outlined-icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/outlined-icon-button' show theme;\n"
  },
  {
    "path": "iconbutton/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Icon Button',\n  [\n    new Knob('disabled', {ui: boolInput(), defaultValue: false}),\n    new Knob('icon', {ui: textInput(), defaultValue: ''}),\n    new Knob('selectedIcon', {ui: textInput(), defaultValue: ''}),\n    new Knob('softDisabled', {ui: boolInput(), defaultValue: false}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {icons: 'material-symbols'});\n"
  },
  {
    "path": "iconbutton/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "iconbutton/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/filled-icon-button.js';\nimport '@material/web/iconbutton/filled-tonal-icon-button.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/iconbutton/outlined-icon-button.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\nimport {css, html} from 'lit';\n\n/** Knob types for icon button stories. */\nexport interface StoryKnobs {\n  icon: string;\n  selectedIcon: string;\n  disabled: boolean;\n  softDisabled: boolean;\n}\n\nconst styles = [\n  typescaleStyles,\n  css`\n    .column {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .row {\n      display: flex;\n      gap: 32px;\n    }\n\n    p {\n      color: var(--md-sys-color-on-surface);\n    }\n  `,\n];\n\nconst buttons: MaterialStoryInit<StoryKnobs> = {\n  name: 'Icon button variants',\n  styles,\n  render({icon, disabled, softDisabled}) {\n    return html`\n      <div class=\"row md-typescale-body-medium\">\n        <div class=\"column\">\n          <p>Standard</p>\n          <md-icon-button\n            aria-label=\"Open settings\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'settings'}</md-icon>\n          </md-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Outlined</p>\n          <md-outlined-icon-button\n            aria-label=\"Search\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'search'}</md-icon>\n          </md-outlined-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Filled</p>\n          <md-filled-icon-button\n            aria-label=\"Complete\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'done'}</md-icon>\n          </md-filled-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Filled tonal</p>\n          <md-filled-tonal-icon-button\n            aria-label=\"Add new\"\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'add'}</md-icon>\n          </md-filled-tonal-icon-button>\n        </div>\n      </div>\n    `;\n  },\n};\n\nconst toggles: MaterialStoryInit<StoryKnobs> = {\n  name: 'Toggle icon buttons',\n  styles,\n  render({icon, selectedIcon, disabled, softDisabled}) {\n    return html`\n      <div class=\"row\">\n        <div class=\"column\">\n          <p>Standard</p>\n          <md-icon-button\n            aria-label=\"Show password\"\n            aria-label-selected=\"Hide password\"\n            toggle\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'visibility'}</md-icon>\n            <md-icon slot=\"selected\">\n              ${selectedIcon || 'visibility_off'}\n            </md-icon>\n          </md-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Outlined</p>\n          <md-outlined-icon-button\n            aria-label=\"Play\"\n            aria-label-selected=\"Pause\"\n            toggle\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'play_arrow'}</md-icon>\n            <md-icon slot=\"selected\">${selectedIcon || 'pause'}</md-icon>\n          </md-outlined-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Filled</p>\n          <md-filled-icon-button\n            aria-label=\"Show more\"\n            aria-label-selected=\"Show less\"\n            toggle\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'expand_more'}</md-icon>\n            <md-icon slot=\"selected\">${selectedIcon || 'expand_less'}</md-icon>\n          </md-filled-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Filled tonal</p>\n          <md-filled-tonal-icon-button\n            aria-label=\"Open menu\"\n            aria-label-selected=\"Close menu\"\n            toggle\n            ?disabled=${disabled}\n            ?soft-disabled=${softDisabled}>\n            <md-icon>${icon || 'menu'}</md-icon>\n            <md-icon slot=\"selected\">${selectedIcon || 'close'}</md-icon>\n          </md-filled-tonal-icon-button>\n        </div>\n      </div>\n    `;\n  },\n};\n\nconst links: MaterialStoryInit<StoryKnobs> = {\n  name: 'Links',\n  styles,\n  render({icon}) {\n    return html`\n      <div class=\"row\">\n        <div class=\"column\">\n          <p>Standard</p>\n          <md-icon-button\n            aria-label=\"Go home\"\n            href=\"https://google.com\"\n            target=\"_blank\">\n            <md-icon>${icon || 'home'}</md-icon>\n          </md-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Outlined</p>\n          <md-outlined-icon-button\n            aria-label=\"Open new tab\"\n            href=\"https://google.com\"\n            target=\"_blank\">\n            <md-icon>${icon || 'open_in_new'}</md-icon>\n          </md-outlined-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Filled</p>\n          <md-filled-icon-button\n            aria-label=\"Download Google\"\n            href=\"https://google.com\"\n            target=\"_blank\">\n            <md-icon>${icon || 'download'}</md-icon>\n          </md-filled-icon-button>\n        </div>\n\n        <div class=\"column\">\n          <p>Filled tonal</p>\n          <md-filled-tonal-icon-button\n            aria-label=\"Logout\"\n            href=\"https://google.com\"\n            target=\"_blank\">\n            <md-icon>${icon || 'logout'}</md-icon>\n          </md-filled-tonal-icon-button>\n        </div>\n      </div>\n    `;\n  },\n};\n\n/** Icon button stories. */\nexport const stories = [buttons, toggles, links];\n"
  },
  {
    "path": "iconbutton/filled-icon-button.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from './internal/filled-styles.js';\nimport {IconButton} from './internal/icon-button.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-icon-button': MdFilledIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-icon-button')\nexport class MdFilledIconButton extends IconButton {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'filled': true,\n      'toggle-filled': this.toggle,\n    };\n  }\n}\n"
  },
  {
    "path": "iconbutton/filled-icon-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilledIconButton} from './filled-icon-button.js';\n\ndescribe('<md-filled-icon-button>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledIconButton.styles);\n  });\n});\n"
  },
  {
    "path": "iconbutton/filled-tonal-icon-button.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from './internal/filled-tonal-styles.js';\nimport {IconButton} from './internal/icon-button.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button': MdFilledTonalIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-tonal-icon-button')\nexport class MdFilledTonalIconButton extends IconButton {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'filled-tonal': true,\n      'toggle-filled-tonal': this.toggle,\n    };\n  }\n}\n"
  },
  {
    "path": "iconbutton/filled-tonal-icon-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilledTonalIconButton} from './filled-tonal-icon-button.js';\n\ndescribe('<md-filled-tonal-icon-button', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledTonalIconButton.styles);\n  });\n});\n"
  },
  {
    "path": "iconbutton/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {IconButton} from './internal/icon-button.js';\n\n/**\n * Test harness for icon buttons.\n */\nexport class IconButtonHarness extends Harness<IconButton> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    if (this.element.href) {\n      return this.element.renderRoot.querySelector('a')!;\n    }\n\n    return this.element.renderRoot.querySelector('button')!;\n  }\n}\n"
  },
  {
    "path": "iconbutton/icon-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {IconButton} from './internal/icon-button.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\nimport {styles} from './internal/standard-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon-button': MdIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-icon-button')\nexport class MdIconButton extends IconButton {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'standard': true,\n    };\n  }\n}\n"
  },
  {
    "path": "iconbutton/icon-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../icon/icon.js';\nimport './icon-button.js';\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {IconButtonHarness} from './harness.js';\nimport {MdIconButton} from './icon-button.js';\n\nconst ICON_BUTTON_TEMPLATE = html`\n  <md-icon-button aria-label=\"Star\">\n    <md-icon>star</md-icon>\n  </md-icon-button>\n`;\nconst LINK_ICON_BUTTON_TEMPLATE = html`\n  <md-icon-button aria-label=\"Star\" href=\"https://google.com\">\n    <md-icon>star</md-icon>\n  </md-icon-button>\n`;\nconst ICON_BUTTON_TOGGLE_TEMPLATE = html`\n  <md-icon-button toggle aria-label=\"Star\">\n    <md-icon slot=\"onIcon\">star</md-icon>\n    <md-icon slot=\"offIcon\">star_border</md-icon>\n  </md-icon-button>\n`;\n\ninterface IconButtonInternals {\n  flipIcon: boolean;\n}\n\ndescribe('icon button tests', () => {\n  const env = new Environment();\n\n  describe('.styles', () => {\n    createTokenTests(MdIconButton.styles);\n  });\n\n  describe('md-icon-button', () => {\n    it(\n      'setting `disabled` updates the disabled attribute on the native ' +\n        'button element',\n      async () => {\n        const {element} = await setUpTest('button');\n        const button = element.shadowRoot!.querySelector('button')!;\n\n        element.disabled = true;\n        await element.updateComplete;\n        expect(button.hasAttribute('disabled')).toBeTrue();\n\n        element.disabled = false;\n        await element.updateComplete;\n        expect(button.hasAttribute('disabled')).toBeFalse();\n      },\n    );\n\n    it('should not be focusable when disabled', async () => {\n      // Arrange\n      const {element} = await setUpTest('button');\n      element.disabled = true;\n      await element.updateComplete;\n\n      // Act\n      element.focus();\n\n      // Assert\n      expect(document.activeElement)\n        .withContext('disabled button should not be focused')\n        .not.toBe(element);\n    });\n\n    it('should be focusable when soft-disabled', async () => {\n      // Arrange\n      const {element} = await setUpTest('button');\n      element.softDisabled = true;\n      await element.updateComplete;\n\n      // Act\n      element.focus();\n\n      // Assert\n      expect(document.activeElement)\n        .withContext('soft-disabled button should be focused')\n        .toBe(element);\n    });\n\n    it('should not be clickable when disabled', async () => {\n      // Arrange\n      const clickListener = jasmine.createSpy('clickListener');\n      const {element} = await setUpTest('button');\n      element.disabled = true;\n      element.addEventListener('click', clickListener);\n      await element.updateComplete;\n\n      // Act\n      element.click();\n\n      // Assert\n      expect(clickListener).not.toHaveBeenCalled();\n    });\n\n    it('should not be clickable when soft-disabled', async () => {\n      // Arrange\n      const clickListener = jasmine.createSpy('clickListener');\n      const {element} = await setUpTest('button');\n      element.softDisabled = true;\n      element.addEventListener('click', clickListener);\n      await element.updateComplete;\n\n      // Act\n      element.click();\n\n      // Assert\n      expect(clickListener).not.toHaveBeenCalled();\n    });\n\n    it(\n      'setting `ariaLabel` updates the aria-label attribute on the native ' +\n        'button element',\n      async () => {\n        const {element} = await setUpTest('button');\n        const button = element.shadowRoot!.querySelector('button')!;\n\n        element.ariaLabel = 'test';\n        await element.updateComplete;\n        expect(button.getAttribute('aria-label')).toBe('test');\n      },\n    );\n  });\n\n  describe('md-icon-button link', () => {\n    it(\n      'setting `ariaLabel` updates the aria-label attribute on the anchor' +\n        'tag',\n      async () => {\n        const {element} = await setUpTest('link');\n        const anchor = element.shadowRoot!.querySelector('a')!;\n        expect(anchor).not.toBeNull();\n\n        element.ariaLabel = 'test';\n        await element.updateComplete;\n        expect(anchor.getAttribute('aria-label')).toBe('test');\n      },\n    );\n  });\n\n  describe('md-icon-button toggle', () => {\n    it(\n      'setting `disabled` updates the disabled attribute on the native ' +\n        'button element',\n      async () => {\n        const {element} = await setUpTest('toggle');\n        const button = element.shadowRoot!.querySelector('button')!;\n\n        element.disabled = true;\n        await element.updateComplete;\n        expect(button.hasAttribute('disabled')).toBeTrue();\n\n        element.disabled = false;\n        await element.updateComplete;\n        expect(button.hasAttribute('disabled')).toBeFalse();\n      },\n    );\n\n    it(\n      'setting `ariaLabel` updates the aria-label attribute on the native ' +\n        'button element',\n      async () => {\n        const {element} = await setUpTest('toggle');\n        const button = element.shadowRoot!.querySelector('button')!;\n\n        element.ariaLabel = 'test';\n        await element.updateComplete;\n        expect(button.getAttribute('aria-label')).toBe('test');\n      },\n    );\n\n    it('toggles the `selected` state when button is clicked', async () => {\n      const {element, harness} = await setUpTest('toggle');\n\n      expect(element.selected).toBeFalse();\n      await harness.clickWithMouse();\n      expect(element.selected).toBeTrue();\n      await harness.clickWithMouse();\n      expect(element.selected).toBeFalse();\n    });\n\n    it('fires input and change events when clicked', async () => {\n      const {element, harness} = await setUpTest('toggle');\n      let changeEvent = false;\n      let inputEvent = false;\n      element.addEventListener('input', () => (inputEvent = true));\n      element.addEventListener('change', () => (changeEvent = true));\n      expect(element.selected).toBeFalse();\n      await harness.clickWithMouse();\n      expect(element.selected).toBeTrue();\n      expect(inputEvent).toBeTrue();\n      expect(changeEvent).toBeTrue();\n    });\n\n    it('setting `selected` updates the aria-pressed attribute on the native button element', async () => {\n      const {element} = await setUpTest('toggle');\n\n      element.selected = true;\n      await element.updateComplete;\n      const button = element.shadowRoot!.querySelector('button')!;\n      expect(button.getAttribute('aria-pressed')).toEqual('true');\n\n      element.selected = false;\n      await element.updateComplete;\n      expect(button.getAttribute('aria-pressed')).toEqual('false');\n    });\n\n    it('button with toggled aria label toggles aria label', async () => {\n      const {element, harness} = await setUpTest('toggle');\n      element.ariaLabelSelected = 'aria label on';\n      element.ariaLabel = 'aria label off';\n      await element.updateComplete;\n\n      const button = element.shadowRoot!.querySelector('button')!;\n      expect(element.selected).toBeFalse();\n      expect(button.getAttribute('aria-label')).toEqual('aria label off');\n\n      // Toggle\n      await harness.clickWithMouse();\n      await element.updateComplete;\n      expect(element.selected).toBeTrue();\n      expect(button.getAttribute('aria-label')).toEqual('aria label on');\n    });\n\n    it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => {\n      const template = html` <div dir=\"rtl\">\n        <md-icon-button aria-label=\"Star\" .flipIconInRtl=\"${true}\">\n          star\n        </md-icon-button>\n      </div>`;\n      const element = env.render(template).querySelector('md-icon-button')!;\n      await env.waitForStability();\n\n      expect((element as unknown as IconButtonInternals).flipIcon).toBeTrue();\n    });\n\n    it('if `flipsIconInRtl=true`, does not flip icon in an LTR context', async () => {\n      const template = html` <div dir=\"ltr\">\n        <md-icon-button aria-label=\"Star\" .flipIconInRtl=\"${true}\">\n          star\n        </md-icon-button>\n      </div>`;\n      const element = env.render(template).querySelector('md-icon-button')!;\n      await env.waitForStability();\n\n      expect((element as unknown as IconButtonInternals).flipIcon).toBeFalse();\n    });\n\n    it('should allow preventing toggle click event', async () => {\n      const {element, harness} = await setUpTest('toggle');\n\n      element.addEventListener('click', (event) => {\n        event.preventDefault();\n      });\n\n      expect(element.selected).withContext('selected before click').toBeFalse();\n      await harness.clickWithMouse();\n      expect(element.selected)\n        .withContext('selected after prevent default click')\n        .toBeFalse();\n    });\n  });\n\n  async function setUpTest(type: string) {\n    let template;\n    switch (type) {\n      case 'button':\n        template = ICON_BUTTON_TEMPLATE;\n        break;\n      case 'link':\n        template = LINK_ICON_BUTTON_TEMPLATE;\n        break;\n      case 'toggle':\n        template = ICON_BUTTON_TOGGLE_TEMPLATE;\n        break;\n      default:\n        throw new Error('Invalid tag name: ' + type);\n    }\n\n    const element = env.render(template).querySelector('md-icon-button')!;\n    await env.waitForStability();\n    return {\n      element,\n      harness: new IconButtonHarness(element),\n    };\n  }\n});\n"
  },
  {
    "path": "iconbutton/internal/_filled-icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filled-icon-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-filled-icon-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-icon-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .icon-button {\n    color: var(--_icon-color);\n\n    &:hover {\n      color: var(--_hover-icon-color);\n    }\n\n    &:focus {\n      color: var(--_focus-icon-color);\n    }\n\n    &:active {\n      color: var(--_pressed-icon-color);\n    }\n\n    &:is(:disabled, [aria-disabled='true']) {\n      color: var(--_disabled-icon-color);\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  .icon-button::before {\n    // Background color, separate node for opacity changes\n    background-color: var(--_container-color);\n    border-radius: inherit;\n    content: '';\n    inset: 0;\n    position: absolute;\n    z-index: -1; // place behind content\n  }\n\n  .icon-button:is(:disabled, [aria-disabled='true'])::before {\n    background-color: var(--_disabled-container-color);\n    opacity: var(--_disabled-container-opacity);\n  }\n\n  .icon-button:is(:disabled, [aria-disabled='true']) .icon {\n    opacity: var(--_disabled-icon-opacity);\n  }\n\n  .toggle-filled {\n    &:not(:disabled, [aria-disabled='true']) {\n      color: var(--_toggle-icon-color);\n\n      &:hover {\n        color: var(--_toggle-hover-icon-color);\n      }\n\n      &:focus {\n        color: var(--_toggle-focus-icon-color);\n      }\n\n      &:active {\n        color: var(--_toggle-pressed-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_toggle-hover-state-layer-color),\n        pressed-color: var(--_toggle-pressed-state-layer-color),\n      )\n    );\n  }\n\n  .toggle-filled:not(:disabled, [aria-disabled='true'])::before {\n    // Note: filled icon buttons have three container colors,\n    // \"container-color\" for regular, then selected/unselected for toggle.\n    background-color: var(--_unselected-container-color);\n  }\n\n  .selected {\n    &:not(:disabled, [aria-disabled='true']) {\n      color: var(--_toggle-selected-icon-color);\n\n      &:hover {\n        color: var(--_toggle-selected-hover-icon-color);\n      }\n\n      &:focus {\n        color: var(--_toggle-selected-focus-icon-color);\n      }\n\n      &:active {\n        color: var(--_toggle-selected-pressed-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_toggle-selected-hover-state-layer-color),\n        pressed-color: var(--_toggle-selected-pressed-state-layer-color),\n      )\n    );\n  }\n\n  .selected:not(:disabled, [aria-disabled='true'])::before {\n    background-color: var(--_selected-container-color);\n  }\n}\n"
  },
  {
    "path": "iconbutton/internal/_filled-tonal-icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filled-tonal-icon-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-filled-tonal-icon-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-tonal-icon-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .icon-button {\n    color: var(--_icon-color);\n\n    &:hover {\n      color: var(--_hover-icon-color);\n    }\n\n    &:focus {\n      color: var(--_focus-icon-color);\n    }\n\n    &:active {\n      color: var(--_pressed-icon-color);\n    }\n\n    &:is(:disabled, [aria-disabled='true']) {\n      color: var(--_disabled-icon-color);\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  .icon-button::before {\n    // Background color, separate node for opacity changes\n    background-color: var(--_container-color);\n    border-radius: inherit;\n    content: '';\n    inset: 0;\n    position: absolute;\n    z-index: -1; // place behind content\n  }\n\n  .icon-button:is(:disabled, [aria-disabled='true'])::before {\n    background-color: var(--_disabled-container-color);\n    opacity: var(--_disabled-container-opacity);\n  }\n\n  .icon-button:is(:disabled, [aria-disabled='true']) .icon {\n    opacity: var(--_disabled-icon-opacity);\n  }\n\n  .toggle-filled-tonal {\n    &:not(:disabled, [aria-disabled='true']) {\n      color: var(--_toggle-icon-color);\n\n      &:hover {\n        color: var(--_toggle-hover-icon-color);\n      }\n\n      &:focus {\n        color: var(--_toggle-focus-icon-color);\n      }\n\n      &:active {\n        color: var(--_toggle-pressed-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_toggle-hover-state-layer-color),\n        pressed-color: var(--_toggle-pressed-state-layer-color),\n      )\n    );\n  }\n\n  .toggle-filled-tonal:not(:disabled, [aria-disabled='true'])::before {\n    // Note: filled tonal icon buttons have three container colors,\n    // \"container-color\" for regular, then selected/unselected for toggle.\n    background-color: var(--_unselected-container-color);\n  }\n\n  .selected {\n    &:not(:disabled, [aria-disabled='true']) {\n      color: var(--_toggle-selected-icon-color);\n\n      &:hover {\n        color: var(--_toggle-selected-hover-icon-color);\n      }\n\n      &:focus {\n        color: var(--_toggle-selected-focus-icon-color);\n      }\n\n      &:active {\n        color: var(--_toggle-selected-pressed-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_toggle-selected-hover-state-layer-color),\n        pressed-color: var(--_toggle-selected-pressed-state-layer-color),\n      )\n    );\n  }\n\n  .selected:not(:disabled, [aria-disabled='true'])::before {\n    background-color: var(--_selected-container-color);\n  }\n}\n"
  },
  {
    "path": "iconbutton/internal/_icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-icon-button-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-icon-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-icon-button-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    // These custom properties are not used, so set defaults so token tests pass\n    // for <md-icon-button>.\n    --_container-shape-start-start: 0;\n    --_container-shape-start-end: 0;\n    --_container-shape-end-end: 0;\n    --_container-shape-end-start: 0;\n    --_container-height: 0;\n    --_container-width: 0;\n\n    height: var(--_state-layer-height);\n    width: var(--_state-layer-width);\n  }\n\n  :host([touch-target='wrapper']) {\n    margin: max(0px, (48px - var(--_state-layer-height))/2)\n      max(0px, (48px - var(--_state-layer-width))/2);\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape-start-start': var(--_state-layer-shape),\n        'shape-start-end': var(--_state-layer-shape),\n        'shape-end-end': var(--_state-layer-shape),\n        'shape-end-start': var(--_state-layer-shape),\n      )\n    );\n  }\n\n  .standard {\n    background-color: transparent;\n    color: var(--_icon-color);\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n\n    &:hover {\n      color: var(--_hover-icon-color);\n    }\n\n    &:focus {\n      color: var(--_focus-icon-color);\n    }\n\n    &:active {\n      color: var(--_pressed-icon-color);\n    }\n\n    &:is(:disabled, [aria-disabled='true']) {\n      color: var(--_disabled-icon-color);\n    }\n  }\n\n  md-ripple {\n    border-radius: var(--_state-layer-shape);\n  }\n\n  .standard:is(:disabled, [aria-disabled='true']) {\n    opacity: var(--_disabled-icon-opacity);\n  }\n\n  .selected {\n    &:not(:disabled, [aria-disabled='true']) {\n      color: var(--_selected-icon-color);\n\n      &:hover {\n        color: var(--_selected-hover-icon-color);\n      }\n\n      &:focus {\n        color: var(--_selected-focus-icon-color);\n      }\n\n      &:active {\n        color: var(--_selected-pressed-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_selected-hover-state-layer-color),\n        hover-opacity: var(--_selected-hover-state-layer-opacity),\n        pressed-color: var(--_selected-pressed-state-layer-color),\n        pressed-opacity: var(--_selected-pressed-state-layer-opacity),\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "iconbutton/internal/_outlined-icon-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../ripple/ripple';\n@use '../../tokens';\n@use './shared';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-outlined-icon-button-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-outlined-icon-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-icon-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .outlined {\n    background-color: transparent;\n    color: var(--_icon-color);\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n\n    &::before {\n      border-color: var(--_outline-color);\n      border-width: var(--_outline-width);\n    }\n\n    &:hover {\n      color: var(--_hover-icon-color);\n    }\n\n    &:focus {\n      color: var(--_focus-icon-color);\n    }\n\n    &:active {\n      color: var(--_pressed-icon-color);\n    }\n\n    &:is(:disabled, [aria-disabled='true']) {\n      color: var(--_disabled-icon-color);\n\n      &::before {\n        border-color: var(--_disabled-outline-color);\n        opacity: var(--_disabled-outline-opacity);\n      }\n    }\n  }\n\n  .outlined:is(:disabled, [aria-disabled='true']) .icon {\n    opacity: var(--_disabled-icon-opacity);\n  }\n\n  .outlined::before {\n    block-size: 100%;\n    border-style: solid;\n    border-radius: inherit;\n    box-sizing: border-box;\n    content: '';\n    inline-size: 100%;\n    inset: 0;\n    pointer-events: none;\n    position: absolute;\n    z-index: -1; // place behind content\n  }\n\n  // Selected toggle buttons have no outline.\n  .outlined.selected::before {\n    border-width: 0;\n  }\n\n  // Selected icon button toggle.\n  .selected {\n    &:not(:disabled, [aria-disabled='true']) {\n      color: var(--_selected-icon-color);\n\n      &:hover {\n        color: var(--_selected-hover-icon-color);\n      }\n\n      &:focus {\n        color: var(--_selected-focus-icon-color);\n      }\n\n      &:active {\n        color: var(--_selected-pressed-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_selected-hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_selected-pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  .selected:not(:disabled, [aria-disabled='true'])::before {\n    background-color: var(--_selected-container-color);\n  }\n\n  .selected:is(:disabled, [aria-disabled='true'])::before {\n    background-color: var(--_disabled-selected-container-color);\n    opacity: var(--_disabled-selected-container-opacity);\n  }\n\n  @media (forced-colors: active) {\n    :host(:is([disabled], [soft-disabled])) {\n      --_disabled-outline-opacity: 1;\n    }\n\n    // Selected button in HCM has an outline.\n    .selected {\n      &::before {\n        border-color: CanvasText;\n        border-width: var(--_outline-width);\n      }\n\n      &:is(:disabled, [aria-disabled='true'])::before {\n        border-color: GrayText;\n        opacity: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "iconbutton/internal/_shared.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// This file contains common static styles that are shared across icon button\n// variants.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n@use '../../icon/icon';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    display: inline-flex;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    height: var(--_container-height);\n    width: var(--_container-width);\n    justify-content: center;\n  }\n\n  :host([touch-target='wrapper']) {\n    margin: max(0px, (48px - var(--_container-height)) / 2)\n      max(0px, (48px - var(--_container-width)) / 2);\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape-start-start': var(--_container-shape-start-start),\n        'shape-start-end': var(--_container-shape-start-end),\n        'shape-end-end': var(--_container-shape-end-end),\n        'shape-end-start': var(--_container-shape-end-start),\n      )\n    );\n  }\n\n  :host(:is([disabled], [soft-disabled])) {\n    pointer-events: none;\n  }\n\n  .icon-button {\n    place-items: center;\n    background: none;\n    border: none;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: flex;\n    place-content: center;\n    outline: none;\n    padding: 0;\n    position: relative;\n    text-decoration: none;\n    user-select: none;\n    z-index: 0;\n    flex: 1;\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n    border-end-end-radius: var(--_container-shape-end-end);\n  }\n\n  .icon {\n    ::slotted(*) {\n      font-size: var(--_icon-size);\n      height: var(--_icon-size);\n      width: var(--_icon-size);\n      font-weight: inherit;\n    }\n  }\n\n  md-ripple {\n    z-index: -1; // Place behind content\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n    border-end-end-radius: var(--_container-shape-end-end);\n  }\n\n  .flip-icon .icon {\n    transform: scaleX(-1);\n  }\n\n  .icon {\n    display: inline-flex;\n  }\n\n  .link {\n    display: grid;\n    height: 100%;\n    outline: none;\n    place-items: center;\n    position: absolute;\n    width: 100%;\n  }\n\n  .touch {\n    position: absolute;\n    height: max(48px, 100%);\n    width: max(48px, 100%);\n  }\n\n  :host([touch-target='none']) .touch {\n    display: none;\n  }\n\n  @media (forced-colors: active) {\n    :host(:is([disabled], [soft-disabled])) {\n      --_disabled-icon-color: GrayText;\n      --_disabled-icon-opacity: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "iconbutton/internal/filled-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filled-icon-button';\n// go/keep-sorted end\n\n@include filled-icon-button.styles;\n"
  },
  {
    "path": "iconbutton/internal/filled-tonal-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filled-tonal-icon-button';\n// go/keep-sorted end\n\n@include filled-tonal-icon-button.styles;\n"
  },
  {
    "path": "iconbutton/internal/icon-button.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {isRtl} from '../../internal/controller/is-rtl.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../internal/events/dispatch-hooks.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\n\n// Separate variable needed for closure.\nconst iconButtonBaseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A button for rendering icons.\n *\n * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles\n * --composed\n * @fires change {Event} Dispatched when a toggle button toggles --bubbles\n */\nexport class IconButton extends iconButtonBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the icon button and makes it non-interactive.\n   */\n  declare disabled: boolean; // for jsdoc until lit-analyzer is updated\n\n  /**\n   * \"Soft-disables\" the icon button (disabled but still focusable).\n   *\n   * Use this when an icon button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * Flips the icon if it is in an RTL context at startup.\n   */\n  @property({type: Boolean, attribute: 'flip-icon-in-rtl'})\n  flipIconInRtl = false;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the icon button is used as a link (`href` is set).\n   */\n  @property() download = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target: LinkTarget | '' = '';\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({type: Boolean}) toggle = false;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the selected icon, or the default icon If no `slot=\"selected\"`\n   * icon is provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n  constructor() {\n    super();\n    if (isServer) return;\n    setupDispatchHooks(this, 'click');\n    this.addEventListener('click', (event) => {\n      // If the button is soft-disabled or a disabled link, we need to\n      // explicitly prevent the click from propagating to other event listeners\n      // as well as prevent the default action. This is because the underlying\n      // `<button>` or `<a>` element is not actually `:disabled`.\n      if (this.softDisabled || (this.disabled && this.href)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      // Save current selected state to toggle, since an external event listener\n      // may also change the selected state on click.\n      const wasSelected = this.selected;\n      afterDispatch(event, () => {\n        if (!this.toggle || this.disabled || event.defaultPrevented) {\n          return;\n        }\n\n        this.selected = !wasSelected;\n        this.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        // Bubbles but does not compose to mimic native browser <input> & <select>\n        // Additionally, native change event is not an InputEvent.\n        this.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    });\n  }\n\n  protected override willUpdate() {\n    // Link buttons cannot be disabled or soft-disabled.\n    if (this.href) {\n      this.disabled = false;\n      this.softDisabled = false;\n    }\n  }\n\n  protected override render() {\n    const tag = this.href ? literal`div` : literal`button`;\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;\n    const ariaPressedValue = !this.toggle ? nothing : this.selected;\n    let ariaLabelValue: string | null | typeof nothing = nothing;\n    if (!this.href) {\n      ariaLabelValue =\n        hasToggledAriaLabel && this.selected\n          ? this.ariaLabelSelected\n          : ariaLabel;\n    }\n    return staticHtml`<${tag}\n        class=\"icon-button ${classMap(this.getRenderClasses())}\"\n        id=\"button\"\n        aria-label=\"${ariaLabelValue || nothing}\"\n        aria-haspopup=\"${(!this.href && ariaHasPopup) || nothing}\"\n        aria-expanded=\"${(!this.href && ariaExpanded) || nothing}\"\n        aria-pressed=\"${ariaPressedValue}\"\n        aria-disabled=${(!this.href && this.softDisabled) || nothing}\n        ?disabled=\"${!this.href && this.disabled}\">\n        ${this.renderFocusRing()}\n        ${this.renderRipple()}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n        ${this.href ? this.renderLink() : this.renderTouchTarget()}\n  </${tag}>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <a\n        class=\"link\"\n        id=\"link\"\n        href=\"${this.href}\"\n        download=\"${this.download || nothing}\"\n        target=\"${this.target || nothing}\"\n        aria-label=\"${ariaLabel || nothing}\">\n        ${this.renderTouchTarget()}\n      </a>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'flip-icon': this.flipIcon,\n      'selected': this.toggle && this.selected,\n    };\n  }\n\n  private renderIcon() {\n    return html`<span class=\"icon\"><slot></slot></span>`;\n  }\n\n  private renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<span class=\"icon icon--selected\"\n      ><slot name=\"selected\"><slot></slot></slot\n    ></span>`;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"touch\"></span>`;\n  }\n\n  private renderFocusRing() {\n    // TODO(b/310046938): use the same id for both elements\n    return html`<md-focus-ring\n      part=\"focus-ring\"\n      for=${this.href ? 'link' : 'button'}></md-focus-ring>`;\n  }\n\n  private renderRipple() {\n    const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);\n    // TODO(b/310046938): use the same id for both elements\n    return html`<md-ripple\n      for=${this.href ? 'link' : nothing}\n      ?disabled=\"${isRippleDisabled}\"></md-ripple>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n}\n"
  },
  {
    "path": "iconbutton/internal/outlined-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './outlined-icon-button';\n// go/keep-sorted end\n\n@include outlined-icon-button.styles;\n"
  },
  {
    "path": "iconbutton/internal/shared-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "iconbutton/internal/standard-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './icon-button';\n// go/keep-sorted end\n\n@include icon-button.styles;\n"
  },
  {
    "path": "iconbutton/outlined-icon-button.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {IconButton} from './internal/icon-button.js';\nimport {styles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-icon-button': MdOutlinedIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-icon-button')\nexport class MdOutlinedIconButton extends IconButton {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles];\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'outlined': true,\n    };\n  }\n}\n"
  },
  {
    "path": "iconbutton/outlined-icon-button_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdOutlinedIconButton} from './outlined-icon-button.js';\n\ndescribe('<md-outlined-icon-button>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdOutlinedIconButton.styles);\n  });\n});\n"
  },
  {
    "path": "internal/README.md",
    "content": "# Internal\n\n> WARNING ⚠️ This folder contains internal features that have limited support.\n> Proceed with caution when using them in a project.\n>\n> Breaking changes may occur that do not bump the major version (vX.0.0).\n"
  },
  {
    "path": "internal/aria/aria.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Accessibility Object Model reflective aria property name types.\n */\nexport type ARIAProperty = keyof ARIAMixin;\n\n/**\n * Accessibility Object Model reflective aria properties.\n */\nexport const ARIA_PROPERTIES: ARIAProperty[] = [\n  'role',\n  'ariaAtomic',\n  'ariaAutoComplete',\n  'ariaBusy',\n  'ariaChecked',\n  'ariaColCount',\n  'ariaColIndex',\n  'ariaColSpan',\n  'ariaCurrent',\n  'ariaDisabled',\n  'ariaExpanded',\n  'ariaHasPopup',\n  'ariaHidden',\n  'ariaInvalid',\n  'ariaKeyShortcuts',\n  'ariaLabel',\n  'ariaLevel',\n  'ariaLive',\n  'ariaModal',\n  'ariaMultiLine',\n  'ariaMultiSelectable',\n  'ariaOrientation',\n  'ariaPlaceholder',\n  'ariaPosInSet',\n  'ariaPressed',\n  'ariaReadOnly',\n  'ariaRequired',\n  'ariaRoleDescription',\n  'ariaRowCount',\n  'ariaRowIndex',\n  'ariaRowSpan',\n  'ariaSelected',\n  'ariaSetSize',\n  'ariaSort',\n  'ariaValueMax',\n  'ariaValueMin',\n  'ariaValueNow',\n  'ariaValueText',\n];\n\n/**\n * Accessibility Object Model aria attribute name types.\n */\nexport type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;\n\n/**\n * Accessibility Object Model aria attributes.\n */\nexport const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);\n\n/**\n * Checks if an attribute is one of the AOM aria attributes.\n *\n * @example\n * isAriaAttribute('aria-label'); // true\n *\n * @param attribute The attribute to check.\n * @return True if the attribute is an aria attribute, or false if not.\n */\nexport function isAriaAttribute(attribute: string): attribute is ARIAAttribute {\n  return ARIA_ATTRIBUTES.includes(attribute as ARIAAttribute);\n}\n\n/**\n * Converts an AOM aria property into its corresponding attribute.\n *\n * @example\n * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'\n *\n * @param property The aria property.\n * @return The aria attribute.\n */\nexport function ariaPropertyToAttribute<K extends ARIAProperty>(property: K) {\n  return (\n    property\n      .replace('aria', 'aria-')\n      // IDREF attributes also include an \"Element\" or \"Elements\" suffix\n      .replace(/Elements?/g, '')\n      .toLowerCase() as ARIAPropertyToAttribute<K>\n  );\n}\n\n// Converts an `ariaFoo` string type to an `aria-foo` string type.\ntype ARIAPropertyToAttribute<K extends string> =\n  K extends `aria${infer Suffix}Element${infer OptS}`\n    ? `aria-${Lowercase<Suffix>}`\n    : K extends `aria${infer Suffix}`\n      ? `aria-${Lowercase<Suffix>}`\n      : K;\n\n/**\n * An extension of `ARIAMixin` that enforces strict value types for aria\n * properties.\n *\n * This is needed for correct typing in render functions with lit analyzer.\n *\n * @example\n * render() {\n *   const {ariaLabel} = this as ARIAMixinStrict;\n *   return html`\n *     <button aria-label=${ariaLabel || nothing}>\n *       <slot></slot>\n *     </button>\n *   `;\n * }\n */\nexport interface ARIAMixinStrict extends ARIAMixin {\n  ariaAtomic: 'true' | 'false' | null;\n  ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;\n  ariaBusy: 'true' | 'false' | null;\n  ariaChecked: 'true' | 'false' | null;\n  ariaColCount: `${number}` | null;\n  ariaColIndex: `${number}` | null;\n  ariaColSpan: `${number}` | null;\n  ariaCurrent:\n    | 'page'\n    | 'step'\n    | 'location'\n    | 'date'\n    | 'time'\n    | 'true'\n    | 'false'\n    | null;\n  ariaDisabled: 'true' | 'false' | null;\n  ariaExpanded: 'true' | 'false' | null;\n  ariaHasPopup:\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n    | null;\n  ariaHidden: 'true' | 'false' | null;\n  ariaInvalid: 'true' | 'false' | null;\n  ariaKeyShortcuts: string | null;\n  ariaLabel: string | null;\n  ariaLevel: `${number}` | null;\n  ariaLive: 'assertive' | 'off' | 'polite' | null;\n  ariaModal: 'true' | 'false' | null;\n  ariaMultiLine: 'true' | 'false' | null;\n  ariaMultiSelectable: 'true' | 'false' | null;\n  ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;\n  ariaPlaceholder: string | null;\n  ariaPosInSet: `${number}` | null;\n  ariaPressed: 'true' | 'false' | null;\n  ariaReadOnly: 'true' | 'false' | null;\n  ariaRequired: 'true' | 'false' | null;\n  ariaRoleDescription: string | null;\n  ariaRowCount: `${number}` | null;\n  ariaRowIndex: `${number}` | null;\n  ariaRowSpan: `${number}` | null;\n  ariaSelected: 'true' | 'false' | null;\n  ariaSetSize: `${number}` | null;\n  ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;\n  ariaValueMax: `${number}` | null;\n  ariaValueMin: `${number}` | null;\n  ariaValueNow: `${number}` | null;\n  ariaValueText: string | null;\n  role: ARIARole | null;\n}\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n  | 'alert'\n  | 'alertdialog'\n  | 'button'\n  | 'checkbox'\n  | 'dialog'\n  | 'gridcell'\n  | 'link'\n  | 'log'\n  | 'marquee'\n  | 'menuitem'\n  | 'menuitemcheckbox'\n  | 'menuitemradio'\n  | 'option'\n  | 'progressbar'\n  | 'radio'\n  | 'scrollbar'\n  | 'searchbox'\n  | 'slider'\n  | 'spinbutton'\n  | 'status'\n  | 'switch'\n  | 'tab'\n  | 'tabpanel'\n  | 'textbox'\n  | 'timer'\n  | 'tooltip'\n  | 'treeitem'\n  | 'combobox'\n  | 'grid'\n  | 'listbox'\n  | 'menu'\n  | 'menubar'\n  | 'radiogroup'\n  | 'tablist'\n  | 'tree'\n  | 'treegrid'\n  | 'application'\n  | 'article'\n  | 'cell'\n  | 'columnheader'\n  | 'definition'\n  | 'directory'\n  | 'document'\n  | 'feed'\n  | 'figure'\n  | 'group'\n  | 'heading'\n  | 'img'\n  | 'list'\n  | 'listitem'\n  | 'math'\n  | 'none'\n  | 'note'\n  | 'presentation'\n  | 'region'\n  | 'row'\n  | 'rowgroup'\n  | 'rowheader'\n  | 'separator'\n  | 'table'\n  | 'term'\n  | 'text'\n  | 'toolbar'\n  | 'banner'\n  | 'complementary'\n  | 'contentinfo'\n  | 'form'\n  | 'main'\n  | 'navigation'\n  | 'region'\n  | 'search'\n  | 'doc-abstract'\n  | 'doc-acknowledgments'\n  | 'doc-afterword'\n  | 'doc-appendix'\n  | 'doc-backlink'\n  | 'doc-biblioentry'\n  | 'doc-bibliography'\n  | 'doc-biblioref'\n  | 'doc-chapter'\n  | 'doc-colophon'\n  | 'doc-conclusion'\n  | 'doc-cover'\n  | 'doc-credit'\n  | 'doc-credits'\n  | 'doc-dedication'\n  | 'doc-endnote'\n  | 'doc-endnotes'\n  | 'doc-epigraph'\n  | 'doc-epilogue'\n  | 'doc-errata'\n  | 'doc-example'\n  | 'doc-footnote'\n  | 'doc-foreword'\n  | 'doc-glossary'\n  | 'doc-glossref'\n  | 'doc-index'\n  | 'doc-introduction'\n  | 'doc-noteref'\n  | 'doc-notice'\n  | 'doc-pagebreak'\n  | 'doc-pagelist'\n  | 'doc-part'\n  | 'doc-preface'\n  | 'doc-prologue'\n  | 'doc-pullquote'\n  | 'doc-qna'\n  | 'doc-subtitle'\n  | 'doc-tip'\n  | 'doc-toc';\n"
  },
  {
    "path": "internal/aria/aria_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {ARIAProperty, ariaPropertyToAttribute, isAriaAttribute} from './aria.js';\n\ndescribe('aria', () => {\n  describe('isAriaAttribute()', () => {\n    it('should return true for aria value attributes', () => {\n      expect(isAriaAttribute('aria-label'))\n        .withContext('aria-label input')\n        .toBeTrue();\n    });\n\n    it('should return false for aria idref attributes', () => {\n      expect(isAriaAttribute('aria-labelledby'))\n        .withContext('aria-labelledby input')\n        .toBeFalse();\n    });\n\n    it('should return true for role', () => {\n      expect(isAriaAttribute('role')).withContext('role input').toBeTrue();\n    });\n\n    it('should return false for non-aria attributes', () => {\n      expect(isAriaAttribute('label')).withContext('label input').toBeFalse();\n    });\n\n    it('should return false for custom aria-* attributes', () => {\n      expect(isAriaAttribute('aria-label-custom'))\n        .withContext('aria-label-custom input')\n        .toBeFalse();\n    });\n  });\n\n  describe('ariaPropertyToAttribute()', () => {\n    it('should convert aria value properties', () => {\n      expect(ariaPropertyToAttribute('ariaLabel')).toBe('aria-label');\n    });\n\n    it('should convert aria idref properties', () => {\n      expect(\n        ariaPropertyToAttribute('ariaLabelledByElements' as ARIAProperty),\n      ).toBe('aria-labelledby');\n    });\n  });\n});\n"
  },
  {
    "path": "internal/aria/delegate.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, ReactiveElement, isServer} from 'lit';\n\nimport {MixinBase, MixinReturn} from '../../labs/behaviors/mixin.js';\nimport {\n  ARIA_PROPERTIES,\n  ariaPropertyToAttribute,\n  isAriaAttribute,\n} from './aria.js';\n\n// Private symbols\nconst privateIgnoreAttributeChangesFor = Symbol(\n  'privateIgnoreAttributeChangesFor',\n);\n\n/**\n * Mixes in aria delegation for elements that delegate focus and aria to inner\n * shadow root elements.\n *\n * This mixin fixes invalid aria announcements with shadow roots, caused by\n * duplicate aria attributes on both the host and the inner shadow root element.\n *\n * Note: this mixin **does not yet support** ID reference attributes, such as\n * `aria-labelledby` or `aria-controls`.\n *\n * @example\n * ```ts\n * class MyButton extends mixinDelegatesAria(LitElement) {\n *   static shadowRootOptions = {mode: 'open', delegatesFocus: true};\n *\n *   render() {\n *     return html`\n *       <button aria-label=${this.ariaLabel || nothing}>\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n * ```\n * ```html\n * <my-button aria-label=\"Plus one\">+1</my-button>\n * ```\n *\n * Use `ARIAMixinStrict` for lit analyzer strict types, such as the \"role\"\n * attribute.\n *\n * @example\n * ```ts\n * return html`\n *   <button role=${(this as ARIAMixinStrict).role || nothing}>\n *     <slot></slot>\n *   </button>\n * `;\n * ```\n *\n * In the future, updates to the Accessibility Object Model (AOM) will provide\n * built-in aria delegation features that will replace this mixin.\n *\n * @param base The class to mix functionality into.\n * @return The provided class with aria delegation mixed in.\n */\nexport function mixinDelegatesAria<T extends MixinBase<LitElement>>(\n  base: T,\n): MixinReturn<T> {\n  if (isServer) {\n    // Don't shift attributes when running with lit-ssr. The SSR renderer\n    // implements a subset of DOM APIs, including the methods this mixin\n    // overrides, causing errors. We don't need to shift on the server anyway\n    // since elements will shift attributes immediately once they hydrate.\n    return base;\n  }\n\n  abstract class WithDelegatesAriaElement extends base {\n    [privateIgnoreAttributeChangesFor] = new Set();\n\n    override attributeChangedCallback(\n      name: string,\n      oldValue: string | null,\n      newValue: string | null,\n    ) {\n      if (!isAriaAttribute(name)) {\n        super.attributeChangedCallback(name, oldValue, newValue);\n        return;\n      }\n\n      if (this[privateIgnoreAttributeChangesFor].has(name)) {\n        return;\n      }\n\n      // Don't trigger another `attributeChangedCallback` once we remove the\n      // aria attribute from the host. We check the explicit name of the\n      // attribute to ignore since `attributeChangedCallback` can be called\n      // multiple times out of an expected order when hydrating an element with\n      // multiple attributes.\n      this[privateIgnoreAttributeChangesFor].add(name);\n      this.removeAttribute(name);\n      this[privateIgnoreAttributeChangesFor].delete(name);\n      const dataProperty = ariaAttributeToDataProperty(name);\n      if (newValue === null) {\n        delete this.dataset[dataProperty];\n      } else {\n        this.dataset[dataProperty] = newValue;\n      }\n\n      this.requestUpdate(ariaAttributeToDataProperty(name), oldValue);\n    }\n\n    override getAttribute(name: string) {\n      if (isAriaAttribute(name)) {\n        return super.getAttribute(ariaAttributeToDataAttribute(name));\n      }\n\n      return super.getAttribute(name);\n    }\n\n    override removeAttribute(name: string) {\n      super.removeAttribute(name);\n      if (isAriaAttribute(name)) {\n        super.removeAttribute(ariaAttributeToDataAttribute(name));\n        // Since `aria-*` attributes are already removed`, we need to request\n        // an update because `attributeChangedCallback` will not be called.\n        this.requestUpdate();\n      }\n    }\n  }\n\n  setupDelegatesAriaProperties(\n    WithDelegatesAriaElement as unknown as typeof ReactiveElement,\n  );\n\n  return WithDelegatesAriaElement;\n}\n\n/**\n * Overrides the constructor's native `ARIAMixin` properties to ensure that\n * aria properties reflect the values that were shifted to a data attribute.\n *\n * @param ctor The `ReactiveElement` constructor to patch.\n */\nfunction setupDelegatesAriaProperties(ctor: typeof ReactiveElement) {\n  for (const ariaProperty of ARIA_PROPERTIES) {\n    // The casing between ariaProperty and the dataProperty may be different.\n    // ex: aria-haspopup -> ariaHasPopup\n    const ariaAttribute = ariaPropertyToAttribute(ariaProperty);\n    // ex: aria-haspopup -> data-aria-haspopup\n    const dataAttribute = ariaAttributeToDataAttribute(ariaAttribute);\n    // ex: aria-haspopup -> dataset.ariaHaspopup\n    const dataProperty = ariaAttributeToDataProperty(ariaAttribute);\n\n    // Call `ReactiveElement.createProperty()` so that the `aria-*` and `data-*`\n    // attributes are added to the `static observedAttributes` array. This\n    // triggers `attributeChangedCallback` for the delegates aria mixin to\n    // handle.\n    ctor.createProperty(ariaProperty, {\n      attribute: ariaAttribute,\n      noAccessor: true,\n    });\n    ctor.createProperty(Symbol(dataAttribute), {\n      attribute: dataAttribute,\n      noAccessor: true,\n    });\n\n    // Re-define the `ARIAMixin` properties to handle data attribute shifting.\n    // It is safe to use `Object.defineProperty` here because the properties\n    // are native and not renamed.\n    // tslint:disable-next-line:ban-unsafe-reflection\n    Object.defineProperty(ctor.prototype, ariaProperty, {\n      configurable: true,\n      enumerable: true,\n      get(this: ReactiveElement): string | null {\n        return this.dataset[dataProperty] ?? null;\n      },\n      set(this: ReactiveElement, value: string | null): void {\n        const prevValue = this.dataset[dataProperty] ?? null;\n        if (value === prevValue) {\n          return;\n        }\n\n        if (value === null) {\n          delete this.dataset[dataProperty];\n        } else {\n          this.dataset[dataProperty] = value;\n        }\n\n        this.requestUpdate(ariaProperty, prevValue);\n      },\n    });\n  }\n}\n\nfunction ariaAttributeToDataAttribute(ariaAttribute: string) {\n  // aria-haspopup -> data-aria-haspopup\n  return `data-${ariaAttribute}`;\n}\n\nfunction ariaAttributeToDataProperty(ariaAttribute: string) {\n  // aria-haspopup -> dataset.ariaHaspopup\n  return ariaAttribute.replace(/-\\w/, (dashLetter) =>\n    dashLetter[1].toUpperCase(),\n  );\n}\n"
  },
  {
    "path": "internal/aria/delegate_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {customElement, property, queryAsync} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\n\nimport {ARIAMixinStrict} from './aria.js';\nimport {mixinDelegatesAria} from './delegate.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-delegates-aria': DelegatesAriaElement;\n  }\n}\n\n// Separate variable needed for closure.\nconst delegatesAriaElementBaseClass = mixinDelegatesAria(LitElement);\n\n@customElement('test-delegates-aria')\nclass DelegatesAriaElement extends delegatesAriaElementBaseClass {\n  @queryAsync('button') readonly delegate!: Promise<HTMLElement | null>;\n  @property({attribute: 'lit-attribute'}) litAttribute = '';\n\n  protected override render() {\n    return html`<button\n      role=${(this as ARIAMixinStrict).role || nothing}\n      aria-label=${this.ariaLabel || nothing}\n      aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n      lit-attribute=${this.litAttribute}>\n      Label\n    </button>`;\n  }\n}\n\ndescribe('mixinDelegatesAria()', () => {\n  const env = new Environment();\n\n  // `mixinDelegatesAria()` patches `element.getAttribute()`, which makes it\n  // unreliable when testing what the screen reader sees. This function returns\n  // the \"real\" attribute value as read from the element's `outerHTML`,\n  // bypassing any patched methods or properties.\n  function getOuterHTMLAttribute(\n    element: Element,\n    attribute: string,\n  ): string | null {\n    const match = element.outerHTML.match(\n      new RegExp(`\\\\s${attribute}=\"([^\"]*)\"`),\n    );\n    return match ? match[1] : null;\n  }\n\n  async function setupTest(templateWithTestAriaDelegate: TemplateResult) {\n    const root = env.render(templateWithTestAriaDelegate);\n    const host = root.querySelector('test-delegates-aria');\n    if (!host) {\n      throw new Error('Could not query rendered <test-delegates-aria>.');\n    }\n\n    await host.updateComplete;\n    const delegate = await host.delegate;\n    if (!delegate) {\n      throw new Error(\n        \"Could not query <test-delegates-aria>'s rendered delegate element.\",\n      );\n    }\n\n    return {host, delegate};\n  }\n\n  // We test two attributes: 'aria-label' and 'role'. We explicitly test 'role'\n  // to include test cases that are not prefixed with 'aria-'.\n\n  describe('sets and does not repeat aria attributes when: ', () => {\n    it('rendering aria-label attribute', async () => {\n      // Arrange\n      // Act\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria aria-label=\"foo\"></test-delegates-aria>`,\n      );\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'aria-label'))\n        .withContext('host aria-label')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'aria-label'))\n        .withContext('delegate aria-label')\n        .toBe('foo');\n    });\n\n    it('rendering role attribute', async () => {\n      // Arrange\n      // Act\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria role=\"link\"></test-delegates-aria>`,\n      );\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'role'))\n        .withContext('host role')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'role'))\n        .withContext('delegate role')\n        .toBe('link');\n    });\n\n    // Test rendering multiple attributes to stress test the logic in\n    // attributeChangedCallback, which may be called out of order while shifting\n    // attributes.\n    it('rendering aria and non-aria attributes at the same time', async () => {\n      // Arrange\n      // Act\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria\n          aria-label=\"foo\"\n          lit-attribute=\"bar\"></test-delegates-aria>`,\n      );\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'aria-label'))\n        .withContext('host aria-label')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'aria-label'))\n        .withContext('delegate aria-label')\n        .toBe('foo');\n      expect(getOuterHTMLAttribute(delegate, 'lit-attribute'))\n        .withContext('delegate lit-attribute')\n        .toBe('bar');\n    });\n\n    it('rendering multiple aria attributes at the same time', async () => {\n      // Arrange\n      // Act\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria\n          aria-label=\"foo\"\n          aria-haspopup=\"true\"></test-delegates-aria>`,\n      );\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'aria-label'))\n        .withContext('host aria-label')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(host, 'aria-haspopup'))\n        .withContext('host aria-haspopup')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'aria-label'))\n        .withContext('delegate aria-label')\n        .toBe('foo');\n      expect(getOuterHTMLAttribute(delegate, 'aria-haspopup'))\n        .withContext('delegate aria-haspopup')\n        .toBe('true');\n    });\n\n    it(\"calling host.setAttribute('aria-label')\", async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria></test-delegates-aria>`,\n      );\n\n      // Act\n      host.setAttribute('aria-label', 'foo');\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'aria-label'))\n        .withContext('host aria-label')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'aria-label'))\n        .withContext('delegate aria-label')\n        .toBe('foo');\n    });\n\n    it(\"calling host.setAttribute('role')\", async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria></test-delegates-aria>`,\n      );\n\n      // Act\n      host.setAttribute('role', 'link');\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'role'))\n        .withContext('host role')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'role'))\n        .withContext('delegate role')\n        .toBe('link');\n    });\n\n    it('setting host.ariaLabel to a string', async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria></test-delegates-aria>`,\n      );\n\n      // Act\n      host.ariaLabel = 'foo';\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'aria-label'))\n        .withContext('host aria-label')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'aria-label'))\n        .withContext('delegate aria-label')\n        .toBe('foo');\n    });\n\n    it('setting host.role to a string', async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria></test-delegates-aria>`,\n      );\n\n      // Act\n      host.role = 'link';\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'role'))\n        .withContext('host role')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'role'))\n        .withContext('delegate role')\n        .toBe('link');\n    });\n  });\n\n  describe('returns the correct aria attribute value when: ', () => {\n    it('calling host.getAttribute(\"aria-label\")', async () => {\n      // Arrange\n      const {host} = await setupTest(\n        html`<test-delegates-aria aria-label=\"foo\"></test-delegates-aria>`,\n      );\n\n      // Act\n      const getAttributeResult = host.getAttribute('aria-label');\n\n      // Assert\n      expect(getAttributeResult)\n        .withContext('host.getAttribute() value')\n        .toEqual('foo');\n    });\n\n    it('calling host.getAttribute(\"role\")', async () => {\n      // Arrange\n      const {host} = await setupTest(\n        html`<test-delegates-aria role=\"link\"></test-delegates-aria>`,\n      );\n\n      // Act\n      const getAttributeResult = host.getAttribute('role');\n\n      // Assert\n      expect(getAttributeResult)\n        .withContext('host.getAttribute() value')\n        .toEqual('link');\n    });\n\n    it('getting host.ariaLabel', async () => {\n      // Arrange\n      const {host} = await setupTest(\n        html`<test-delegates-aria aria-label=\"foo\"></test-delegates-aria>`,\n      );\n\n      // Act\n      const hostAriaLabel = host.ariaLabel;\n\n      // Assert\n      expect(hostAriaLabel).withContext('host.ariaLabel value').toEqual('foo');\n    });\n\n    it('getting host.role', async () => {\n      // Arrange\n      const {host} = await setupTest(\n        html`<test-delegates-aria role=\"link\"></test-delegates-aria>`,\n      );\n\n      // Act\n      const hostRole = host.role;\n\n      // Assert\n      expect(hostRole).withContext('host.role value').toEqual('link');\n    });\n  });\n\n  describe('removes the delegated aria attribute when: ', () => {\n    it(\"calling host.removeAttribute('aria-label')\", async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria aria-label=\"foo\"></test-delegates-aria>`,\n      );\n\n      // Act\n      host.removeAttribute('aria-label');\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'aria-label'))\n        .withContext('host aria-label')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'aria-label'))\n        .withContext('delegate aria-label')\n        .toBeNull();\n    });\n\n    it(\"calling host.removeAttribute('role')\", async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria role=\"link\"></test-delegates-aria>`,\n      );\n\n      // Act\n      host.removeAttribute('role');\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'role'))\n        .withContext('host role')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'role'))\n        .withContext('delegate role')\n        .toBeNull();\n    });\n\n    it('setting host.ariaLabel to null', async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria aria-label=\"foo\"></test-delegates-aria>`,\n      );\n\n      // Act\n      host.ariaLabel = null;\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'aria-label'))\n        .withContext('host aria-label')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'aria-label'))\n        .withContext('delegate aria-label')\n        .toBeNull();\n    });\n\n    it('setting host.role to null', async () => {\n      // Arrange\n      const {host, delegate} = await setupTest(\n        html`<test-delegates-aria role=\"link\"></test-delegates-aria>`,\n      );\n\n      // Act\n      host.role = null;\n      await host.updateComplete;\n\n      // Assert\n      expect(getOuterHTMLAttribute(host, 'role'))\n        .withContext('host role')\n        .toBeNull();\n      expect(getOuterHTMLAttribute(delegate, 'role'))\n        .withContext('delegate role')\n        .toBeNull();\n    });\n  });\n\n  it('does not change behavior of setting non-aria attributes', async () => {\n    // Arrange\n    const {host} = await setupTest(\n      html`<test-delegates-aria aria-label=\"foo\"></test-delegates-aria>`,\n    );\n\n    // Act\n    host.setAttribute('foo', 'bar');\n\n    // Assert\n    const realFooAttribute = getOuterHTMLAttribute(host, 'foo');\n    expect(realFooAttribute)\n      .withContext('real \"foo\" attribute as read from outerHTML')\n      .toEqual('bar');\n    expect(host.getAttribute('foo'))\n      .withContext(\"host.getAttribute('foo')\")\n      .toEqual(realFooAttribute);\n  });\n\n  it('does not change behavior of LitElement @property() attributes', async () => {\n    // Arrange\n    const {host, delegate} = await setupTest(\n      html`<test-delegates-aria aria-label=\"foo\"></test-delegates-aria>`,\n    );\n\n    // Act\n    host.setAttribute('lit-attribute', 'bar');\n    await host.updateComplete;\n\n    // Assert\n    expect(host.litAttribute)\n      .withContext('host.litAttribute property updates from attribute change')\n      .toEqual('bar');\n    expect(getOuterHTMLAttribute(host, 'lit-attribute'))\n      .withContext('host has \"lit-attribute\" as read from outerHTML')\n      .toEqual('bar');\n    expect(getOuterHTMLAttribute(delegate, 'lit-attribute'))\n      .withContext('LitElement updated \"lit-attribute\" in the template')\n      .toEqual('bar');\n  });\n});\n"
  },
  {
    "path": "internal/controller/attachable-controller.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, ReactiveController, ReactiveControllerHost} from 'lit';\n\n/**\n * An element that can be attached to an associated controlling element.\n */\nexport interface Attachable {\n  /**\n   * Reflects the value of the `for` attribute, which is the ID of the element's\n   * associated control.\n   *\n   * Use this when the elements's associated control is not its parent.\n   *\n   * To manually control an element, set its `for` attribute to `\"\"`.\n   *\n   * @example\n   * ```html\n   * <div class=\"container\">\n   *   <md-attachable for=\"interactive\"></md-attachable>\n   *   <button id=\"interactive\">Action</button>\n   * </div>\n   * ```\n   *\n   * @example\n   * ```html\n   * <button class=\"manually-controlled\">\n   *   <md-attachable for=\"\"></md-attachable>\n   * </button>\n   * ```\n   */\n  htmlFor: string | null;\n\n  /**\n   * Gets or sets the element that controls the visibility of the attachable\n   * element. It is one of:\n   *\n   * - The control referenced by the `for` attribute.\n   * - The control provided to `element.attach(control)`\n   * - The element's parent.\n   * - `null` if the element is not controlled.\n   */\n  control: HTMLElement | null;\n\n  /**\n   * Attaches the element to an interactive control.\n   *\n   * @param control The element that controls the attachable element.\n   */\n  attach(control: HTMLElement): void;\n\n  /**\n   * Detaches the element from its current control.\n   */\n  detach(): void;\n}\n\n/**\n * A key to retrieve an `Attachable` element's `AttachableController` from a\n * global `MutationObserver`.\n */\nconst ATTACHABLE_CONTROLLER = Symbol('attachableController');\n\n/**\n * The host of an `AttachableController`. The controller will add itself to\n * the host so it can be retrieved in a global `MutationObserver`.\n */\ninterface AttachableControllerHost extends ReactiveControllerHost, HTMLElement {\n  [ATTACHABLE_CONTROLLER]?: AttachableController;\n}\n\nlet FOR_ATTRIBUTE_OBSERVER: MutationObserver | undefined;\n\nif (!isServer) {\n  /**\n   * A global `MutationObserver` that reacts to `for` attribute changes on\n   * `Attachable` elements. If the `for` attribute changes, the controller will\n   * re-attach to the new referenced element.\n   */\n  FOR_ATTRIBUTE_OBSERVER = new MutationObserver((records) => {\n    for (const record of records) {\n      // When a control's `for` attribute changes, inform its\n      // `AttachableController` to update to a new control.\n      (record.target as AttachableControllerHost)[\n        ATTACHABLE_CONTROLLER\n      ]?.hostConnected();\n    }\n  });\n}\n\n/**\n * A controller that provides an implementation for `Attachable` elements.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement implements Attachable {\n *   get control() { return this.attachableController.control; }\n *\n *   private readonly attachableController = new AttachableController(\n *     this,\n *     (previousControl, newControl) => {\n *       previousControl?.removeEventListener('click', this.handleClick);\n *       newControl?.addEventListener('click', this.handleClick);\n *     }\n *   );\n *\n *   // Implement remaining `Attachable` properties/methods that call the\n *   // controller's properties/methods.\n * }\n * ```\n */\nexport class AttachableController implements ReactiveController, Attachable {\n  get htmlFor() {\n    return this.host.getAttribute('for');\n  }\n\n  set htmlFor(htmlFor: string | null) {\n    if (htmlFor === null) {\n      this.host.removeAttribute('for');\n    } else {\n      this.host.setAttribute('for', htmlFor);\n    }\n  }\n\n  get control() {\n    if (this.host.hasAttribute('for')) {\n      if (!this.htmlFor || !this.host.isConnected) {\n        return null;\n      }\n\n      return (\n        this.host.getRootNode() as Document | ShadowRoot\n      ).querySelector<HTMLElement>(`#${this.htmlFor}`);\n    }\n\n    return this.currentControl || this.host.parentElement;\n  }\n  set control(control: HTMLElement | null) {\n    if (control) {\n      this.attach(control);\n    } else {\n      this.detach();\n    }\n  }\n\n  private currentControl: HTMLElement | null = null;\n\n  /**\n   * Creates a new controller for an `Attachable` element.\n   *\n   * @param host The `Attachable` element.\n   * @param onControlChange A callback with two parameters for the previous and\n   *     next control. An `Attachable` element may perform setup or teardown\n   *     logic whenever the control changes.\n   */\n  constructor(\n    private readonly host: AttachableControllerHost,\n    private readonly onControlChange: (\n      prev: HTMLElement | null,\n      next: HTMLElement | null,\n    ) => void,\n  ) {\n    host.addController(this);\n    host[ATTACHABLE_CONTROLLER] = this;\n    FOR_ATTRIBUTE_OBSERVER?.observe(host, {attributeFilter: ['for']});\n  }\n\n  attach(control: HTMLElement) {\n    if (control === this.currentControl) {\n      return;\n    }\n\n    this.setCurrentControl(control);\n    // When imperatively attaching, remove the `for` attribute so\n    // that the attached control is used instead of a referenced one.\n    this.host.removeAttribute('for');\n  }\n\n  detach() {\n    this.setCurrentControl(null);\n    // When imperatively detaching, add an empty `for=\"\"` attribute. This will\n    // ensure the control is `null` rather than the `parentElement`.\n    this.host.setAttribute('for', '');\n  }\n\n  /** @private */\n  hostConnected() {\n    this.setCurrentControl(this.control);\n  }\n\n  /** @private */\n  hostDisconnected() {\n    this.setCurrentControl(null);\n  }\n\n  private setCurrentControl(control: HTMLElement | null) {\n    this.onControlChange(this.currentControl, control);\n    this.currentControl = control;\n  }\n}\n"
  },
  {
    "path": "internal/controller/is-rtl.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Returns `true` if the given element is in a right-to-left direction.\n *\n * @param el Element to determine direction from\n * @param shouldCheck Optional. If `false`, return `false` without checking\n *     direction. Determining the direction of `el` is somewhat expensive, so\n *     this parameter can be used as a conditional guard. Defaults to `true`.\n */\nexport function isRtl(el: HTMLElement, shouldCheck = true) {\n  return (\n    shouldCheck &&\n    getComputedStyle(el).getPropertyValue('direction').trim() === 'rtl'\n  );\n}\n"
  },
  {
    "path": "internal/controller/is-rtl_test.ts",
    "content": "// import 'jasmine'; (google3-only)\n\nimport {isRtl} from './is-rtl.js';\n\nfunction setDirection(node: HTMLElement, rtl: boolean) {\n  node.dir = rtl ? 'rtl' : 'ltr';\n}\n\ndescribe('isRtl', () => {\n  let testDiv: HTMLElement;\n\n  beforeEach(() => {\n    // reset document direction\n    setDirection(document.documentElement, false);\n    testDiv = document.createElement('div');\n    document.body.appendChild(testDiv);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(testDiv);\n  });\n\n  it('returns the direction of a given node', () => {\n    expect(isRtl(testDiv)).toEqual(false);\n    setDirection(testDiv, true);\n    expect(isRtl(testDiv)).toEqual(true);\n  });\n\n  it('does not check direction if `shouldCheck` is false', () => {\n    expect(isRtl(testDiv, false)).toEqual(false);\n    setDirection(testDiv, true);\n    expect(isRtl(testDiv, false)).toEqual(false);\n  });\n});\n"
  },
  {
    "path": "internal/controller/string-converter.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const stringConverter = {\n  fromAttribute(value: string | null): string {\n    return value ?? '';\n  },\n  toAttribute(value: string): string | null {\n    return value || null;\n  },\n};\n"
  },
  {
    "path": "internal/controller/string-converter_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {stringConverter} from './string-converter.js';\n\ndescribe('stringConverter', () => {\n  describe('.fromAttribute', () => {\n    it('should return an empty string if string is empty or null', () => {\n      expect(stringConverter.fromAttribute('')).toBe('');\n      expect(stringConverter.fromAttribute(null)).toBe('');\n    });\n\n    it('should return value of string if not empty', () => {\n      expect(stringConverter.fromAttribute('foo')).toBe('foo');\n    });\n  });\n\n  describe('.toAttribute', () => {\n    it('should return null if string is empty', () => {\n      expect(stringConverter.toAttribute('')).toBeNull();\n    });\n\n    it('should return value of string if not empty', () => {\n      expect(stringConverter.toAttribute('foo')).toBe('foo');\n    });\n  });\n});\n"
  },
  {
    "path": "internal/events/dispatch-hooks.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A symbol used to access dispatch hooks on an event.\n */\nconst dispatchHooks = Symbol('dispatchHooks');\n\n/**\n * An `Event` with additional symbols for dispatch hooks.\n */\ninterface EventWithDispatchHooks extends Event {\n  [dispatchHooks]: EventTarget;\n}\n\n/**\n * Add a hook for an event that is called after the event is dispatched and\n * propagates to other event listeners.\n *\n * This is useful for behaviors that need to check if an event is canceled.\n *\n * The callback is invoked synchronously, which allows for better integration\n * with synchronous platform APIs (like `<form>` or `<label>` clicking).\n *\n * Note: `setupDispatchHooks()` must be called on the element before adding any\n * other event listeners. Call it in the constructor of an element or\n * controller.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n *   constructor() {\n *     super();\n *     setupDispatchHooks(this, 'click');\n *     this.addEventListener('click', event => {\n *       afterDispatch(event, () => {\n *         if (event.defaultPrevented) {\n *           return\n *         }\n *\n *         // ... perform logic\n *       });\n *     });\n *   }\n * }\n * ```\n *\n * @example\n * ```ts\n * class MyController implements ReactiveController {\n *   constructor(host: ReactiveElement) {\n *     // setupDispatchHooks() may be called multiple times for the same\n *     // element and events, making it safe for multiple controllers to use it.\n *     setupDispatchHooks(host, 'click');\n *     host.addEventListener('click', event => {\n *       afterDispatch(event, () => {\n *         if (event.defaultPrevented) {\n *           return;\n *         }\n *\n *         // ... perform logic\n *       });\n *     });\n *   }\n * }\n * ```\n *\n * @param event The event to add a hook to.\n * @param callback A hook that is called after the event finishes dispatching.\n */\nexport function afterDispatch(event: Event, callback: () => void) {\n  const hooks = (event as EventWithDispatchHooks)[dispatchHooks];\n  if (!hooks) {\n    throw new Error(`'${event.type}' event needs setupDispatchHooks().`);\n  }\n\n  hooks.addEventListener('after', callback);\n}\n\n/**\n * A lookup map of elements and event types that have a dispatch hook listener\n * set up. Used to ensure we don't set up multiple hook listeners on the same\n * element for the same event.\n */\nconst ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap<Element, Set<string>>();\n\n/**\n * Sets up an element to add dispatch hooks to given event types. This must be\n * called before adding any event listeners that need to use dispatch hooks\n * like `afterDispatch()`.\n *\n * This function is safe to call multiple times with the same element or event\n * types. Call it in the constructor of elements, mixins, and controllers to\n * ensure it is set up before external listeners.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n *   constructor() {\n *     super();\n *     setupDispatchHooks(this, 'click');\n *     this.addEventListener('click', this.listenerUsingAfterDispatch);\n *   }\n * }\n * ```\n *\n * @param element The element to set up event dispatch hooks for.\n * @param eventTypes The event types to add dispatch hooks to.\n */\nexport function setupDispatchHooks(\n  element: Element,\n  ...eventTypes: [string, ...string[]]\n) {\n  let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);\n  if (!typesAlreadySetUp) {\n    typesAlreadySetUp = new Set();\n    ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);\n  }\n\n  for (const eventType of eventTypes) {\n    // Don't register multiple dispatch hook listeners. A second registration\n    // would lead to the second listener re-dispatching a re-dispatched event,\n    // which can cause an infinite loop inside the other one.\n    if (typesAlreadySetUp.has(eventType)) {\n      continue;\n    }\n\n    // When we re-dispatch the event, it's going to immediately trigger this\n    // listener again. Use a flag to ignore it.\n    let isRedispatching = false;\n    element.addEventListener(\n      eventType,\n      (event: Event) => {\n        if (isRedispatching) {\n          return;\n        }\n\n        // Do not let the event propagate to any other listener (not just\n        // bubbling listeners with `stopPropagation()`).\n        event.stopImmediatePropagation();\n        // Make a copy.\n        const eventCopy = Reflect.construct(event.constructor, [\n          event.type,\n          event,\n        ]);\n\n        // Add hooks onto the event.\n        const hooks = new EventTarget();\n        (eventCopy as EventWithDispatchHooks)[dispatchHooks] = hooks;\n\n        // Re-dispatch the event. We can't reuse `redispatchEvent()` since we\n        // need to add the hooks to the copy before it's dispatched.\n        isRedispatching = true;\n        const composedPathIncludesAnchor = event\n          .composedPath()\n          .some((el) => (el as Partial<HTMLElement>)?.matches?.('a'));\n        if (event.type === 'click' && composedPathIncludesAnchor) {\n          // For legacy reasons, synthetic click events dispatching on\n          // HTMLAnchorElement will trigger link behavior. Prevent this since\n          // we will dispatch a copy of the same click event.\n          event.preventDefault();\n        }\n        const dispatched = event.composedPath()[0].dispatchEvent(eventCopy);\n        isRedispatching = false;\n        if (!dispatched) {\n          event.preventDefault();\n        }\n\n        // Synchronously call afterDispatch() hooks.\n        hooks.dispatchEvent(new Event('after'));\n      },\n      {\n        // Ensure this listener runs before other listeners.\n        // `setupDispatchHooks()` should be called in constructors to also\n        // ensure they run before any other externally-added capture listeners.\n        capture: true,\n      },\n    );\n\n    typesAlreadySetUp.add(eventType);\n  }\n}\n"
  },
  {
    "path": "internal/events/dispatch-hooks_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {afterDispatch, setupDispatchHooks} from './dispatch-hooks.js';\n\ndescribe('dispatch hooks', () => {\n  let element: HTMLDivElement;\n\n  beforeEach(() => {\n    element = document.createElement('div');\n    document.body.appendChild(element);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(element);\n  });\n\n  describe('setupDispatchHooks()', () => {\n    it('does not add more than one setup listener for an event type', () => {\n      spyOn(element, 'addEventListener').and.callThrough();\n      setupDispatchHooks(element, 'foo');\n      setupDispatchHooks(element, 'foo');\n\n      expect(element.addEventListener)\n        .withContext('element.addEventListener')\n        .toHaveBeenCalledTimes(1);\n    });\n\n    it('can add setup listeners for multiple event types', () => {\n      spyOn(element, 'addEventListener').and.callThrough();\n\n      setupDispatchHooks(element, 'foo', 'bar', 'baz');\n      expect(element.addEventListener)\n        .withContext('element.addEventListener')\n        .toHaveBeenCalledTimes(3);\n    });\n\n    it('triggers internal event listeners when a composed element is the source of the event', () => {\n      const shadowRoot = element.attachShadow({mode: 'open'});\n      const composedElement = document.createElement('button');\n      shadowRoot.appendChild(composedElement);\n      const innerClickListener = jasmine.createSpy('innerClickListener');\n      composedElement.addEventListener('click', innerClickListener);\n\n      setupDispatchHooks(element, 'click');\n      composedElement.click();\n\n      expect(innerClickListener)\n        .withContext('innerClickListener')\n        .toHaveBeenCalledTimes(1);\n    });\n\n    it('should not trigger activation behavior for clicks coming from inner <a> elements', () => {\n      const shadowRoot = element.attachShadow({mode: 'open'});\n      const anchorElement = document.createElement('a');\n      anchorElement.href = '#';\n      shadowRoot.appendChild(anchorElement);\n\n      setupDispatchHooks(element, 'click');\n\n      const clickEvent = new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n      });\n\n      anchorElement.dispatchEvent(clickEvent);\n\n      expect(clickEvent.defaultPrevented)\n        .withContext('clickEvent.defaultPrevented')\n        .toBeTrue();\n    });\n  });\n\n  describe('afterDispatch()', () => {\n    it('resolves synchronously after the event is finished dispatching', () => {\n      setupDispatchHooks(element, 'click');\n\n      const afterDispatchCallback = jasmine.createSpy('afterDispatchCallback');\n      const clickListener = jasmine\n        .createSpy('clickListener')\n        .and.callFake((event: Event) => {\n          afterDispatch(event, afterDispatchCallback);\n        });\n\n      element.addEventListener('click', clickListener);\n      element.click();\n\n      expect(clickListener)\n        .withContext('clickListener')\n        .toHaveBeenCalledTimes(1);\n      expect(afterDispatchCallback)\n        .withContext('afterDispatch() callback')\n        .toHaveBeenCalledTimes(1);\n    });\n\n    it('supports multiple afterDispatch listeners', () => {\n      setupDispatchHooks(element, 'click');\n\n      const firstAfterDispatchCallback = jasmine.createSpy(\n        'firstAfterDispatchCallback',\n      );\n      element.addEventListener('click', (event) => {\n        afterDispatch(event, firstAfterDispatchCallback);\n      });\n\n      const secondAfterDispatchCallback = jasmine.createSpy(\n        'secondAfterDispatchCallback',\n      );\n      element.addEventListener('click', (event) => {\n        afterDispatch(event, secondAfterDispatchCallback);\n      });\n\n      element.click();\n\n      expect(firstAfterDispatchCallback)\n        .withContext('afterDispatch() first callback')\n        .toHaveBeenCalledTimes(1);\n      expect(secondAfterDispatchCallback)\n        .withContext('afterDispatch() second callback')\n        .toHaveBeenCalledTimes(1);\n    });\n\n    it('resolves synchronously after the event is finished dispatching', () => {\n      setupDispatchHooks(element, 'click');\n\n      const afterDispatchCallback = jasmine.createSpy('afterDispatchCallback');\n      const clickListener = jasmine\n        .createSpy('clickListener')\n        .and.callFake((event: Event) => {\n          afterDispatch(event, afterDispatchCallback);\n        });\n\n      element.addEventListener('click', clickListener);\n      element.click();\n\n      expect(clickListener)\n        .withContext('clickListener')\n        .toHaveBeenCalledTimes(1);\n      expect(afterDispatchCallback)\n        .withContext('afterDispatch() callback')\n        .toHaveBeenCalledTimes(1);\n    });\n\n    it('can be used to synchronously detect if event was canceled', () => {\n      setupDispatchHooks(element, 'click');\n\n      // element listener\n      let eventDefaultPreventedInAfterDispatch: boolean | null = null;\n      element.addEventListener('click', (event) => {\n        afterDispatch(event, () => {\n          eventDefaultPreventedInAfterDispatch = event.defaultPrevented;\n        });\n      });\n\n      // client listener\n      element.addEventListener('click', (event) => {\n        event.preventDefault();\n      });\n\n      element.click();\n\n      expect(eventDefaultPreventedInAfterDispatch)\n        .withContext('event.defaultPrevented() in afterDispatch() callback')\n        .toBeTrue();\n    });\n\n    it('throws if setupDispatchHooks() was not called for the event type', () => {\n      // Do not set up hooks\n      let errorThrown: unknown;\n      element.addEventListener('click', (event) => {\n        try {\n          afterDispatch(event, () => {});\n        } catch (error) {\n          errorThrown = error;\n        }\n      });\n\n      element.click();\n      expect(errorThrown)\n        .withContext('error thrown calling afterDispatch()')\n        .toBeInstanceOf(Error);\n\n      expect((errorThrown as Error).message)\n        .withContext('errorThrown.message')\n        .toMatch('setupDispatchHooks');\n    });\n\n    it('does not fire multiple times if setupDispatchHooks() is called multiple times for the same element', () => {\n      setupDispatchHooks(element, 'click');\n      setupDispatchHooks(element, 'click');\n\n      const afterDispatchCallback = jasmine.createSpy('afterDispatchCallback');\n      const clickListener = jasmine\n        .createSpy('clickListener')\n        .and.callFake((event: Event) => {\n          afterDispatch(event, afterDispatchCallback);\n        });\n\n      element.addEventListener('click', clickListener);\n      element.click();\n\n      expect(clickListener)\n        .withContext('clickListener')\n        .toHaveBeenCalledTimes(1);\n      expect(afterDispatchCallback)\n        .withContext('afterDispatch() callback')\n        .toHaveBeenCalledTimes(1);\n    });\n  });\n});\n"
  },
  {
    "path": "internal/events/form-label-activation.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Dispatches a click event to the given element that triggers a native action,\n * but is not composed and therefore is not seen outside the element.\n *\n * This is useful for responding to an external click event on the host element\n * that should trigger an internal action like a button click.\n *\n * Note, a helper is provided because setting this up correctly is a bit tricky.\n * In particular, calling `click` on an element creates a composed event, which\n * is not desirable, and a manually dispatched event must specifically be a\n * `MouseEvent` to trigger a native action.\n *\n * @example\n * hostClickListener = (event: MouseEvent) {\n *   if (isActivationClick(event)) {\n *     this.dispatchActivationClick(this.buttonElement);\n *   }\n * }\n *\n */\nexport function dispatchActivationClick(element: HTMLElement) {\n  const event = new MouseEvent('click', {bubbles: true});\n  element.dispatchEvent(event);\n  return event;\n}\n\n/**\n * Returns true if the click event should trigger an activation behavior. The\n * behavior is defined by the element and is whatever it should do when\n * clicked.\n *\n * Typically when an element needs to handle a click, the click is generated\n * from within the element and an event listener within the element implements\n * the needed behavior; however, it's possible to fire a click directly\n * at the element that the element should handle. This method helps\n * distinguish these \"external\" clicks.\n *\n * An \"external\" click can be triggered in a number of ways: via a click\n * on an associated label for a form  associated element, calling\n * `element.click()`, or calling\n * `element.dispatchEvent(new MouseEvent('click', ...))`.\n *\n * Also works around Firefox issue\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching\n * events for a microtask after called.\n *\n * @example\n * hostClickListener = (event: MouseEvent) {\n *   if (isActivationClick(event)) {\n *     this.dispatchActivationClick(this.buttonElement);\n *   }\n * }\n *\n */\nexport function isActivationClick(event: Event) {\n  // Event must start at the event target.\n  if (event.currentTarget !== event.target) {\n    return false;\n  }\n  // Event must not be retargeted from shadowRoot.\n  if (event.composedPath()[0] !== event.target) {\n    return false;\n  }\n  // Target must not be disabled; this should only occur for a synthetically\n  // dispatched click.\n  if ((event.target as EventTarget & {disabled: boolean}).disabled) {\n    return false;\n  }\n  // This is an activation if the event should not be squelched.\n  return !squelchEvent(event);\n}\n\n// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)\n//  Remove when Firefox bug is addressed.\nfunction squelchEvent(event: Event) {\n  const squelched = isSquelchingEvents;\n  if (squelched) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n  }\n  squelchEventsForMicrotask();\n  return squelched;\n}\n\n// Ignore events for one microtask only.\nlet isSquelchingEvents = false;\nasync function squelchEventsForMicrotask() {\n  isSquelchingEvents = true;\n  // Need to pause for just one microtask.\n  // tslint:disable-next-line\n  await null;\n  isSquelchingEvents = false;\n}\n"
  },
  {
    "path": "internal/events/form-label-activation_test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from './form-label-activation.js';\n\ndescribe('label events', () => {\n  let instance: HTMLDivElement;\n\n  beforeEach(() => {\n    instance = document.createElement('div');\n    instance\n      .attachShadow({mode: 'open'})\n      .append(document.createElement('slot'));\n    // To have event.target set correctly, the EventTarget instance must be\n    // attached to the DOM.\n    document.body.appendChild(instance);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(instance);\n  });\n\n  describe('isActivationClick()', () => {\n    it('returns true for click on listener', () => {\n      const listener = jasmine.createSpy('listener', isActivationClick);\n      listener.and.callThrough();\n      instance.addEventListener('click', listener);\n      instance.dispatchEvent(\n        new MouseEvent('click', {bubbles: true, composed: true}),\n      );\n      expect(listener).toHaveBeenCalledTimes(1);\n      expect(listener.calls.mostRecent().returnValue).toBe(true);\n    });\n\n    it('returns false for click on element listener shadowRoot', () => {\n      const listener = jasmine.createSpy('listener', isActivationClick);\n      listener.and.callThrough();\n      instance.addEventListener('click', listener);\n      const innerEl = document.createElement('div');\n      instance.shadowRoot!.append(innerEl);\n      innerEl.dispatchEvent(\n        new MouseEvent('click', {bubbles: true, composed: true}),\n      );\n      expect(listener).toHaveBeenCalledTimes(1);\n      expect(listener.calls.mostRecent().returnValue).toBe(false);\n    });\n\n    it('returns false for click on element listener child', () => {\n      const listener = jasmine.createSpy('listener', isActivationClick);\n      listener.and.callThrough();\n      instance.addEventListener('click', listener);\n      const slottedEl = document.createElement('div');\n      instance.append(slottedEl);\n\n      slottedEl.dispatchEvent(\n        new MouseEvent('click', {bubbles: true, composed: true}),\n      );\n      expect(listener).toHaveBeenCalledTimes(1);\n      expect(listener.calls.mostRecent().returnValue).toBe(false);\n    });\n  });\n\n  describe('dispatchActivationClick()', () => {\n    it('dispatches an event', () => {\n      const innerEl = document.createElement('div');\n      instance.shadowRoot!.append(innerEl);\n      const listener = jasmine.createSpy('listener');\n      innerEl.addEventListener('click', listener);\n      dispatchActivationClick(innerEl);\n      expect(listener).toHaveBeenCalledTimes(1);\n      dispatchActivationClick(innerEl);\n      expect(listener).toHaveBeenCalledTimes(2);\n    });\n\n    it('dispatches an event that cannot be heard outside dispatching scope', () => {\n      const innerEl = document.createElement('div');\n      instance.shadowRoot!.append(innerEl);\n      const listener = jasmine.createSpy('listener');\n      instance.addEventListener('click', listener);\n      dispatchActivationClick(innerEl);\n      expect(listener).toHaveBeenCalledTimes(0);\n    });\n  });\n});\n"
  },
  {
    "path": "internal/events/redispatch-event.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Re-dispatches an event from the provided element.\n *\n * This function is useful for forwarding non-composed events, such as `change`\n * events.\n *\n * @example\n * class MyInput extends LitElement {\n *   render() {\n *     return html`<input @change=${this.redispatchEvent}>`;\n *   }\n *\n *   protected redispatchEvent(event: Event) {\n *     redispatchEvent(this, event);\n *   }\n * }\n *\n * @param element The element to dispatch the event from.\n * @param event The event to re-dispatch.\n * @return Whether or not the event was dispatched (if cancelable).\n */\nexport function redispatchEvent(element: Element, event: Event) {\n  // For bubbling events in SSR light DOM (or composed), stop their propagation\n  // and dispatch the copy.\n  if (event.bubbles && (!element.shadowRoot || event.composed)) {\n    event.stopPropagation();\n  }\n\n  const copy = Reflect.construct(event.constructor, [event.type, event]);\n  const dispatched = element.dispatchEvent(copy);\n  if (!dispatched) {\n    event.preventDefault();\n  }\n\n  return dispatched;\n}\n"
  },
  {
    "path": "internal/events/redispatch-event_test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {redispatchEvent} from './redispatch-event.js';\n\ndescribe('events', () => {\n  let instance: HTMLDivElement;\n\n  beforeEach(() => {\n    instance = document.createElement('div');\n    instance\n      .attachShadow({mode: 'open'})\n      .append(document.createElement('slot'));\n    // To have event.target set correctly, the EventTarget instance must be\n    // attached to the DOM.\n    document.body.appendChild(instance);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(instance);\n  });\n\n  describe('redispatchEvent()', () => {\n    it('should re-dispatch events', () => {\n      const event = new Event('foo', {composed: false, bubbles: true});\n      const fooHandler = jasmine.createSpy('fooHandler');\n      instance.addEventListener('foo', fooHandler);\n      redispatchEvent(instance, event);\n\n      expect(fooHandler).toHaveBeenCalled();\n      const redispatchedEvent = fooHandler.calls.first().args[0] as Event;\n      expect(redispatchedEvent)\n        .withContext('redispatched event should be a new instance')\n        .not.toBe(event);\n      expect(redispatchedEvent.target)\n        .withContext(\n          'target should be the instance that redispatched the event',\n        )\n        .toBe(instance);\n      expect(redispatchedEvent.type)\n        .withContext('should be the same event type')\n        .toBe(event.type);\n      expect(redispatchedEvent.composed)\n        .withContext('should not be composed')\n        .toBeFalse();\n      expect(redispatchedEvent.bubbles)\n        .withContext('should keep other flags set to true')\n        .toBeTrue();\n    });\n\n    it('should not dispatch multiple events if bubbling and composed', () => {\n      const event = new Event('foo', {composed: true, bubbles: true});\n      const fooHandler = jasmine.createSpy('fooHandler');\n      instance.addEventListener('foo', fooHandler);\n      redispatchEvent(instance, event);\n\n      expect(fooHandler).toHaveBeenCalledTimes(1);\n    });\n\n    it('should not dispatch multiple events if bubbling in light DOM', () => {\n      const lightDomInstance = document.createElement('div');\n      try {\n        document.body.appendChild(lightDomInstance);\n        const event = new Event('foo', {composed: true, bubbles: true});\n        const fooHandler = jasmine.createSpy('fooHandler');\n        instance.addEventListener('foo', fooHandler);\n        redispatchEvent(instance, event);\n\n        expect(fooHandler).toHaveBeenCalledTimes(1);\n      } finally {\n        document.body.removeChild(lightDomInstance);\n      }\n    });\n\n    it('should preventDefault() on the original event if canceled', () => {\n      const event = new Event('foo', {cancelable: true});\n      const fooHandler = jasmine\n        .createSpy('fooHandler')\n        .and.callFake((event: Event) => {\n          event.preventDefault();\n        });\n      instance.addEventListener('foo', fooHandler);\n      const result = redispatchEvent(instance, event);\n      expect(result)\n        .withContext('should return false since event was canceled')\n        .toBeFalse();\n      expect(fooHandler).toHaveBeenCalled();\n      const redispatchedEvent = fooHandler.calls.first().args[0] as Event;\n      expect(redispatchedEvent.defaultPrevented)\n        .withContext('redispatched event should be canceled by handler')\n        .toBeTrue();\n      expect(event.defaultPrevented)\n        .withContext('original event should be canceled')\n        .toBeTrue();\n    });\n\n    it('should preserve event instance types', () => {\n      const event = new CustomEvent('foo', {detail: 'bar'});\n      const fooHandler = jasmine.createSpy('fooHandler');\n      instance.addEventListener('foo', fooHandler);\n      redispatchEvent(instance, event);\n\n      expect(fooHandler).toHaveBeenCalled();\n      const redispatchedEvent = fooHandler.calls.first().args[0] as CustomEvent;\n      expect(redispatchedEvent)\n        .withContext('should create the same instance type')\n        .toBeInstanceOf(CustomEvent);\n      expect(redispatchedEvent.detail)\n        .withContext('should copy event type-specific properties')\n        .toBe('bar');\n    });\n  });\n});\n"
  },
  {
    "path": "internal/motion/_animation.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n$standard-easing: cubic-bezier(0.4, 0, 0.2, 1);\n$acceleration-easing: cubic-bezier(0.4, 0, 1, 1);\n$deceleration-easing: cubic-bezier(0, 0, 0.2, 1);\n$sharp-easing: cubic-bezier(0.4, 0, 0.6, 1);\n\n@function standard($name, $duration, $delay: null) {\n  @return _animation($name, $duration, $standard-easing, $delay);\n}\n\n@function acceleration($name, $duration, $delay: null) {\n  @return _animation($name, $duration, $acceleration-easing, $delay);\n}\n\n@function deceleration($name, $duration, $delay: null) {\n  @return _animation($name, $duration, $deceleration-easing, $delay);\n}\n\n@function sharp($name, $duration, $delay: null) {\n  @return _animation($name, $duration, $sharp-easing, $delay);\n}\n\n@function _animation($name, $duration, $easing, $delay) {\n  @if $delay {\n    @return $name $duration $easing $delay;\n  }\n\n  @return $name $duration $easing;\n}\n"
  },
  {
    "path": "internal/motion/animation.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Easing functions to use for web animations.\n *\n * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.\n *\n * TODO(b/241113345): replace with tokens\n */\nexport const EASING = {\n  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',\n  STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',\n  STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',\n  EMPHASIZED: 'cubic-bezier(.3,0,0,1)',\n  EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',\n  EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',\n} as const;\n\n/**\n * A signal that is used for abortable tasks.\n */\nexport interface AnimationSignal {\n  /**\n   * Starts the abortable task. Any previous tasks started with this instance\n   * will be aborted.\n   *\n   * @return An `AbortSignal` for the current task.\n   */\n  start(): AbortSignal;\n  /**\n   * Complete the current task.\n   */\n  finish(): void;\n}\n\n/**\n * Creates an `AnimationSignal` that can be used to cancel a previous task.\n *\n * @example\n * class MyClass {\n *   private labelAnimationSignal = createAnimationSignal();\n *\n *   private async animateLabel() {\n *     // Start of the task. Previous tasks will be canceled.\n *     const signal = this.labelAnimationSignal.start();\n *\n *     // Do async work...\n *     if (signal.aborted) {\n *       // Use AbortSignal to check if a request was made to abort after some\n *       // asynchronous work.\n *       return;\n *     }\n *\n *     const animation = this.animate(...);\n *     // Add event listeners to be notified when the task should be canceled.\n *     signal.addEventListener('abort', () => {\n *       animation.cancel();\n *     });\n *\n *     animation.addEventListener('finish', () => {\n *       // Tell the signal that the current task is finished.\n *       this.labelAnimationSignal.finish();\n *     });\n *   }\n * }\n *\n * @return An `AnimationSignal`.\n */\nexport function createAnimationSignal(): AnimationSignal {\n  // The current animation's AbortController\n  let animationAbortController: AbortController | null = null;\n\n  return {\n    start() {\n      // Tell the previous animation to cancel.\n      animationAbortController?.abort();\n      // Set up a new AbortController for the current animation.\n      animationAbortController = new AbortController();\n      // Provide the AbortSignal so that the caller can check aborted status\n      // and add listeners.\n      return animationAbortController.signal;\n    },\n    finish() {\n      animationAbortController = null;\n    },\n  };\n}\n\n/**\n * Returns a function which can be used to throttle function calls\n * mapped to a key via a given function that should produce a promise that\n * determines the throttle amount (defaults to requestAnimationFrame).\n */\nexport function createThrottle() {\n  const stack = new Set();\n  return async (\n    key = '',\n    cb: (...args: unknown[]) => unknown,\n    timeout = async () => {\n      await new Promise(requestAnimationFrame);\n    },\n  ) => {\n    if (!stack.has(key)) {\n      stack.add(key);\n      await timeout();\n      if (stack.has(key)) {\n        stack.delete(key);\n        cb();\n      }\n    }\n  };\n}\n\n/**\n * Parses an number in milliseconds from a css time value\n */\nexport function msFromTimeCSSValue(value: string) {\n  const match = value.trim().match(/([\\d.]+)(\\s*s$)?/);\n  const time = match?.[1];\n  const seconds = match?.[2];\n  return Number(time ?? 0) * (seconds ? 1000 : 1);\n}\n"
  },
  {
    "path": "internal/motion/animation_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\nimport {\n  AnimationSignal,\n  createAnimationSignal,\n  createThrottle,\n  msFromTimeCSSValue,\n} from './animation.js';\n\ndescribe('createAnimationSignal()', () => {\n  let task: AnimationSignal;\n\n  beforeEach(() => {\n    task = createAnimationSignal();\n  });\n\n  describe('start()', () => {\n    it('should return an AbortSignal', () => {\n      const signal = task.start();\n      expect(signal).toBeInstanceOf(AbortSignal);\n    });\n\n    it('should abort previous signal on subsequent calls', () => {\n      const firstSignal = task.start();\n      expect(firstSignal.aborted)\n        .withContext('first signal should not be aborted by default')\n        .toBeFalse();\n      const secondSignal = task.start();\n      expect(firstSignal.aborted)\n        .withContext('first signal should abort after start is called again')\n        .toBeTrue();\n      expect(secondSignal.aborted)\n        .withContext('second signal should not be aborted by default')\n        .toBeFalse();\n    });\n  });\n\n  describe('finish()', () => {\n    it('should not abort the AbortSignal', () => {\n      const signal = task.start();\n      task.finish();\n      expect(signal.aborted)\n        .withContext('finishing a task should not signal an abort')\n        .toBeFalse();\n    });\n\n    it('should not abort previous tasks when starting after finishing', () => {\n      const firstSignal = task.start();\n      task.finish();\n      task.start();\n      expect(firstSignal.aborted)\n        .withContext('starting a new task should not finished tasks')\n        .toBeFalse();\n    });\n  });\n});\n\ndescribe('createThrottle()', () => {\n  it('throttles calls', async () => {\n    const throttle = createThrottle();\n    const key = 'foo';\n    const fn = jasmine.createSpy();\n    let timeoutResolver: Function | null = null;\n    const timeout = new Promise((r) => {\n      timeoutResolver = r;\n    });\n    const timeoutFn = async () => {\n      await timeout;\n    };\n    const t1 = throttle(key, fn, timeoutFn);\n    const t2 = throttle(key, fn, timeoutFn);\n    const t3 = throttle(key, fn, timeoutFn);\n    expect(fn).not.toHaveBeenCalled();\n    timeoutResolver!();\n    await Promise.all([t1, t2, t3]);\n    expect(fn).toHaveBeenCalledTimes(1);\n  });\n});\n\ndescribe('msFromTimeCSSValue()', () => {\n  it('parses values in ms', () => {\n    const n = msFromTimeCSSValue('57ms');\n    expect(n).toBe(57);\n  });\n\n  it('parses values in s', () => {\n    const n = msFromTimeCSSValue('1.23s');\n    expect(n).toBe(1230);\n  });\n});\n"
  },
  {
    "path": "labs/README.md",
    "content": "# Labs 🚧\n\n> WARNING ⚠️ This folder contains experimental features that are not recommended\n> for production.\n>\n> Breaking changes may occur that do not bump the major version (vX.0.0).\n"
  },
  {
    "path": "labs/badge/_badge.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/badge' show theme;\n"
  },
  {
    "path": "labs/badge/badge.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Badge} from './internal/badge.js';\nimport {styles} from './internal/badge-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-badge': MdBadge;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-badge')\nexport class MdBadge extends Badge {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "labs/badge/badge_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../../testing/tokens.js';\n\nimport {MdBadge} from './badge.js';\n\ndescribe('<md-badge>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdBadge.styles);\n  });\n});\n"
  },
  {
    "path": "labs/badge/internal/_badge.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  // $supported-tokens: tokens.$md-comp-badge-supported-tokens;\n\n  @each $token, $value in $tokens {\n    // @if list.index($supported-tokens, $token) == null {\n    //   @error 'Token `#{$token}` is not a supported token.';\n    // }\n\n    @if $value {\n      --md-badge-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-badge-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .md3-badge {\n    inset-inline-start: 50%;\n    margin-inline-start: 6px;\n    margin-block-start: 4px;\n    position: absolute;\n    inset-block-start: 0px;\n    background-color: var(--_color);\n    border-radius: var(--_shape);\n    height: var(--_size);\n\n    &:not(.md3-badge--large) {\n      // Separate selector since large uses min-width\n      width: var(--_size);\n    }\n\n    &.md3-badge--large {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      margin-inline-start: 2px;\n      margin-block-start: 1px;\n      background-color: var(--_large-color);\n      border-radius: var(--_large-shape);\n      height: var(--_large-size);\n      min-width: var(--_large-size);\n      color: var(--_large-label-text-color);\n\n      .md3-badge__value {\n        padding: 0px 4px;\n        text-align: center;\n      }\n    }\n  }\n\n  .md3-badge__value {\n    font-family: var(--_large-label-text-font);\n    font-size: var(--_large-label-text-size);\n    line-height: var(--_large-label-text-line-height);\n    font-weight: var(--_large-label-text-weight);\n  }\n}\n"
  },
  {
    "path": "labs/badge/internal/badge-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './badge';\n// go/keep-sorted end\n\n@include badge.styles;\n"
  },
  {
    "path": "labs/badge/internal/badge.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/**\n * b/265340196 - add docs\n */\nexport class Badge extends LitElement {\n  @property() value = '';\n\n  protected override render() {\n    const classes = {'md3-badge--large': this.value};\n\n    return html`<div class=\"md3-badge ${classMap(classes)}\">\n      <p class=\"md3-badge__value\">${this.value}</p>\n    </div>`;\n  }\n}\n"
  },
  {
    "path": "labs/behaviors/constraint-validation.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, LitElement, PropertyDeclaration, PropertyValues} from 'lit';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {FormAssociated} from './form-associated.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\nimport {Validator} from './validators/validator.js';\n\n/**\n * A form associated element that provides constraint validation APIs.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\nexport interface ConstraintValidation extends FormAssociated {\n  /**\n   * Returns a ValidityState object that represents the validity states of the\n   * element.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  readonly validity: ValidityState;\n\n  /**\n   * Returns a validation error message or an empty string if the element is\n   * valid.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage\n   */\n  readonly validationMessage: string;\n\n  /**\n   * Returns whether an element will successfully validate based on forms\n   * validation rules and constraints.\n   *\n   * Disabled and readonly elements will not validate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n   */\n  readonly willValidate: boolean;\n\n  /**\n   * Checks the element's constraint validation and returns true if the element\n   * is valid or false if not.\n   *\n   * If invalid, this method will dispatch an `invalid` event.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity\n   *\n   * @return true if the element is valid, or false if not.\n   */\n  checkValidity(): boolean;\n\n  /**\n   * Checks the element's constraint validation and returns true if the element\n   * is valid or false if not.\n   *\n   * If invalid, this method will dispatch a cancelable `invalid` event. If not\n   * canceled, a the current `validationMessage` will be reported to the user.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity\n   *\n   * @return true if the element is valid, or false if not.\n   */\n  reportValidity(): boolean;\n\n  /**\n   * Sets the element's constraint validation error message. When set to a\n   * non-empty string, `validity.customError` will be true and\n   * `validationMessage` will display the provided error.\n   *\n   * Use this method to customize error messages reported.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n   *\n   * @param error The error message to display, or an empty string.\n   */\n  setCustomValidity(error: string): void;\n\n  /**\n   * Creates and returns a `Validator` that is used to compute and cache\n   * validity for the element.\n   *\n   * A validator that caches validity is important since constraint validation\n   * must be computed synchronously and frequently in response to constraint\n   * validation property changes.\n   */\n  [createValidator](): Validator<unknown>;\n\n  /**\n   * Returns shadow DOM child that is used as the anchor for the platform\n   * `reportValidity()` popup. This is often the root element or the inner\n   * focus-delegated element.\n   */\n  [getValidityAnchor](): HTMLElement | null;\n}\n\n/**\n * A symbol property used to create a constraint validation `Validator`.\n * Required for all `mixinConstraintValidation()` elements.\n */\nexport const createValidator = Symbol('createValidator');\n\n/**\n * A symbol property used to return an anchor for constraint validation popups.\n * Required for all `mixinConstraintValidation()` elements.\n */\nexport const getValidityAnchor = Symbol('getValidityAnchor');\n\n// Private symbol members, used to avoid name clashing.\nconst privateValidator = Symbol('privateValidator');\nconst privateSyncValidity = Symbol('privateSyncValidity');\nconst privateCustomValidationMessage = Symbol('privateCustomValidationMessage');\n\n/**\n * Mixes in constraint validation APIs for an element.\n *\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n * for more details.\n *\n * Implementations must provide a validator to cache and compute its validity,\n * along with a shadow root element to anchor validation popups to.\n *\n * @example\n * ```ts\n * const baseClass = mixinConstraintValidation(\n *   mixinFormAssociated(mixinElementInternals(LitElement))\n * );\n *\n * class MyCheckbox extends baseClass {\n *   \\@property({type: Boolean}) checked = false;\n *   \\@property({type: Boolean}) required = false;\n *\n *   [createValidator]() {\n *     return new CheckboxValidator(() => this);\n *   }\n *\n *   [getValidityAnchor]() {\n *     return this.renderRoot.querySelector('.root');\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `ConstraintValidation` mixed in.\n */\nexport function mixinConstraintValidation<\n  T extends MixinBase<LitElement & FormAssociated & WithElementInternals>,\n>(base: T): MixinReturn<T, ConstraintValidation> {\n  abstract class ConstraintValidationElement\n    extends base\n    implements ConstraintValidation\n  {\n    get validity() {\n      this[privateSyncValidity]();\n      return this[internals].validity;\n    }\n\n    get validationMessage() {\n      this[privateSyncValidity]();\n      return this[internals].validationMessage;\n    }\n\n    get willValidate() {\n      this[privateSyncValidity]();\n      return this[internals].willValidate;\n    }\n\n    /**\n     * A validator instance created from `[createValidator]()`.\n     */\n    [privateValidator]?: Validator<unknown>;\n\n    /**\n     * Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432\n     * Replace with this[internals].validity.customError when resolved.\n     */\n    [privateCustomValidationMessage] = '';\n\n    checkValidity() {\n      this[privateSyncValidity]();\n      return this[internals].checkValidity();\n    }\n\n    reportValidity() {\n      this[privateSyncValidity]();\n      return this[internals].reportValidity();\n    }\n\n    setCustomValidity(error: string) {\n      this[privateCustomValidationMessage] = error;\n      this[privateSyncValidity]();\n    }\n\n    override requestUpdate(\n      name?: PropertyKey,\n      oldValue?: unknown,\n      options?: PropertyDeclaration,\n    ) {\n      super.requestUpdate(name, oldValue, options);\n      this[privateSyncValidity]();\n    }\n\n    override firstUpdated(changed: PropertyValues) {\n      super.firstUpdated(changed);\n      // Sync the validity again when the element first renders, since the\n      // validity anchor is now available.\n      //\n      // Elements that `delegatesFocus: true` to an `<input>` will throw an\n      // error in Chrome and Safari when a form tries to submit or call\n      // `form.reportValidity()`:\n      // \"An invalid form control with name='' is not focusable\"\n      //\n      // The validity anchor MUST be provided in `internals.setValidity()` and\n      // MUST be the `<input>` element rendered.\n      //\n      // See https://lit.dev/playground/#gist=6c26e418e0010f7a5aac15005cde8bde\n      // for a reproduction.\n      this[privateSyncValidity]();\n    }\n\n    [privateSyncValidity]() {\n      if (isServer) {\n        return;\n      }\n\n      if (!this[privateValidator]) {\n        this[privateValidator] = this[createValidator]();\n      }\n\n      const {validity, validationMessage: nonCustomValidationMessage} =\n        this[privateValidator].getValidity();\n\n      const customError = !!this[privateCustomValidationMessage];\n      const validationMessage =\n        this[privateCustomValidationMessage] || nonCustomValidationMessage;\n\n      this[internals].setValidity(\n        {...validity, customError},\n        validationMessage,\n        this[getValidityAnchor]() ?? undefined,\n      );\n    }\n\n    [createValidator](): Validator<unknown> {\n      throw new Error('Implement [createValidator]');\n    }\n\n    [getValidityAnchor](): HTMLElement | null {\n      throw new Error('Implement [getValidityAnchor]');\n    }\n  }\n\n  return ConstraintValidationElement;\n}\n"
  },
  {
    "path": "labs/behaviors/constraint-validation_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {LitElement, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from './constraint-validation.js';\nimport {mixinElementInternals} from './element-internals.js';\nimport {getFormValue, mixinFormAssociated} from './form-associated.js';\nimport {CheckboxValidator} from './validators/checkbox-validator.js';\n\ndescribe('mixinConstraintValidation()', () => {\n  const baseClass = mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  );\n\n  @customElement('test-constraint-validation')\n  class TestConstraintValidation extends baseClass {\n    @property({type: Boolean}) checked = false;\n    @property({type: Boolean}) required = false;\n\n    override render() {\n      return html`<div id=\"root\"></div>`;\n    }\n\n    override [createValidator]() {\n      return new CheckboxValidator(() => this);\n    }\n\n    override [getValidityAnchor]() {\n      return this.shadowRoot?.querySelector<HTMLElement>('#root') ?? null;\n    }\n\n    override [getFormValue]() {\n      return String(this.checked);\n    }\n  }\n\n  describe('validity', () => {\n    it('should return a ValidityState value', () => {\n      const control = new TestConstraintValidation();\n      expect(control.validity).toBeInstanceOf(ValidityState);\n    });\n\n    it('should update synchronously when validation properties change', () => {\n      const control = new TestConstraintValidation();\n\n      expect(control.validity.valid)\n        .withContext('validity.valid before changing required')\n        .toBeTrue();\n      control.required = true;\n      expect(control.validity.valid)\n        .withContext('validity.valid after changing required')\n        .toBeFalse();\n    });\n  });\n\n  describe('validationMessage', () => {\n    it('should be an empty string when valid', () => {\n      const control = new TestConstraintValidation();\n      expect(control.validationMessage).toBe('');\n    });\n\n    it('should have an error message when invalid', () => {\n      const control = new TestConstraintValidation();\n      control.required = true;\n      expect(control.validationMessage).not.toBe('');\n    });\n  });\n\n  describe('willValidate', () => {\n    it('should validate by default', () => {\n      const control = new TestConstraintValidation();\n      expect(control.willValidate).withContext('willValidate').toBeTrue();\n    });\n\n    it('should not validate when a disabled attribute is present', () => {\n      const control = new TestConstraintValidation();\n      control.toggleAttribute('disabled', true);\n      expect(control.willValidate).withContext('willValidate').toBeFalse();\n    });\n\n    it('should not validate when a readonly attribute is present', () => {\n      const control = new TestConstraintValidation();\n      control.toggleAttribute('readonly', true);\n      expect(control.willValidate).withContext('willValidate').toBeFalse();\n    });\n  });\n\n  describe('checkValidity()', () => {\n    it('should return true when element is valid', () => {\n      const control = new TestConstraintValidation();\n      expect(control.checkValidity())\n        .withContext('checkValidity() return')\n        .toBeTrue();\n    });\n\n    it('should return false when element is invalid', () => {\n      const control = new TestConstraintValidation();\n      control.required = true;\n      expect(control.checkValidity())\n        .withContext('checkValidity() return')\n        .toBeFalse();\n    });\n\n    it('should dispatch invalid event when invalid', () => {\n      const control = new TestConstraintValidation();\n      control.required = true;\n      const invalidListener = jasmine.createSpy('invalidListener');\n      control.addEventListener('invalid', invalidListener);\n      control.checkValidity();\n      expect(invalidListener).toHaveBeenCalledWith(jasmine.any(Event));\n    });\n  });\n\n  describe('reportValidity()', () => {\n    it('should return true when element is valid', () => {\n      const control = new TestConstraintValidation();\n      expect(control.reportValidity())\n        .withContext('reportValidity() return')\n        .toBeTrue();\n    });\n\n    it('should return false when element is invalid', () => {\n      const control = new TestConstraintValidation();\n      control.required = true;\n      expect(control.reportValidity())\n        .withContext('reportValidity() return')\n        .toBeFalse();\n    });\n\n    it('should dispatch invalid event when invalid', () => {\n      const control = new TestConstraintValidation();\n      control.required = true;\n      const invalidListener = jasmine.createSpy('invalidListener');\n      control.addEventListener('invalid', invalidListener);\n      control.reportValidity();\n      expect(invalidListener).toHaveBeenCalledWith(jasmine.any(Event));\n    });\n  });\n\n  describe('setCustomValidity()', () => {\n    it('should set customError to true when given a non-empty string', () => {\n      const control = new TestConstraintValidation();\n      control.setCustomValidity('Error');\n      expect(control.validity.customError)\n        .withContext('validity.customError')\n        .toBeTrue();\n    });\n\n    it('should set customError to false when set to an empty string', () => {\n      const control = new TestConstraintValidation();\n      control.setCustomValidity('');\n      expect(control.validity.customError)\n        .withContext('validity.customError')\n        .toBeFalse();\n    });\n\n    it('should report custom validation message over other validation messages', () => {\n      const control = new TestConstraintValidation();\n      control.required = true;\n      control.setCustomValidity('Error');\n      expect(control.validationMessage)\n        .withContext('validationMessage')\n        .toBe('Error');\n    });\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/custom-state-set.ts",
    "content": "/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A unique symbol used to check if an element's `CustomStateSet` has a state.\n *\n * Provides compatibility with legacy dashed identifier syntax (`:--state`) used\n * by the element-internals-polyfill for Chrome extension support.\n *\n * @example\n * ```ts\n * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));\n *\n * class MyElement extends baseClass {\n *   get checked() {\n *     return this[hasState]('checked');\n *   }\n *   set checked(value: boolean) {\n *     this[toggleState]('checked', value);\n *   }\n * }\n * ```\n */\nexport const hasState = Symbol('hasState');\n\n/**\n * A unique symbol used to add or delete a state from an element's\n * `CustomStateSet`.\n *\n * Provides compatibility with legacy dashed identifier syntax (`:--state`) used\n * by the element-internals-polyfill for Chrome extension support.\n *\n * @example\n * ```ts\n * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));\n *\n * class MyElement extends baseClass {\n *   get checked() {\n *     return this[hasState]('checked');\n *   }\n *   set checked(value: boolean) {\n *     this[toggleState]('checked', value);\n *   }\n * }\n * ```\n */\nexport const toggleState = Symbol('toggleState');\n\n/**\n * An instance with `[hasState]()` and `[toggleState]()` symbol functions that\n * provide compatibility with `CustomStateSet` legacy dashed identifier syntax,\n * used by the element-internals-polyfill and needed for Chrome extension\n * compatibility.\n */\nexport interface WithCustomStateSet {\n  /**\n   * Checks if the state is active, returning true if the element matches\n   * `:state(customstate)`.\n   *\n   * @param customState the `CustomStateSet` state to check. Do not use the\n   *     `--customstate` dashed identifier syntax.\n   * @return true if the custom state is active, or false if not.\n   */\n  [hasState](customState: string): boolean;\n\n  /**\n   * Toggles the state to be active or inactive based on the provided value.\n   * When active, the element matches `:state(customstate)`.\n   *\n   * @param customState the `CustomStateSet` state to check. Do not use the\n   *     `--customstate` dashed identifier syntax.\n   * @param isActive true to add the state, or false to delete it.\n   */\n  [toggleState](customState: string, isActive: boolean): void;\n}\n\n// Private symbols\nconst privateUseDashedIdentifier = Symbol('privateUseDashedIdentifier');\nconst privateGetStateIdentifier = Symbol('privateGetStateIdentifier');\n\n/**\n * Mixes in compatibility functions for access to an element's `CustomStateSet`.\n *\n * Use this mixin's `[hasState]()` and `[toggleState]()` symbol functions for\n * compatibility with `CustomStateSet` legacy dashed identifier syntax.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax.\n *\n * The dashed identifier syntax is needed for element-internals-polyfill, a\n * requirement for Chome extension compatibility.\n *\n * @example\n * ```ts\n * const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));\n *\n * class MyElement extends baseClass {\n *   get checked() {\n *     return this[hasState]('checked');\n *   }\n *   set checked(value: boolean) {\n *     this[toggleState]('checked', value);\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `[hasState]()` and `[toggleState]()`\n *     functions mixed in.\n */\nexport function mixinCustomStateSet<\n  T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T, WithCustomStateSet> {\n  abstract class WithCustomStateSetElement\n    extends base\n    implements WithCustomStateSet\n  {\n    [hasState](state: string) {\n      state = this[privateGetStateIdentifier](state);\n      return this[internals].states.has(state);\n    }\n\n    [toggleState](state: string, isActive: boolean) {\n      state = this[privateGetStateIdentifier](state);\n      if (isActive) {\n        this[internals].states.add(state);\n      } else {\n        this[internals].states.delete(state);\n      }\n    }\n\n    [privateUseDashedIdentifier]: boolean | null = null;\n\n    [privateGetStateIdentifier](state: string) {\n      if (this[privateUseDashedIdentifier] === null) {\n        // Check if `--state-string` needs to be used. See\n        // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax\n        try {\n          const testState = '_test';\n          this[internals].states.add(testState);\n          this[internals].states.delete(testState);\n          this[privateUseDashedIdentifier] = false;\n        } catch {\n          this[privateUseDashedIdentifier] = true;\n        }\n      }\n\n      return this[privateUseDashedIdentifier] ? `--${state}` : state;\n    }\n  }\n\n  return WithCustomStateSetElement;\n}\n"
  },
  {
    "path": "labs/behaviors/custom-state-set_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {LitElement} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {hasState, mixinCustomStateSet, toggleState} from './custom-state-set.js';\nimport {internals, mixinElementInternals} from './element-internals.js';\n\n// A more reliable test would use `forceElementInternalsPolyfill()` from\n// `element-internals-polyfill`, but our GitHub test build doesn't\n// support it since the polyfill changes global types.\n\n/* A simplified version of element-internals-polyfill CustomStateSet. */\nclass PolyfilledCustomStateSet {\n  private readonly internalSet = new Set<string>();\n\n  constructor(private readonly ref: HTMLElement) {}\n\n  has(state: string): boolean {\n    return this.internalSet.has(state);\n  }\n\n  add(state: string): this {\n    if (!/^--/.test(state) || typeof state !== 'string') {\n      throw new DOMException(\n        `Failed to execute 'add' on 'CustomStateSet': The specified value ${state} must start with '--'.`,\n      );\n    }\n    this.internalSet.add(state);\n    this.ref.toggleAttribute(`state${state}`, true);\n    return this;\n  }\n\n  delete(state: string): boolean {\n    const result = this.internalSet.delete(state);\n    this.ref.toggleAttribute(`state${state}`, false);\n    return result;\n  }\n}\n\n@customElement('test-custom-state-set')\nclass TestCustomStateSet extends mixinCustomStateSet(\n  mixinElementInternals(LitElement),\n) {\n  static testWithPolyfill = false;\n\n  constructor() {\n    super();\n    if (TestCustomStateSet.testWithPolyfill) {\n      Object.defineProperty(this[internals], 'states', {\n        enumerable: true,\n        configurable: true,\n        value: new PolyfilledCustomStateSet(this),\n      });\n    }\n  }\n}\n\nfor (const testWithPolyfill of [false, true]) {\n  const describeSuffix = testWithPolyfill\n    ? ' (with element-internals-polyfill)'\n    : '';\n\n  describe(`mixinCustomStateSet()${describeSuffix}`, () => {\n    beforeAll(() => {\n      TestCustomStateSet.testWithPolyfill = testWithPolyfill;\n    });\n\n    describe('[hasState]()', () => {\n      it('returns false when the state is not active', () => {\n        // Arrange\n        const element = new TestCustomStateSet();\n\n        // Assert\n        expect(element[hasState]('foo'))\n          .withContext(\"[hasState]('foo')\")\n          .toBeFalse();\n      });\n\n      it('returns true when the state is active', () => {\n        // Arrange\n        const element = new TestCustomStateSet();\n\n        // Act\n        element[toggleState]('foo', true);\n\n        // Assert\n        expect(element[hasState]('foo'))\n          .withContext(\"[hasState]('foo')\")\n          .toBeTrue();\n      });\n\n      it('returns false when the state is deactivated', () => {\n        // Arrange\n        const element = new TestCustomStateSet();\n        element[toggleState]('foo', true);\n\n        // Act\n        element[toggleState]('foo', false);\n\n        // Assert\n        expect(element[hasState]('foo'))\n          .withContext(\"[hasState]('foo')\")\n          .toBeFalse();\n      });\n    });\n\n    describe('[toggleState]()', () => {\n      const fooStateSelector = testWithPolyfill\n        ? `[state--foo]`\n        : ':state(foo)';\n\n      it(`matches '${fooStateSelector}' when the state is active`, () => {\n        // Arrange\n        const element = new TestCustomStateSet();\n\n        // Act\n        element[toggleState]('foo', true);\n\n        // Assert\n        expect(element.matches(fooStateSelector))\n          .withContext(`element.matches('${fooStateSelector}')`)\n          .toBeTrue();\n      });\n\n      it(`does not match '${fooStateSelector}' when the state is deactivated`, () => {\n        // Arrange\n        const element = new TestCustomStateSet();\n        element[toggleState]('foo', true);\n\n        // Act\n        element[toggleState]('foo', false);\n\n        // Assert\n        expect(element.matches(fooStateSelector))\n          .withContext(`element.matches('${fooStateSelector}')`)\n          .toBeFalse();\n      });\n\n      it(`does not match '${fooStateSelector}' by default`, () => {\n        // Arrange\n        const element = new TestCustomStateSet();\n\n        // Assert\n        expect(element.matches(fooStateSelector))\n          .withContext(`element.matches('${fooStateSelector}')`)\n          .toBeFalse();\n      });\n    });\n  });\n}\n"
  },
  {
    "path": "labs/behaviors/element-internals.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A unique symbol used for protected access to an instance's\n * `ElementInternals`.\n *\n * @example\n * ```ts\n * class MyElement extends mixinElementInternals(LitElement) {\n *   constructor() {\n *     super();\n *     this[internals].role = 'button';\n *   }\n * }\n * ```\n */\nexport const internals = Symbol('internals');\n\n/**\n * An instance with an `internals` symbol property for the component's\n * `ElementInternals`.\n *\n * Use this when protected access is needed for an instance's `ElementInternals`\n * from other files. A unique symbol is used to access the internals.\n */\nexport interface WithElementInternals {\n  /**\n   * An instance's `ElementInternals`.\n   */\n  [internals]: ElementInternals;\n}\n\n// Private symbols\nconst privateInternals = Symbol('privateInternals');\n\n/**\n * Mixes in an attached `ElementInternals` instance.\n *\n * This mixin is only needed when other shared code needs access to a\n * component's `ElementInternals`, such as form-associated mixins.\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `WithElementInternals` mixed in.\n */\nexport function mixinElementInternals<T extends MixinBase<LitElement>>(\n  base: T,\n): MixinReturn<T, WithElementInternals> {\n  abstract class WithElementInternalsElement\n    extends base\n    implements WithElementInternals\n  {\n    get [internals]() {\n      // Create internals in getter so that it can be used in methods called on\n      // construction in `ReactiveElement`, such as `requestUpdate()`.\n      if (!this[privateInternals]) {\n        // Cast needed for closure\n        this[privateInternals] = (this as HTMLElement).attachInternals();\n      }\n\n      return this[privateInternals];\n    }\n\n    // In preparation for ES2022, we need to declare this property to guard\n    // against the base class calling [internals] in its constructor prematurely\n    // setting this field. Without declare, once this field is defined, it would\n    // initialize to undefined and `attachInternals()` could be called again.\n    declare [privateInternals]?: ElementInternals;\n  }\n\n  return WithElementInternalsElement;\n}\n"
  },
  {
    "path": "labs/behaviors/element-internals_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, LitElement} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\n\nimport {internals, mixinElementInternals} from './element-internals.js';\n\ndescribe('mixinElementInternals()', () => {\n  @customElement('test-element-internals')\n  class TestElementInternals extends mixinElementInternals(LitElement) {}\n\n  const env = new Environment();\n\n  async function setupTest() {\n    const root = env.render(\n      html`<test-element-internals></test-element-internals>`,\n    );\n    const element = root.querySelector(\n      'test-element-internals',\n    ) as TestElementInternals;\n    await env.waitForStability();\n    return element;\n  }\n\n  it('should provide an `ElementInternals` instance', async () => {\n    const element = await setupTest();\n    expect(element[internals]).toBeInstanceOf(ElementInternals);\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/focusable.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * An element that can enable and disable `tabindex` focusability.\n */\nexport interface Focusable {\n  /**\n   * Whether or not the element can be focused. Defaults to true. Set to false\n   * to disable focusing (unless a user has set a `tabindex`).\n   */\n  [isFocusable]: boolean;\n}\n\n/**\n * A property symbol that indicates whether or not a `Focusable` element can be\n * focused.\n */\nexport const isFocusable = Symbol('isFocusable');\n\nconst privateIsFocusable = Symbol('privateIsFocusable');\nconst externalTabIndex = Symbol('externalTabIndex');\nconst isUpdatingTabIndex = Symbol('isUpdatingTabIndex');\nconst updateTabIndex = Symbol('updateTabIndex');\n\n/**\n * Mixes in focusable functionality for a class.\n *\n * Elements can enable and disable their focusability with the `isFocusable`\n * symbol property. Changing `tabIndex` will trigger a lit render, meaning\n * `this.tabIndex` can be used in template expressions.\n *\n * This mixin will preserve externally-set tabindices. If an element turns off\n * focusability, but a user sets `tabindex=\"0\"`, it will still be focusable.\n *\n * To remove user overrides and restore focusability control to the element,\n * remove the `tabindex` attribute.\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `Focusable` mixed in.\n */\nexport function mixinFocusable<T extends MixinBase<LitElement>>(\n  base: T,\n): MixinReturn<T, Focusable> {\n  abstract class FocusableElement extends base implements Focusable {\n    @property({noAccessor: true})\n    declare tabIndex: number;\n\n    get [isFocusable]() {\n      return this[privateIsFocusable];\n    }\n\n    set [isFocusable](value: boolean) {\n      if (this[isFocusable] === value) {\n        return;\n      }\n\n      this[privateIsFocusable] = value;\n      this[updateTabIndex]();\n    }\n\n    [privateIsFocusable] = true;\n    [externalTabIndex]: number | null = null;\n    [isUpdatingTabIndex] = false;\n\n    override connectedCallback() {\n      super.connectedCallback();\n      this[updateTabIndex]();\n    }\n\n    override attributeChangedCallback(\n      name: string,\n      old: string | null,\n      value: string | null,\n    ) {\n      if (name !== 'tabindex') {\n        super.attributeChangedCallback(name, old, value);\n        return;\n      }\n\n      this.requestUpdate('tabIndex', Number(old ?? -1));\n      if (this[isUpdatingTabIndex]) {\n        // Not an externally-initiated update.\n        return;\n      }\n\n      if (!this.hasAttribute('tabindex')) {\n        // User removed the attribute, can now use internal tabIndex\n        this[externalTabIndex] = null;\n        this[updateTabIndex]();\n        return;\n      }\n\n      this[externalTabIndex] = this.tabIndex;\n    }\n\n    [updateTabIndex]() {\n      const internalTabIndex = this[isFocusable] ? 0 : -1;\n      const computedTabIndex = this[externalTabIndex] ?? internalTabIndex;\n\n      this[isUpdatingTabIndex] = true;\n      this.tabIndex = computedTabIndex;\n      this[isUpdatingTabIndex] = false;\n    }\n  }\n\n  return FocusableElement;\n}\n"
  },
  {
    "path": "labs/behaviors/focusable_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, LitElement} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\n\nimport {isFocusable, mixinFocusable} from './focusable.js';\n\ndescribe('mixinFocusable()', () => {\n  // tslint:disable-next-line:enforce-name-casing MixinClassCase\n  const FocusableLitElement = mixinFocusable(LitElement);\n  @customElement('test-focusable')\n  class TestFocusable extends FocusableLitElement {}\n\n  const env = new Environment();\n\n  async function setupTest() {\n    const root = env.render(html`<test-focusable></test-focusable>`);\n    const element = root.querySelector('test-focusable') as TestFocusable;\n    await env.waitForStability();\n    return element;\n  }\n\n  it('isFocusable should be true by default', async () => {\n    const element = await setupTest();\n    expect(element[isFocusable]).withContext('isFocusable').toBeTrue();\n  });\n\n  it('should set tabindex=\"0\" when isFocusable is true', async () => {\n    const element = await setupTest();\n    element[isFocusable] = true;\n    expect(element.tabIndex).withContext('tabIndex').toBe(0);\n    expect(element.getAttribute('tabindex'))\n      .withContext('tabindex attribute')\n      .toBe('0');\n  });\n\n  it('should set tabindex=\"-1\" when isFocusable is false', async () => {\n    const element = await setupTest();\n    element[isFocusable] = false;\n    expect(element.tabIndex).withContext('tabIndex').toBe(-1);\n    expect(element.getAttribute('tabindex'))\n      .withContext('tabindex attribute')\n      .toBe('-1');\n  });\n\n  it('should re-render when tabIndex changes', async () => {\n    const element = await setupTest();\n    spyOn(element, 'requestUpdate').and.callThrough();\n    element.tabIndex = 2;\n    expect(element.requestUpdate).toHaveBeenCalled();\n  });\n\n  it('should not override user-set tabindex=\"0\" when isFocusable is false', async () => {\n    const element = await setupTest();\n    element[isFocusable] = false;\n    element.tabIndex = 0;\n    expect(element[isFocusable]).withContext('isFocusable').toBeFalse();\n    expect(element.tabIndex).withContext('tabIndex').toBe(0);\n    expect(element.getAttribute('tabindex'))\n      .withContext('tabindex attribute')\n      .toBe('0');\n  });\n\n  it('should not override user-set tabindex=\"-1\" when isFocusable is true', async () => {\n    const element = await setupTest();\n    element.tabIndex = -1;\n    expect(element[isFocusable]).withContext('isFocusable').toBeTrue();\n    expect(element.tabIndex).withContext('tabIndex').toBe(-1);\n    expect(element.getAttribute('tabindex'))\n      .withContext('tabindex attribute')\n      .toBe('-1');\n  });\n\n  it('should restore default tabindex when user-set tabindex attribute is removed', async () => {\n    const element = await setupTest();\n    element.tabIndex = -1;\n    element.removeAttribute('tabindex');\n    expect(element.tabIndex).withContext('tabIndex').toBe(0);\n    expect(element.getAttribute('tabindex'))\n      .withContext('tabindex attribute')\n      .toBe('0');\n  });\n\n  it('should not throw attribute hydration errors on construction', () => {\n    expect(() => {\n      // We do not need to assign a variable to test construction.\n      // tslint:disable-next-line:no-unused-expression\n      new TestFocusable();\n    }).not.toThrow();\n  });\n\n  it('should not add tabindex until after the element is connected', async () => {\n    const element = new TestFocusable();\n\n    expect(element.hasAttribute('tabindex'))\n      .withContext('has tabindex attribute synchronously after construction')\n      .toBeFalse();\n\n    await env.waitForStability();\n\n    // To avoid attribute hydration errors, we wait until the element is\n    // connected before we update the tabindex.\n    expect(element.hasAttribute('tabindex'))\n      .withContext('has tabindex attribute after task but before connected')\n      .toBeFalse();\n\n    env.render(html`${element}`);\n\n    expect(element.isConnected).withContext('element.isConnected').toBeTrue();\n    expect(element.hasAttribute('tabindex'))\n      .withContext('has tabindex attribute after connected to dom')\n      .toBeTrue();\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/form-associated.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, PropertyDeclaration} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A form-associated element.\n *\n * IMPORTANT: Requires declares for lit-analyzer\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n * class MyControl extends base {\n *   // Writable mixin properties for lit-html binding, needed for lit-analyzer\n *   declare disabled: boolean;\n *   declare name: string;\n * }\n * ```\n */\nexport interface FormAssociated {\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  readonly form: HTMLFormElement | null;\n\n  /**\n   * The labels this element is associated with.\n   */\n  readonly labels: NodeList;\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  name: string;\n\n  /**\n   * Whether or not the element is disabled.\n   */\n  disabled: boolean;\n\n  /**\n   * Gets the current form value of a component. Defaults to the component's\n   * `value` attribute.\n   *\n   * @return The current form value.\n   */\n  [getFormValue](): FormValue | null;\n\n  /**\n   * Gets the current form state of a component. Defaults to the component's\n   * `[getFormValue]()` result.\n   *\n   * Use this when the state of an element is different from its value, such as\n   * checkboxes (internal boolean state and a user string value).\n   *\n   * @return The current form state, defaults to the form value.\n   */\n  [getFormState](): FormValue | null;\n\n  /**\n   * A callback for when a form component should be disabled or enabled. This\n   * can be called in a variety of situations, such as disabled `<fieldset>`s.\n   *\n   * @param disabled Whether or not the form control should be disabled.\n   */\n  formDisabledCallback(disabled: boolean): void;\n\n  /**\n   * An optional callback for when the form requests to reset its value.\n   * Typically, the default value that is reset is represented in the attribute\n   * of an element.\n   *\n   * This means the attribute used for the value should not update as the value\n   * changes. For example, a checkbox should not change its default `checked`\n   * attribute when selected. Ensure form values do not reflect.\n   */\n  formResetCallback?(): void;\n\n  /**\n   * An optional callback for when the form restores the state of a component.\n   * For example, when a page is reloaded or forms are autofilled.\n   *\n   * @param state The state to restore, or null to reset the form control's\n   *     value.\n   * @param reason The reason state was restored, either `'restore'` or\n   *   `'autocomplete'`.\n   */\n  formStateRestoreCallback?(\n    state: FormRestoreState | null,\n    reason: FormRestoreReason,\n  ): void;\n\n  /**\n   * An optional callback for when the associated form changes.\n   *\n   * @param form The new associated form, or `null` if there is none.\n   */\n  formAssociatedCallback?(form: HTMLFormElement | null): void;\n}\n\n/**\n * The constructor of a `FormAssociated` element.\n */\nexport interface FormAssociatedConstructor {\n  /**\n   * Indicates that an element is participating in form association.\n   */\n  readonly formAssociated: true;\n}\n\n/**\n * A symbol property to retrieve the form value for an element.\n */\nexport const getFormValue = Symbol('getFormValue');\n\n/**\n * A symbol property to retrieve the form state for an element.\n */\nexport const getFormState = Symbol('getFormState');\n\n/**\n * Mixes in form-associated behavior for a class. This allows an element to add\n * values to `<form>` elements.\n *\n * Implementing classes should provide a `[formValue]` to return the current\n * value of the element, as well as reset and restore callbacks.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyControl extends base {\n *   \\@property()\n *   value = '';\n *\n *   override [getFormValue]() {\n *     return this.value;\n *   }\n *\n *   override formResetCallback() {\n *     const defaultValue = this.getAttribute('value');\n *     this.value = defaultValue;\n *   }\n *\n *   override formStateRestoreCallback(state: string) {\n *     this.value = state;\n *   }\n * }\n * ```\n *\n * Elements may optionally provide a `[formState]` if their values do not\n * represent the state of the component.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyCheckbox extends base {\n *   \\@property()\n *   value = 'on';\n *\n *   \\@property({type: Boolean})\n *   checked = false;\n *\n *   override [getFormValue]() {\n *     return this.checked ? this.value : null;\n *   }\n *\n *   override [getFormState]() {\n *     return String(this.checked);\n *   }\n *\n *   override formResetCallback() {\n *     const defaultValue = this.hasAttribute('checked');\n *     this.checked = defaultValue;\n *   }\n *\n *   override formStateRestoreCallback(state: string) {\n *     this.checked = Boolean(state);\n *   }\n * }\n * ```\n *\n * IMPORTANT: Requires declares for lit-analyzer\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n * class MyControl extends base {\n *   // Writable mixin properties for lit-html binding, needed for lit-analyzer\n *   declare disabled: boolean;\n *   declare name: string;\n * }\n * ```\n *\n * @param base The class to mix functionality into. The base class must use\n *     `mixinElementInternals()`.\n * @return The provided class with `FormAssociated` mixed in.\n */\nexport function mixinFormAssociated<\n  T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T & FormAssociatedConstructor, FormAssociated> {\n  abstract class FormAssociatedElement extends base implements FormAssociated {\n    /** @nocollapse */\n    static readonly formAssociated = true;\n\n    get form() {\n      return this[internals].form;\n    }\n\n    get labels() {\n      return this[internals].labels;\n    }\n\n    // Use @property for the `name` and `disabled` properties to add them to the\n    // `observedAttributes` array and trigger `attributeChangedCallback()`.\n    //\n    // We don't use Lit's default getter/setter (`noAccessor: true`) because\n    // the attributes need to be updated synchronously to work with synchronous\n    // form APIs, and Lit updates attributes async by default.\n    @property({noAccessor: true})\n    get name() {\n      return this.getAttribute('name') ?? '';\n    }\n    set name(name: string) {\n      // Note: setting name to null or empty does not remove the attribute.\n      this.setAttribute('name', name);\n      // We don't need to call `requestUpdate()` since it's called synchronously\n      // in `attributeChangedCallback()`.\n    }\n\n    @property({type: Boolean, noAccessor: true})\n    get disabled() {\n      return this.hasAttribute('disabled');\n    }\n    set disabled(disabled: boolean) {\n      // Coerce `disabled` in `Boolean()` to ensure that setting to `null` or\n      // `undefined` sets the attribute to `false`.\n      this.toggleAttribute('disabled', Boolean(disabled));\n      // We don't need to call `requestUpdate()` since it's called synchronously\n      // in `attributeChangedCallback()`.\n    }\n\n    override attributeChangedCallback(\n      name: string,\n      old: string | null,\n      value: string | null,\n    ) {\n      // Manually `requestUpdate()` for `name` and `disabled` when their\n      // attribute or property changes.\n      // The properties update their attributes, so this callback is invoked\n      // immediately when the properties are set. We call `requestUpdate()` here\n      // instead of letting Lit set the properties from the attribute change.\n      // That would cause the properties to re-set the attribute and invoke this\n      // callback again in a loop. This leads to stale state when Lit tries to\n      // determine if a property changed or not.\n      if (name === 'name' || name === 'disabled') {\n        // Disabled's value is only false if the attribute is missing and null.\n        const oldValue = name === 'disabled' ? old !== null : old;\n        // Trigger a lit update when the attribute changes.\n        this.requestUpdate(name, oldValue);\n        return;\n      }\n\n      super.attributeChangedCallback(name, old, value);\n    }\n\n    override requestUpdate(\n      name?: PropertyKey,\n      oldValue?: unknown,\n      options?: PropertyDeclaration,\n    ) {\n      super.requestUpdate(name, oldValue, options);\n      // If any properties change, update the form value, which may have changed\n      // as well.\n      // Update the form value synchronously in `requestUpdate()` rather than\n      // `update()` or `updated()`, which are async. This is necessary to ensure\n      // that form data is updated in time for synchronous event listeners.\n      this[internals].setFormValue(this[getFormValue](), this[getFormState]());\n    }\n\n    [getFormValue](): FormValue | null {\n      return this.getAttribute('value');\n    }\n\n    [getFormState](): FormValue | null {\n      return this[getFormValue]();\n    }\n\n    formDisabledCallback(disabled: boolean) {\n      this.disabled = disabled;\n    }\n  }\n\n  return FormAssociatedElement;\n}\n\n/**\n * A value that can be provided for form submission and state.\n */\nexport type FormValue = File | string | FormData;\n\n/**\n * A value to be restored for a component's form value. If a component's form\n * state is a `FormData` object, its entry list of name and values will be\n * provided.\n */\nexport type FormRestoreState =\n  | File\n  | string\n  | Array<[string, FormDataEntryValue]>;\n\n/**\n * The reason a form component is being restored for, either `'restore'` for\n * browser restoration or `'autocomplete'` for restoring user values.\n */\nexport type FormRestoreReason = 'restore' | 'autocomplete';\n"
  },
  {
    "path": "labs/behaviors/form-associated_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {LitElement, html, render} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\n\nimport {internals, mixinElementInternals} from './element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from './form-associated.js';\n\ndescribe('mixinFormAssociated()', () => {\n  @customElement('test-form-associated')\n  class TestFormAssociated extends mixinFormAssociated(\n    mixinElementInternals(LitElement),\n  ) {\n    @property() value = '';\n    get state(): 'populated' | 'empty' {\n      return this.value ? 'populated' : 'empty';\n    }\n\n    useCustomGetFormStateImpl = true;\n\n    override [getFormValue]() {\n      return this.value;\n    }\n\n    override [getFormState]() {\n      if (this.useCustomGetFormStateImpl) {\n        return this.state;\n      }\n\n      return super[getFormState]();\n    }\n\n    // These behaviors are specific to individual components\n    override formResetCallback() {}\n    override formStateRestoreCallback() {}\n  }\n\n  const env = new Environment();\n\n  // Form APIs should be synchronous\n  function setupTestWithoutForm() {\n    const root = env.render(\n      html`<test-form-associated></test-form-associated>`,\n    );\n\n    const element = root.querySelector(\n      'test-form-associated',\n    ) as TestFormAssociated;\n\n    return {root, element};\n  }\n\n  function setupTestWithForm() {\n    const root = env.render(\n      html`<form><test-form-associated></test-form-associated></form>`,\n    );\n\n    const form = root.querySelector('form')!;\n    const element = root.querySelector(\n      'test-form-associated',\n    ) as TestFormAssociated;\n\n    return {root, form, element};\n  }\n\n  it('should add `static formAssociated = true`', () => {\n    const {element} = setupTestWithoutForm();\n    expect(\n      (element.constructor as typeof TestFormAssociated).formAssociated,\n    ).toBeTrue();\n  });\n\n  describe('.form', () => {\n    it('should return null when not a child of a form', () => {\n      const {element} = setupTestWithoutForm();\n      expect(element.form).toBeNull();\n    });\n\n    it('should return parent form element', () => {\n      const {form, element} = setupTestWithForm();\n      expect(element.form).toBe(form);\n    });\n  });\n\n  describe('labels', () => {\n    it('should return empty NodeList when no labels associated', () => {\n      const {element} = setupTestWithoutForm();\n      expect(element.labels).toBeInstanceOf(NodeList);\n      expect(element.labels).toHaveSize(0);\n    });\n\n    it('should return parent labels', () => {\n      const {root, element} = setupTestWithoutForm();\n      render(html`<label>${element}</label>`, root);\n      const label = root.querySelector('label');\n      if (!label) {\n        throw new Error('<label> did not render');\n      }\n\n      expect(element.labels).toHaveSize(1);\n      expect(element.labels[0]).toBe(label);\n    });\n\n    it('should return ID ref labels', () => {\n      const {root, element} = setupTestWithoutForm();\n      element.id = 'control';\n      render(html`<label for=\"control\"></label>${element}`, root);\n      const label = root.querySelector('label');\n      if (!label) {\n        throw new Error('<label> did not render');\n      }\n\n      expect(element.labels).toHaveSize(1);\n      expect(element.labels[0]).toBe(label);\n    });\n\n    it('should return multiple labels', () => {\n      const {root, element} = setupTestWithoutForm();\n      element.id = 'control';\n      render(\n        html`<label for=\"control\"></label>\n          <label for=\"control\"></label>\n          <label>${element}</label>`,\n        root,\n      );\n\n      expect(element.labels).toHaveSize(3);\n    });\n  });\n\n  describe('name', () => {\n    it('should return empty string by default', () => {\n      const {element} = setupTestWithoutForm();\n      expect(element.name).toBe('');\n    });\n\n    it('should return name attribute', () => {\n      const {element} = setupTestWithoutForm();\n      element.setAttribute('name', 'foo');\n      expect(element.name).toBe('foo');\n    });\n\n    it('should set name attribute synchronously', () => {\n      const {element} = setupTestWithoutForm();\n      element.name = 'foo';\n      expect(element.getAttribute('name'))\n        .withContext('name attribute value')\n        .toBe('foo');\n    });\n\n    it('should add empty name attribute if set to an empty string', () => {\n      const {element} = setupTestWithoutForm();\n      element.name = '';\n      expect(element.hasAttribute('name'))\n        .withContext('has name attribute')\n        .toBeTrue();\n      expect(element.getAttribute('name'))\n        .withContext('name attribute value')\n        .toBe('');\n    });\n\n    it('should request a render on change', () => {\n      const {element} = setupTestWithoutForm();\n      spyOn(element, 'requestUpdate').and.callThrough();\n      element.name = 'foo';\n      expect(element.requestUpdate).toHaveBeenCalled();\n    });\n  });\n\n  describe('disabled', () => {\n    it('should return false by default', () => {\n      const {element} = setupTestWithoutForm();\n      expect(element.disabled).toBeFalse();\n    });\n\n    it('should return true if attribute set', () => {\n      const {element} = setupTestWithoutForm();\n      element.setAttribute('disabled', '');\n      expect(element.disabled).toBeTrue();\n    });\n\n    it('should set disabled attribute synchronously', () => {\n      const {element} = setupTestWithoutForm();\n      element.disabled = true;\n      expect(element.hasAttribute('disabled'))\n        .withContext('has disabled attribute')\n        .toBeTrue();\n    });\n\n    it('should remove attribute if set to false', () => {\n      const {element} = setupTestWithoutForm();\n      element.setAttribute('disabled', '');\n      element.disabled = false;\n      expect(element.hasAttribute('disabled'))\n        .withContext('has disabled attribute')\n        .toBeFalse();\n    });\n\n    it('should request a render on change', () => {\n      const {element} = setupTestWithoutForm();\n      spyOn(element, 'requestUpdate').and.callThrough();\n      element.disabled = true;\n      expect(element.requestUpdate).toHaveBeenCalled();\n    });\n  });\n\n  describe('[getFormValue]()', () => {\n    it('should return the value attribute by default', () => {\n      @customElement('test-default-value-form-associated')\n      class TestDefaultValueFormAssociated extends mixinFormAssociated(\n        mixinElementInternals(LitElement),\n      ) {}\n\n      const element = new TestDefaultValueFormAssociated();\n      expect(element[getFormValue]())\n        .withContext('[getFormValue]() return with no value attribute')\n        .toBeNull();\n      element.setAttribute('value', 'value');\n      expect(element[getFormValue]())\n        .withContext('[getFormValue]() return with value attribute')\n        .toBe('value');\n    });\n\n    it('should not add form data without a name', () => {\n      const {element, form} = setupTestWithForm();\n      element.value = 'value';\n      const data = new FormData(form);\n      expect(Array.from(data.entries())).toHaveSize(0);\n    });\n\n    it('should synchronously add value to form data', () => {\n      const {element, form} = setupTestWithForm();\n      element.name = 'foo';\n      element.value = 'value';\n      const data = new FormData(form);\n      expect(data.get('foo')).withContext('FormData \"foo\" value').toBe('value');\n    });\n  });\n\n  describe('[getFormState]()', () => {\n    it('should return form value by default', () => {\n      const {element} = setupTestWithoutForm();\n      element.value = 'value';\n      element.useCustomGetFormStateImpl = false;\n      expect(element[getFormState]())\n        .withContext('[getFormState]() return')\n        .toBe('value');\n    });\n\n    it('should be able to return a custom state', () => {\n      const {element} = setupTestWithoutForm();\n      element.useCustomGetFormStateImpl = true;\n      element.value = 'value';\n      expect(element[getFormState]())\n        .withContext('[getFormState]() custom return')\n        .toBe(element.state);\n    });\n\n    it('should be provided as the second argument to `internals.setFormValue()`', () => {\n      const {element} = setupTestWithoutForm();\n      element.useCustomGetFormStateImpl = true;\n      spyOn(element[internals], 'setFormValue').and.callThrough();\n      element.value = 'value';\n      expect(element[internals].setFormValue).toHaveBeenCalledOnceWith(\n        element.value,\n        element.state,\n      );\n    });\n  });\n\n  describe('formDisabledCallback()', () => {\n    it('should set `element.disabled` to the provided value', () => {\n      const {element} = setupTestWithoutForm();\n      element.formDisabledCallback(true);\n      expect(element.disabled)\n        .withContext('element.disabled after callback with true')\n        .toBeTrue();\n      element.formDisabledCallback(false);\n      expect(element.disabled)\n        .withContext('element.disabled after callback with false')\n        .toBeFalse();\n    });\n\n    it('should set `disabled` when control is disabled from fieldset', () => {\n      const {root, element} = setupTestWithoutForm();\n      render(html`<fieldset disabled>${element}</fieldset>`, root);\n      expect(element.disabled).withContext('element.disabled').toBeTrue();\n    });\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/form-submitter.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../internal/events/dispatch-hooks.js';\nimport {internals, WithElementInternals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A string indicating the form submission behavior of the element.\n *\n * - submit: The element submits the form. This is the default value if the\n * attribute is not specified, or if it is dynamically changed to an empty or\n * invalid value.\n * - reset: The element resets the form.\n * - button: The element does nothing.\n */\nexport type FormSubmitterType = 'button' | 'submit' | 'reset';\n\n/**\n * An element that can submit or reset a `<form>`, similar to\n * `<button type=\"submit\">`.\n */\nexport interface FormSubmitter {\n  /**\n   * A string indicating the form submission behavior of the element.\n   *\n   * - submit: The element submits the form. This is the default value if the\n   * attribute is not specified, or if it is dynamically changed to an empty or\n   * invalid value.\n   * - reset: The element resets the form.\n   * - button: The element does nothing.\n   */\n  type: string;\n\n  /**\n   * The HTML name to use in form submission. When combined with a `value`, the\n   * submitting button's name/value will be added to the form.\n   *\n   * Names must reflect to a `name` attribute for form integration.\n   */\n  name: string;\n\n  /**\n   * The value of the button. When combined with a `name`, the submitting\n   * button's name/value will be added to the form.\n   */\n  value: string;\n}\n\n/**\n * Mixes in form submitter behavior for a class.\n *\n * A click listener is added to each element instance. If the click is not\n * default prevented, it will submit the element's form, if any.\n *\n * @example\n * ```ts\n * const base = mixinFormSubmitter(mixinElementInternals(LitElement));\n * class MyButton extends base {\n *   static formAssociated = true;\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `FormSubmitter` mixed in.\n */\nexport function mixinFormSubmitter<\n  T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T, FormSubmitter> {\n  abstract class FormSubmitterElement extends base implements FormSubmitter {\n    @property() type = 'submit';\n    @property({reflect: true}) value = '';\n\n    // Name attribute must reflect synchronously for form integration.\n    get name() {\n      return this.getAttribute('name') ?? '';\n    }\n    set name(name: string) {\n      this.setAttribute('name', name);\n    }\n\n    // Mixins must have a constructor with `...args: any[]`\n    // tslint:disable-next-line:no-any\n    constructor(...args: any[]) {\n      super(...args);\n      if (isServer) return;\n      setupDispatchHooks(this, 'click');\n      this.addEventListener('click', async (event: Event) => {\n        const isReset = this.type === 'reset';\n        const isSubmit = this.type === 'submit';\n        const elementInternals = this[internals];\n        const {form} = elementInternals;\n        if (!form || !(isSubmit || isReset)) {\n          return;\n        }\n\n        afterDispatch(event, () => {\n          if (event.defaultPrevented) {\n            return;\n          }\n\n          if (isReset) {\n            form.reset();\n            return;\n          }\n\n          // form.requestSubmit(submitter) does not work with form associated custom\n          // elements. This patches the dispatched submit event to add the correct\n          // `submitter`.\n          // See https://github.com/WICG/webcomponents/issues/814\n          form.addEventListener(\n            'submit',\n            (submitEvent: Event) => {\n              Object.defineProperty(submitEvent, 'submitter', {\n                configurable: true,\n                enumerable: true,\n                get: () => this,\n              });\n            },\n            {capture: true, once: true},\n          );\n\n          elementInternals.setFormValue(this.value);\n          form.requestSubmit();\n        });\n      });\n    }\n  }\n\n  return FormSubmitterElement;\n}\n"
  },
  {
    "path": "labs/behaviors/form-submitter_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, LitElement} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {Environment} from '../../testing/environment.js';\nimport {Harness} from '../../testing/harness.js';\nimport {mixinFormSubmitter} from './form-submitter.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-form-submitter-button': FormSubmitterButton;\n  }\n}\n\n@customElement('test-form-submitter-button')\nclass FormSubmitterButton extends mixinFormSubmitter(\n  mixinElementInternals(LitElement),\n) {\n  static formAssociated = true;\n}\n\ndescribe('setupFormSubmitter()', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const root = env.render(\n      html`<form\n        ><test-form-submitter-button></test-form-submitter-button\n      ></form>`,\n    );\n    const submitter = root.querySelector('test-form-submitter-button');\n    if (!submitter) {\n      throw new Error(`Could not query rendered <test-form-submitter-button>`);\n    }\n    const form = root.querySelector('form');\n    if (!form) {\n      throw new Error(`Could not query rendered <form>`);\n    }\n\n    await env.waitForStability();\n\n    return {harness: new Harness(submitter), form};\n  }\n\n  it('button is submit type by default', async () => {\n    const {harness} = await setupTest();\n    expect(harness.element.type).toBe('submit');\n  });\n\n  it('button with type submit can submit a form', async () => {\n    const {harness, form} = await setupTest();\n    harness.element.type = 'submit';\n\n    spyOn(form, 'requestSubmit');\n    spyOn(form, 'reset');\n    await harness.clickWithMouse();\n    // Submission happens after a task\n    await env.waitForStability();\n\n    expect(form.requestSubmit).toHaveBeenCalled();\n    expect(form.reset).not.toHaveBeenCalled();\n  });\n\n  it('button with type reset can reset a form', async () => {\n    const {harness, form} = await setupTest();\n    harness.element.type = 'reset';\n\n    spyOn(form, 'requestSubmit');\n    spyOn(form, 'reset');\n    await harness.clickWithMouse();\n    // Submission happens after a task\n    await env.waitForStability();\n\n    expect(form.requestSubmit).not.toHaveBeenCalled();\n    expect(form.reset).toHaveBeenCalled();\n  });\n\n  it('submit can be cancelled with preventDefault', async () => {\n    const {harness, form} = await setupTest();\n    harness.element.type = 'submit';\n\n    spyOn(form, 'requestSubmit');\n\n    harness.element.addEventListener(\n      'click',\n      (event: Event) => {\n        event.preventDefault();\n      },\n      {once: true},\n    );\n\n    await harness.clickWithMouse();\n    // Submission happens after a task\n    await env.waitForStability();\n\n    expect(form.requestSubmit).not.toHaveBeenCalled();\n  });\n\n  it('should set the button as the SubmitEvent submitter', async () => {\n    const {harness, form} = await setupTest();\n    const submitListener = jasmine\n      .createSpy('submitListener')\n      .and.callFake((event: Event) => {\n        event.preventDefault();\n      });\n\n    form.addEventListener('submit', submitListener);\n\n    await harness.clickWithMouse();\n    // Submission happens after a task\n    await env.waitForStability();\n\n    expect(submitListener).toHaveBeenCalled();\n    const event = submitListener.calls.argsFor(0)[0] as SubmitEvent;\n    expect(event.submitter)\n      .withContext('event.submitter')\n      .toBe(harness.element);\n  });\n\n  it('should add name/value to form data when present', async () => {\n    const {harness, form} = await setupTest();\n    form.addEventListener('submit', (event) => {\n      event.preventDefault();\n    });\n\n    harness.element.name = 'foo';\n    harness.element.value = 'bar';\n\n    await harness.clickWithMouse();\n    // Submission happens after a task\n    await env.waitForStability();\n\n    const formData = Array.from(new FormData(form));\n    expect(formData.length).withContext('formData.length').toBe(1);\n\n    const [formName, formValue] = formData[0];\n    expect(formName).toBe('foo');\n    expect(formValue).toBe('bar');\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/mixin.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * The base class for a mixin with an optional expected base class type.\n *\n * @template ExpectedBase Optional expected base class type, such as\n *     `LitElement`.\n *\n * @example\n * ```ts\n * interface Foo {\n *   isFoo: boolean;\n * }\n *\n * function mixinFoo<T extends MixinBase>(base: T): MixinReturn<T, Foo> {\n *   // Mixins must be `abstract`\n *   abstract class FooImpl extends base implements Foo {\n *     isFoo = true;\n *   }\n *\n *   return FooImpl;\n * }\n * ```\n */\nexport type MixinBase<ExpectedBase = object> = abstract new (\n  // Mixins must have a constructor with `...args: any[]`\n  // tslint:disable-next-line:no-any\n  ...args: any[]\n) => ExpectedBase;\n\n/**\n * The return value of a mixin.\n *\n * @template MixinBase The generic that extends `MixinBase` used for the mixin's\n *     base class argument.\n * @template MixinClass Optional interface of fuctionality that was mixed in.\n *     Omit if no additional APIs were added (such as purely overriding base\n *     class functionality).\n *\n * @example\n * ```ts\n * interface Foo {\n *   isFoo: boolean;\n * }\n *\n * // Mixins must be `abstract`\n * function mixinFoo<T extends MixinBase>(base: T): MixinReturn<T, Foo> {\n *   abstract class FooImpl extends base implements Foo {\n *     isFoo = true;\n *   }\n *\n *   return FooImpl;\n * }\n * ```\n */\nexport type MixinReturn<MixinBase, MixinClass = object> =\n  // Mixins must have a constructor with `...args: any[]`\n  // tslint:disable-next-line:no-any\n  (abstract new (...args: any[]) => MixinClass) & MixinBase;\n"
  },
  {
    "path": "labs/behaviors/on-report-validity.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, isServer} from 'lit';\n\nimport {ConstraintValidation} from './constraint-validation.js';\nimport {WithElementInternals, internals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A constraint validation element that has a callback for when the element\n * should report validity styles and error messages to the user.\n *\n * This is commonly used in text-field-like controls that display error styles\n * and error messages.\n */\nexport interface OnReportValidity extends ConstraintValidation {\n  /**\n   * A callback that is invoked when validity should be reported. Components\n   * that can display their own error state can use this and update their\n   * styles.\n   *\n   * If an invalid event is provided, the element is invalid. If `null`, the\n   * element is valid.\n   *\n   * The invalid event's `preventDefault()` may be called to stop the platform\n   * popup from displaying.\n   *\n   * @param invalidEvent The `invalid` event dispatched when an element is\n   *     invalid, or `null` if the element is valid.\n   */\n  [onReportValidity](invalidEvent: Event | null): void;\n\n  // `mixinOnReportValidity()` implements this optional method. If overriden,\n  // call `super.formAssociatedCallback(form)`.\n  // (inherit jsdoc from `FormAssociated`)\n  formAssociatedCallback(form: HTMLFormElement | null): void;\n}\n\n/**\n * A symbol property used for a callback when validity has been reported.\n */\nexport const onReportValidity = Symbol('onReportValidity');\n\n// Private symbol members, used to avoid name clashing.\nconst privateCleanupFormListeners = Symbol('privateCleanupFormListeners');\nconst privateDoNotReportInvalid = Symbol('privateDoNotReportInvalid');\nconst privateIsSelfReportingValidity = Symbol('privateIsSelfReportingValidity');\nconst privateCallOnReportValidity = Symbol('privateCallOnReportValidity');\n\n/**\n * Mixes in a callback for constraint validation when validity should be\n * styled and reported to the user.\n *\n * This is commonly used in text-field-like controls that display error styles\n * and error messages.\n *\n * @example\n * ```ts\n * const baseClass = mixinOnReportValidity(\n *   mixinConstraintValidation(\n *     mixinFormAssociated(mixinElementInternals(LitElement)),\n *   ),\n * );\n *\n * class MyField extends baseClass {\n *   \\@property({type: Boolean}) error = false;\n *   \\@property() errorMessage = '';\n *\n *   [onReportValidity](invalidEvent: Event | null) {\n *     this.error = !!invalidEvent;\n *     this.errorMessage = this.validationMessage;\n *\n *     // Optionally prevent platform popup from displaying\n *     invalidEvent?.preventDefault();\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `OnReportValidity` mixed in.\n */\nexport function mixinOnReportValidity<\n  T extends MixinBase<LitElement & ConstraintValidation & WithElementInternals>,\n>(base: T): MixinReturn<T, OnReportValidity> {\n  abstract class OnReportValidityElement\n    extends base\n    implements OnReportValidity\n  {\n    /**\n     * Used to clean up event listeners when a new form is associated.\n     */\n    [privateCleanupFormListeners] = new AbortController();\n\n    /**\n     * Used to determine if an invalid event should report validity. Invalid\n     * events from `checkValidity()` do not trigger reporting.\n     */\n    [privateDoNotReportInvalid] = false;\n\n    /**\n     * Used to determine if the control is reporting validity from itself, or\n     * if a `<form>` is causing the validity report. Forms have different\n     * control focusing behavior.\n     */\n    [privateIsSelfReportingValidity] = false;\n\n    // Mixins must have a constructor with `...args: any[]`\n    // tslint:disable-next-line:no-any\n    constructor(...args: any[]) {\n      super(...args);\n      if (isServer) {\n        return;\n      }\n\n      this.addEventListener(\n        'invalid',\n        (invalidEvent) => {\n          // Listen for invalid events dispatched by a `<form>` when it tries to\n          // submit and the element is invalid. We ignore events dispatched when\n          // calling `checkValidity()` as well as untrusted events, since the\n          // `reportValidity()` and `<form>`-dispatched events are always\n          // trusted.\n          if (this[privateDoNotReportInvalid] || !invalidEvent.isTrusted) {\n            return;\n          }\n\n          this.addEventListener(\n            'invalid',\n            () => {\n              // A normal bubbling phase event listener. By adding it here, we\n              // ensure it's the last event listener that is called during the\n              // bubbling phase.\n              this[privateCallOnReportValidity](invalidEvent);\n            },\n            {once: true},\n          );\n        },\n        {\n          // Listen during the capture phase, which will happen before the\n          // bubbling phase. That way, we can add a final event listener that\n          // will run after other event listeners, and we can check if it was\n          // default prevented. This works because invalid does not bubble.\n          capture: true,\n        },\n      );\n    }\n\n    override checkValidity() {\n      this[privateDoNotReportInvalid] = true;\n      const valid = super.checkValidity();\n      this[privateDoNotReportInvalid] = false;\n      return valid;\n    }\n\n    override reportValidity() {\n      this[privateIsSelfReportingValidity] = true;\n      const valid = super.reportValidity();\n      // Constructor's invalid listener will handle reporting invalid events.\n      if (valid) {\n        this[privateCallOnReportValidity](null);\n      }\n\n      this[privateIsSelfReportingValidity] = false;\n      return valid;\n    }\n\n    [privateCallOnReportValidity](invalidEvent: Event | null) {\n      // Since invalid events do not bubble to parent listeners, and because\n      // our invalid listeners are added lazily after other listeners, we can\n      // reliably read `defaultPrevented` synchronously without worrying\n      // about waiting for another listener that could cancel it.\n      const wasCanceled = invalidEvent?.defaultPrevented;\n      if (wasCanceled) {\n        return;\n      }\n\n      this[onReportValidity](invalidEvent);\n\n      // If an implementation calls invalidEvent.preventDefault() to stop the\n      // platform popup from displaying, focusing is also prevented, so we need\n      // to manually focus.\n      const implementationCanceledFocus =\n        !wasCanceled && invalidEvent?.defaultPrevented;\n      if (!implementationCanceledFocus) {\n        return;\n      }\n\n      // The control should be focused when:\n      // - `control.reportValidity()` is called (self-reporting).\n      // - a form is reporting validity for its controls and this is the first\n      //   invalid control.\n      if (\n        this[privateIsSelfReportingValidity] ||\n        isFirstInvalidControlInForm(this[internals].form, this)\n      ) {\n        this.focus();\n      }\n    }\n\n    [onReportValidity](invalidEvent: Event | null) {\n      throw new Error('Implement [onReportValidity]');\n    }\n\n    override formAssociatedCallback(form: HTMLFormElement | null) {\n      // can't use super.formAssociatedCallback?.() due to closure\n      if (super.formAssociatedCallback) {\n        super.formAssociatedCallback(form);\n      }\n\n      // Clean up previous form listeners.\n      this[privateCleanupFormListeners].abort();\n      if (!form) {\n        return;\n      }\n\n      this[privateCleanupFormListeners] = new AbortController();\n\n      // Add a listener that fires when the form runs constraint validation and\n      // the control is valid, so that it may remove its error styles.\n      //\n      // This happens on `form.reportValidity()` and `form.requestSubmit()`\n      // (both when the submit fails and passes).\n      addFormReportValidListener(\n        this,\n        form,\n        () => {\n          this[privateCallOnReportValidity](null);\n        },\n        this[privateCleanupFormListeners].signal,\n      );\n    }\n  }\n\n  return OnReportValidityElement;\n}\n\n/**\n * Add a listener that fires when a form runs constraint validation on a control\n * and it is valid. This is needed to clear previously invalid styles.\n *\n * @param control The control of the form to listen for valid events.\n * @param form The control's form that can run constraint validation.\n * @param onControlValid A listener that is called when the form runs constraint\n *     validation and the control is valid.\n * @param cleanup A cleanup signal to remove the listener.\n */\nfunction addFormReportValidListener(\n  control: Element,\n  form: HTMLFormElement,\n  onControlValid: () => void,\n  cleanup: AbortSignal,\n) {\n  const validateHooks = getFormValidateHooks(form);\n\n  // When a form validates its controls, check if an invalid event is dispatched\n  // on the control. If it is not, then inform the control to report its valid\n  // state.\n  let controlFiredInvalid = false;\n  let cleanupInvalidListener: AbortController | undefined;\n  let isNextSubmitFromHook = false;\n  validateHooks.addEventListener(\n    'before',\n    () => {\n      isNextSubmitFromHook = true;\n      cleanupInvalidListener = new AbortController();\n      controlFiredInvalid = false;\n      control.addEventListener(\n        'invalid',\n        () => {\n          controlFiredInvalid = true;\n        },\n        {\n          signal: cleanupInvalidListener.signal,\n        },\n      );\n    },\n    {signal: cleanup},\n  );\n\n  validateHooks.addEventListener(\n    'after',\n    () => {\n      isNextSubmitFromHook = false;\n      cleanupInvalidListener?.abort();\n      if (controlFiredInvalid) {\n        return;\n      }\n\n      onControlValid();\n    },\n    {signal: cleanup},\n  );\n\n  // The above hooks handle imperatively submitting the form, but not\n  // declaratively submitting the form. This happens when:\n  // 1. A non-custom element `<button type=\"submit\">` is clicked.\n  // 2. Enter is pressed on a non-custom element text editable `<input>`.\n  form.addEventListener(\n    'submit',\n    () => {\n      // This submit was from `form.requestSubmit()`, which already calls the\n      // listener.\n      if (isNextSubmitFromHook) {\n        return;\n      }\n\n      onControlValid();\n    },\n    {\n      signal: cleanup,\n    },\n  );\n\n  // Note: it is a known limitation that we cannot detect if a form tries to\n  // submit declaratively, but fails to do so because an unrelated sibling\n  // control failed its constraint validation.\n  //\n  // Since we cannot detect when that happens, a previously invalid control may\n  // not clear its error styling when it becomes valid again.\n  //\n  // To work around this, call `form.reportValidity()` when submitting a form\n  // declaratively. This can be down on the `<button type=\"submit\">`'s click or\n  // the text editable `<input>`'s 'Enter' keydown.\n}\n\nconst FORM_VALIDATE_HOOKS = new WeakMap<HTMLFormElement, EventTarget>();\n\n/**\n * Get a hooks `EventTarget` that dispatches 'before' and 'after' events that\n * fire before a form runs constraint validation and immediately after it\n * finishes running constraint validation on its controls.\n *\n * This happens during `form.reportValidity()` and `form.requestSubmit()`.\n *\n * @param form The form to get or set up hooks for.\n * @return A hooks `EventTarget` to add listeners to.\n */\nfunction getFormValidateHooks(form: HTMLFormElement) {\n  if (!FORM_VALIDATE_HOOKS.has(form)) {\n    // Patch form methods to add event listener hooks. These are needed to react\n    // to form behaviors that do not dispatch events, such as a form asking its\n    // controls to report their validity.\n    //\n    // We should only patch the methods once, since multiple controls and other\n    // forces may want to patch this method. We cannot reliably clean it up if\n    // there are multiple patched and re-patched methods referring holding\n    // references to each other.\n    //\n    // Instead, we never clean up the patch but add and clean up event listeners\n    // added to the hooks after the patch.\n    const hooks = new EventTarget();\n    FORM_VALIDATE_HOOKS.set(form, hooks);\n\n    // Add hooks to support notifying before and after a form has run constraint\n    // validation on its controls.\n    // Note: `form.submit()` does not run constraint validation per spec.\n    for (const methodName of ['reportValidity', 'requestSubmit'] as const) {\n      const superMethod = form[methodName];\n      form[methodName] = function (this: HTMLFormElement) {\n        hooks.dispatchEvent(new Event('before'));\n        const result = Reflect.apply(superMethod, this, arguments);\n        hooks.dispatchEvent(new Event('after'));\n        return result;\n      };\n    }\n  }\n\n  return FORM_VALIDATE_HOOKS.get(form)!;\n}\n\n/**\n * Checks if a control is the first invalid control in a form.\n *\n * @param form The control's form. When `null`, the control doesn't have a form\n *     and the method returns true.\n * @param control The control to check.\n * @return True if there is no form or if the control is the form's first\n *     invalid control.\n */\nfunction isFirstInvalidControlInForm(\n  form: HTMLFormElement | null,\n  control: HTMLElement,\n) {\n  if (!form) {\n    return true;\n  }\n\n  let firstInvalidControl: Element | undefined;\n  for (const element of form.elements) {\n    if (element.matches(':invalid')) {\n      firstInvalidControl = element;\n      break;\n    }\n  }\n\n  return firstInvalidControl === control;\n}\n"
  },
  {
    "path": "labs/behaviors/on-report-validity_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {LitElement, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from './constraint-validation.js';\nimport {mixinElementInternals} from './element-internals.js';\nimport {mixinFocusable} from './focusable.js';\nimport {getFormValue, mixinFormAssociated} from './form-associated.js';\nimport {mixinOnReportValidity, onReportValidity} from './on-report-validity.js';\nimport {CheckboxValidator} from './validators/checkbox-validator.js';\n\ndescribe('mixinOnReportValidity()', () => {\n  const baseClass = mixinFocusable(\n    mixinOnReportValidity(\n      mixinConstraintValidation(\n        mixinFormAssociated(mixinElementInternals(LitElement)),\n      ),\n    ),\n  );\n\n  @customElement('test-on-report-validity')\n  class TestOnReportValidity extends baseClass {\n    @property({type: Boolean}) checked = false;\n    @property({type: Boolean}) required = false;\n\n    override render() {\n      return html`<div id=\"root\"></div>`;\n    }\n\n    override [createValidator]() {\n      return new CheckboxValidator(() => this);\n    }\n\n    override [getValidityAnchor]() {\n      return this.shadowRoot?.querySelector<HTMLElement>('#root') ?? null;\n    }\n\n    override [getFormValue]() {\n      return String(this.checked);\n    }\n  }\n\n  describe('[onReportValidity]', () => {\n    describe('for valid controls', () => {\n      it('should be called with null when reportValidity() is called and it is valid', () => {\n        const control = new TestOnReportValidity();\n        control[onReportValidity] = jasmine.createSpy('onReportValidity');\n\n        control.reportValidity();\n        expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n      });\n    });\n\n    describe('for invalid controls', () => {\n      it('should be called with event when reportValidity() is called and it is invalid', () => {\n        const control = new TestOnReportValidity();\n        control[onReportValidity] = jasmine.createSpy('onReportValidity');\n\n        control.required = true;\n        control.reportValidity();\n        expect(control[onReportValidity]).toHaveBeenCalledOnceWith(\n          jasmine.any(Event),\n        );\n      });\n\n      it('should NOT be called when reportValidity() is called and invalid but default prevented', () => {\n        const control = new TestOnReportValidity();\n        control[onReportValidity] = jasmine.createSpy('onReportValidity');\n\n        control.required = true;\n        control.addEventListener('invalid', (event) => {\n          event.preventDefault();\n        });\n\n        control.reportValidity();\n        expect(control[onReportValidity]).not.toHaveBeenCalled();\n      });\n    });\n\n    describe('for invalid to valid controls', () => {\n      it('should be called with null when reportValidity() is called after fixing invalid', () => {\n        const control = new TestOnReportValidity();\n        const onReportValiditySpy = jasmine.createSpy('onReportValidity');\n        control[onReportValidity] = onReportValiditySpy;\n        control.required = true;\n        control.reportValidity();\n        onReportValiditySpy.calls.reset();\n\n        // Fix invalid\n        control.checked = true;\n        control.reportValidity();\n\n        expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n      });\n    });\n\n    describe('with forms', () => {\n      describe('for valid controls', () => {\n        it('should be called with null when form.reportValidity() is called and it is valid', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n\n          form.reportValidity();\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n        });\n\n        it('should be called with null when form.requestSubmit() is called and it is valid', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          document.body.appendChild(form);\n          form.requestSubmit();\n          form.remove();\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n        });\n\n        it('should be called with null when form submits declaratively and it is valid', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          const submitButton = document.createElement('button');\n          form.appendChild(submitButton);\n          document.body.appendChild(form);\n          submitButton.click();\n          form.remove();\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n        });\n\n        it('should be called with null when form submits declaratively and it is valid, but another sibling is invalid', () => {\n          // This is a known limitation. If a form is using an MWC control and\n          // declaratively submits it with a native `<button>` or `<input>`, then\n          // error styles will not clear if the form fails to submit.\n          // The workaround is to call `form.reportValidity()` when clicking the\n          // native `<button type=\"submit\">` or pressing enter in an `<input>`.\n          //\n          // Leaving this test here for documentation and a possible future fix.\n          expect().nothing();\n        });\n      });\n\n      describe('for valid to invalid controls', () => {\n        it('should be called with event when form.reportValidity() is called and it is invalid', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n\n          control.required = true;\n          form.reportValidity();\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(\n            jasmine.any(Event),\n          );\n        });\n\n        it('should NOT be called when form.reportValidity() is called and invalid but default prevented', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n\n          control.required = true;\n          control.addEventListener('invalid', (event) => {\n            event.preventDefault();\n          });\n\n          form.reportValidity();\n          expect(control[onReportValidity]).not.toHaveBeenCalled();\n        });\n\n        it('should be called with event when form.requestSubmit() is called and it is invalid', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading. This shouldn't\n              // happen, but we add it just in case the control fails and reports\n              // as valid and the form tries to submit.\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          document.body.appendChild(form);\n          control.required = true;\n          form.requestSubmit();\n          form.remove();\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(\n            jasmine.any(Event),\n          );\n        });\n\n        it('should NOT be called when form.requestSubmit() is called and invalid but default prevented', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading. This shouldn't\n              // happen, but we add it just in case the control fails and reports\n              // as valid and the form tries to submit.\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          control.required = true;\n          control.addEventListener('invalid', (event) => {\n            event.preventDefault();\n          });\n\n          document.body.appendChild(form);\n          form.requestSubmit();\n          form.remove();\n          expect(control[onReportValidity]).not.toHaveBeenCalled();\n        });\n\n        it('should be called with event when form submits declaratively and it is invalid', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading. This shouldn't\n              // happen, but we add it just in case the control fails and reports\n              // as valid and the form tries to submit.\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          control.required = true;\n          const submitButton = document.createElement('button');\n          form.appendChild(submitButton);\n          document.body.appendChild(form);\n          submitButton.click();\n          form.remove();\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(\n            jasmine.any(Event),\n          );\n        });\n\n        it('should NOT be called when form submits declaratively and invalid but default prevented', () => {\n          const control = new TestOnReportValidity();\n          control[onReportValidity] = jasmine.createSpy('onReportValidity');\n          const form = document.createElement('form');\n          form.appendChild(control);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading. This shouldn't\n              // happen, but we add it just in case the control fails and reports\n              // as valid and the form tries to submit.\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          control.required = true;\n          control.addEventListener('invalid', (event) => {\n            event.preventDefault();\n          });\n\n          document.body.appendChild(form);\n          form.requestSubmit();\n          form.remove();\n          expect(control[onReportValidity]).not.toHaveBeenCalled();\n        });\n      });\n\n      describe('invalid to valid', () => {\n        it('should be called with null when form.reportValidity() is called after fixing invalid', () => {\n          const control = new TestOnReportValidity();\n          const onReportValiditySpy = jasmine.createSpy('onReportValidity');\n          control[onReportValidity] = onReportValiditySpy;\n          const form = document.createElement('form');\n          form.appendChild(control);\n          document.body.appendChild(form);\n\n          control.required = true;\n          form.reportValidity();\n          onReportValiditySpy.calls.reset();\n\n          // Fix invalid\n          control.checked = true;\n\n          form.reportValidity();\n          form.remove();\n\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n        });\n\n        it('should be called with null when form.requestSubmit() is called after fixing invalid', () => {\n          const control = new TestOnReportValidity();\n          const onReportValiditySpy = jasmine.createSpy('onReportValidity');\n          control[onReportValidity] = onReportValiditySpy;\n          const form = document.createElement('form');\n          form.appendChild(control);\n          document.body.appendChild(form);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading.\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          control.required = true;\n          form.reportValidity();\n          onReportValiditySpy.calls.reset();\n\n          // Fix invalid\n          control.checked = true;\n\n          // Submit imperatively\n          form.requestSubmit();\n          form.remove();\n\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n        });\n\n        it('should be called with null when form.requestSubmit() is called after fixing invalid, but another sibling is invalid', () => {\n          const control = new TestOnReportValidity();\n          const onReportValiditySpy = jasmine.createSpy('onReportValidity');\n          control[onReportValidity] = onReportValiditySpy;\n          const form = document.createElement('form');\n          form.appendChild(control);\n\n          const invalidSibling = document.createElement('input');\n          invalidSibling.required = true;\n          form.appendChild(invalidSibling);\n\n          document.body.appendChild(form);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading.\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          control.required = true;\n          form.reportValidity();\n          onReportValiditySpy.calls.reset();\n\n          // Fix invalid\n          control.checked = true;\n\n          // Submit imperatively\n          form.requestSubmit();\n          form.remove();\n\n          expect(invalidSibling.validity.valid)\n            .withContext('sibling is invalid')\n            .toBeFalse();\n          expect(control[onReportValidity]).toHaveBeenCalledWith(null);\n        });\n\n        it('should be called with null when form submits declaratively after fixing invalid', () => {\n          const control = new TestOnReportValidity();\n          const onReportValiditySpy = jasmine.createSpy('onReportValidity');\n          control[onReportValidity] = onReportValiditySpy;\n          const form = document.createElement('form');\n          form.appendChild(control);\n          const submitButton = document.createElement('button');\n          form.appendChild(submitButton);\n          document.body.appendChild(form);\n          form.addEventListener(\n            'submit',\n            (event) => {\n              // Prevent the test page from actually reloading.\n              event.preventDefault();\n            },\n            {capture: true},\n          );\n\n          control.required = true;\n          form.reportValidity();\n          onReportValiditySpy.calls.reset();\n\n          // Fix invalid\n          control.checked = true;\n\n          // Submit declaratively\n          submitButton.click();\n          form.remove();\n\n          expect(control[onReportValidity]).toHaveBeenCalledOnceWith(null);\n        });\n\n        it('should be called with null when form submits declaratively after fixing invalid, but another sibling is invalid', () => {\n          // See above \"This is a known limitation\" for explanation.\n          expect().nothing();\n        });\n      });\n\n      it('should clean up when form is unassociated and not call when non-parent form.reportValidity() is called', () => {\n        const control = new TestOnReportValidity();\n        control[onReportValidity] = jasmine.createSpy('onReportValidity');\n        const form = document.createElement('form');\n        form.appendChild(control);\n\n        form.reportValidity();\n        expect(control[onReportValidity])\n          .withContext('onReportValidity is called once while attached to form')\n          .toHaveBeenCalledTimes(1);\n\n        form.removeChild(control);\n        form.reportValidity();\n        expect(control[onReportValidity])\n          .withContext('onReportValidity is not called a second time')\n          .toHaveBeenCalledTimes(1);\n      });\n    });\n\n    describe('focusing after preventing platform popup', () => {\n      it('should focus the control when calling reportValidity()', () => {\n        const control = new TestOnReportValidity();\n        control[onReportValidity] = (invalidEvent: Event | null) => {\n          invalidEvent?.preventDefault();\n        };\n\n        spyOn(control, 'focus');\n\n        control.required = true;\n        control.reportValidity();\n        expect(control.focus)\n          .withContext('is focused')\n          .toHaveBeenCalledTimes(1);\n      });\n\n      it('should only focus the first invalid control of a form', () => {\n        const firstControl = new TestOnReportValidity();\n        firstControl[onReportValidity] = (invalidEvent: Event | null) => {\n          invalidEvent?.preventDefault();\n        };\n\n        const secondControl = new TestOnReportValidity();\n        secondControl[onReportValidity] = (invalidEvent: Event | null) => {\n          invalidEvent?.preventDefault();\n        };\n\n        spyOn(firstControl, 'focus');\n        spyOn(secondControl, 'focus');\n\n        const form = document.createElement('form');\n        form.appendChild(firstControl);\n        form.appendChild(secondControl);\n        document.body.appendChild(form);\n\n        firstControl.required = true;\n        secondControl.required = true;\n        form.reportValidity();\n        form.remove();\n\n        expect(firstControl.focus)\n          .withContext('first control (invalid) is focused')\n          .toHaveBeenCalledTimes(1);\n        expect(secondControl.focus)\n          .withContext('second control (invalid) is not focused')\n          .not.toHaveBeenCalled();\n      });\n\n      it('should focus the control when calling control.reportValidity(), even if not the first invalid control of a form', () => {\n        const firstControl = new TestOnReportValidity();\n        firstControl[onReportValidity] = (invalidEvent: Event | null) => {\n          invalidEvent?.preventDefault();\n        };\n\n        const secondControl = new TestOnReportValidity();\n        secondControl[onReportValidity] = (invalidEvent: Event | null) => {\n          invalidEvent?.preventDefault();\n        };\n\n        spyOn(firstControl, 'focus');\n        spyOn(secondControl, 'focus');\n\n        const form = document.createElement('form');\n        form.appendChild(firstControl);\n        form.appendChild(secondControl);\n        document.body.appendChild(form);\n\n        firstControl.required = true;\n        secondControl.required = true;\n        secondControl.reportValidity();\n\n        expect(firstControl.focus)\n          .withContext('first control (invalid) is not focused')\n          .not.toHaveBeenCalled();\n        expect(secondControl.focus)\n          .withContext(\n            'second control (invalid, called reportValidity()) is focused',\n          )\n          .toHaveBeenCalledTimes(1);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/validators/checkbox-validator.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a checkbox.\n */\nexport interface CheckboxState {\n  /**\n   * Whether the checkbox is checked.\n   */\n  readonly checked: boolean;\n\n  /**\n   * Whether the checkbox is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * A validator that provides constraint validation that emulates\n * `<input type=\"checkbox\">` validation.\n */\nexport class CheckboxValidator extends Validator<CheckboxState> {\n  private checkboxControl?: HTMLInputElement;\n\n  protected override computeValidity(state: CheckboxState) {\n    if (!this.checkboxControl) {\n      // Lazily create the platform input\n      this.checkboxControl = document.createElement('input');\n      this.checkboxControl.type = 'checkbox';\n    }\n\n    this.checkboxControl.checked = state.checked;\n    this.checkboxControl.required = state.required;\n    return {\n      validity: this.checkboxControl.validity,\n      validationMessage: this.checkboxControl.validationMessage,\n    };\n  }\n\n  protected override equals(prev: CheckboxState, next: CheckboxState) {\n    return prev.checked === next.checked && prev.required === next.required;\n  }\n\n  protected override copy({checked, required}: CheckboxState) {\n    return {checked, required};\n  }\n}\n"
  },
  {
    "path": "labs/behaviors/validators/checkbox-validator_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {CheckboxValidator} from './checkbox-validator.js';\n\ndescribe('CheckboxValidator', () => {\n  it('is invalid when required and not checked', () => {\n    const state = {\n      required: true,\n      checked: false,\n    };\n\n    const validator = new CheckboxValidator(() => state);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeTrue();\n    expect(validationMessage).withContext('validationMessage').not.toBe('');\n  });\n\n  it('is valid when required and checked', () => {\n    const state = {\n      required: true,\n      checked: true,\n    };\n\n    const validator = new CheckboxValidator(() => state);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n    expect(validationMessage).withContext('validationMessage').toBe('');\n  });\n\n  it('is valid when not required', () => {\n    const state = {\n      required: false,\n      checked: false,\n    };\n\n    const validator = new CheckboxValidator(() => state);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n    expect(validationMessage).withContext('validationMessage').toBe('');\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/validators/radio-validator.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a radio.\n */\nexport interface RadioState {\n  /**\n   * Whether the radio is checked.\n   */\n  readonly checked: boolean;\n\n  /**\n   * Whether the radio is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * Radio constraint validation properties for a single radio and its siblings.\n */\nexport type RadioGroupState = readonly [RadioState, ...RadioState[]];\n\n/**\n * A validator that provides constraint validation that emulates\n * `<input type=\"radio\">` validation.\n */\nexport class RadioValidator extends Validator<RadioGroupState> {\n  private radioElement?: HTMLInputElement;\n\n  protected override computeValidity(states: RadioGroupState) {\n    if (!this.radioElement) {\n      // Lazily create the radio element\n      this.radioElement = document.createElement('input');\n      this.radioElement.type = 'radio';\n      // A name is required for validation to run\n      this.radioElement.name = 'group';\n    }\n\n    let isRequired = false;\n    let isChecked = false;\n    for (const {checked, required} of states) {\n      if (required) {\n        isRequired = true;\n      }\n\n      if (checked) {\n        isChecked = true;\n      }\n    }\n\n    // Firefox v119 doesn't compute grouped radio validation correctly while\n    // they are detached from the DOM, which is why we don't render multiple\n    // virtual <input>s. Instead, we can check the required/checked states and\n    // grab the i18n'd validation message if the value is missing.\n    this.radioElement.checked = isChecked;\n    this.radioElement.required = isRequired;\n    return {\n      validity: {\n        valueMissing: isRequired && !isChecked,\n      },\n      validationMessage: this.radioElement.validationMessage,\n    };\n  }\n\n  protected override equals(\n    prevGroup: RadioGroupState,\n    nextGroup: RadioGroupState,\n  ) {\n    if (prevGroup.length !== nextGroup.length) {\n      return false;\n    }\n\n    for (let i = 0; i < prevGroup.length; i++) {\n      const prev = prevGroup[i];\n      const next = nextGroup[i];\n      if (prev.checked !== next.checked || prev.required !== next.required) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  protected override copy(states: RadioGroupState): RadioGroupState {\n    // Cast as unknown since typescript does not have enough information to\n    // infer that the array always has at least one element.\n    return states.map(({checked, required}) => ({\n      checked,\n      required,\n    })) as unknown as RadioGroupState;\n  }\n}\n"
  },
  {
    "path": "labs/behaviors/validators/radio-validator_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {RadioValidator} from './radio-validator.js';\n\ndescribe('RadioValidator', () => {\n  it('is invalid when required and no radios are checked', () => {\n    const states = [\n      {\n        required: true,\n        checked: false,\n      },\n      {\n        required: true,\n        checked: false,\n      },\n      {\n        required: true,\n        checked: false,\n      },\n    ] as const;\n\n    const validator = new RadioValidator(() => states);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeTrue();\n    expect(validationMessage).withContext('validationMessage').not.toBe('');\n  });\n\n  it('is invalid when any radio is required and no radios are checked', () => {\n    const states = [\n      {\n        required: false,\n        checked: false,\n      },\n      {\n        required: true,\n        checked: false,\n      },\n      {\n        required: false,\n        checked: false,\n      },\n    ] as const;\n\n    const validator = new RadioValidator(() => states);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeTrue();\n    expect(validationMessage).withContext('validationMessage').not.toBe('');\n  });\n\n  it('is valid when required and any radio is checked', () => {\n    const states = [\n      {\n        required: true,\n        checked: false,\n      },\n      {\n        required: true,\n        checked: true,\n      },\n      {\n        required: true,\n        checked: false,\n      },\n    ] as const;\n\n    const validator = new RadioValidator(() => states);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n    expect(validationMessage).withContext('validationMessage').toBe('');\n  });\n\n  it('is valid when required and multiple radios are checked', () => {\n    const states = [\n      {\n        required: true,\n        checked: false,\n      },\n      {\n        required: true,\n        checked: true,\n      },\n      {\n        required: true,\n        checked: true,\n      },\n    ] as const;\n\n    const validator = new RadioValidator(() => states);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n    expect(validationMessage).withContext('validationMessage').toBe('');\n  });\n\n  it('is valid when not required', () => {\n    const states = [\n      {\n        required: false,\n        checked: false,\n      },\n      {\n        required: false,\n        checked: false,\n      },\n      {\n        required: false,\n        checked: false,\n      },\n    ] as const;\n\n    const validator = new RadioValidator(() => states);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n    expect(validationMessage).withContext('validationMessage').toBe('');\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/validators/select-validator.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, render} from 'lit';\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a select dropdown.\n */\nexport interface SelectState {\n  /**\n   * The current selected value.\n   */\n  readonly value: string;\n\n  /**\n   * Whether the select is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * A validator that provides constraint validation that emulates `<select>`\n * validation.\n */\nexport class SelectValidator extends Validator<SelectState> {\n  private selectControl?: HTMLSelectElement;\n\n  protected override computeValidity(state: SelectState) {\n    if (!this.selectControl) {\n      // Lazily create the platform select\n      this.selectControl = document.createElement('select');\n    }\n\n    render(html`<option value=${state.value}></option>`, this.selectControl);\n\n    this.selectControl.value = state.value;\n    this.selectControl.required = state.required;\n    return {\n      validity: this.selectControl.validity,\n      validationMessage: this.selectControl.validationMessage,\n    };\n  }\n\n  protected override equals(prev: SelectState, next: SelectState) {\n    return prev.value === next.value && prev.required === next.required;\n  }\n\n  protected override copy({value, required}: SelectState) {\n    return {value, required};\n  }\n}\n"
  },
  {
    "path": "labs/behaviors/validators/select-validator_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {SelectValidator} from './select-validator.js';\n\ndescribe('SelectValidator', () => {\n  it('is invalid when required and value is empty', () => {\n    const state = {\n      required: true,\n      value: '',\n    };\n\n    const validator = new SelectValidator(() => state);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeTrue();\n    expect(validationMessage).withContext('validationMessage').not.toBe('');\n  });\n\n  it('is valid when required and value is provided', () => {\n    const state = {\n      required: true,\n      value: 'Foo',\n    };\n\n    const validator = new SelectValidator(() => state);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n    expect(validationMessage).withContext('validationMessage').toBe('');\n  });\n\n  it('is valid when not required', () => {\n    const state = {\n      required: false,\n      value: '',\n    };\n\n    const validator = new SelectValidator(() => state);\n    const {validity, validationMessage} = validator.getValidity();\n    expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n    expect(validationMessage).withContext('validationMessage').toBe('');\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/validators/text-field-validator.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation for a text field.\n */\nexport interface TextFieldState {\n  /**\n   * The input or textarea state to validate.\n   */\n  state: InputState | TextAreaState;\n\n  /**\n   * The `<input>` or `<textarea>` that is rendered on the page.\n   *\n   * `minlength` and `maxlength` validation do not apply until a user has\n   * interacted with the control and the element is internally marked as dirty.\n   * This is a spec quirk, the two properties behave differently from other\n   * constraint validation.\n   *\n   * This means we need an actual rendered element instead of a virtual one,\n   * since the virtual element will never be marked as dirty.\n   *\n   * This can be `null` if the element has not yet rendered, and the validator\n   * will fall back to virtual elements for other constraint validation\n   * properties, which do apply even if the control is not dirty.\n   */\n  renderedControl: HTMLInputElement | HTMLTextAreaElement | null;\n}\n\n/**\n * Constraint validation properties for an `<input>`.\n */\nexport interface InputState extends SharedInputAndTextAreaState {\n  /**\n   * The `<input>` type.\n   *\n   * Not all constraint validation properties apply to every type. See\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#validation-related_attributes\n   * for which properties will apply to which types.\n   */\n  readonly type: string;\n\n  /**\n   * The regex pattern a value must match.\n   */\n  readonly pattern: string;\n\n  /**\n   * The minimum value.\n   */\n  readonly min: string;\n\n  /**\n   * The maximum value.\n   */\n  readonly max: string;\n\n  /**\n   * The step interval of the value.\n   */\n  readonly step: string;\n}\n\n/**\n * Constraint validation properties for a `<textarea>`.\n */\nexport interface TextAreaState extends SharedInputAndTextAreaState {\n  /**\n   * The type, must be \"textarea\" to inform the validator to use `<textarea>`\n   * instead of `<input>`.\n   */\n  readonly type: 'textarea';\n}\n\n/**\n * Constraint validation properties shared between an `<input>` and\n * `<textarea>`.\n */\ninterface SharedInputAndTextAreaState {\n  /**\n   * The current value.\n   */\n  readonly value: string;\n\n  /**\n   * Whether the textarea is required.\n   */\n  readonly required: boolean;\n\n  /**\n   * The minimum length of the value.\n   */\n  readonly minLength: number;\n\n  /**\n   * The maximum length of the value.\n   */\n  readonly maxLength: number;\n}\n\n/**\n * A validator that provides constraint validation that emulates `<input>` and\n * `<textarea>` validation.\n */\nexport class TextFieldValidator extends Validator<TextFieldState> {\n  private inputControl?: HTMLInputElement;\n  private textAreaControl?: HTMLTextAreaElement;\n\n  protected override computeValidity({state, renderedControl}: TextFieldState) {\n    let inputOrTextArea = renderedControl;\n    if (isInputState(state) && !inputOrTextArea) {\n      // Get cached <input> or create it.\n      inputOrTextArea = this.inputControl || document.createElement('input');\n      // Cache the <input> to re-use it next time.\n      this.inputControl = inputOrTextArea;\n    } else if (!inputOrTextArea) {\n      // Get cached <textarea> or create it.\n      inputOrTextArea =\n        this.textAreaControl || document.createElement('textarea');\n      // Cache the <textarea> to re-use it next time.\n      this.textAreaControl = inputOrTextArea;\n    }\n\n    // Set this variable so we can check it for input-specific properties.\n    const input = isInputState(state)\n      ? (inputOrTextArea as HTMLInputElement)\n      : null;\n\n    // Set input's \"type\" first, since this can change the other properties\n    if (input) {\n      input.type = state.type;\n    }\n\n    if (inputOrTextArea.value !== state.value) {\n      // Only programmatically set the value if there's a difference. When using\n      // the rendered control, the value will always be up to date. Setting the\n      // property (even if it's the same string) will reset the internal <input>\n      // dirty flag, making minlength and maxlength validation reset.\n      inputOrTextArea.value = state.value;\n    }\n\n    inputOrTextArea.required = state.required;\n\n    // The following IDLAttribute properties will always hydrate an attribute,\n    // even if set to a the default value ('' or -1). The presence of the\n    // attribute triggers constraint validation, so we must remove the attribute\n    // when empty.\n    if (input) {\n      const inputState = state as InputState;\n      if (inputState.pattern) {\n        input.pattern = inputState.pattern;\n      } else {\n        input.removeAttribute('pattern');\n      }\n\n      if (inputState.min) {\n        input.min = inputState.min;\n      } else {\n        input.removeAttribute('min');\n      }\n\n      if (inputState.max) {\n        input.max = inputState.max;\n      } else {\n        input.removeAttribute('max');\n      }\n\n      if (inputState.step) {\n        input.step = inputState.step;\n      } else {\n        input.removeAttribute('step');\n      }\n    }\n\n    // Use -1 to represent no minlength and maxlength, which is what the\n    // platform input returns. However, it will throw an error if you try to\n    // manually set it to -1.\n    //\n    // While the type is `number`, it may actually be `null` at runtime.\n    // `null > -1` is true since `null` coerces to `0`, so we default null and\n    // undefined to -1.\n    //\n    // We set attributes instead of properties since setting a property may\n    // throw an out of bounds error in relation to the other property.\n    // Attributes will not throw errors while the state is updating.\n    if ((state.minLength ?? -1) > -1) {\n      inputOrTextArea.setAttribute('minlength', String(state.minLength));\n    } else {\n      inputOrTextArea.removeAttribute('minlength');\n    }\n\n    if ((state.maxLength ?? -1) > -1) {\n      inputOrTextArea.setAttribute('maxlength', String(state.maxLength));\n    } else {\n      inputOrTextArea.removeAttribute('maxlength');\n    }\n\n    return {\n      validity: inputOrTextArea.validity,\n      validationMessage: inputOrTextArea.validationMessage,\n    };\n  }\n\n  protected override equals(\n    {state: prev}: TextFieldState,\n    {state: next}: TextFieldState,\n  ) {\n    // Check shared input and textarea properties\n    const inputOrTextAreaEqual =\n      prev.type === next.type &&\n      prev.value === next.value &&\n      prev.required === next.required &&\n      prev.minLength === next.minLength &&\n      prev.maxLength === next.maxLength;\n\n    if (!isInputState(prev) || !isInputState(next)) {\n      // Both are textareas, all relevant properties are equal.\n      return inputOrTextAreaEqual;\n    }\n\n    // Check additional input-specific properties.\n    return (\n      inputOrTextAreaEqual &&\n      prev.pattern === next.pattern &&\n      prev.min === next.min &&\n      prev.max === next.max &&\n      prev.step === next.step\n    );\n  }\n\n  protected override copy({state}: TextFieldState): TextFieldState {\n    // Don't hold a reference to the rendered control when copying since we\n    // don't use it when checking if the state changed.\n    return {\n      state: isInputState(state)\n        ? this.copyInput(state)\n        : this.copyTextArea(state),\n      renderedControl: null,\n    };\n  }\n\n  private copyInput(state: InputState): InputState {\n    const {type, pattern, min, max, step} = state;\n    return {\n      ...this.copySharedState(state),\n      type,\n      pattern,\n      min,\n      max,\n      step,\n    };\n  }\n\n  private copyTextArea(state: TextAreaState): TextAreaState {\n    return {\n      ...this.copySharedState(state),\n      type: state.type,\n    };\n  }\n\n  private copySharedState({\n    value,\n    required,\n    minLength,\n    maxLength,\n  }: SharedInputAndTextAreaState): SharedInputAndTextAreaState {\n    return {value, required, minLength, maxLength};\n  }\n}\n\nfunction isInputState(state: InputState | TextAreaState): state is InputState {\n  return state.type !== 'textarea';\n}\n"
  },
  {
    "path": "labs/behaviors/validators/text-field-validator_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {\n  InputState,\n  TextAreaState,\n  TextFieldValidator,\n} from './text-field-validator.js';\n\n// Note: minlength and maxlength validation can NOT be tested programmatically.\n// These properties will not trigger constraint validation until a user has\n// interacted with the <input> or <textarea> and it marks itself as dirty.\n// It's a spec quirk that these two properties behave differently, and\n// unfortunately we cannot test them.\n\ndescribe('TextFieldValidator', () => {\n  // These types all have the same \"text\"-like validation\n  describe('type=\"text\", \"password\", \"search\", \"tel\", \"url\"', () => {\n    it('is invalid when required and empty', () => {\n      const state: InputState = {\n        type: 'text',\n        value: '',\n        required: true,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.valueMissing).withContext('valueMissing').toBeTrue();\n      expect(validationMessage).withContext('validationMessage').not.toBe('');\n    });\n\n    it('is valid when required and not empty', () => {\n      const state: InputState = {\n        type: 'text',\n        value: 'Value',\n        required: true,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n      expect(validationMessage).withContext('validationMessage').toBe('');\n    });\n\n    it('is valid when not required and empty', () => {\n      const state: InputState = {\n        type: 'text',\n        value: '',\n        required: false,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n      expect(validationMessage).withContext('validationMessage').toBe('');\n    });\n\n    it('does not throw an error when setting minlength and maxlength out of bounds', () => {\n      type WritableInputState = {\n        -readonly [K in keyof InputState]: InputState[K];\n      };\n\n      const state: WritableInputState = {\n        type: 'text',\n        value: '',\n        required: true,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: 5,\n        maxLength: 10,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      // Compute initial validity with valid minlength of 5 and maxlength of 10\n      validator.getValidity();\n      // set to something that is out of bounds of current maxlength=\"10\"\n      state.minLength = 20;\n\n      expect(() => {\n        validator.getValidity();\n      }).not.toThrow();\n    });\n  });\n\n  describe('type=\"email\"', () => {\n    it('is invalid when not matching default email pattern', () => {\n      const state: InputState = {\n        type: 'email',\n        value: 'invalid',\n        required: false,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.typeMismatch).withContext('typeMismatch').toBeTrue();\n      expect(validationMessage).withContext('validationMessage').not.toBe('');\n    });\n\n    it('is valid when matching default email pattern', () => {\n      const state: InputState = {\n        type: 'email',\n        value: 'valid@google.com',\n        required: false,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.typeMismatch).withContext('typeMismatch').toBeFalse();\n      expect(validationMessage).withContext('validationMessage').toBe('');\n    });\n  });\n\n  describe('type=\"number\"', () => {\n    it('is invalid when value is less than min', () => {\n      const state: InputState = {\n        type: 'number',\n        value: '1',\n        required: false,\n        pattern: '',\n        min: '5',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.rangeUnderflow).withContext('rangeUnderflow').toBeTrue();\n      expect(validationMessage).withContext('validationMessage').not.toBe('');\n    });\n\n    it('is invalid when value is greater than max', () => {\n      const state: InputState = {\n        type: 'number',\n        value: '10',\n        required: false,\n        pattern: '',\n        min: '',\n        max: '5',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.rangeOverflow).withContext('rangeOverflow').toBeTrue();\n      expect(validationMessage).withContext('validationMessage').not.toBe('');\n    });\n\n    it('is valid when value is between min and max', () => {\n      const state: InputState = {\n        type: 'number',\n        value: '3',\n        required: false,\n        pattern: '',\n        min: '1',\n        max: '5',\n        minLength: -1,\n        maxLength: -1,\n        step: '',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.rangeUnderflow).withContext('rangeUnderflow').toBeFalse();\n      expect(validity.rangeOverflow).withContext('rangeOverflow').toBeFalse();\n      expect(validationMessage).withContext('validationMessage').toBe('');\n    });\n\n    it('is invalid when value does not match step', () => {\n      const state: InputState = {\n        type: 'number',\n        value: '2',\n        required: false,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '5',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.stepMismatch).withContext('stepMismatch').toBeTrue();\n      expect(validationMessage).withContext('validationMessage').not.toBe('');\n    });\n\n    it('is valid when value matches step', () => {\n      const state: InputState = {\n        type: 'number',\n        value: '20',\n        required: false,\n        pattern: '',\n        min: '',\n        max: '',\n        minLength: -1,\n        maxLength: -1,\n        step: '5',\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.stepMismatch).withContext('stepMismatch').toBeFalse();\n      expect(validationMessage).withContext('validationMessage').toBe('');\n    });\n  });\n\n  describe('type=\"textarea\"', () => {\n    it('is invalid when required and empty', () => {\n      const state: TextAreaState = {\n        type: 'textarea',\n        value: '',\n        required: true,\n        minLength: -1,\n        maxLength: -1,\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.valueMissing).withContext('valueMissing').toBeTrue();\n      expect(validationMessage).withContext('validationMessage').not.toBe('');\n    });\n\n    it('is valid when required and not empty', () => {\n      const state: TextAreaState = {\n        type: 'textarea',\n        value: 'Value',\n        required: true,\n        minLength: -1,\n        maxLength: -1,\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n      expect(validationMessage).withContext('validationMessage').toBe('');\n    });\n\n    it('is valid when not required and empty', () => {\n      const state: TextAreaState = {\n        type: 'textarea',\n        value: '',\n        required: false,\n        minLength: -1,\n        maxLength: -1,\n      };\n\n      const validator = new TextFieldValidator(() => ({\n        state,\n        renderedControl: null,\n      }));\n\n      const {validity, validationMessage} = validator.getValidity();\n      expect(validity.valueMissing).withContext('valueMissing').toBeFalse();\n      expect(validationMessage).withContext('validationMessage').toBe('');\n    });\n  });\n});\n"
  },
  {
    "path": "labs/behaviors/validators/validator.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A class that computes and caches `ValidityStateFlags` for a component with\n * a given `State` interface.\n *\n * Cached performance before computing validity is important since constraint\n * validation must be checked frequently and synchronously when properties\n * change.\n *\n * @template State The expected interface of properties relevant to constraint\n *     validation.\n */\nexport abstract class Validator<State> {\n  /**\n   * The previous state, used to determine if state changed and validation needs\n   * to be re-computed.\n   */\n  private prevState?: State;\n\n  /**\n   * The current validity state and message. This is cached and returns if\n   * constraint validation state does not change.\n   */\n  private currentValidity: ValidityAndMessage = {\n    validity: {},\n    validationMessage: '',\n  };\n\n  /**\n   * Creates a new validator.\n   *\n   * @param getCurrentState A callback that returns the current state of\n   *     constraint validation-related properties.\n   */\n  constructor(private readonly getCurrentState: () => State) {}\n\n  /**\n   * Returns the current `ValidityStateFlags` and validation message for the\n   * validator.\n   *\n   * If the constraint validation state has not changed, this will return a\n   * cached result. This is important since `getValidity()` can be called\n   * frequently in response to synchronous property changes.\n   *\n   * @return The current validity and validation message.\n   */\n  getValidity(): ValidityAndMessage {\n    const state = this.getCurrentState();\n    const hasStateChanged =\n      !this.prevState || !this.equals(this.prevState, state);\n    if (!hasStateChanged) {\n      return this.currentValidity;\n    }\n\n    const {validity, validationMessage} = this.computeValidity(state);\n    this.prevState = this.copy(state);\n    this.currentValidity = {\n      validationMessage,\n      validity: {\n        // Change any `ValidityState` instances into `ValidityStateFlags` since\n        // `ValidityState` cannot be easily `{...spread}`.\n        badInput: validity.badInput,\n        customError: validity.customError,\n        patternMismatch: validity.patternMismatch,\n        rangeOverflow: validity.rangeOverflow,\n        rangeUnderflow: validity.rangeUnderflow,\n        stepMismatch: validity.stepMismatch,\n        tooLong: validity.tooLong,\n        tooShort: validity.tooShort,\n        typeMismatch: validity.typeMismatch,\n        valueMissing: validity.valueMissing,\n      },\n    };\n\n    return this.currentValidity;\n  }\n\n  /**\n   * Computes the `ValidityStateFlags` and validation message for a given set\n   * of constraint validation properties.\n   *\n   * Implementations can use platform elements like `<input>` and `<select>` to\n   * sync state and compute validation along with i18n'd messages. This function\n   * may be expensive, and is only called when state changes.\n   *\n   * @param state The new state of constraint validation properties.\n   * @return An object containing a `validity` property with\n   *     `ValidityStateFlags` and a `validationMessage` property.\n   */\n  protected abstract computeValidity(state: State): ValidityAndMessage;\n\n  /**\n   * Checks if two states are equal. This is used to check against cached state\n   * to see if validity needs to be re-computed.\n   *\n   * @param prev The previous state.\n   * @param next The next state.\n   * @return True if the states are equal, or false if not.\n   */\n  protected abstract equals(prev: State, next: State): boolean;\n\n  /**\n   * Creates a copy of a state. This is used to cache state and check if it\n   * changes.\n   *\n   * Note: do NOT spread the {...state} to copy it. The actual state object is\n   * a web component, and trying to spread its getter/setter properties won't\n   * work.\n   *\n   * @param state The state to copy.\n   * @return A copy of the state.\n   */\n  protected abstract copy(state: State): State;\n}\n\n/**\n * An object containing `ValidityStateFlags` and a corresponding validation\n * message.\n */\nexport interface ValidityAndMessage {\n  /**\n   * Validity flags.\n   */\n  validity: ValidityStateFlags;\n\n  /**\n   * The validation message for the associated flags. It may not be an empty\n   * string if any of the validity flags are `true`.\n   */\n  validationMessage: string;\n}\n"
  },
  {
    "path": "labs/behaviors/validators/validator_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {Validator} from './validator.js';\n\ndescribe('Validator', () => {\n  interface CustomState {\n    value: string;\n    required: boolean;\n  }\n\n  class CustomValidator extends Validator<CustomState> {\n    computeValidity({required, value}: CustomState) {\n      const valueMissing = required && !value;\n      return {\n        validity: {valueMissing},\n        validationMessage: valueMissing ? 'Value missing' : '',\n      };\n    }\n\n    equals(prev: CustomState, next: CustomState) {\n      return prev.value === next.value && prev.required === next.required;\n    }\n\n    copy({value, required}: CustomState) {\n      return {value, required};\n    }\n  }\n\n  describe('getValidity()', () => {\n    // Quick E2E test of our CustomValidator to make sure the logic is hooked up\n    it('should return the expected validity', () => {\n      const currentState = {\n        value: '',\n        required: false,\n      };\n\n      const validator = new CustomValidator(() => currentState);\n\n      expect(validator.getValidity()).toEqual({\n        validity: jasmine.objectContaining({valueMissing: false}),\n        validationMessage: '',\n      });\n\n      currentState.required = true;\n      expect(validator.getValidity()).toEqual({\n        validity: jasmine.objectContaining({valueMissing: true}),\n        validationMessage: 'Value missing',\n      });\n\n      currentState.value = 'Foo';\n      expect(validator.getValidity()).toEqual({\n        validity: jasmine.objectContaining({valueMissing: false}),\n        validationMessage: '',\n      });\n    });\n\n    it('should compute validity when first called', () => {\n      const currentState = {\n        value: '',\n        required: false,\n      };\n\n      const validator = new CustomValidator(() => currentState);\n      spyOn(validator, 'computeValidity').and.callThrough();\n\n      validator.getValidity();\n      expect(validator.computeValidity)\n        .withContext('computeValidity() called')\n        .toHaveBeenCalledTimes(1);\n    });\n\n    it('should compute and return validity when state changes', () => {\n      const currentState = {\n        value: '',\n        required: false,\n      };\n\n      const validator = new CustomValidator(() => currentState);\n      // Get initial validity, which always computes\n      validator.getValidity();\n\n      spyOn(validator, 'computeValidity').and.callThrough();\n      // Change the state, should re-compute\n      currentState.value = 'Changed value';\n      validator.getValidity();\n\n      expect(validator.computeValidity)\n        .withContext('computeValidity() called')\n        .toHaveBeenCalledTimes(1);\n    });\n\n    it('should not compute and return cached validity when state does not change', () => {\n      const currentState = {\n        value: '',\n        required: false,\n      };\n\n      const validator = new CustomValidator(() => currentState);\n      // Get initial validity, which always computes\n      validator.getValidity();\n\n      spyOn(validator, 'computeValidity').and.callThrough();\n      // Don't change state\n      validator.getValidity();\n\n      expect(validator.computeValidity)\n        .withContext('computeValidity() called')\n        .not.toHaveBeenCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "labs/card/_elevated-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/elevated-card' show theme;\n"
  },
  {
    "path": "labs/card/_filled-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-card' show theme;\n"
  },
  {
    "path": "labs/card/_outlined-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/outlined-card' show theme;\n"
  },
  {
    "path": "labs/card/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Cards',\n  [],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "labs/card/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "labs/card/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/filled-button.js';\nimport '@material/web/labs/card/elevated-card.js';\nimport '@material/web/labs/card/filled-card.js';\nimport '@material/web/labs/card/outlined-card.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\nimport {css, html} from 'lit';\n\n/** Knob types for card stories. */\nexport interface StoryKnobs {}\n\nconst MEDIA_IMAGE =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAC8CAYAAADCScSrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAlHSURBVHgB7d0HbxtHFsDxJ1Hdala15CaXxL44TmLg7vt/gQNyJbmzZUqkOtVFFVLd4dsUO4oKy+7szL7/DzCSAEESI3+uZme5b9pm88VPAhjRLoAhBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TCB6mEDxM6RA4sb6xKYdHRzI+NiqDAwOCdBC8A6trJZmdm4/+fKX25/9494P09vYI3GNJk7DT0zMpLi398deXl5eSLxQE6SD4hBUXF6Pov7S9sys7u7sC9wg+QbpmL9XW7tfJzxfl0yfOonCN4BOUny9ES5jrVKpVWV5dFbhF8AnZ2NySvfL+rX/PwtJybblzKnCH4BOgV/W5QvHOv+/8/ELmi4sCdwg+AXrlPqnzyl3a2JD9gwOBGwQfs+PjE1laaWxtrmt9bmDdIPiY6R77TTeqN9k/OIyu9EgewcdI99a3tnekGYWFxdqa/lyQLIKPiV7VW7kB1YdTuvZHsgg+Jqul9ehBUyuWV9ekUqkKkkPwMdCrsy5JWqU3rh/n5wXJIfgYFBYW5OLiQuKwu1eu3QdsC5JB8C3SZczaerw7LHOFhYZ3elAfgm/R+9m8xK16fCyLyyuC+BF8C0q1K3urN6o30eBPTvieTdwIvknRNmRt7Z7oP7+Y3D/fKoJvksZ49cWOuK1vbspeuSyID8E34eioEu27u/Bxju/ZxIngm6BLGVe7KEeVSm0XyM2HywKCb5B+V0bfSXVJl098zyYeBN+AaOLAvPuJA/qiSD0vlOBuBN8A/a7L8cmJpKH02yAntIbg6xTNl1lckrTojWsaP12yhuDrdNsEAlf0pfD1G8Z+oD4EX4fy/r5sbG2JD/QGNq4vqllE8HeIvrI7589SQl8O53s2zSP4O6zF8GJH3PQl8Wr1WNA4gr/F1UGovmAga/MI/hbXDUL1BQNZm0PwN7htEKovGMjaOIK/gQ/bkHdhIGvjCP4a9QxC9QUDWRtD8FfUOwjVFwxkbQzBX9HIIFRfMJC1fgT/hWYGofqCgaz1IfgvNDMI1RcMZK0Pwf+mlUGovmAg690IXlofhOoLBrLejeAlnkGovmAg6+3MBx/XIFRfMJD1duaDj3MQqi8YyHoz08EnMQjVFwxkvZ7p4JMYhOoLBrJez2zwSQ5C9QUDWf/KZPBJD0L1BQNZ/8pk8C4GofqCgax/Zi54l4NQfcFA1s/MBe9yEKovGMj6mangdX/a9SBUX+gyjqu8seAt70tfXhK7MhX8yP1hmRgbE2va2trkxczT6I/Wtc3mi+Y++vpVAks/3tvb26NfEOkQg3K5nMAmPvYwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DDF5BtP+ExPDNE5lHr0pY7l+/1Fd33/taOjQ7q6OqW3p0d6ar+ygOCN0cB1VMluuSzl8n4Uez1yuXbpv3dPhoeGopfhhwYHJUQmX+K2Rl9Y1/Or9NCznd29WF5g7+7uksnxcZl+8KB29e+WUBB8hmnY6xub0blP9V7JmzE2OiIzTx5HPwF85zR4/XGqcx1DPip9oL9fJifGxXfbOzuSny8mGvpVU5MT8uzpk9q6v0t85XQN/9P/38tebd0YutOzM3n8cFp8pBcVPaS4VLuyu6anqWzv7srLZ89kYtzPgVdOtyWzELsqe/r7ODg8lH/++O9UYv+djiH/34dZ+Tg37+VoQ3ZpMkJvSjU0XyJbWStJpVqVb159LZ2dneILHjxlwGotrp/ff/DuiqrTmn/8z09e3bMRfOB0F2a2tnzwdVamXuX/9d+fvYme4AOme+of8nPiO43el+UWwQfq+PikFpF/y5ib6IaF3simjeADpJHrmv38PKwTxHXbUp/2pongA6Tnr+oWZIj0GUGaZ8cSfGB0KRPyCdv6UynNs2MJPjD5QiH4s6rSPDuW4ANyeHQUPWDKguLikqSB4AOytLwqWaG7NvoBdo3gA3F2diab29uSJSurJXGN4AOxsbWVuXNmN7e3nD8hJvhAbGxm6+qudMdGnxa7RPAB0O+47x8cSBbpiyouEXwA9g8OM3uQsut3JAg+AKE+Va2HvoKoJ6O7QvABSGP7zhX9yXVUqYgrBB+AatXdi9hpcPn7I/gAhDzloR76UrwrBB+A84uwvgbcKN2FcoXgA5C1B05XcdMKU3RwqysEH4BcLidZ5vL3R/AB6OzI9vigLodzawg+AN3d4UznbYbLWZQEH4C+3l7Jst5ed4ctEHwA+vv7JKt0/e7yA03wARgcGJCsGui/xy4N/kwPGujoyOZOjR6h4xLBB0CvgKMjI5JFoyP3xSWCD8TEmJ8HDLRCTwfUE1VcIvhA6Ml5PRnbnpx6MCmuEXwgdFnzYHJCsqK9vT06E8r5v1cQjEfTU5m5eZ2uXd3TOBmE4AOiJ2M/mvbzMLVG6NX9yaOHkgaCD4yG0hv4MfDPZ9I72pLgA6NXx1dfvZBQ6TMFPb07LQQfIH1Y4+s5sbfRD+ub16+iP6b23yAIkp54PTw0KCF5/dVLp18Uuw7BB0qvknoGaih78zNPHntxOjfBB0xv/H54+6330evyS4P3AcEHrqen2+vodVfpxbMZ8QXBZ4BG/+67tzI06M/XiPXJsIb+fOap+MRp8GnencfJx99Hd3eXfP/tm+gJZur/LbWl1ndv/ublTpLT/3NPHz+S0OVy7TI9lX5U19EP4tcvX8jbb15H0aVhcnxc/v7ue7k/PCw+apvNF53OYdYzOs/O3Y1Wi5uulTsCmCKgw5sKC4uyslZyMshJHyi9fD7j/IWORjkPHm6dnp7J4vJydAJ2Eid3633Dw6kpGR8bdfqqXrMI3gi9ym9sbkVnRekhBK1c9fWnnAau++quX+BoFcEbpLMcy/sHtV+/Hh1ZqVTl5PT02g+BDoHSp6N9fX0yONBfu6IPyr2+cKcoEDz+oB+Ei4vL6JACvTnXERohLFMake0ZbmiIBp71OZY8eIIpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TfgF+si70ZYTauwAAAABJRU5ErkJggg==';\n\nconst styles = [\n  typescaleStyles,\n  css`\n    .container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      color: var(--md-sys-color-on-surface);\n    }\n\n    .card {\n      width: 192px;\n    }\n\n    img {\n      border-radius: inherit;\n      background: #dadce0;\n      object-fit: contain;\n      height: 128px;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      justify-content: space-between;\n      padding: 16px;\n      gap: 16px;\n    }\n  `,\n];\n\nconst cards: MaterialStoryInit<StoryKnobs> = {\n  name: 'Cards',\n  styles,\n  render() {\n    return html`\n      <div class=\"container md-typescale-body-medium\">\n        <md-elevated-card class=\"card\">\n          <img src=${MEDIA_IMAGE} alt=\"Placeholder image\" />\n          <div class=\"content\">A static elevated card</div>\n        </md-elevated-card>\n\n        <md-filled-card class=\"card\">\n          <img src=${MEDIA_IMAGE} alt=\"Placeholder image\" />\n          <div class=\"content\">A static filled card</div>\n        </md-filled-card>\n\n        <md-outlined-card class=\"card\">\n          <img src=${MEDIA_IMAGE} alt=\"Placeholder image\" />\n          <div class=\"content\">A static outlined card</div>\n        </md-outlined-card>\n      </div>\n    `;\n  },\n};\n\nconst withActions: MaterialStoryInit<StoryKnobs> = {\n  name: 'Cards with actions',\n  styles,\n  render() {\n    return html`\n      <div class=\"container md-typescale-body-medium\">\n        <md-elevated-card class=\"card\">\n          <img src=${MEDIA_IMAGE} alt=\"Placeholder image\" />\n          <div class=\"content\">\n            An elevated card with actions\n            <md-filled-button>Card action</md-filled-button>\n          </div>\n        </md-elevated-card>\n\n        <md-filled-card class=\"card\">\n          <img src=${MEDIA_IMAGE} alt=\"Placeholder image\" />\n          <div class=\"content\">\n            A filled card with actions\n            <md-filled-button>Card action</md-filled-button>\n          </div>\n        </md-filled-card>\n\n        <md-outlined-card class=\"card\">\n          <img src=${MEDIA_IMAGE} alt=\"Placeholder image\" />\n          <div class=\"content\">\n            An outlined card with actions\n            <md-filled-button>Card action</md-filled-button>\n          </div>\n        </md-outlined-card>\n      </div>\n    `;\n  },\n};\n\n/** Card stories. */\nexport const stories = [cards, withActions];\n"
  },
  {
    "path": "labs/card/elevated-card.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-card': MdElevatedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-card')\nexport class MdElevatedCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, elevatedStyles];\n}\n"
  },
  {
    "path": "labs/card/elevated-card_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../../testing/tokens.js';\n\nimport {MdElevatedCard} from './elevated-card.js';\n\ndescribe('<md-elevated-card>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdElevatedCard.styles);\n  });\n});\n"
  },
  {
    "path": "labs/card/filled-card.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as filledStyles} from './internal/filled-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-card': MdFilledCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-card')\nexport class MdFilledCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, filledStyles];\n}\n"
  },
  {
    "path": "labs/card/filled-card_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../../testing/tokens.js';\n\nimport {MdFilledCard} from './filled-card.js';\n\ndescribe('<md-filled-card>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledCard.styles);\n  });\n});\n"
  },
  {
    "path": "labs/card/internal/_elevated-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-elevated-card-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Elevated card `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-elevated-card-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-elevated-card-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "labs/card/internal/_filled-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filled-card-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Filled card `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-filled-card-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-card-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "labs/card/internal/_outlined-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-outlined-card-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Outlined card `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-outlined-card-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-card-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .outline {\n    border-color: var(--_outline-color);\n    border-width: var(--_outline-width);\n  }\n}\n"
  },
  {
    "path": "labs/card/internal/_shared.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use '../../../elevation/elevation';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    border-radius: var(--_container-shape);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    // Reset z-index for background elements.\n    z-index: 0;\n  }\n\n  md-elevation,\n  .background,\n  .outline {\n    border-radius: inherit;\n    inset: 0;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  // Separate element will be needed for disabled opacities (b/307361748)\n  .background {\n    background: var(--_container-color);\n    // Place behind content.\n    z-index: -1;\n  }\n\n  // Separate element needed to overlay on top of content as opposed to\n  // background, which is behind content. All cards have an outline for HCM.\n  .outline {\n    // A default transparent border that is visible in HCM\n    border: 1px solid transparent;\n    // Outline should be placed on top of content, such as images.\n    z-index: 1;\n  }\n\n  md-elevation {\n    // Place behind content.\n    z-index: -1;\n\n    @include elevation.theme(\n      (\n        'level': var(--_container-elevation),\n        'shadow-color': var(--_container-shadow-color),\n      )\n    );\n  }\n\n  slot {\n    // Allow content to inherit card's border radius\n    border-radius: inherit;\n  }\n}\n"
  },
  {
    "path": "labs/card/internal/card.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement} from 'lit';\n\n/**\n * A card component.\n */\nexport class Card extends LitElement {\n  protected override render() {\n    return html`\n      <md-elevation part=\"elevation\"></md-elevation>\n      <div class=\"background\"></div>\n      <slot></slot>\n      <div class=\"outline\"></div>\n    `;\n  }\n}\n"
  },
  {
    "path": "labs/card/internal/elevated-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './elevated-card';\n// go/keep-sorted end\n\n@include elevated-card.styles;\n"
  },
  {
    "path": "labs/card/internal/filled-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filled-card';\n// go/keep-sorted end\n\n@include filled-card.styles;\n"
  },
  {
    "path": "labs/card/internal/outlined-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './outlined-card';\n// go/keep-sorted end\n\n@include outlined-card.styles;\n"
  },
  {
    "path": "labs/card/internal/shared-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "labs/card/outlined-card.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-card': MdOutlinedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-card')\nexport class MdOutlinedCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"
  },
  {
    "path": "labs/card/outlined-card_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../../testing/tokens.js';\n\nimport {MdOutlinedCard} from './outlined-card.js';\n\ndescribe('<md-outlined-card>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdOutlinedCard.styles);\n  });\n});\n"
  },
  {
    "path": "labs/item/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Item',\n  [\n    new Knob('overline', {ui: textInput()}),\n    new Knob('trailingSupportingText', {ui: textInput()}),\n    new Knob('leadingIcon', {ui: boolInput()}),\n    new Knob('trailingIcon', {ui: boolInput()}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});\n"
  },
  {
    "path": "labs/item/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "labs/item/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/labs/item/item.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html, nothing} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/** Knob types for item stories. */\nexport interface StoryKnobs {\n  overline: string;\n  trailingSupportingText: string;\n  leadingIcon: boolean;\n  trailingIcon: boolean;\n}\n\nconst styles = css`\n  /* Use this CSS to prevent lines from wrapping */\n  .nowrap {\n    white-space: nowrap;\n  }\n\n  /* Use this CSS on items to limit the number of wrapping lines */\n  .clamp-lines {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n\n  /* Use this on start/end content when the item requires it,\n    typically 3+ line height items) */\n  .align-start {\n    align-self: flex-start;\n    /* Optional, some items line icons and text should visually appear 16px from\n       the top. Others, like interactive controls, should hug the top at 12px */\n    padding-top: 4px;\n  }\n\n  .container {\n    align-items: flex-start;\n    display: flex;\n    gap: 32px;\n    flex-wrap: wrap;\n  }\n\n  md-item {\n    border-radius: 16px;\n    outline: 1px solid var(--md-sys-color-outline);\n    width: 300px;\n  }\n`;\n\nconst LOREM_IPSUM =\n  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum rhoncus est volutpat venenatis.';\n\nconst items: MaterialStoryInit<StoryKnobs> = {\n  name: 'Items',\n  styles,\n  render(knobs) {\n    return html`\n      <div class=\"container\">\n        <md-item> Single line item ${getKnobContent(knobs)} </md-item>\n\n        <md-item>\n          Two line item\n          <div slot=\"supporting-text\">Supporting text</div>\n          ${getKnobContent(knobs)}\n        </md-item>\n\n        <md-item>\n          Three line item\n          <div slot=\"supporting-text\">\n            <div>Second line text</div>\n            <div>Third line text</div>\n          </div>\n          ${getKnobContent(knobs, /* threeLines */ true)}\n        </md-item>\n      </div>\n    `;\n  },\n};\n\nconst longText: MaterialStoryInit<StoryKnobs> = {\n  name: 'Items with long text',\n  styles,\n  render(knobs) {\n    return html`\n      <div class=\"container\">\n        <md-item class=\"nowrap\">\n          Item with a truncated headline and supporting text.\n          <div slot=\"supporting-text\"> Supporting text. ${LOREM_IPSUM} </div>\n          ${getKnobContent(knobs)}\n        </md-item>\n\n        <md-item>\n          Item with clamped lines\n          <div slot=\"supporting-text\" class=\"clamp-lines\">\n            Supporting text that wraps up to two lines. ${LOREM_IPSUM}\n          </div>\n          ${getKnobContent(knobs, /* threeLines */ true)}\n        </md-item>\n\n        <md-item>\n          Item that always shows long wrapping text.\n          <div slot=\"supporting-text\"> Supporting text. ${LOREM_IPSUM} </div>\n          ${getKnobContent(knobs, /* threeLines */ true)}\n        </md-item>\n      </div>\n    `;\n  },\n};\n\nfunction getKnobContent(knobs: StoryKnobs, threeLines = false) {\n  const overline = knobs.overline\n    ? html`<div slot=\"overline\">${knobs.overline}</div>`\n    : nothing;\n\n  const classes = {\n    'align-start': threeLines,\n  };\n\n  const trailingText = knobs.trailingSupportingText\n    ? html`<div class=${classMap(classes)} slot=\"trailing-supporting-text\"\n        >${knobs.trailingSupportingText}</div\n      >`\n    : nothing;\n\n  const leadingIcon = knobs.leadingIcon\n    ? html`<md-icon class=${classMap(classes)} slot=\"start\">event</md-icon>`\n    : nothing;\n\n  const trailingIcon = knobs.trailingIcon\n    ? html`<md-icon class=${classMap(classes)} slot=\"end\">star</md-icon>`\n    : nothing;\n\n  return [overline, trailingText, leadingIcon, trailingIcon];\n}\n\n/** Item stories. */\nexport const stories = [items, longText];\n"
  },
  {
    "path": "labs/item/internal/_item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../tokens';\n// go/keep-sorted end\n\n/// `<md-item>` does not provide `--md-item-*` custom properties. Instead, use\n/// CSS on slotted elements to change their styles.\n///\n/// @example css\n///   md-item {\n///     color: var(--headline-color);\n///     font: var(--headline-font);\n///   }\n///   md-item [slot='supporting-text'] {\n///     color: var(--supporting-text-color);\n///     font: var(--supporting-text-font);\n///   }\n///   // ...\n///\n@mixin styles() {\n  $tokens: tokens.md-comp-item-values();\n\n  :host {\n    color: map.get($tokens, 'label-text-color');\n    font-family: map.get($tokens, 'label-text-font');\n    font-size: map.get($tokens, 'label-text-size');\n    font-weight: map.get($tokens, 'label-text-weight');\n    line-height: map.get($tokens, 'label-text-line-height');\n    align-items: center;\n    box-sizing: border-box;\n    display: flex;\n    gap: 16px;\n    min-height: 56px;\n    overflow: hidden;\n    padding: 12px 16px;\n    position: relative;\n    text-overflow: ellipsis;\n  }\n\n  :host([multiline]) {\n    min-height: 72px;\n  }\n\n  [name='overline'] {\n    color: map.get($tokens, 'overline-color');\n    font-family: map.get($tokens, 'overline-font');\n    font-size: map.get($tokens, 'overline-size');\n    font-weight: map.get($tokens, 'overline-weight');\n    line-height: map.get($tokens, 'overline-line-height');\n  }\n\n  [name='supporting-text'] {\n    color: map.get($tokens, 'supporting-text-color');\n    font-family: map.get($tokens, 'supporting-text-font');\n    font-size: map.get($tokens, 'supporting-text-size');\n    font-weight: map.get($tokens, 'supporting-text-weight');\n    line-height: map.get($tokens, 'supporting-text-line-height');\n  }\n\n  [name='trailing-supporting-text'] {\n    color: map.get($tokens, 'trailing-supporting-text-color');\n    font-family: map.get($tokens, 'trailing-supporting-text-font');\n    font-size: map.get($tokens, 'trailing-supporting-text-size');\n    font-weight: map.get($tokens, 'trailing-supporting-text-weight');\n    line-height: map.get($tokens, 'trailing-supporting-text-line-height');\n  }\n\n  // A slot for background container elements, such as ripples and focus rings.\n  [name='container']::slotted(*) {\n    inset: 0;\n    position: absolute;\n  }\n\n  .default-slot {\n    // Needed since the default slot can have just text content, and ellipsis\n    // need an inline display.\n    display: inline;\n  }\n\n  .default-slot,\n  .text ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .text {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: hidden;\n  }\n}\n"
  },
  {
    "path": "labs/item/internal/item-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './item';\n// go/keep-sorted end\n\n@include item.styles;\n"
  },
  {
    "path": "labs/item/internal/item.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property, queryAll} from 'lit/decorators.js';\n\n/**\n * An item layout component.\n */\nexport class Item extends LitElement {\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when an item has two lines to avoid a Flash Of Unstyled\n   * Content. This attribute is not needed for single line items or items with\n   * three or more lines.\n   */\n  @property({type: Boolean, reflect: true}) multiline = false;\n\n  @queryAll('.text slot') private readonly textSlots!: HTMLSlotElement[];\n\n  override render() {\n    return html`\n      <slot name=\"container\"></slot>\n      <slot class=\"non-text\" name=\"start\"></slot>\n      <div class=\"text\">\n        <slot name=\"overline\" @slotchange=${this.handleTextSlotChange}></slot>\n        <slot\n          class=\"default-slot\"\n          @slotchange=${this.handleTextSlotChange}></slot>\n        <slot name=\"headline\" @slotchange=${this.handleTextSlotChange}></slot>\n        <slot\n          name=\"supporting-text\"\n          @slotchange=${this.handleTextSlotChange}></slot>\n      </div>\n      <slot class=\"non-text\" name=\"trailing-supporting-text\"></slot>\n      <slot class=\"non-text\" name=\"end\"></slot>\n    `;\n  }\n\n  private handleTextSlotChange() {\n    // Check if there's more than one text slot with content. If so, the item is\n    // multiline, which has a different min-height than single line items.\n    let isMultiline = false;\n    let slotsWithContent = 0;\n    for (const slot of this.textSlots) {\n      if (slotHasContent(slot)) {\n        slotsWithContent += 1;\n      }\n\n      if (slotsWithContent > 1) {\n        isMultiline = true;\n        break;\n      }\n    }\n\n    this.multiline = isMultiline;\n  }\n}\n\nfunction slotHasContent(slot: HTMLSlotElement) {\n  for (const node of slot.assignedNodes({flatten: true})) {\n    // Assume there's content if there's an element slotted in\n    const isElement = node.nodeType === Node.ELEMENT_NODE;\n    // If there's only text nodes for the default slot, check if there's\n    // non-whitespace.\n    const isTextWithContent =\n      node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\\S/);\n    if (isElement || isTextWithContent) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"
  },
  {
    "path": "labs/item/item.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Item} from './internal/item.js';\nimport {styles} from './internal/item-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-item': MdItem;\n  }\n}\n\n/**\n * An item layout component that can be used inside list items to give them\n * their customizable structure.\n *\n * `<md-item>` does not have any functionality, which must be added by the\n * component using it.\n *\n * All text will wrap unless `white-space: nowrap` is set on the item or any of\n * its children.\n *\n * Slots available:\n * - `<default>`: The headline, or custom content.\n * - `headline`: The first line.\n * - `supporting-text`: Supporting text lines underneath the headline.\n * - `trailing-supporting-text`: A small text snippet at the end of the item.\n * - `start`: Any leading content, such as icons, avatars, or checkboxes.\n * - `end`: Any trailing content, such as icons and buttons.\n * - `container`: Background container content, intended for adding additional\n *     styles, such as ripples or focus rings.\n *\n * @example\n * ```html\n * <md-item>Single line</md-item>\n *\n * <md-item>\n *   <div class=\"custom-content\">...</div>\n * </md-item>\n *\n * <!-- Classic 1 to 3+ line list items -->\n * <md-item>\n *   <md-icon slot=\"start\">image</md-icon>\n *   <div slot=\"overline\">Overline</div>\n *   <div slot=\"headline\">Headline</div>\n *   <div=\"supporting-text\">Supporting text</div>\n *   <div=\"trailing-supporting-text\">Trailing</div>\n *   <md-icon slot=\"end\">image</md-icon>\n * </md-item>\n * ```\n *\n * When wrapping `<md-item>`, forward the available slots to use the same slot\n * structure for the wrapping component (this is what `<md-list-item>` does).\n *\n * @example\n * ```html\n * <md-item>\n *   <slot></slot>\n *   <slot name=\"overline\" slot=\"overline\"></slot>\n *   <slot name=\"headline\" slot=\"headline\"></slot>\n *   <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n *   <slot name=\"trailing-supporting-text\"\n *       slot=\"trailing-supporting-text\"></slot>\n *   <slot name=\"start\" slot=\"start\"></slot>\n *   <slot name=\"end\" slot=\"end\"></slot>\n * </md-item>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-item')\nexport class MdItem extends Item {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "labs/navigationbar/_navigation-bar.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/navigation-bar' show theme;\n"
  },
  {
    "path": "labs/navigationbar/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Navigation Bar',\n  [\n    new Knob('hideInactiveLabels', {ui: boolInput(), defaultValue: false}),\n    new Knob('label', {ui: textInput(), defaultValue: 'Label'}),\n    new Knob('showBadge', {ui: boolInput(), defaultValue: false}),\n    new Knob('badgeValue', {ui: textInput(), defaultValue: ''}),\n    new Knob('active icon', {ui: textInput(), defaultValue: 'star'}),\n    new Knob('inactive icon', {ui: textInput(), defaultValue: 'star_border'}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {icons: 'material-icons'});\n"
  },
  {
    "path": "labs/navigationbar/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "labs/navigationbar/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/labs/navigationbar/navigation-bar.js';\nimport '@material/web/labs/navigationtab/navigation-tab.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for nav bar stories. */\nexport interface StoryKnobs {\n  hideInactiveLabels: boolean;\n  label: string;\n  showBadge: boolean;\n  badgeValue: string;\n  'active icon': string;\n  'inactive icon': string;\n}\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: '<md-navigation-bar>',\n  styles: css`\n    :host {\n      /* Material Symbols does not include filled star. */\n      --md-icon-font: 'Material Icons';\n    }\n  `,\n  render(knobs) {\n    const {hideInactiveLabels, label, showBadge, badgeValue} = knobs;\n    return html` <div style=\"width:400px\">\n      <md-navigation-bar\n        activeIndex=\"1\"\n        .hideInactiveLabels=${hideInactiveLabels}>\n        <md-navigation-tab\n          .label=${label}\n          .showBadge=${showBadge}\n          .badgeValue=${badgeValue}>\n          <md-icon slot=\"active-icon\">${knobs['active icon']}</md-icon>\n          <md-icon slot=\"inactive-icon\">${knobs['inactive icon']}</md-icon>\n        </md-navigation-tab>\n\n        <md-navigation-tab\n          .label=${label}\n          .showBadge=${showBadge}\n          .badgeValue=${badgeValue}>\n          <md-icon slot=\"active-icon\">${knobs['active icon']}</md-icon>\n          <md-icon slot=\"inactive-icon\">${knobs['inactive icon']}</md-icon>\n        </md-navigation-tab>\n\n        <md-navigation-tab\n          .label=${label}\n          .showBadge=${showBadge}\n          .badgeValue=${badgeValue}>\n          <md-icon slot=\"active-icon\">${knobs['active icon']}</md-icon>\n          <md-icon slot=\"inactive-icon\">${knobs['inactive icon']}</md-icon>\n        </md-navigation-tab>\n\n        <md-navigation-tab\n          .label=${label}\n          .showBadge=${showBadge}\n          .badgeValue=${badgeValue}>\n          <md-icon slot=\"active-icon\">${knobs['active icon']}</md-icon>\n          <md-icon slot=\"inactive-icon\">${knobs['inactive icon']}</md-icon>\n        </md-navigation-tab>\n      </md-navigation-bar>\n    </div>`;\n  },\n};\n\n/** Nav Bar stories. */\nexport const stories = [standard];\n"
  },
  {
    "path": "labs/navigationbar/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../../testing/harness.js';\nimport {NavigationTabHarness} from '../navigationtab/harness.js';\n\nimport {NavigationBar} from './internal/navigation-bar.js';\n\n/**\n * Test harness for navigation bars.\n */\nexport class NavigationBarHarness extends Harness<NavigationBar> {\n  readonly tab = this.getTab();\n\n  /**\n   * Returns the active tab to be used for interaction simulation.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.tab).getInteractiveElement();\n  }\n\n  protected async getTab() {\n    await this.element.updateComplete;\n    const tab = this.element.tabs[this.element.activeIndex];\n    return new NavigationTabHarness(tab);\n  }\n}\n"
  },
  {
    "path": "labs/navigationbar/internal/_navigation-bar.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../elevation/elevation';\n@use '../../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n\n@mixin theme($tokens) {\n  // $supported-tokens: tokens.$md-comp-navigation-bar-supported-tokens;\n\n  @each $token, $value in $tokens {\n    // @if list.index($supported-tokens, $token) == null {\n    //   @error 'Token `#{$token}` is not a supported token.';\n    // }\n\n    @if $value {\n      --md-navigation-bar-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-navigation-bar-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    @include elevation.theme(\n      (\n        'level': var(--_container-elevation),\n        'shadow-color': var(--_container-shadow-color),\n      )\n    );\n\n    width: 100%;\n  }\n\n  .md3-navigation-bar {\n    display: flex;\n    position: relative;\n    width: 100%;\n    background-color: var(--_container-color);\n    border-radius: var(--_container-shape);\n    height: var(--_container-height);\n\n    .md3-navigation-bar__tabs-slot-container {\n      display: inherit;\n      width: inherit;\n    }\n  }\n\n  md-elevation {\n    transition-duration: 280ms;\n    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');\n    z-index: 0;\n  }\n}\n"
  },
  {
    "path": "labs/navigationbar/internal/constants.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavigationTabState} from '../../navigationtab/internal/state.js';\n\n/**\n * MDCNavigationTabInteractionEventDetail provides details for the interaction\n * event.\n */\nexport interface MDCNavigationTabInteractionEventDetail {\n  state: NavigationTabState;\n}\n\n/**\n * NavigationTabInteractionEvent is the custom event for the interaction event.\n */\nexport type NavigationTabInteractionEvent =\n  CustomEvent<MDCNavigationTabInteractionEventDetail>;\n"
  },
  {
    "path": "labs/navigationbar/internal/navigation-bar-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './navigation-bar';\n// go/keep-sorted end\n\n@include navigation-bar.styles;\n"
  },
  {
    "path": "labs/navigationbar/internal/navigation-bar.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {isRtl} from '../../../internal/controller/is-rtl.js';\nimport {NavigationTab} from '../../navigationtab/internal/navigation-tab.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n// Separate variable needed for closure.\nconst navigationBarBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}\n * Dispatched whenever the `activeIndex` changes. --bubbles --composed\n */\nexport class NavigationBar\n  extends navigationBarBaseClass\n  implements NavigationBarState\n{\n  @property({type: Number, attribute: 'active-index'}) activeIndex = 0;\n\n  @property({type: Boolean, attribute: 'hide-inactive-labels'})\n  hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  private readonly tabsElement!: NavigationTab[];\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      class=\"md3-navigation-bar\"\n      role=\"tablist\"\n      aria-label=${ariaLabel || nothing}\n      @keydown=\"${this.handleKeydown}\"\n      @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n      @navigation-tab-rendered=${this.handleNavigationTabConnected}\n      ><md-elevation part=\"elevation\"></md-elevation\n      ><div class=\"md3-navigation-bar__tabs-slot-container\"><slot></slot></div\n    ></div>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues<NavigationBar>) {\n    if (changedProperties.has('activeIndex')) {\n      this.onActiveIndexChange(this.activeIndex);\n      this.dispatchEvent(\n        new CustomEvent('navigation-bar-activated', {\n          detail: {\n            tab: this.tabs[this.activeIndex],\n            activeIndex: this.activeIndex,\n          },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n\n    if (changedProperties.has('hideInactiveLabels')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    }\n\n    if (changedProperties.has('tabs')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n      this.onActiveIndexChange(this.activeIndex);\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.matches(':focus-within');\n    });\n    const isRTL = isRtl(this);\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === 'Enter' || key === ' ') {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === 'Home') {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === 'End') {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab =\n      (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab =\n      (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"
  },
  {
    "path": "labs/navigationbar/internal/state.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavigationTabState} from '../../navigationtab/internal/state.js';\n\n/**\n * The state of a navigation Bar.\n */\nexport interface NavigationBarState {\n  /**\n   * Index of the active navigation tab.\n   */\n  activeIndex: number;\n  /**\n   * If true, inactive navigation tabs will hide their label.\n   */\n  hideInactiveLabels: boolean;\n  /**\n   * An array of the navigation tab states.\n   */\n  tabs: NavigationTabState[];\n}\n"
  },
  {
    "path": "labs/navigationbar/md-navigation-bar_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {NavigationTabHarness} from '../navigationtab/harness.js';\nimport {MdNavigationTab} from '../navigationtab/navigation-tab.js';\n\nimport {NavigationBarHarness} from './harness.js';\nimport {MdNavigationBar} from './navigation-bar.js';\n\n@customElement('md-test-navigation-bar')\nclass TestMdNavigationBar extends MdNavigationBar {}\n@customElement('md-test-navigation-bar-tab')\nclass TestMdNavigationTab extends MdNavigationTab {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-test-navigation-bar': TestMdNavigationBar;\n    'md-test-navigation-bar-tab': TestMdNavigationTab;\n  }\n}\n\ninterface NavigationBarProps {\n  activeIndex: number;\n  hideInactiveLabels: boolean;\n  ariaLabel?: string;\n}\n\nconst defaultNavBar = html`\n  <md-test-navigation-bar>\n    <md-test-navigation-bar-tab label=\"One\"></md-test-navigation-bar-tab>\n  </md-test-navigation-bar>\n`;\n\nconst navBarWithNavTabsElement = (propsInit: Partial<NavigationBarProps>) => {\n  return html`\n    <md-test-navigation-bar\n      .activeIndex=\"${propsInit.activeIndex ?? 0}\"\n      .hideInactiveLabels=\"${propsInit.hideInactiveLabels === true}\"\n      aria-label=\"${ifDefined(propsInit.ariaLabel)}\">\n      <md-test-navigation-bar-tab label=\"One\"></md-test-navigation-bar-tab>\n      <md-test-navigation-bar-tab label=\"Two\"></md-test-navigation-bar-tab>\n    </md-test-navigation-bar>\n  `;\n};\n\n// The following is a Navbar with the tabs being out of sync with the bar.\nconst navBarWithIncorrectTabsElement = html` <md-test-navigation-bar\n  activeIndex=\"0\">\n  <md-test-navigation-bar-tab\n    label=\"One\"\n    hideInactiveLabel></md-test-navigation-bar-tab>\n  <md-test-navigation-bar-tab label=\"One\" active></md-test-navigation-bar-tab>\n</md-test-navigation-bar>`;\n\ndescribe('md-navigation-bar', () => {\n  const env = new Environment();\n\n  async function setupTest(template = defaultNavBar) {\n    const element = env\n      .render(template)\n      .querySelector('md-test-navigation-bar');\n    if (!element) {\n      throw new Error('Could not query rendered <md-test-navigation-bar>.');\n    }\n\n    await env.waitForStability();\n\n    return {\n      harness: new NavigationBarHarness(element),\n    };\n  }\n\n  describe('basic', () => {\n    it('initializes as a md-navigation-bar', async () => {\n      const {harness} = await setupTest();\n      const navBarBase = harness.element.shadowRoot!.querySelector(\n        '.md3-navigation-bar',\n      )!;\n      expect(harness.element).toBeInstanceOf(MdNavigationBar);\n      expect(harness.element.activeIndex).toEqual(0);\n      expect(harness.element.hideInactiveLabels).toBeFalse();\n      expect(navBarBase.getAttribute('aria-label')).toEqual(null);\n    });\n  });\n\n  describe('activeIndex', () => {\n    it('on change emits activated event', async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({activeIndex: 1}),\n      );\n      const activatedHandler = jasmine.createSpy();\n      harness.element.addEventListener(\n        'navigation-bar-activated',\n        activatedHandler,\n      );\n      harness.element.activeIndex = 0;\n      await env.waitForStability();\n      expect(activatedHandler).toHaveBeenCalled();\n    });\n\n    it('activated event detail contains the tab and activeIndex', async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({activeIndex: 1}),\n      );\n      const navigationBarActivatedSpy = jasmine.createSpy(\n        'navigationBarActivated',\n      );\n      harness.element.addEventListener(\n        'navigation-bar-activated',\n        navigationBarActivatedSpy,\n      );\n\n      const tab = harness.element.tabs[0];\n      harness.element.activeIndex = 0;\n\n      await env.waitForStability();\n      expect(navigationBarActivatedSpy).toHaveBeenCalledWith(\n        jasmine.any(CustomEvent),\n      );\n      expect(navigationBarActivatedSpy).toHaveBeenCalledWith(\n        jasmine.objectContaining({\n          detail: jasmine.objectContaining({tab, activeIndex: 0}),\n        }),\n      );\n    });\n\n    it('#handleNavigationTabInteraction () updates on navigation tab click', async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({activeIndex: 1}),\n      );\n      const tab1Harness = new NavigationTabHarness(harness.element.tabs[0]);\n      const tab2Harness = new NavigationTabHarness(harness.element.tabs[1]);\n\n      await tab1Harness.clickWithMouse();\n      expect(harness.element.activeIndex).toEqual(0);\n      await tab2Harness.clickWithMouse();\n      expect(harness.element.activeIndex).toEqual(1);\n    });\n\n    it('#onActiveIndexChange() sets tab at activeIndex to active', async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({activeIndex: 1}),\n      );\n      const tab = harness.element.tabs[0];\n      expect(tab.active).toBeFalse();\n      harness.element.activeIndex = 0;\n      harness.element.requestUpdate();\n      await env.waitForStability();\n      expect(tab.active).toBeTrue();\n    });\n\n    it('#onActiveIndexChange() sets previously active tab to inactive', async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({activeIndex: 1}),\n      );\n      const tab = harness.element.tabs[1];\n      expect(tab.active).toBeTrue();\n      harness.element.activeIndex = 0;\n      harness.element.requestUpdate();\n      await env.waitForStability();\n      expect(tab.active).toBeFalse();\n    });\n  });\n\n  describe('hideInactiveLabels', () => {\n    it('#onHideInactiveLabelsChange() affects navigation tabs hideInactiveLabel state', async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({hideInactiveLabels: true}),\n      );\n      const tab1 = harness.element.tabs[0];\n      const tab2 = harness.element.tabs[1];\n      expect(tab1.hideInactiveLabel).toBeTrue();\n      expect(tab2.hideInactiveLabel).toBeTrue();\n      harness.element.hideInactiveLabels = false;\n      harness.element.requestUpdate();\n      await env.waitForStability();\n      expect(tab1.hideInactiveLabel).toBeFalse();\n      expect(tab2.hideInactiveLabel).toBeFalse();\n    });\n  });\n\n  describe('aria-label', () => {\n    it('sets the root aria-label property', async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({ariaLabel: 'foo'}),\n      );\n      const navBarBase = harness.element.shadowRoot!.querySelector(\n        '.md3-navigation-bar',\n      )!;\n      expect(navBarBase.getAttribute('aria-label')).toEqual('foo');\n    });\n  });\n\n  describe('#onTabsChange()', () => {\n    it(\n      \"syncs tabs' hideInactiveLabel state with the navigation bar's \" +\n        'hideInactiveLabels state',\n      async () => {\n        const {harness} = await setupTest(navBarWithIncorrectTabsElement);\n        const tab1 = harness.element.tabs[0];\n        const tab2 = harness.element.tabs[1];\n        expect(harness.element.hideInactiveLabels).toBeFalse();\n        expect(tab1.hideInactiveLabel).toBeFalse();\n        expect(tab2.hideInactiveLabel).toBeFalse();\n      },\n    );\n\n    it(\"syncs tabs' active state with the navigation bar's activeIndex state\", async () => {\n      const {harness} = await setupTest(navBarWithIncorrectTabsElement);\n      const tab1 = harness.element.tabs[0];\n      const tab2 = harness.element.tabs[1];\n      expect(harness.element.activeIndex).toBe(0);\n      expect(tab1.active).toBeTrue();\n      expect(tab2.active).toBeFalse();\n    });\n  });\n\n  describe('#handleKeydown', () => {\n    let element: MdNavigationBar;\n    let bar: HTMLElement;\n    let tab1: HTMLElement;\n    let tab2: HTMLElement;\n\n    beforeEach(async () => {\n      const {harness} = await setupTest(\n        navBarWithNavTabsElement({activeIndex: 0}),\n      );\n      element = harness.element;\n      bar = harness.element.shadowRoot!.querySelector('.md3-navigation-bar')!;\n      tab1 = harness.element.children[0] as HTMLElement;\n      tab2 = harness.element.children[1] as HTMLElement;\n    });\n\n    it('(Enter) activates the focused tab', async () => {\n      const eventRight = new KeyboardEvent('keydown', {\n        key: 'ArrowRight',\n        bubbles: true,\n      });\n      const eventEnter = new KeyboardEvent('keydown', {\n        key: 'Enter',\n        bubbles: true,\n      });\n      tab1.focus();\n      expect(element.activeIndex).toBe(0);\n      bar.dispatchEvent(eventRight);\n      bar.dispatchEvent(eventEnter);\n      element.requestUpdate();\n      await env.waitForStability();\n      expect(element.activeIndex).toBe(1);\n    });\n\n    it('(Spacebar) activates the focused tab', async () => {\n      const eventRight = new KeyboardEvent('keydown', {\n        key: 'ArrowRight',\n        bubbles: true,\n      });\n      const eventSpacebar = new KeyboardEvent('keydown', {\n        key: ' ',\n        bubbles: true,\n      });\n      tab1.focus();\n      expect(element.activeIndex).toBe(0);\n      bar.dispatchEvent(eventRight);\n      bar.dispatchEvent(eventSpacebar);\n      element.requestUpdate();\n      await env.waitForStability();\n      expect(element.activeIndex).toBe(1);\n    });\n\n    it('(Home) sets focus on the first tab', () => {\n      const event = new KeyboardEvent('keydown', {key: 'Home', bubbles: true});\n      tab2.focus();\n      expect(tab1.matches(':focus-within')).toBeFalse();\n      bar.dispatchEvent(event);\n      expect(tab1.matches(':focus-within')).toBeTrue();\n    });\n\n    it('(End) sets focus on the last tab', () => {\n      const event = new KeyboardEvent('keydown', {key: 'End', bubbles: true});\n      bar.dispatchEvent(event);\n      expect(tab2.matches(':focus-within')).toBeTrue();\n    });\n\n    describe('(ArrowLeft)', () => {\n      // Use the same key for all tests\n      const key = 'ArrowLeft';\n\n      it(`sets focus on previous tab`, () => {\n        const event = new KeyboardEvent('keydown', {key, bubbles: true});\n        tab2.focus();\n        bar.dispatchEvent(event);\n        expect(tab1.matches(':focus-within')).toBeTrue();\n      });\n\n      it(`sets focus to last tab when focus is on the first tab`, () => {\n        const event = new KeyboardEvent('keydown', {key, bubbles: true});\n        tab1.focus();\n        bar.dispatchEvent(event);\n        expect(tab2.matches(':focus-within')).toBeTrue();\n      });\n\n      it(`sets focus on next tab in RTL`, () => {\n        document.body.style.direction = 'rtl';\n        const event = new KeyboardEvent('keydown', {key, bubbles: true});\n        tab1.focus();\n        bar.dispatchEvent(event);\n        expect(tab2.matches(':focus-within')).toBeTrue();\n      });\n    });\n\n    describe('(ArrowRight)', () => {\n      // Use the same key for all tests\n      const key = 'ArrowRight';\n\n      it(`sets focus on next tab`, () => {\n        const event = new KeyboardEvent('keydown', {key, bubbles: true});\n        tab1.focus();\n        bar.dispatchEvent(event);\n        expect(tab2.matches(':focus-within')).toBeTrue();\n      });\n\n      it(`sets focus to first tab when focus is on the last tab`, () => {\n        const event = new KeyboardEvent('keydown', {key, bubbles: true});\n        tab2.focus();\n        bar.dispatchEvent(event);\n        expect(tab1.matches(':focus-within')).toBeTrue();\n      });\n\n      it(`sets focus on previous tab in RTL`, () => {\n        document.body.style.direction = 'rtl';\n        const event = new KeyboardEvent('keydown', {key, bubbles: true});\n        tab2.focus();\n        bar.dispatchEvent(event);\n        expect(tab1.matches(':focus-within')).toBeTrue();\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "labs/navigationbar/navigation-bar.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationBar} from './internal/navigation-bar.js';\nimport {styles} from './internal/navigation-bar-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-bar': MdNavigationBar;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-bar')\nexport class MdNavigationBar extends NavigationBar {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "labs/navigationdrawer/_navigation-drawer-modal.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/navigation-drawer-modal' show theme;\n"
  },
  {
    "path": "labs/navigationdrawer/_navigation-drawer.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/navigation-drawer' show theme;\n"
  },
  {
    "path": "labs/navigationdrawer/internal/_navigation-drawer-modal.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../elevation/elevation';\n@use '../../../internal/motion/animation';\n// go/keep-sorted end\n\n$_curve: animation.$standard-easing;\n$_delay: 0s;\n$_transition-duration: 0.25s;\n\n$_reference: (\n  'container-color': #fff,\n  'container-height': 100%,\n  'container-shape': 0 16px 16px 0,\n  'container-width': 360px,\n  // b/216384393 - Temporary existing token to use for shadow color\n  'divider-color': #000,\n  'modal-container-elevation': 1,\n  'scrim-color': null,\n  'scrim-opacity': 0.04,\n  'standard-container-elevation': 0,\n);\n\n@mixin theme($tokens) {\n  // $supported-tokens: tokens.$md-comp-navigation-drawer-modal-supported-tokens;\n\n  @each $token, $value in $tokens {\n    // @if list.index($supported-tokens, $token) == null {\n    //   @error 'Token `#{$token}` is not a supported token.';\n    // }\n\n    @if $value {\n      --md-navigation-drawer-modal-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: $_reference;\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: var(--md-navigation-drawer-modal-#{$token}, #{$value});\n    }\n\n    @include elevation.theme(\n      (\n        'level': var(--_modal-container-elevation),\n      )\n    );\n  }\n\n  .md3-navigation-drawer-modal {\n    bottom: 0;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: flex-end;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    inline-size: 0;\n\n    transition: inline-size $_transition-duration $_curve $_delay,\n      visibility $_delay $_curve $_transition-duration;\n  }\n\n  .md3-navigation-drawer-modal--opened {\n    transition: inline-size $_transition-duration $_curve $_delay,\n      visibility $_delay $_curve $_delay;\n  }\n\n  .md3-navigation-drawer-modal--pivot-at-start {\n    justify-content: flex-start;\n  }\n\n  .md3-navigation-drawer-modal__slot-content {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n\n  .md3-navigation-drawer-modal__scrim {\n    inset: 0;\n    opacity: 0;\n    position: absolute;\n    visibility: hidden;\n    background-color: var(--_scrim-color);\n\n    transition: opacity $_transition-duration $_curve $_delay,\n      visibility $_delay $_curve $_transition-duration;\n  }\n\n  .md3-navigation-drawer-modal--scrim-visible {\n    visibility: visible;\n    opacity: var(--_scrim-opacity);\n\n    transition: opacity $_transition-duration $_curve $_delay,\n      visibility $_delay $_curve $_delay;\n  }\n}\n"
  },
  {
    "path": "labs/navigationdrawer/internal/_navigation-drawer.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use '../../../elevation/elevation';\n@use '../../../internal/motion/animation';\n// go/keep-sorted end\n\n$curve: animation.$standard-easing;\n$default: 0s;\n$delay: 0s;\n$transition-duration: 0.25s;\n\n$_reference: (\n  'container-color': #fff,\n  'container-height': 100%,\n  'container-shape': 0 16px 16px 0,\n  'container-width': 360px,\n  // b/216384393 - Temporary existing token to use for shadow color\n  'divider-color': #000,\n  'modal-container-elevation': 1,\n  'standard-container-elevation': 0,\n);\n\n@mixin theme($tokens) {\n  // $supported-tokens: tokens.$md-comp-navigation-drawer-supported-tokens;\n\n  @each $token, $value in $tokens {\n    // @if list.index($supported-tokens, $token) == null {\n    //   @error 'Token `#{$token}` is not a supported token.';\n    // }\n\n    @if $value {\n      --md-navigation-drawer-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: $_reference;\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: var(--md-navigation-drawer-#{$token}, #{$value});\n    }\n\n    @include elevation.theme(\n      (\n        'level': var(--_standard-container-elevation),\n        'shadow-color': var(--_divider-color),\n      )\n    );\n  }\n\n  :host {\n    display: flex;\n  }\n\n  .md3-navigation-drawer {\n    inline-size: 0;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: flex-end;\n    overflow: hidden;\n    overflow-y: auto;\n    visibility: hidden;\n\n    transition: inline-size $transition-duration $curve $delay,\n      visibility $default $curve $transition-duration;\n  }\n\n  md-elevation {\n    z-index: 0;\n  }\n\n  .md3-navigation-drawer--opened {\n    visibility: visible;\n\n    transition: inline-size $transition-duration $curve $delay,\n      visibility $default $curve $default;\n  }\n\n  .md3-navigation-drawer--pivot-at-start {\n    justify-content: flex-start;\n  }\n\n  .md3-navigation-drawer__slot-content {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n}\n"
  },
  {
    "path": "labs/navigationdrawer/internal/_shared.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n\n@mixin styles() {\n  .md3-navigation-drawer-modal,\n  .md3-navigation-drawer {\n    background-color: var(--_container-color);\n    border-radius: var(--_container-shape);\n    height: var(--_container-height);\n  }\n\n  .md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened,\n  .md3-navigation-drawer.md3-navigation-drawer--opened {\n    inline-size: var(--_container-width);\n  }\n\n  .md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content,\n  .md3-navigation-drawer .md3-navigation-drawer__slot-content {\n    min-inline-size: var(--_container-width);\n    max-inline-size: var(--_container-width);\n  }\n}\n"
  },
  {
    "path": "labs/navigationdrawer/internal/navigation-drawer-modal-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './navigation-drawer-modal';\n// go/keep-sorted end\n\n@include navigation-drawer-modal.styles;\n"
  },
  {
    "path": "labs/navigationdrawer/internal/navigation-drawer-modal.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\n\n// Separate variable needed for closure.\nconst navigationDrawerModalBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}\n * Dispatched whenever the drawer opens or closes --bubbles --composed\n */\nexport class NavigationDrawerModal extends navigationDrawerModalBaseClass {\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start' | 'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n        @click=\"${this.handleScrimClick}\">\n      </div>\n      <div\n        aria-expanded=${ariaExpanded}\n        aria-hidden=${ariaHidden}\n        aria-label=${ariaLabel || nothing}\n        aria-modal=${ariaModal || nothing}\n        class=\"md3-navigation-drawer-modal ${this.getRenderClasses()}\"\n        @keydown=\"${this.handleKeyDown}\"\n        role=\"dialog\"\n        ><div class=\"md3-elevation-overlay\"></div>\n        <div class=\"md3-navigation-drawer-modal__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  private getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(\n    changedProperties: PropertyValues<NavigationDrawerModal>,\n  ) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(\n          new CustomEvent('navigation-drawer-changed', {\n            detail: {opened: this.opened},\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }, 250);\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"
  },
  {
    "path": "labs/navigationdrawer/internal/navigation-drawer-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './navigation-drawer';\n// go/keep-sorted end\n\n@include navigation-drawer.styles;\n"
  },
  {
    "path": "labs/navigationdrawer/internal/navigation-drawer.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\n\n// Separate variable needed for closure.\nconst navigationDrawerBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}\n * Dispatched whenever the drawer opens or closes --bubbles --composed\n */\nexport class NavigationDrawer extends navigationDrawerBaseClass {\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start' | 'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        aria-expanded=\"${ariaExpanded}\"\n        aria-hidden=\"${ariaHidden}\"\n        aria-label=${ariaLabel || nothing}\n        aria-modal=\"${ariaModal || nothing}\"\n        class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n        role=\"dialog\">\n        <md-elevation part=\"elevation\"></md-elevation>\n        <div class=\"md3-navigation-drawer__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer--opened': this.opened,\n      'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(\n    changedProperties: PropertyValues<NavigationDrawer>,\n  ) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(\n          new CustomEvent('navigation-drawer-changed', {\n            detail: {opened: this.opened},\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }, 250);\n    }\n  }\n}\n"
  },
  {
    "path": "labs/navigationdrawer/internal/shared-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "labs/navigationdrawer/navigation-drawer-modal.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawerModal} from './internal/navigation-drawer-modal.js';\nimport {styles} from './internal/navigation-drawer-modal-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer-modal': MdNavigationDrawerModal;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer-modal')\nexport class MdNavigationDrawerModal extends NavigationDrawerModal {\n  static override readonly styles = [sharedStyles, styles];\n}\n"
  },
  {
    "path": "labs/navigationdrawer/navigation-drawer.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationDrawer} from './internal/navigation-drawer.js';\nimport {styles} from './internal/navigation-drawer-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-drawer': MdNavigationDrawer;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-drawer')\nexport class MdNavigationDrawer extends NavigationDrawer {\n  static override readonly styles = [sharedStyles, styles];\n}\n"
  },
  {
    "path": "labs/navigationtab/_navigation-tab.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/navigation-tab' show theme;\n"
  },
  {
    "path": "labs/navigationtab/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../../testing/harness.js';\n\nimport {NavigationTab} from './internal/navigation-tab.js';\n\n/**\n * Test harness for navigation tab elements.\n */\nexport class NavigationTabHarness extends Harness<NavigationTab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector(\n      '.md3-navigation-tab',\n    ) as HTMLElement;\n  }\n}\n"
  },
  {
    "path": "labs/navigationtab/internal/_navigation-tab.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../focus/focus-ring';\n@use '../../../internal/motion/animation';\n@use '../../../ripple/ripple';\n@use '../../../tokens';\n@use '../../badge/badge';\n// go/keep-sorted end\n\n$animation-duration: 100ms;\n\n@mixin theme($tokens) {\n  // $supported-tokens: tokens.$md-comp-navigation-bar-supported-tokens;\n\n  @each $token, $value in $tokens {\n    // @if list.index($supported-tokens, $token) == null {\n    //   @error 'Token `#{$token}` is not a supported token.';\n    // }\n\n    @if $value {\n      --md-navigation-bar-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-navigation-bar-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    display: flex;\n    flex-grow: 1;\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape': map.get(tokens.md-sys-shape-values(), 'corner-small'),\n        'inward-offset': -1px,\n      )\n    );\n  }\n\n  .md3-navigation-tab {\n    align-items: center;\n    appearance: none;\n    background: none;\n    border: none;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    justify-content: center;\n    min-height: 48px;\n    min-width: 48px;\n    outline: none;\n    padding: 8px 0px 12px;\n    position: relative;\n    text-align: center;\n    width: 100%;\n    font-family: var(--_label-text-font);\n    font-size: var(--_label-text-size);\n    line-height: var(--_label-text-line-height);\n    font-weight: var(--_label-text-weight);\n    // Override the user-agent text-transform: none of <button>\n    text-transform: inherit;\n\n    // Firefox draws a dotted border around focused buttons unless specifically overridden.\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  }\n\n  .md3-navigation-tab__icon-content {\n    align-items: center;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    position: relative;\n    z-index: 1;\n  }\n\n  .md3-navigation-tab__label-text {\n    height: 16px;\n    margin-top: 4px;\n    opacity: 1;\n    transition: animation.standard(opacity, $animation-duration),\n      animation.standard(height, $animation-duration);\n    z-index: 1;\n\n    .md3-navigation-tab--hide-inactive-label:not(.md3-navigation-tab--active)\n      & {\n      height: 0;\n      opacity: 0;\n    }\n  }\n\n  .md3-navigation-tab__active-indicator {\n    display: flex;\n    justify-content: center;\n    opacity: 0;\n    position: absolute;\n    transition: animation.standard(width, $animation-duration),\n      animation.standard(opacity, $animation-duration);\n    width: 32px;\n    background-color: var(--_active-indicator-color);\n    border-radius: var(--_active-indicator-shape);\n\n    .md3-navigation-tab--active & {\n      opacity: 1;\n    }\n  }\n\n  // Keep icon-content in sync with active-indicator size.\n  .md3-navigation-tab__active-indicator,\n  .md3-navigation-tab__icon-content {\n    height: var(--_active-indicator-height);\n  }\n\n  // Keep icon-content in sync with active-indicator size.\n  .md3-navigation-tab--active .md3-navigation-tab__active-indicator,\n  .md3-navigation-tab__icon-content {\n    width: var(--_active-indicator-width);\n  }\n\n  .md3-navigation-tab__icon {\n    fill: currentColor;\n    align-self: center;\n    display: inline-block;\n    position: relative;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    font-size: var(--_icon-size);\n\n    &.md3-navigation-tab__icon--active {\n      display: none;\n    }\n\n    .md3-navigation-tab--active & {\n      display: none;\n\n      &.md3-navigation-tab__icon--active {\n        display: inline-block;\n      }\n    }\n  }\n\n  .md3-navigation-tab__ripple {\n    z-index: 0;\n  }\n\n  .md3-navigation-tab--active {\n    .md3-navigation-tab__icon {\n      color: var(--_active-icon-color);\n    }\n\n    .md3-navigation-tab__label-text {\n      color: var(--_active-label-text-color);\n    }\n\n    &:hover {\n      .md3-navigation-tab__icon {\n        color: var(--_active-hover-icon-color);\n      }\n\n      .md3-navigation-tab__label-text {\n        color: var(--_active-hover-label-text-color);\n      }\n    }\n\n    &:focus {\n      .md3-navigation-tab__icon {\n        color: var(--_active-focus-icon-color);\n      }\n\n      .md3-navigation-tab__label-text {\n        color: var(--_active-focus-label-text-color);\n      }\n    }\n\n    &:active {\n      .md3-navigation-tab__icon {\n        color: var(--_active-pressed-icon-color);\n      }\n\n      .md3-navigation-tab__label-text {\n        color: var(--_active-pressed-label-text-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_active-hover-state-layer-color),\n        pressed-color: var(--_active-pressed-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  .md3-navigation-tab:not(.md3-navigation-tab--active) {\n    .md3-navigation-tab__icon {\n      color: var(--_inactive-icon-color);\n    }\n\n    .md3-navigation-tab__label-text {\n      color: var(--_inactive-label-text-color);\n    }\n\n    &:hover {\n      .md3-navigation-tab__icon {\n        color: var(--_inactive-hover-icon-color);\n      }\n\n      .md3-navigation-tab__label-text {\n        color: var(--_inactive-hover-label-text-color);\n      }\n    }\n\n    &:focus {\n      .md3-navigation-tab__icon {\n        color: var(--_inactive-focus-icon-color);\n      }\n\n      .md3-navigation-tab__label-text {\n        color: var(--_inactive-focus-label-text-color);\n      }\n    }\n\n    &:active {\n      .md3-navigation-tab__icon {\n        color: var(--_inactive-pressed-icon-color);\n      }\n\n      .md3-navigation-tab__label-text {\n        color: var(--_inactive-pressed-label-text-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_inactive-hover-state-layer-color),\n        pressed-color: var(--_inactive-pressed-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "labs/navigationtab/internal/navigation-tab-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './navigation-tab';\n// go/keep-sorted end\n\n@include navigation-tab.styles;\n"
  },
  {
    "path": "labs/navigationtab/internal/navigation-tab.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../ripple/ripple.js';\nimport '../../badge/badge.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\n\nimport {NavigationTabState} from './state.js';\n\n// Separate variable needed for closure.\nconst navigationTabBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-tab-rendered {Event} Dispatched when the navigation tab's\n * DOM has rendered and custom element definition has loaded. --bubbles\n * --composed\n * @fires navigation-tab-interaction {CustomEvent<{state: MdNavigationTab}>}\n * Dispatched when the navigation tab has been clicked. --bubbles --composed\n */\nexport class NavigationTab\n  extends navigationTabBaseClass\n  implements NavigationTabState\n{\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean, reflect: true}) active = false;\n  @property({type: Boolean, attribute: 'hide-inactive-label'})\n  hideInactiveLabel = false;\n  @property() label?: string;\n  @property({attribute: 'badge-value'}) badgeValue = '';\n  @property({type: Boolean, attribute: 'show-badge'}) showBadge = false;\n\n  @query('button') buttonElement!: HTMLElement | null;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html` <button\n      class=\"md3-navigation-tab ${classMap(this.getRenderClasses())}\"\n      role=\"tab\"\n      aria-selected=\"${this.active}\"\n      aria-label=${ariaLabel || nothing}\n      tabindex=\"${this.active ? 0 : -1}\"\n      @click=\"${this.handleClick}\">\n      <md-focus-ring part=\"focus-ring\" inward></md-focus-ring>\n      <md-ripple\n        ?disabled=\"${this.disabled}\"\n        class=\"md3-navigation-tab__ripple\"></md-ripple>\n      <span aria-hidden=\"true\" class=\"md3-navigation-tab__icon-content\"\n        ><span class=\"md3-navigation-tab__active-indicator\"></span\n        ><span class=\"md3-navigation-tab__icon\"\n          ><slot name=\"inactive-icon\"></slot\n        ></span>\n        <span class=\"md3-navigation-tab__icon md3-navigation-tab__icon--active\"\n          ><slot name=\"active-icon\"></slot></span\n        >${this.renderBadge()}</span\n      >${this.renderLabel()}\n    </button>`;\n  }\n\n  private getRenderClasses() {\n    return {\n      'md3-navigation-tab--hide-inactive-label': this.hideInactiveLabel,\n      'md3-navigation-tab--active': this.active,\n    };\n  }\n\n  private renderBadge() {\n    return this.showBadge\n      ? html`<md-badge .value=\"${this.badgeValue}\"></md-badge>`\n      : nothing;\n  }\n\n  private renderLabel() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    const ariaHidden = ariaLabel ? 'true' : 'false';\n    return !this.label\n      ? nothing\n      : html` <span\n          aria-hidden=\"${ariaHidden}\"\n          class=\"md3-navigation-tab__label-text\"\n          >${this.label}</span\n        >`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    const event = new Event('navigation-tab-rendered', {\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.blur();\n    }\n  }\n\n  handleClick() {\n    // b/269772145 - connect to ripple\n    this.dispatchEvent(\n      new CustomEvent('navigation-tab-interaction', {\n        detail: {state: this},\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n"
  },
  {
    "path": "labs/navigationtab/internal/state.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * The state of a navigation tab.\n */\nexport interface NavigationTabState {\n  /**\n   * Active state of the navigation tab.\n   */\n  active: boolean;\n  /**\n   * If true, when inactive label will be hidden.\n   */\n  hideInactiveLabel: boolean;\n}\n"
  },
  {
    "path": "labs/navigationtab/md-navigation-tab_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, render} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\n\nimport {NavigationTabHarness} from './harness.js';\nimport {MdNavigationTab} from './navigation-tab.js';\n\n@customElement('md-test-navigation-tab')\nclass TestNavigationTab extends MdNavigationTab {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-test-navigation-tab': TestNavigationTab;\n  }\n}\n\ndescribe('mwc-navigation-tab', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    // Variant type does not matter for shared tests\n    const element = env\n      .render(html`<md-test-navigation-tab></md-test-navigation-tab>`)\n      .querySelector('md-test-navigation-tab');\n    if (!element) {\n      throw new Error('Could not query rendered <md-test-navigation-tab>.');\n    }\n\n    await env.waitForStability();\n    const button = element.renderRoot.querySelector('button');\n    if (!button) {\n      throw new Error('Could not query rendered <button>.');\n    }\n\n    const navTab = element.renderRoot.querySelector('.md3-navigation-tab');\n    if (!navTab) {\n      throw new Error('Could not query rendered .md3-navigation-tab.');\n    }\n\n    return {\n      button,\n      navTab,\n      harness: new NavigationTabHarness(element),\n    };\n  }\n\n  describe('basic', () => {\n    it('initializes as an md-navigation-tab', async () => {\n      const {harness} = await setupTest();\n      expect(harness.element).toBeInstanceOf(MdNavigationTab);\n      expect(harness.element.active).toBeFalse();\n      expect(harness.element.hideInactiveLabel).toBeFalse();\n      expect(harness.element.label).toBeUndefined();\n      expect(harness.element.badgeValue).toEqual('');\n      expect(harness.element.showBadge).toBeFalse();\n    });\n\n    it('emits interaction event on click', async () => {\n      const {harness} = await setupTest();\n      const interactionHandler = jasmine.createSpy();\n      harness.element.addEventListener(\n        'navigation-tab-interaction',\n        interactionHandler,\n      );\n      await harness.clickWithMouse();\n      expect(interactionHandler).toHaveBeenCalled();\n    });\n\n    it('focus() sets focus on button element', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.focus();\n      expect(button.matches(':focus')).toBeTrue();\n    });\n  });\n\n  it('on render navigation-tab-rendered event fires', async () => {\n    const element = document.createElement('md-test-navigation-tab');\n    const renderedHandler = jasmine.createSpy();\n    element.addEventListener('navigation-tab-rendered', renderedHandler);\n    env.render(html`${element}`);\n    await env.waitForStability();\n    expect(renderedHandler).toHaveBeenCalled();\n  });\n\n  describe('active', () => {\n    it('affects `aria-selected` of native button', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.active = true;\n      await env.waitForStability();\n\n      expect(button.getAttribute('aria-selected')).toEqual('true');\n\n      harness.element.active = false;\n      await env.waitForStability();\n      expect(button.getAttribute('aria-selected')).toEqual('false');\n    });\n\n    it('affects `tabindex` of native button', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.active = true;\n      await env.waitForStability();\n\n      expect(button.getAttribute('tabindex')).toEqual('0');\n\n      harness.element.active = false;\n      await env.waitForStability();\n      expect(button.getAttribute('tabindex')).toEqual('-1');\n    });\n\n    it('sets the correct classes', async () => {\n      const {harness, navTab} = await setupTest();\n      harness.element.active = true;\n      await env.waitForStability();\n\n      expect(\n        navTab.classList.contains('md3-navigation-tab--active'),\n      ).toBeTrue();\n    });\n  });\n\n  describe('hideInactiveLabel', () => {\n    it('sets the correct classes', async () => {\n      const {harness, navTab} = await setupTest();\n      harness.element.hideInactiveLabel = true;\n      await env.waitForStability();\n\n      expect(\n        navTab.classList.contains('md3-navigation-tab--hide-inactive-label'),\n      ).toBeTrue();\n    });\n  });\n\n  describe('label', () => {\n    it('displays label text', async () => {\n      const {harness} = await setupTest();\n      harness.element.label = 'foo';\n      await env.waitForStability();\n\n      const content = harness.element.shadowRoot!.querySelector(\n        '.md3-navigation-tab__label-text',\n      )!;\n      expect(content.textContent!.trim()).toEqual('foo');\n    });\n  });\n\n  describe('ariaLabel', () => {\n    it('affects `aria-label` of native button', async () => {\n      const {harness, button} = await setupTest();\n      harness.element.label = 'foo';\n      harness.element.ariaLabel = 'bar';\n      await env.waitForStability();\n\n      expect(button.getAttribute('aria-label')).toEqual('bar');\n    });\n  });\n\n  describe('showBadge', () => {\n    it('displays badge', async () => {\n      const {harness} = await setupTest();\n      harness.element.showBadge = true;\n      await env.waitForStability();\n\n      const badge = harness.element.renderRoot.querySelector('md-badge');\n      expect(badge).toBeDefined();\n    });\n\n    it('does not display badge if showBadge is false', async () => {\n      const {harness} = await setupTest();\n      harness.element.showBadge = false;\n      await env.waitForStability();\n\n      const badge = harness.element.renderRoot.querySelector('md-badge');\n      expect(badge).toEqual(null);\n    });\n  });\n\n  describe('badgeValue', () => {\n    it('displays badge value', async () => {\n      const {harness} = await setupTest();\n      harness.element.showBadge = true;\n      harness.element.badgeValue = '9';\n      await env.waitForStability();\n\n      const badge = harness.element.renderRoot.querySelector('md-badge');\n      expect(badge?.value).toEqual('9');\n    });\n  });\n\n  describe('icons', () => {\n    it('nodes with `slot=active-icon` will serve as the active icon', async () => {\n      const {harness} = await setupTest();\n      const icons = html`\n        <i slot=\"active-icon\" class=\"material-icons\">star</i>\n        <i slot=\"inactive-icon\" class=\"material-icons\">star_border</i>\n      `;\n      render(icons, harness.element);\n\n      const icon = harness.element.querySelector<HTMLElement>(\n        '[slot=\"active-icon\"]',\n      )!;\n      expect(icon.textContent!.trim()).toEqual('star');\n    });\n\n    it('nodes with `slot=inactive-icon` will serve as the inactive icon', async () => {\n      const {harness} = await setupTest();\n      const icons = html`\n        <i slot=\"active-icon\" class=\"material-icons\">star</i>\n        <i slot=\"inactive-icon\" class=\"material-icons\">star_border</i>\n      `;\n      render(icons, harness.element);\n\n      const icon = harness.element.querySelector<HTMLElement>(\n        '[slot=\"inactive-icon\"]',\n      )!;\n      expect(icon.textContent!.trim()).toEqual('star_border');\n    });\n  });\n});\n"
  },
  {
    "path": "labs/navigationtab/navigation-tab.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationTab} from './internal/navigation-tab.js';\nimport {styles} from './internal/navigation-tab-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-tab': MdNavigationTab;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-tab')\nexport class MdNavigationTab extends NavigationTab {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "labs/segmentedbutton/internal/_outlined-segmented-button.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-segmented-button-values();\n  // b/198759625 - Remove spacing tokens once provided.\n  $tokens: map.merge(\n    $tokens,\n    (\n      'spacing-leading': 12px,\n      'spacing-trailing': 12px,\n    )\n  );\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .md3-segmented-button__outline {\n    border-radius: inherit;\n    border-style: solid;\n    // Move border-width and inset into theme.\n    border-width: 1px;\n    inset: 0px -0.5px;\n    pointer-events: none;\n    position: absolute;\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbutton/internal/_shared.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../internal/motion/animation';\n@use '../../../ripple/ripple';\n// go/keep-sorted end\n\n@mixin styles() {\n  @keyframes md3-segmented-button-checkmark-selection-draw-in {\n    from {\n      stroke-dashoffset: 29.7833385;\n    }\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes md3-segmented-button-simple-fade-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes md3-segmented-button-simple-fade-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  :host {\n    display: inline-flex;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .md3-segmented-button {\n    align-items: center;\n    background: transparent;\n    border: none;\n    border-radius: inherit;\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    outline: none;\n    position: relative;\n    vertical-align: middle;\n    padding-inline-start: var(--_spacing-leading);\n    padding-inline-end: var(--_spacing-trailing);\n    // Override the user-agent text-transform: none of <button>\n    text-transform: inherit;\n\n    .md3-segmented-button__outline {\n      border-color: var(--_outline-color);\n    }\n\n    &:disabled .md3-segmented-button__outline {\n      border-color: var(--_disabled-outline-color);\n    }\n\n    .md3-segmented-button__graphic,\n    .md3-segmented-button__checkmark,\n    .md3-segmented-button__icon,\n    .md3-segmented-button__icon ::slotted([slot='icon']) {\n      height: var(--_icon-size);\n      width: var(--_icon-size);\n      font-size: var(--_icon-size);\n    }\n\n    // Under the following conditions, we need to account for extra space between\n    // the graphic and the text label/icon content:\n    //\n    //   1. A button with an icon and a label.\n    //   2. A selected button with a label and checkmark.\n    //   3. A selected button with an icon and checkmark but no label.\n    //\n    // We calculate a larger width here instead of using padding or margin for\n    // two main reasons:\n    //\n    //   1. We may need to transition between a zero width and an explicit width.\n    //   2. Both margin and padding take up space when a node has child content\n    //      even when a zero width is set and overflow is set to hidden.\n    //\n    // Because of those reasons, we calculate a new width with the given values.\n    &.md3-segmented-button--with-icon.md3-segmented-button--with-label,\n    &.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark,\n    &.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark {\n      .md3-segmented-button__graphic {\n        // b/198759625 - Use padding token instead of hardcoded 8px value.\n        width: calc(var(--_icon-size) + 8px);\n      }\n    }\n\n    .md3-segmented-button__label-text {\n      font-family: var(--_label-text-font);\n      font-size: var(--_label-text-size);\n      line-height: var(--_label-text-line-height);\n      font-weight: var(--_label-text-weight);\n    }\n\n    &.md3-segmented-button--selected:enabled {\n      .md3-segmented-button__label-text {\n        color: var(--_selected-label-text-color);\n      }\n\n      &:hover {\n        .md3-segmented-button__label-text {\n          color: var(--_selected-hover-label-text-color);\n        }\n      }\n\n      &:focus {\n        .md3-segmented-button__label-text {\n          color: var(--_selected-focus-label-text-color);\n        }\n      }\n\n      &:active {\n        .md3-segmented-button__label-text {\n          color: var(--_selected-pressed-label-text-color);\n        }\n      }\n    }\n\n    &.md3-segmented-button--unselected:enabled {\n      .md3-segmented-button__label-text {\n        color: var(--_unselected-label-text-color);\n      }\n\n      &:hover {\n        .md3-segmented-button__label-text {\n          color: var(--_unselected-hover-label-text-color);\n        }\n      }\n\n      &:focus {\n        .md3-segmented-button__label-text {\n          color: var(--_unselected-focus-label-text-color);\n        }\n      }\n\n      &:active {\n        .md3-segmented-button__label-text {\n          color: var(--_unselected-pressed-label-text-color);\n        }\n      }\n    }\n\n    &:disabled {\n      .md3-segmented-button__label-text {\n        color: var(--_disabled-label-text-color);\n      }\n    }\n  }\n\n  .md3-segmented-button--unselected {\n    .md3-segmented-button__icon {\n      color: var(--_unselected-icon-color);\n    }\n\n    &:hover {\n      .md3-segmented-button__icon {\n        color: var(--_unselected-hover-icon-color);\n      }\n    }\n\n    &:focus {\n      .md3-segmented-button__icon {\n        color: var(--_unselected-focus-icon-color);\n      }\n    }\n\n    &:active {\n      .md3-segmented-button__icon {\n        color: var(--_unselected-pressed-icon-color);\n      }\n    }\n\n    &:disabled {\n      .md3-segmented-button__icon {\n        color: var(--_disabled-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_unselected-hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_unselected-pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  .md3-segmented-button--selected {\n    background-color: var(--_selected-container-color);\n\n    .md3-segmented-button__icon {\n      color: var(--_selected-icon-color);\n    }\n\n    .md3-segmented-button__checkmark-path {\n      stroke: var(--_selected-icon-color);\n    }\n\n    &:hover {\n      .md3-segmented-button__checkmark-path {\n        stroke: var(--_selected-hover-icon-color);\n      }\n    }\n\n    &:focus {\n      .md3-segmented-button__checkmark-path {\n        stroke: var(--_selected-focus-icon-color);\n      }\n    }\n\n    &:active {\n      .md3-segmented-button__checkmark-path {\n        stroke: var(--_selected-pressed-icon-color);\n      }\n    }\n\n    &:disabled {\n      .md3-segmented-button__checkmark-path {\n        stroke: var(--_disabled-icon-color);\n      }\n    }\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_selected-hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_selected-pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  .md3-segmented-button:enabled {\n    cursor: pointer;\n  }\n\n  .md3-segmented-button__focus-ring {\n    z-index: 1;\n  }\n\n  .md3-segmented-button__ripple {\n    border-radius: inherit;\n    z-index: 0;\n  }\n\n  .md3-segmented-button__touch {\n    position: absolute;\n    top: 50%;\n    height: 48px;\n    left: 50%;\n    width: 100%;\n    transform: translate(-50%, -50%);\n  }\n\n  .md3-segmented-button__leading,\n  .md3-segmented-button__graphic {\n    display: inline-flex;\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  .md3-segmented-button__graphic {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .md3-segmented-button__graphic {\n    transition: animation.standard(width, 150ms);\n  }\n\n  .md3-segmented-button--unselected.md3-segmented-button--with-label,\n  .md3-segmented-button--unselected.md3-segmented-button--without-label,\n  .md3-segmented-button--selected.md3-segmented-button--without-checkmark {\n    .md3-segmented-button__graphic {\n      width: 0;\n    }\n  }\n\n  .md3-segmented-button--unselected .md3-segmented-button__checkmark {\n    opacity: 0;\n  }\n\n  .md3-segmented-button--selected.md3-segmented-button--with-label {\n    .md3-segmented-button__icon {\n      opacity: 0;\n    }\n  }\n\n  .md3-segmented-button--with-label .md3-segmented-button__checkmark {\n    display: inline-flex;\n    position: absolute;\n  }\n\n  .md3-segmented-button__checkmark-path {\n    stroke-width: 2px;\n    stroke-dasharray: 29.7833385;\n  }\n\n  .md3-segmented-button--selecting {\n    .md3-segmented-button__checkmark-path {\n      // We immediately render the checkmark in the animation start treatment\n      // because we're using an animation delay. If we didn't have the delay,\n      // the checkmark would render in the base fully-drawn state during the\n      // brief animation-delay period which would look wrong.\n      stroke-dashoffset: 29.7833385;\n      animation: md3-segmented-button-checkmark-selection-draw-in;\n      animation-duration: 150ms;\n      animation-delay: 50ms;\n      animation-fill-mode: forwards;\n      animation-timing-function: animation.$standard-easing;\n    }\n    &.md3-segmented-button--with-label .md3-segmented-button__icon {\n      animation: md3-segmented-button-simple-fade-out;\n      animation-duration: 75ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n    }\n  }\n\n  .md3-segmented-button--deselecting {\n    .md3-segmented-button__checkmark {\n      animation: md3-segmented-button-simple-fade-out;\n      animation-duration: 50ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n    }\n    &.md3-segmented-button--with-label .md3-segmented-button__icon {\n      // We immediately render the icon in the animation start treatment\n      // because we're using an animation delay. If we didn't have the delay,\n      // the icon would render with full opacity during the brief\n      // animation-delay period which would look wrong.\n      opacity: 0;\n      animation: md3-segmented-button-simple-fade-in;\n      animation-delay: 50ms;\n      animation-duration: 150ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n    }\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbutton/internal/outlined-segmented-button.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {SegmentedButton} from './segmented-button.js';\n\n/**\n * b/265346443 - add docs\n */\nexport class OutlinedSegmentedButton extends SegmentedButton {\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'md3-segmented-button--outlined': true,\n    };\n  }\n\n  protected override renderOutline() {\n    return html`<span class=\"md3-segmented-button__outline\"></span>`;\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbutton/internal/outlined-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './outlined-segmented-button';\n// go/keep-sorted end\n\n@include outlined-segmented-button.styles;\n"
  },
  {
    "path": "labs/segmentedbutton/internal/segmented-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\n\n// Separate variable needed for closure.\nconst segmentedButtonBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * SegmentedButton is a web component implementation of the Material Design\n * segmented button component. It is intended **only** for use as a child of a\n * `SementedButtonSet` component. It is **not** intended for use in any other\n * context.\n *\n * @fires segmented-button-interaction {Event} Dispatched whenever a button is\n * clicked. --bubbles --composed\n */\nexport class SegmentedButton extends segmentedButtonBaseClass {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) selected = false;\n  @property() label = '';\n  @property({type: Boolean, attribute: 'no-checkmark'}) noCheckmark = false;\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  @state() private animState = '';\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly iconElement!: HTMLElement[];\n\n  protected override update(props: PropertyValues<SegmentedButton>) {\n    this.animState = this.nextAnimationState(props);\n    super.update(props);\n    // NOTE: This needs to be set *after* calling super.update() to ensure the\n    // appropriate CSS classes are applied.\n    this.hasIcon = this.iconElement.length > 0;\n  }\n\n  private nextAnimationState(\n    changedProps: PropertyValues<SegmentedButton>,\n  ): string {\n    const prevSelected = changedProps.get('selected');\n    // Early exit for first update.\n    if (prevSelected === undefined) return '';\n\n    const nextSelected = this.selected;\n    const nextHasCheckmark = !this.noCheckmark;\n    if (!prevSelected && nextSelected && nextHasCheckmark) {\n      return 'selecting';\n    }\n    if (prevSelected && !nextSelected && nextHasCheckmark) {\n      return 'deselecting';\n    }\n    return '';\n  }\n\n  private handleClick() {\n    const event = new Event('segmented-button-interaction', {\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled}\n        @click=\"${this.handleClick}\"\n        class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\">\n        <md-focus-ring\n          class=\"md3-segmented-button__focus-ring\"\n          part=\"focus-ring\"></md-focus-ring>\n        <md-ripple\n          ?disabled=\"${this.disabled}\"\n          class=\"md3-segmented-button__ripple\"></md-ripple>\n        ${this.renderOutline()} ${this.renderLeading()} ${this.renderLabel()}\n        ${this.renderTouchTarget()}\n      </button>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'md3-segmented-button--selected': this.selected,\n      'md3-segmented-button--unselected': !this.selected,\n      'md3-segmented-button--with-label': this.label !== '',\n      'md3-segmented-button--without-label': this.label === '',\n      'md3-segmented-button--with-icon': this.hasIcon,\n      'md3-segmented-button--with-checkmark': !this.noCheckmark,\n      'md3-segmented-button--without-checkmark': this.noCheckmark,\n      'md3-segmented-button--selecting': this.animState === 'selecting',\n      'md3-segmented-button--deselecting': this.animState === 'deselecting',\n    };\n  }\n\n  protected renderOutline(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  private renderLeading() {\n    return this.label === ''\n      ? this.renderLeadingWithoutLabel()\n      : this.renderLeadingWithLabel();\n  }\n\n  private renderLeadingWithoutLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path\n              class=\"md3-segmented-button__checkmark-path\"\n              fill=\"none\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n        </span>\n        <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\"></slot>\n        </span>\n      </span>\n    `;\n  }\n\n  private renderLeadingWithLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path\n              class=\"md3-segmented-button__checkmark-path\"\n              fill=\"none\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n          <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  private renderLabel() {\n    return html`\n      <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n    `;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"md3-segmented-button__touch\"></span>`;\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbutton/internal/shared-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "labs/segmentedbutton/outlined-segmented-button.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButton} from './internal/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"
  },
  {
    "path": "labs/segmentedbuttonset/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Segmented Button Set',\n  [],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {icons: 'material-symbols'});\n"
  },
  {
    "path": "labs/segmentedbuttonset/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbuttonset/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/labs/segmentedbutton/outlined-segmented-button.js';\nimport '@material/web/labs/segmentedbuttonset/outlined-segmented-button-set.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {html} from 'lit';\n\n/** Knob types for Segmented Button Set stories. */\nexport interface StoryKnobs {}\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: '<md-outlined-segmented-button-set> labels and icons',\n  render() {\n    return html` <div style=\"width:325px\">\n      <md-outlined-segmented-button-set>\n        <md-outlined-segmented-button label=\"Enabled\">\n          <md-icon slot=\"icon\">grade</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button selected label=\"Selected\">\n          <md-icon slot=\"icon\">favorite</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"Enabled\">\n          <md-icon slot=\"icon\">change_history</md-icon>\n        </md-outlined-segmented-button>\n      </md-outlined-segmented-button-set>\n    </div>`;\n  },\n};\n\nconst withoutIcons: MaterialStoryInit<StoryKnobs> = {\n  name: '<md-outlined-segmented-button-set> without icons',\n  render() {\n    return html` <div style=\"width:325px\">\n      <md-outlined-segmented-button-set>\n        <md-outlined-segmented-button selected label=\"Selected\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"Enabled\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"Enabled\">\n        </md-outlined-segmented-button>\n      </md-outlined-segmented-button-set>\n    </div>`;\n  },\n};\n\nconst multiselect: MaterialStoryInit<StoryKnobs> = {\n  name: '<md-outlined-segmented-button-set> Multiselect',\n  render() {\n    return html` <div style=\"width:325px\">\n      <md-outlined-segmented-button-set multiselect>\n        <md-outlined-segmented-button selected label=\"$\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button selected label=\"$$\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"$$$\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"$$$\">\n        </md-outlined-segmented-button>\n      </md-outlined-segmented-button-set>\n    </div>`;\n  },\n};\n\nconst transportationModes: MaterialStoryInit<StoryKnobs> = {\n  name: 'Transportaton modes',\n  render() {\n    return html` <div style=\"width:202px\">\n      <md-outlined-segmented-button-set>\n        <md-outlined-segmented-button>\n          <md-icon slot=\"icon\">directions_walk</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button>\n          <md-icon slot=\"icon\">directions_subway</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button selected>\n          <md-icon slot=\"icon\">directions_car</md-icon>\n        </md-outlined-segmented-button>\n      </md-outlined-segmented-button-set>\n    </div>`;\n  },\n};\n\nconst iconOnly: MaterialStoryInit<StoryKnobs> = {\n  name: 'Icon only (no checkmark)',\n  render() {\n    return html` <div style=\"width:202px;\">\n      <md-outlined-segmented-button-set>\n        <md-outlined-segmented-button noCheckmark selected>\n          <md-icon slot=\"icon\">format_align_left</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button noCheckmark>\n          <md-icon slot=\"icon\">format_align_center</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button noCheckmark>\n          <md-icon slot=\"icon\">format_align_right</md-icon>\n        </md-outlined-segmented-button>\n      </md-outlined-segmented-button-set>\n    </div>`;\n  },\n};\n\nconst singleSelect: MaterialStoryInit<StoryKnobs> = {\n  name: 'Single select',\n  render() {\n    return html` <div style=\"width:400px\">\n      <md-outlined-segmented-button-set>\n        <md-outlined-segmented-button label=\"Label\">\n          <md-icon slot=\"icon\">star</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button disabled label=\"Label\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button>\n          <md-icon slot=\"icon\">directions_bus</md-icon>\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"Label\">\n        </md-outlined-segmented-button>\n      </md-outlined-segmented-button-set>\n    </div>`;\n  },\n};\n\nconst multiSelect2: MaterialStoryInit<StoryKnobs> = {\n  name: 'Multi select',\n  render() {\n    return html` <div style=\"width:400px\">\n      <md-outlined-segmented-button-set multiselect>\n        <md-outlined-segmented-button label=\"Label\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button disabled selected label=\"Label\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"Label\">\n        </md-outlined-segmented-button>\n\n        <md-outlined-segmented-button label=\"Label\">\n        </md-outlined-segmented-button>\n      </md-outlined-segmented-button-set>\n    </div>`;\n  },\n};\n\n/** Segmented Button Set stories. */\nexport const stories = [\n  standard,\n  withoutIcons,\n  multiselect,\n  transportationModes,\n  iconOnly,\n  singleSelect,\n  multiSelect2,\n];\n"
  },
  {
    "path": "labs/segmentedbuttonset/internal/_outlined-segmented-button-set.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: list.join(\n    tokens.$md-comp-outlined-segmented-button-supported-tokens,\n    ('shape-start-start', 'shape-start-end', 'shape-end-end', 'shape-end-start')\n  );\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-outlined-segmented-button-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-segmented-button-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbuttonset/internal/_shared.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n@mixin styles() {\n  :host {\n    display: flex;\n    outline: none;\n  }\n\n  .md3-segmented-button-set {\n    display: grid;\n    grid-auto-columns: 1fr;\n    grid-auto-flow: column;\n    grid-auto-rows: auto;\n    width: 100%;\n    height: var(--_container-height);\n\n    ::slotted(:first-child) {\n      border-start-start-radius: var(--_shape-start-start);\n      border-end-start-radius: var(--_shape-end-start);\n    }\n\n    ::slotted(:last-child) {\n      border-start-end-radius: var(--_shape-start-end);\n      border-end-end-radius: var(--_shape-end-end);\n    }\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbuttonset/internal/outlined-segmented-button-set.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {SegmentedButtonSet} from './segmented-button-set.js';\n\n/**\n * b/265346443 - add docs\n */\nexport class OutlinedSegmentedButtonSet extends SegmentedButtonSet {\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'md3-segmented-button-set--outlined': true,\n    };\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbuttonset/internal/outlined-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './outlined-segmented-button-set';\n// go/keep-sorted end\n\n@include outlined-segmented-button-set.styles;\n"
  },
  {
    "path": "labs/segmentedbuttonset/internal/segmented-button-set.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {SegmentedButton} from '../../segmentedbutton/internal/segmented-button.js';\n\n// Separate variable needed for closure.\nconst segmentedButtonSetBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n *\n * @fires segmented-button-set-selection {CustomEvent<{button: SegmentedButton, selected: boolean, index: number}>}\n * Dispatched when a button is selected programattically with the\n * `setButtonSelected` or the `toggleSelection` methods as well as on user\n * interaction. --bubbles --composed\n */\nexport class SegmentedButtonSet extends segmentedButtonSetBaseClass {\n  @property({type: Boolean}) multiselect = false;\n\n  @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n  getButtonDisabled(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean) {\n    if (this.indexOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  getButtonSelected(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean) {\n    // Ignore out-of-index values.\n    if (this.indexOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.getButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.emitSelectionEvent(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.emitSelectionEvent(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleSegmentedButtonInteraction(event: CustomEvent) {\n    const index = this.buttons.indexOf(event.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number) {\n    if (this.indexOutOfBounds(index)) return;\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private indexOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private emitSelectionEvent(index: number) {\n    this.dispatchEvent(\n      new CustomEvent('segmented-button-set-selection', {\n        detail: {\n          button: this.buttons[index],\n          selected: this.buttons[index].selected,\n          index,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <span\n        role=\"group\"\n        @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n        aria-label=${ariaLabel || nothing}\n        class=\"md3-segmented-button-set\">\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {};\n  }\n}\n"
  },
  {
    "path": "labs/segmentedbuttonset/internal/shared-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "labs/segmentedbuttonset/outlined-segmented-button-set.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './internal/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"
  },
  {
    "path": "list/_list-item.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/listitem/list-item' show theme;\n"
  },
  {
    "path": "list/_list.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/list' show theme;\n"
  },
  {
    "path": "list/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'List',\n  [\n    new Knob('disabled', {ui: boolInput(), defaultValue: false}),\n    new Knob('overline', {ui: textInput()}),\n    new Knob('trailingSupportingText', {ui: textInput()}),\n    new Knob('leadingIcon', {ui: boolInput()}),\n    new Knob('trailingIcon', {ui: boolInput()}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});\n"
  },
  {
    "path": "list/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "list/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/divider/divider.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/list/list.js';\nimport '@material/web/list/list-item.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html, nothing} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/** Knob types for list stories. */\nexport interface StoryKnobs {\n  disabled: boolean;\n  overline: string;\n  trailingSupportingText: string;\n  leadingIcon: boolean;\n  trailingIcon: boolean;\n}\n\nconst styles = css`\n  md-list {\n    border-radius: 8px;\n    outline: 1px solid var(--md-sys-color-outline);\n    max-width: 360px;\n    overflow: hidden;\n    width: 100%;\n  }\n`;\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'List',\n  styles,\n  render(knobs) {\n    return html`\n      <md-list aria-label=\"Static example\">\n        <md-list-item ?disabled=${knobs.disabled}>\n          Single line item ${getKnobContent(knobs)}\n        </md-list-item>\n\n        <md-list-item ?disabled=${knobs.disabled}>\n          Two line item\n          <div slot=\"supporting-text\">Supporting text</div>\n          ${getKnobContent(knobs)}\n        </md-list-item>\n\n        <md-list-item ?disabled=${knobs.disabled}>\n          Three line item\n          <div slot=\"supporting-text\">\n            <div>Second line text</div>\n            <div>Third line text</div>\n          </div>\n          ${getKnobContent(knobs, /* threeLines */ true)}\n        </md-list-item>\n      </md-list>\n    `;\n  },\n};\n\nconst interactive: MaterialStoryInit<StoryKnobs> = {\n  name: 'Interactive list',\n  styles,\n  render(knobs) {\n    const knobsNoTrailing = {...knobs, trailingIcon: false};\n    return html`\n      <md-list aria-label=\"Interactive example\">\n        <md-list-item\n          ?disabled=${knobs.disabled}\n          type=\"link\"\n          href=\"https://google.com\"\n          target=\"_blank\">\n          Link item\n          <md-icon slot=\"end\">link</md-icon>\n          ${getKnobContent(knobsNoTrailing)}\n        </md-list-item>\n\n        <md-list-item type=\"button\" ?disabled=${knobs.disabled}>\n          Button item ${getKnobContent(knobs)}\n        </md-list-item>\n\n        <md-list-item ?disabled=${knobs.disabled}>\n          Non-interactive item ${knobs.disabled ? '(disabled)' : nothing}\n          ${getKnobContent(knobs)}\n        </md-list-item>\n      </md-list>\n    `;\n  },\n};\n\nfunction getKnobContent(knobs: StoryKnobs, threeLines = false) {\n  const overline = knobs.overline\n    ? html`<div slot=\"overline\">${knobs.overline}</div>`\n    : nothing;\n\n  const classes = {\n    'align-start': threeLines,\n  };\n\n  const trailingText = knobs.trailingSupportingText\n    ? html`<div class=${classMap(classes)} slot=\"trailing-supporting-text\"\n        >${knobs.trailingSupportingText}</div\n      >`\n    : nothing;\n\n  const leadingIcon = knobs.leadingIcon\n    ? html`<md-icon class=${classMap(classes)} slot=\"start\">event</md-icon>`\n    : nothing;\n\n  const trailingIcon = knobs.trailingIcon\n    ? html`<md-icon class=${classMap(classes)} slot=\"end\">star</md-icon>`\n    : nothing;\n\n  return [overline, trailingText, leadingIcon, trailingIcon];\n}\n\n/** List stories. */\nexport const stories = [standard, interactive];\n"
  },
  {
    "path": "list/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {List} from './internal/list.js';\nimport {ListItemHarness} from './internal/listitem/harness.js';\nimport {ListItemEl} from './internal/listitem/list-item.js';\n\nexport {ListItemHarness} from './internal/listitem/harness.js';\n\nconst NAVIGABLE_KEYS = {\n  'ArrowDown': 'ArrowDown',\n  'ArrowUp': 'ArrowUp',\n  'Home': 'Home',\n  'End': 'End',\n} as const;\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n  (typeof NAVIGABLE_KEYS)[keyof typeof NAVIGABLE_KEYS];\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element as List;\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map(\n      (item) => new ListItemHarness(item as ListItemEl),\n    );\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<T extends string = HandledListKeys>(key: T) {\n    await this.keypress(key, {code: key});\n  }\n\n  /**\n   * Dispatches a keypress on the list. It may or may not be a supported event.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  override async keypress(key: string, init = {} as KeyboardEventInit) {\n    init = {code: key, ...init};\n    await super.keypress(key, init);\n  }\n}\n"
  },
  {
    "path": "list/internal/_list.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n@use './listitem/list-item';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-list-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-list-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-list-values();\n\n  :host {\n    background: map.get($tokens, 'container-color');\n    color: unset;\n    display: flex;\n    flex-direction: column;\n    outline: none;\n    padding: 8px 0;\n    // Add position so the elevation overlay (which is absolutely positioned)\n    // can be positioned relative to the list root.\n    position: relative;\n  }\n}\n"
  },
  {
    "path": "list/internal/list-controller.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  activateFirstItem,\n  activateLastItem,\n  activateNextItem,\n  activatePreviousItem,\n  getActiveItem,\n  getFirstActivatableItem,\n  ListItem,\n} from './list-navigation-helpers.js';\n\n// TODO: move this file to List and make List use this\n\n/**\n * Default keys that trigger navigation.\n */\n// tslint:disable:enforce-name-casing Following Enum style\nexport const NavigableKeys = {\n  ArrowDown: 'ArrowDown',\n  ArrowLeft: 'ArrowLeft',\n  ArrowUp: 'ArrowUp',\n  ArrowRight: 'ArrowRight',\n  Home: 'Home',\n  End: 'End',\n} as const;\n// tslint:enable:enforce-name-casing\n\n/**\n * Default set of navigable keys.\n */\nexport type NavigableKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];\n\n/**\n * The configuration object to customize the behavior of the List Controller\n */\nexport interface ListControllerConfig<Item extends ListItem> {\n  /**\n   * A function that determines whether or not the given element is an Item\n   */\n  isItem: (item: HTMLElement) => item is Item;\n  /**\n   * A function that returns an array of elements to consider as items. For\n   * example, all the slotted elements.\n   */\n  getPossibleItems: () => HTMLElement[];\n  /**\n   * A function that returns whether or not the list is in an RTL context.\n   */\n  isRtl: () => boolean;\n  /**\n   * Deactivates an item such as setting the tabindex to -1 and or sets selected\n   * to false.\n   */\n  deactivateItem: (item: Item) => void;\n  /**\n   * Activates an item such as setting the tabindex to 1 and or sets selected to\n   * true (but does not focus).\n   */\n  activateItem: (item: Item) => void;\n  /**\n   * Whether or not the key should be handled by the list for navigation.\n   */\n  isNavigableKey: (key: string) => boolean;\n  /**\n   * Whether or not the item can be activated. Defaults to items that are not\n   * disabled.\n   */\n  isActivatable?: (item: Item) => boolean;\n  /**\n   * Whether or not navigating past the end of the list wraps to the beginning\n   * and vice versa. Defaults to true.\n   */\n  wrapNavigation?: () => boolean;\n}\n\n/**\n * A controller that handles list keyboard navigation and item management.\n */\nexport class ListController<Item extends ListItem> {\n  isItem: (item: HTMLElement) => item is Item;\n  private readonly getPossibleItems: () => HTMLElement[];\n  private readonly isRtl: () => boolean;\n  private readonly deactivateItem: (item: Item) => void;\n  private readonly activateItem: (item: Item) => void;\n  private readonly isNavigableKey: (key: string) => boolean;\n  private readonly isActivatable?: (item: Item) => boolean;\n  private readonly wrapNavigation: () => boolean;\n\n  constructor(config: ListControllerConfig<Item>) {\n    const {\n      isItem,\n      getPossibleItems,\n      isRtl,\n      deactivateItem,\n      activateItem,\n      isNavigableKey,\n      isActivatable,\n      wrapNavigation,\n    } = config;\n    this.isItem = isItem;\n    this.getPossibleItems = getPossibleItems;\n    this.isRtl = isRtl;\n    this.deactivateItem = deactivateItem;\n    this.activateItem = activateItem;\n    this.isNavigableKey = isNavigableKey;\n    this.isActivatable = isActivatable;\n    this.wrapNavigation = wrapNavigation ?? (() => true);\n  }\n\n  /**\n   * The items being managed by the list. Additionally, attempts to see if the\n   * object has a sub-item in the `.item` property.\n   */\n  get items(): Item[] {\n    const maybeItems = this.getPossibleItems();\n    const items: Item[] = [];\n\n    for (const itemOrParent of maybeItems) {\n      const isItem = this.isItem(itemOrParent);\n      // if the item is a list item, add it to the list of items\n      if (isItem) {\n        items.push(itemOrParent);\n        continue;\n      }\n\n      // If the item exposes an `item` property check if it is a list item.\n      const subItem = (itemOrParent as HTMLElement & {item?: Item}).item;\n      if (subItem && this.isItem(subItem)) {\n        items.push(subItem);\n      }\n    }\n\n    return items;\n  }\n\n  /**\n   * Handles keyboard navigation. Should be bound to the node that will act as\n   * the List.\n   */\n  handleKeydown = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (event.defaultPrevented || !this.isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly in upcoming calculations so we don't\n    // re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n\n    event.preventDefault();\n\n    const isRtl = this.isRtl();\n    const inlinePrevious = isRtl\n      ? NavigableKeys.ArrowRight\n      : NavigableKeys.ArrowLeft;\n    const inlineNext = isRtl\n      ? NavigableKeys.ArrowLeft\n      : NavigableKeys.ArrowRight;\n\n    let nextActiveItem: Item | null = null;\n    switch (key) {\n      // Activate the next item\n      case NavigableKeys.ArrowDown:\n      case inlineNext:\n        nextActiveItem = activateNextItem(\n          items,\n          activeItemRecord,\n          this.isActivatable,\n          this.wrapNavigation(),\n        );\n        break;\n\n      // Activate the previous item\n      case NavigableKeys.ArrowUp:\n      case inlinePrevious:\n        nextActiveItem = activatePreviousItem(\n          items,\n          activeItemRecord,\n          this.isActivatable,\n          this.wrapNavigation(),\n        );\n        break;\n\n      // Activate the first item\n      case NavigableKeys.Home:\n        nextActiveItem = activateFirstItem(items, this.isActivatable);\n        break;\n\n      // Activate the last item\n      case NavigableKeys.End:\n        nextActiveItem = activateLastItem(items, this.isActivatable);\n        break;\n\n      default:\n        break;\n    }\n\n    if (\n      nextActiveItem &&\n      activeItemRecord &&\n      activeItemRecord.item !== nextActiveItem\n    ) {\n      // If a new item was activated, remove the tabindex of the previous\n      // activated item.\n      activeItemRecord.item.tabIndex = -1;\n    }\n  };\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): Item | null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activateNextItem(\n      items,\n      activeItemRecord,\n      this.isActivatable,\n      this.wrapNavigation(),\n    );\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): Item | null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activatePreviousItem(\n      items,\n      activeItemRecord,\n      this.isActivatable,\n      this.wrapNavigation(),\n    );\n  }\n\n  /**\n   * Listener to be bound to the `deactivate-items` item event.\n   */\n  onDeactivateItems = () => {\n    const items = this.items;\n\n    for (const item of items) {\n      this.deactivateItem(item);\n    }\n  };\n\n  /**\n   * Listener to be bound to the `request-activation` item event..\n   */\n  onRequestActivation = (event: Event) => {\n    this.onDeactivateItems();\n    const target = event.target as Item;\n    this.activateItem(target);\n    target.focus();\n  };\n\n  /**\n   * Listener to be bound to the `slotchange` event for the slot that renders\n   * the items.\n   */\n  onSlotchange = () => {\n    const items = this.items;\n    // Whether we have encountered an item that has been activated\n    let encounteredActivated = false;\n\n    for (const item of items) {\n      const isActivated = !item.disabled && item.tabIndex > -1;\n\n      if (isActivated && !encounteredActivated) {\n        encounteredActivated = true;\n        item.tabIndex = 0;\n        continue;\n      }\n\n      // Deactivate the rest including disabled\n      item.tabIndex = -1;\n    }\n\n    if (encounteredActivated) {\n      return;\n    }\n\n    const firstActivatableItem = getFirstActivatableItem(\n      items,\n      this.isActivatable,\n    );\n\n    if (!firstActivatableItem) {\n      return;\n    }\n\n    firstActivatableItem.tabIndex = 0;\n  };\n}\n"
  },
  {
    "path": "list/internal/list-navigation-helpers.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport interface ListItem extends HTMLElement {\n  disabled: boolean;\n}\n\n/**\n * A record that describes a list item in a list with metadata such a reference\n * to the item and its index in the list.\n */\nexport interface ItemRecord<Item extends ListItem> {\n  item: Item;\n  index: number;\n}\n\n/**\n * Activates the first non-disabled item of a given array of items.\n *\n * @param items {Array<ListItem>} The items from which to activate the\n *     first item.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n */\nexport function activateFirstItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  // NOTE: These selector functions are static and not on the instance such\n  // that multiple operations can be chained and we do not have to re-query\n  // the DOM\n  const firstItem = getFirstActivatableItem(items, isActivatable);\n  if (firstItem) {\n    firstItem.tabIndex = 0;\n    firstItem.focus();\n  }\n  return firstItem;\n}\n\n/**\n * Activates the last non-disabled item of a given array of items.\n *\n * @param items {Array<ListItem>} The items from which to activate the\n *     last item.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @nocollapse\n */\nexport function activateLastItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  const lastItem = getLastActivatableItem(items, isActivatable);\n  if (lastItem) {\n    lastItem.tabIndex = 0;\n    lastItem.focus();\n  }\n  return lastItem;\n}\n\n/**\n * Deactivates the currently active item of a given array of items.\n *\n * @param items {Array<ListItem>} The items from which to deactivate the\n *     active item.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return A record of the deleselcted activated item including the item and\n *     the index of the item or `null` if none are deactivated.\n * @nocollapse\n */\nexport function deactivateActiveItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  const activeItem = getActiveItem(items, isActivatable);\n  if (activeItem) {\n    activeItem.item.tabIndex = -1;\n  }\n  return activeItem;\n}\n\n/**\n * Retrieves the first activated item of a given array of items.\n *\n * @param items {Array<ListItem>} The items to search.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return A record of the first activated item including the item and the\n *     index of the item or `null` if none are activated.\n * @nocollapse\n */\nexport function getActiveItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (item.tabIndex === 0 && isActivatable(item)) {\n      return {\n        item,\n        index: i,\n      } as ItemRecord<Item>;\n    }\n  }\n  return null;\n}\n\n/**\n * Retrieves the first non-disabled item of a given array of items. This\n * the first item that is not disabled.\n *\n * @param items {Array<ListItem>} The items to search.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The first activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getFirstActivatableItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (const item of items) {\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Retrieves the last non-disabled item of a given array of items.\n *\n * @param items {Array<ListItem>} The items to search.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The last activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getLastActivatableItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (let i = items.length - 1; i >= 0; i--) {\n    const item = items[i];\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Retrieves the next non-disabled item of a given array of items.\n *\n * @param items {Array<ListItem>} The items to search.\n * @param index {{index: number}} The index to search from.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @param wrap If true, then the next item at the end of the list is the first\n *     item. Defaults to true.\n * @return The next activatable item or `null` if none are activatable.\n */\nexport function getNextItem<Item extends ListItem>(\n  items: Item[],\n  index: number,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n) {\n  for (let i = 1; i < items.length; i++) {\n    const nextIndex = (i + index) % items.length;\n    if (nextIndex < index && !wrap) {\n      // Return if the index loops back to the beginning and not wrapping.\n      return null;\n    }\n\n    const item = items[nextIndex];\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return items[index] ? items[index] : null;\n}\n\n/**\n * Retrieves the previous non-disabled item of a given array of items.\n *\n * @param items {Array<ListItem>} The items to search.\n * @param index {{index: number}} The index to search from.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @param wrap If true, then the previous item at the beginning of the list is\n *     the last item. Defaults to true.\n * @return The previous activatable item or `null` if none are activatable.\n */\nexport function getPrevItem<Item extends ListItem>(\n  items: Item[],\n  index: number,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n) {\n  for (let i = 1; i < items.length; i++) {\n    const prevIndex = (index - i + items.length) % items.length;\n    if (prevIndex > index && !wrap) {\n      // Return if the index loops back to the end and not wrapping.\n      return null;\n    }\n\n    const item = items[prevIndex];\n\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return items[index] ? items[index] : null;\n}\n\n/**\n * Activates the next item and focuses it. If nothing is currently activated,\n * activates the first item.\n */\nexport function activateNextItem<Item extends ListItem>(\n  items: Item[],\n  activeItemRecord: null | ItemRecord<Item>,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n): Item | null {\n  if (activeItemRecord) {\n    const next = getNextItem(\n      items,\n      activeItemRecord.index,\n      isActivatable,\n      wrap,\n    );\n\n    if (next) {\n      next.tabIndex = 0;\n      next.focus();\n    }\n\n    return next;\n  } else {\n    return activateFirstItem(items, isActivatable);\n  }\n}\n\n/**\n * Activates the previous item and focuses it. If nothing is currently\n * activated, activates the last item.\n */\nexport function activatePreviousItem<Item extends ListItem>(\n  items: Item[],\n  activeItemRecord: null | ItemRecord<Item>,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n): Item | null {\n  if (activeItemRecord) {\n    const prev = getPrevItem(\n      items,\n      activeItemRecord.index,\n      isActivatable,\n      wrap,\n    );\n    if (prev) {\n      prev.tabIndex = 0;\n      prev.focus();\n    }\n    return prev;\n  } else {\n    return activateLastItem(items, isActivatable);\n  }\n}\n\n/**\n * Creates an event that requests the parent md-list to deactivate all other\n * items.\n */\nexport function createDeactivateItemsEvent() {\n  return new Event('deactivate-items', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the parent md-list to deactivate all\n * other items.\n */\nexport type DeactivateItemsEvent = ReturnType<\n  typeof createDeactivateItemsEvent\n>;\n\n/**\n * Creates an event that requests the menu to set `tabindex=0` on the item and\n * focus it. We use this pattern because List keeps track of what element is\n * active in the List by maintaining tabindex. We do not want list items\n * to set tabindex on themselves or focus themselves so that we can organize all\n * that logic in the parent List and Menus, and list item stays as dumb as\n * possible.\n */\nexport function createRequestActivationEvent() {\n  return new Event('request-activation', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the list activates and focuses the item.\n */\nexport type RequestActivationEvent = ReturnType<\n  typeof createRequestActivationEvent\n>;\n\n/**\n * The default `isActivatable` function, which checks if an item is not\n * disabled.\n *\n * @param item The item to check.\n * @return true if `item.disabled` is `false.\n */\nfunction isItemNotDisabled<Item extends ListItem>(item: Item) {\n  return !item.disabled;\n}\n"
  },
  {
    "path": "list/internal/list-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './list';\n// go/keep-sorted end\n\n@include list.styles;\n"
  },
  {
    "path": "list/internal/list.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {ListController, NavigableKeys} from './list-controller.js';\nimport {ListItem as SharedListItem} from './list-navigation-helpers.js';\n\nconst NAVIGABLE_KEY_SET = new Set<string>(Object.values(NavigableKeys));\n\ninterface ListItem extends SharedListItem {\n  type: 'text' | 'button' | 'link';\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  /**\n   * An array of activatable and disableable list items. Queries every assigned\n   * element that has the `md-list-item` attribute.\n   *\n   * _NOTE:_ This is a shallow, flattened query via\n   * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct\n   * children / directly slotted elements.\n   */\n  @queryAssignedElements({flatten: true})\n  protected slotItems!: Array<ListItem | (HTMLElement & {item?: ListItem})>;\n\n  /** @export */\n  get items() {\n    return this.listController.items;\n  }\n\n  private readonly listController = new ListController<ListItem>({\n    isItem: (item: HTMLElement): item is ListItem =>\n      item.hasAttribute('md-list-item'),\n    getPossibleItems: () => this.slotItems,\n    isRtl: () => getComputedStyle(this).direction === 'rtl',\n    deactivateItem: (item) => {\n      item.tabIndex = -1;\n    },\n    activateItem: (item) => {\n      item.tabIndex = 0;\n    },\n    isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),\n    isActivatable: (item) => !item.disabled && item.type !== 'text',\n  });\n\n  private readonly internals =\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'list';\n      this.addEventListener('keydown', this.listController.handleKeydown);\n    }\n  }\n\n  protected override render() {\n    return html`\n      <slot\n        @deactivate-items=${this.listController.onDeactivateItems}\n        @request-activation=${this.listController.onRequestActivation}\n        @slotchange=${this.listController.onSlotchange}>\n      </slot>\n    `;\n  }\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): ListItem | null {\n    return this.listController.activateNextItem();\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): ListItem | null {\n    return this.listController.activatePreviousItem();\n  }\n}\n"
  },
  {
    "path": "list/internal/listitem/_list-item.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../focus/focus-ring';\n@use '../../../icon/icon';\n@use '../../../ripple/ripple';\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-list-item-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-list-item-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-list-item-values();\n\n  :host {\n    border-radius: map.get($tokens, 'container-shape');\n    display: flex;\n    gap: 16px;\n    -webkit-tap-highlight-color: transparent;\n\n    @include ripple.theme(\n      (\n        hover-color: map.get($tokens, 'hover-state-layer-color'),\n        hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),\n        pressed-color: map.get($tokens, 'pressed-state-layer-color'),\n        pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),\n      )\n    );\n  }\n\n  :host(:is([type='button']:not([disabled]), [type='link'])) {\n    cursor: pointer;\n  }\n\n  md-focus-ring {\n    z-index: 1;\n\n    @include focus-ring.theme(\n      (\n        'shape': 8px,\n      )\n    );\n  }\n\n  a,\n  button,\n  li {\n    // Resets. These can be removed once we're no longer use these tags\n    background: none;\n    border: none;\n    cursor: inherit;\n    padding: 0;\n    margin: 0;\n    text-align: unset;\n    text-decoration: none;\n  }\n\n  .list-item {\n    border-radius: inherit;\n    display: flex;\n    flex: 1;\n    gap: inherit;\n    max-width: inherit;\n    min-width: inherit;\n    outline: none;\n    // hide android tap color since we have ripple\n    -webkit-tap-highlight-color: transparent;\n    width: 100%;\n  }\n\n  .list-item.interactive {\n    cursor: pointer;\n  }\n\n  .list-item.disabled {\n    opacity: map.get($tokens, 'disabled-opacity');\n    pointer-events: none;\n  }\n\n  [slot='container'] {\n    pointer-events: none;\n  }\n\n  md-ripple {\n    border-radius: inherit;\n  }\n\n  md-item {\n    border-radius: inherit;\n    flex: 1;\n    height: 100%;\n    color: map.get($tokens, 'label-text-color');\n    font-family: map.get($tokens, 'label-text-font');\n    font-size: map.get($tokens, 'label-text-size');\n    line-height: map.get($tokens, 'label-text-line-height');\n    font-weight: map.get($tokens, 'label-text-weight');\n    min-height: map.get($tokens, 'one-line-container-height');\n    padding-top: map.get($tokens, 'top-space');\n    padding-bottom: map.get($tokens, 'bottom-space');\n    padding-inline-start: map.get($tokens, 'leading-space');\n    padding-inline-end: map.get($tokens, 'trailing-space');\n    gap: inherit;\n  }\n\n  md-item[multiline] {\n    min-height: map.get($tokens, 'two-line-container-height');\n  }\n\n  [slot='supporting-text'] {\n    color: map.get($tokens, 'supporting-text-color');\n    font-family: map.get($tokens, 'supporting-text-font');\n    font-size: map.get($tokens, 'supporting-text-size');\n    line-height: map.get($tokens, 'supporting-text-line-height');\n    font-weight: map.get($tokens, 'supporting-text-weight');\n  }\n\n  [slot='trailing-supporting-text'] {\n    color: map.get($tokens, 'trailing-supporting-text-color');\n    font-family: map.get($tokens, 'trailing-supporting-text-font');\n    font-size: map.get($tokens, 'trailing-supporting-text-size');\n    line-height: map.get($tokens, 'trailing-supporting-text-line-height');\n    font-weight: map.get($tokens, 'trailing-supporting-text-weight');\n  }\n\n  :is([slot='start'], [slot='end'])::slotted(*) {\n    fill: currentColor;\n  }\n\n  [slot='start'] {\n    color: map.get($tokens, 'leading-icon-color');\n  }\n\n  [slot='end'] {\n    color: map.get($tokens, 'trailing-icon-color');\n  }\n\n  @media (forced-colors: active) {\n    .disabled slot {\n      color: GrayText;\n    }\n\n    .list-item.disabled {\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "list/internal/listitem/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../../../testing/harness.js';\nimport {NavigableKeys} from '../list-controller.js';\nimport {ListItem} from '../list-navigation-helpers.js';\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n  (typeof NavigableKeys)[keyof typeof NavigableKeys];\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness<\n  T extends LitElement = ListItem & LitElement,\n> extends Harness<T> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.list-item') as HTMLElement;\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<U extends string = HandledListKeys>(key: U) {\n    await this.keypress(key, {code: key});\n  }\n}\n"
  },
  {
    "path": "list/internal/listitem/list-item-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './list-item';\n// go/keep-sorted end\n\n@include list-item.styles;\n"
  },
  {
    "path": "list/internal/listitem/list-item.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {\n  createRequestActivationEvent,\n  ListItem,\n} from '../list-navigation-helpers.js';\n\n/**\n * Supported behaviors for a list item.\n */\nexport type ListItemType = 'text' | 'button' | 'link';\n\n// Separate variable needed for closure.\nconst listItemBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * @fires request-activation {Event} Requests the list to set `tabindex=0` on\n * the item and focus it. --bubbles --composed\n */\nexport class ListItemEl extends listItemBaseClass implements ListItem {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or\n   * \"button\" for interactive items.\n   */\n  @property({reflect: true}) type: ListItemType = 'text';\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  private get isDisabled() {\n    return this.disabled && this.type !== 'link';\n  }\n\n  protected override willUpdate(changed: PropertyValues<ListItemEl>) {\n    if (this.href) {\n      this.type = 'link';\n    }\n\n    super.willUpdate(changed);\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = this.type === 'link';\n    let tag: StaticValue;\n    switch (this.type) {\n      case 'link':\n        tag = literal`a`;\n        break;\n      case 'button':\n        tag = literal`button`;\n        break;\n      default:\n      case 'text':\n        tag = literal`li`;\n        break;\n    }\n\n    const isInteractive = this.type !== 'text';\n    // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n    // then all are \"listitem\" roles for correct announcement.\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=\"${this.isDisabled || !isInteractive ? -1 : 0}\"\n        ?disabled=${this.isDisabled}\n        role=\"listitem\"\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        href=${this.href || nothing}\n        target=${target}\n        @focus=${this.onFocus}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.isDisabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-focus-ring\n      @visibility-changed=${this.onFocusRingVisibilityChanged}\n      part=\"focus-ring\"\n      for=\"item\"\n      inward></md-focus-ring>`;\n  }\n\n  protected onFocusRingVisibilityChanged(e: Event) {}\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {'disabled': this.isDisabled};\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  protected onFocus() {\n    if (this.tabIndex !== -1) {\n      return;\n    }\n    // Handles the case where the user clicks on the element and then tabs.\n    this.dispatchEvent(createRequestActivationEvent());\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n\n  override click() {\n    if (!this.listItemRoot) {\n      // If the element has not finished rendering, call super to ensure click\n      // events are dispatched.\n      super.click();\n      return;\n    }\n\n    // Forward click to the element to ensure link <a>.click() works correctly.\n    this.listItemRoot.click();\n  }\n}\n"
  },
  {
    "path": "list/list-item.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {ListItemEl as ListItem} from './internal/listitem/list-item.js';\nimport {styles} from './internal/listitem/list-item-styles.js';\n\nexport {type ListItemType} from './internal/listitem/list-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Acceptable slot child variants are:\n *\n * - `img[slot=end]`\n * - `img[slot=start]`\n *\n *  @example\n * ```html\n * <md-list-item\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon slot=\"start\">account_circle</md-icon>\n *   <md-icon slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "list/list-item_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdListItem} from './list-item.js';\n\ndescribe('<md-list-item>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdListItem.styles);\n  });\n});\n"
  },
  {
    "path": "list/list.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {List} from './internal/list.js';\nimport {styles} from './internal/list-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n  }\n}\n\n/**\n * @summary Lists are continuous, vertical indexes of text or images.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list')\nexport class MdList extends List {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "list/list_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\nimport './list.js';\nimport './list-item.js';\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {ListHarness, ListItemHarness} from './harness.js';\nimport {MdList} from './list.js';\nimport {MdListItem} from './list-item.js';\n\ndescribe('<md-list>', () => {\n  const env = new Environment();\n\n  describe('.styles', () => {\n    createTokenTests(MdList.styles);\n  });\n\n  describe('keyboard navigation', () => {\n    it('non-nagivable key does nothing', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.keypress('k');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n    });\n\n    it('ArrowDown activates the next item', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowDown');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n    });\n\n    it('ArrowRight in LTR activates the next item', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowRight');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n    });\n\n    it('ArrowLeft in RTL activates the next item', async () => {\n      const root = env.render(html` <md-list dir=\"rtl\">\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowLeft');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n    });\n\n    it('ArrowDown will loop around', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n\n      await listHarness.pressHandledKey('ArrowDown');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n    });\n\n    it('ArrowDown will do nothing if nothing is selectable', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\" disabled></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second] = Array.from(root.querySelectorAll('md-list-item'));\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowDown');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n    });\n\n    it('ArrowDown does not activate disabled items', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowDown');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n      expect(document.activeElement).toEqual(third);\n    });\n\n    it('ArrowDown will select itself if its the only activatable', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const first = root.querySelector('md-list-item')!;\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n\n      await listHarness.pressHandledKey('ArrowDown');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('ArrowUp activates the previous item', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowUp');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('ArrowLeft in LTR activates the previous item', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowLeft');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n    });\n\n    it('ArrowRight in RTL activates the previous item', async () => {\n      const root = env.render(html` <md-list dir=\"rtl\">\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowRight');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n    });\n\n    it('activatePreviousItem will loop around', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowUp');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n      expect(document.activeElement).toEqual(third);\n    });\n\n    it('ArrowUp will return null if nothing is selectable', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\" disabled></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second] = Array.from(root.querySelectorAll('md-list-item'));\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('ArrowUp');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n    });\n\n    it('ArrowUp does not activate disabled items', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n\n      await listHarness.pressHandledKey('ArrowUp');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('ArrowUp will select itself if its the only activatable', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const first = root.querySelector('md-list-item')!;\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n\n      await listHarness.pressHandledKey('ArrowUp');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('Home will select the first item if something is already selected', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('Home');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('Home will select the first activatable item if first is non-activatable', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n\n      await listHarness.pressHandledKey('Home');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(second);\n    });\n\n    it('Home will select the first item if it is already selected', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('Home');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('End will select the last item if something is already selected', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('End');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n      expect(document.activeElement).toEqual(third);\n    });\n\n    it('End will select the last activatable item if last is non-activatable', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\" disabled></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n\n      await listHarness.pressHandledKey('End');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(second);\n    });\n\n    it('End will select the last item if it is already selected', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const listHarness = new ListHarness(listEl);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n\n      await listHarness.pressHandledKey('End');\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n      expect(document.activeElement).toEqual(third);\n    });\n\n    it('Clicking on an item will activate it', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n\n      const secondHarness = new ListItemHarness(second);\n\n      await secondHarness.clickWithMouse();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n    });\n  });\n\n  describe('activate items methods', () => {\n    it('List will activate only first item by default', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(document.body);\n    });\n\n    it('List will activate only first activatable item by default', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(document.body);\n    });\n\n    it('List will activate first activatable item if all are tabindex -1', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(document.body);\n    });\n\n    it('List will activate first activatable item if defined by user', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"2\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"1\"></md-list-item>\n      </md-list>`);\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n      expect(document.activeElement).toEqual(document.body);\n    });\n\n    it('activateNextItem activates the next item', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      const nextItem = listEl.activateNextItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n      expect(nextItem).toEqual(third);\n      expect(document.activeElement).toEqual(third);\n    });\n\n    it('activateNextItem will loop around', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n\n      const nextItem = listEl.activateNextItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(nextItem).toEqual(first);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('activateNextItem will return null if nothing is selectable', async () => {\n      const root = env.render(html` <md-list> </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n\n      await env.waitForStability();\n\n      const nextItem = listEl.activateNextItem();\n      await env.waitForStability();\n\n      expect(nextItem).toBeNull();\n    });\n\n    it('activateNextItem does not activate disabled items', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n\n      const nextItem = listEl.activateNextItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n      expect(nextItem).toEqual(third);\n      expect(document.activeElement).toEqual(third);\n    });\n\n    it('activateNextItem will return itself if it is the only activatable item', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const first = root.querySelector('md-list-item')!;\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n\n      const nextItem = listEl.activateNextItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(nextItem).toEqual(first);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('activatePreviousItem activates the previous item', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(0);\n      expect(third.tabIndex).toEqual(-1);\n\n      const nextItem = listEl.activatePreviousItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(nextItem).toEqual(first);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('activatePreviousItem will loop around', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n\n      const nextItem = listEl.activatePreviousItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n      expect(nextItem).toEqual(third);\n      expect(document.activeElement).toEqual(third);\n    });\n\n    it('activatePreviousItem will return null if nothing is selectable', async () => {\n      const root = env.render(html` <md-list> </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n\n      await env.waitForStability();\n\n      const nextItem = listEl.activatePreviousItem();\n      await env.waitForStability();\n\n      expect(nextItem).toBeNull();\n      expect(document.activeElement).toEqual(document.body);\n    });\n\n    it('activatePreviousItem does not activate disabled items', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\" tabindex=\"-1\"></md-list-item>\n        <md-list-item type=\"button\" disabled></md-list-item>\n        <md-list-item type=\"button\" tabindex=\"0\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const [first, second, third] = Array.from(\n        root.querySelectorAll('md-list-item'),\n      );\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(-1);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(0);\n\n      const nextItem = listEl.activatePreviousItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(second.tabIndex).toEqual(-1);\n      expect(third.tabIndex).toEqual(-1);\n      expect(nextItem).toEqual(first);\n      expect(document.activeElement).toEqual(first);\n    });\n\n    it('activatePreviousItem will return itself if its activatable', async () => {\n      const root = env.render(html` <md-list>\n        <md-list-item type=\"button\"></md-list-item>\n      </md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      const first = root.querySelector('md-list-item')!;\n\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n\n      const nextItem = listEl.activatePreviousItem();\n      await env.waitForStability();\n\n      expect(first.tabIndex).toEqual(0);\n      expect(nextItem).toEqual(first);\n      expect(document.activeElement).toEqual(first);\n    });\n  });\n\n  describe('aria', () => {\n    it('Sets default role to list', async () => {\n      const root = env.render(html`<md-list></md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      await env.waitForStability();\n      const internals = (\n        listEl as unknown as {internals: {role: string | null}}\n      ).internals;\n\n      expect(internals.role).toEqual('list');\n    });\n\n    it('Does not override user given role attribute', async () => {\n      const root = env.render(html`<md-list role=\"listbox\"></md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      await env.waitForStability();\n\n      expect(listEl.getAttribute('role')).toBe('listbox');\n    });\n\n    it('Does not override user given role property', async () => {\n      const root = env.render(html`<md-list .role=${'listbox'}></md-list>`);\n      const listEl = root.querySelector('md-list')!;\n      await env.waitForStability();\n\n      expect(listEl.role).toBe('listbox');\n    });\n  });\n});\n\ndescribe('<md-list-item>', () => {\n  const env = new Environment();\n\n  describe('.styles', () => {\n    createTokenTests(MdListItem.styles);\n  });\n\n  describe('rendering', () => {\n    it('self-describes as a list-item', async () => {\n      const root = env.render(html` <md-list-item> </md-list-item>`);\n\n      const listItemEl = root.querySelector('md-list-item')!;\n\n      await env.waitForStability();\n\n      expect(listItemEl.hasAttribute('md-list-item')).toBeTrue();\n    });\n  });\n\n  it('disabled overrides tabIndex', async () => {\n    const root = env.render(html`<md-list-item type=\"button\"></md-list-item>`);\n\n    const listItem = root.querySelector('md-list-item')!;\n\n    await env.waitForStability();\n\n    const internalRoot = listItem.renderRoot.querySelector(\n      '#item',\n    ) as HTMLElement;\n\n    expect(internalRoot.tabIndex).toBe(0);\n\n    listItem.disabled = true;\n\n    await env.waitForStability();\n\n    expect(listItem.disabled).toBeTrue();\n    expect(internalRoot.tabIndex).toBe(-1);\n  });\n\n  it('ripple and focus ring rendered on interactive', async () => {\n    const root = env.render(html`<md-list-item></md-list-item>`);\n\n    const listItem = root.querySelector('md-list-item')!;\n\n    await env.waitForStability();\n\n    let rippleEl = listItem.renderRoot.querySelector('md-ripple');\n    let focusRingEl = listItem.renderRoot.querySelector('md-focus-ring');\n\n    expect(rippleEl).toBeNull();\n    expect(focusRingEl).toBeNull();\n\n    listItem.type = 'button';\n\n    await env.waitForStability();\n\n    rippleEl = listItem.renderRoot.querySelector('md-ripple');\n    focusRingEl = listItem.renderRoot.querySelector('md-focus-ring');\n\n    expect(rippleEl).toBeTruthy();\n    expect(focusRingEl).toBeTruthy();\n  });\n});\n\ndescribe('<md-list-item> link', () => {\n  const env = new Environment();\n\n  describe('.styles', () => {\n    createTokenTests(MdListItem.styles);\n  });\n\n  it('setting href renders an anchor tag', async () => {\n    const root = env.render(\n      html`<md-list-item href=\"https://google.com\"></md-list-item>`,\n    );\n\n    const listItem = root.querySelector('md-list-item')!;\n\n    await env.waitForStability();\n\n    const internalRoot = listItem.renderRoot.querySelector(\n      '#item',\n    ) as HTMLElement;\n\n    expect(internalRoot.tagName).toBe('A');\n  });\n\n  it('setting target without href renders nothing', async () => {\n    const root = env.render(\n      html`<md-list-item target=\"_blank\"></md-list-item>`,\n    );\n\n    const listItem = root.querySelector('md-list-item')!;\n\n    await env.waitForStability();\n\n    const internalRoot = listItem.renderRoot.querySelector(\n      '#item',\n    ) as HTMLElement;\n\n    expect(internalRoot.hasAttribute('target')).toBe(false);\n  });\n});\n"
  },
  {
    "path": "list/test/assets.ts",
    "content": "/** @license Googler-authored internal-only code. */\n\n/**\n * User avatar as a dataurl.\n */\nexport const AVATAR_URL =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=';\n\n/**\n * Example image as a dataurl.\n */\nexport const IMAGE_URL =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAYAAADG4PRLAAAK4GlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUk8kWgOf/00NCgNClhN6RTgApoYciSAdRCUkgoYSYEBDEzuIKrgoiIqCu4EpTcHUpshbEggVRbNgXRBTUdbFgQ2V/4BF295333nn3nPnnO/e/c+fee2bOuQMA2Z8lFKbBcgCkCzJFYX6etJjYOBruKcABWUAFENBnscVCRmhoEEBkdv67vL+N2CFyw2LK17///6+iwOGK2QBA8QgncsTsdIQ7kfGcLRRlAoA6iOj1sjOFU3wNYUUREiDCT6Y4eYY/TnHiNKNJ0zYRYV4I0wDAk1gsUTIAJHNET8tiJyN+SFM5WAk4fAHCeQi7sXksDsLHETZPT8+Y4hGEjRF7IQBkpDqAnvgXn8l/858o9c9iJUt5Jq9pwXvzxcI0Vs7/WZr/Lelpktk9DJFB4on8w6ZqitTvTmpGoJQFiQtDZpnPman7FPMk/pGzzBZ7xc0yh+UdKF2btjBolpP4vkypn0xmxCxzxT7hsyzKCJPulSTyYswySzS3ryQ1UqrncZlS/7m8iOhZzuJHLZxlcWp44JyNl1QvkoRJ4+cK/Dzn9vWV5p4u/ku+fKZ0bSYvwl+aO2sufq6AMedTHCONjcP19pmziZTaCzM9pXsJ00Kl9tw0P6lenBUuXZuJHM65taHSGqawAkJnGQQBP0AD/sAbhCGzHUCyz+SuyJxKxCtDmCPiJ/MyaQzktnFpTAHb0pxmY2VjA8DU3Z05Dm/Dpu8kpHxyTpexHznG75H7UjynSywFoK0AANV7czr9PQBQ8gFo7WJLRFkzOvTUBwOIgAIUgRrQAnrAGFgAG+AAXIAH8AEBIAREgFiwFLABD6QDEcgGeWAdKABFYBvYASrAXlAD6sAhcAS0gePgNDgPLoNr4Ba4DwbAMHgBxsB7MAFBEA4iQ1RIDdKGDCAzyAaiQ26QDxQEhUGxUAKUDAkgCZQHbYCKoBKoAtoH1UM/Q8eg09BFqA+6Cw1Co9Ab6DOMgkmwIqwJG8LzYTrMgAPhCHgJnAwvh3PhfHgLXA5XwwfhVvg0fBm+BQ/AL+BxFEDJoJRROigLFB3lhQpBxaGSUCLUalQhqgxVjWpCdaC6UTdQA6iXqE9oLJqKpqEt0C5of3Qkmo1ejl6N3oyuQNehW9Fn0TfQg+gx9DcMGaOBMcM4Y5iYGEwyJhtTgCnDHMC0YM5hbmGGMe+xWKwy1gjriPXHxmJTsCuxm7G7sc3YTmwfdgg7jsPh1HBmOFdcCI6Fy8QV4HbhDuJO4a7jhnEf8TJ4bbwN3hcfhxfg1+PL8A34k/jr+Gf4CYIcwYDgTAghcAg5hK2E/YQOwlXCMGGCKE80IroSI4gpxHXEcmIT8RzxAfGtjIyMroyTzCIZvsxamXKZwzIXZAZlPpEUSKYkL1I8SULaQqoldZLukt6SyWRDsgc5jpxJ3kKuJ58hPyJ/lKXKWsoyZTmya2QrZVtlr8u+ohAoBhQGZSkll1JGOUq5SnkpR5AzlPOSY8mtlquUOybXLzcuT5W3lg+RT5ffLN8gf1F+RAGnYKjgo8BRyFeoUTijMERFUfWoXlQ2dQN1P/UcdVgRq2ikyFRMUSxSPKTYqzimpKBkpxSltEKpUumE0oAyStlQmamcprxV+YjybeXPKpoqDBWuyiaVJpXrKh9U56l6qHJVC1WbVW+pflajqfmopaoVq7WpPVRHq5uqL1LPVt+jfk795TzFeS7z2PMK5x2Zd08D1jDVCNNYqVGj0aMxrqml6acp1NyleUbzpZaylodWilap1kmtUW2qtps2X7tU+5T2c5oSjUFLo5XTztLGdDR0/HUkOvt0enUmdI10I3XX6zbrPtQj6tH1kvRK9br0xvS19YP18/Qb9e8ZEAzoBjyDnQbdBh8MjQyjDTcathmOGKkaMY1yjRqNHhiTjd2NlxtXG980wZrQTVJNdptcM4VN7U15ppWmV81gMwczvtlusz5zjLmTucC82rzfgmTBsMiyaLQYtFS2DLJcb9lm+Wq+/vy4+cXzu+d/s7K3SrPab3XfWsE6wHq9dYf1GxtTG7ZNpc1NW7Ktr+0a23bb13Zmdly7PXZ37Kn2wfYb7bvsvzo4OogcmhxGHfUdExyrHPvpivRQ+mb6BSeMk6fTGqfjTp+cHZwznY84/+Fi4ZLq0uAyssBoAXfB/gVDrrquLNd9rgNuNLcEtx/dBtx13Fnu1e6PPfQ8OB4HPJ4xTBgpjIOMV55WniLPFs8PXs5eq7w6vVHeft6F3r0+Cj6RPhU+j3x1fZN9G33H/Oz9Vvp1+mP8A/2L/fuZmkw2s545FuAYsCrgbCApMDywIvBxkGmQKKgjGA4OCN4e/GChwULBwrYQEMIM2R7yMNQodHnor4uwi0IXVS56GmYdlhfWHU4NXxbeEP4+wjNia8T9SONISWRXFCUqPqo+6kO0d3RJ9EDM/JhVMZdj1WP5se1xuLiouANx44t9Fu9YPBxvH18Qf3uJ0ZIVSy4uVV+atvTEMsoy1rKjCZiE6ISGhC+sEFY1azyRmViVOMb2Yu9kv+B4cEo5o1xXbgn3WZJrUknSSLJr8vbkUZ47r4z3ku/Fr+C/TvFP2ZvyITUktTZ1Mi06rTkdn56QfkygIEgVnM3QyliR0Sc0ExYIB5Y7L9+xfEwUKDoghsRLxO2ZikiT1CMxlnwnGcxyy6rM+pgdlX10hfwKwYqeHNOcTTnPcn1zf1qJXsle2ZWnk7cub3AVY9W+1dDqxNVda/TW5K8ZXuu3tm4dcV3quivrrdaXrH+3IXpDR75m/tr8oe/8vmsskC0QFfRvdNm493v09/zvezfZbtq16Vshp/BSkVVRWdGXzezNl36w/qH8h8ktSVt6tzps3bMNu02w7Xaxe3FdiXxJbsnQ9uDtraW00sLSdzuW7bhYZle2dydxp2TnQHlQefsu/V3bdn2p4FXcqvSsbK7SqNpU9WE3Z/f1PR57mvZq7i3a+/lH/o939vnta602rC6rwdZk1TzdH7W/+yf6T/UH1A8UHfhaK6gdqAurO1vvWF/foNGwtRFulDSOHow/eO2Q96H2Joumfc3KzUWHwWHJ4ec/J/x8+0jgka6j9KNNvxj8UtVCbSlshVpzWsfaeG0D7bHtfccCjnV1uHS0/Gr5a+1xneOVJ5RObD1JPJl/cvJU7qnxTmHny9PJp4e6lnXdPxNz5ubZRWd7zwWeu3De9/yZbkb3qQuuF45fdL547BL9Uttlh8utPfY9LVfsr7T0OvS2XnW82n7N6VpH34K+k9fdr5++4X3j/E3mzcu3Ft7qux15+05/fP/AHc6dkbtpd1/fy7o3cX/tA8yDwodyD8seaTyq/s3kt+YBh4ETg96DPY/DH98fYg+9eCJ+8mU4/yn5adkz7Wf1IzYjx0d9R689X/x8+IXwxcTLgt/lf696Zfzqlz88/ugZixkbfi16Pflm81u1t7Xv7N51jYeOP3qf/n7iQ+FHtY91n+ifuj9Hf342kf0F96X8q8nXjm+B3x5Mpk9OClki1nQrgEIGnJQEwJtapDeOBYCK9OXExTO99bRAM++BaQL/iWf672lxAKCmH4CIlQAEXQFgVwXSziL+KcibIJSC6F0AbGsrHf8ScZKtzYwvkjvSmjycnHxrDACuGICvxZOTEzWTk19rkGDvA9CZM9PTT4kW8r7IxgH8xif38ne/Av+QmX7/Lzn+cwZTEdiBf85/AsPlG21SePNzAAAAXGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAACoAIABAAAAAEAAABwoAMABAAAAAEAAABwAAAAAAzs/hgAAAK2aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTEyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjExMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqSz/U6AAAH10lEQVR4Ae2d+0/bSBDHJ0+SAAmEV4uOQum1V+lOp7v74f7/P+GkU6WWKyWEvENCQkLeCTdft0EgIDj22t61dyWUYK93x/PxrHd3Zjehk6+5W9JJVQ3MwqpKruX+rgENUPEnQQPUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiRxWX/0nxOzc9+nLyH4XDYfrz998oFAo9mc8PB33XhN7e3lK5UqHuzQ1ddzpUu7wkHPNr8h3Aq1abavXGHa98oUjD4ejuf7998RXA6XRKF8UiTSbjO0433JyWq1XfWqGvAJarNWq1O3fw5l9KlSq1rx8fn59X+dM3AEejERVLZba02SMe4/GYCnxuOn187lFmxQ74BmChVKL+YPCs+lttvBvrz55X9YQvAHa4t1mq1BYymEwmVK7VCNbop6Q8QDSL+UKJOy6TF7l0Ol0qlisv5lMpg/IA640GXTabpnSO8SB6qYuaWlMFSZRJaYAY3xWKpaWGCLDYs/M8zWb+6NAoDbBYLhszLssaRLN5RVfcqfFDUhZgr9c3hgZWIEx4wJ9jKzTz3rRSvpvXKAkQzR/eZXaawU73hqo+GFYoCbDVvubpscXDBjNWkDu/oMGCsaOZMrzOoxzAwWBIufyFEL2NeegBS1bZW6EUQCga7qFOtysEIAopV+vsdhJXnjDBTBakFMBef0DVWl2oxRjvU3Y5qTpPqhTAfKFAN72eyWfTfDZMBNTZslVMygBsXrWo0TA342IFBLwVKnZolACId18uz+M2Hr85lRCCUeJQjNlMrfALJQAiTMKNjobRoemq5fiVHiDcP99y504Z3oNyUVfJcAqrY4VSA/zuPShZmu98QGaJfy55nrQiYJJgiSptZZUaIGZcMO5zM2FYkefBPQKkVEjSAkRnAp0KzLy4nfo83qzweFOFDo20AOGohQV6lS6MeFL3H55l71dKgGjGihyk5GX8ymA45PCLsi2Px7IwrOSXEiAmq+Hu8TpVOAiqfe1dK2Dm/qUDCKuDq0gGD8FkMuWAqSK3BC8HTJlRthN5pAOICWuZPOUjhjedygtQuuVl6fU1+vXjL9JAjK/EaWVlxQnjEVKmdACxlm97Kyvk5oJQiHRNaBCULvIeNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqpZuJEXlzIsvC5PqQN1KAg3k8Ht0FAkeiEYrHYpTg6bZ4PO76rlAa4ALKgNbv96nO8agNjpXByt4Zh1rM+PjcWxIKhRkaUSQcoUQiTq/39mgjk6FkMuEKTGEA4XJxc9Y+EolSLCZM/AcYAQeWhoUvlwxvtGBjBGxrwtkNx++4O2Y/5jdKJZPGfO7+qz2GmnhQtuh/QicCfj8QPrx//v3kSNj7czecSqXo77/+eO605eOA0eBQ+5PTb4S9Z+wkyHh8eMAwt+wUs+haMb8fiIUhTqxZWCR5z4E1EnDgnuZy9OnzF9vwIDtk/PT5hE7Pco4FSDnTBi3SvKTnAA8BxAijmL/fRIiKsrC1CdxkR2/e8BaYYre+1MMIpgQl5y4uDHh2lm0/BxxlYvHMOdch8uFAfRogK+GSQxirHIfjBLw5VJRdYku8arXmh4R8Bh4g3t+nZ+eE5dZOJ9SBukQ+KIEGiB4nmjXEgLqV0NlDpJuopjTQAAfDgetrL/CgYHsTu0OU+QMXaIBYd+jV2ov2tZiNFQILEAtXMMviVWpdt4U0o4EFiH21vVwTj0G+iI5TYAEi4nrRHKfTltmHV2Nkf/PZwAKcztirwGMzrxLmj0UsIg0swFuG5yVA1D17YoP2ZR+owAJcVlGy5g8sQPyuEv68SrFolCKRiO3qvbsD26LbKyDGYRBRAQq0KkWEAYp4gIILMBrjZWNxq/q3fV0iwTE0Mfv1BxZglIOR1tfWbIOwWkCa64YMdlNgAUJxCHXw6rcFs5sbQuoONMBMep3W1lbtGsHS129ns8KsP9AA0Qs82N9fGoDdC37afy2kBwo5Ag0QCsBy7s0NMc0ZynspbWU3KZNJv5TN9PnAA0RX/t3RoSs9UgT7vj9+K+TdNycceIBQBN6DRwcH3Ct0LkgPY87jw0Phgb4a4I9H+dXeLn14d+zI4B7wPn54Tzvb4gN8nXvk5jbu0KcT3f/dnW2W9pbOeKsv7FgoIiVTSfr48zvKpMW99+7LJQRgJBKmvd0dV/cVy6yv378PYd93tncovZ6mk6+nxg9kWQ0+wrqN7MYmHXFofdLB9RFC1kYI055EBQEcYjhz+YLxe/RmRUPLkN3cpP1Xu8anEy3FPVlmQizwXoG++ToHgSEG9m9rXjWNjdcRFoiIMoTiI2E6LLGSoNXVFA/OV2k7u8UdFfe25tIAX3jkAHKV32Op5L7hAP7uiOX1gT+8+VgfiPUOYe6ohDmvwxb3SFoN8JFKnj4AMJi5EeHDe7oGa0f1MMKa3qS5SgOUBoU1QTRAa3qT5ioNUBoU1gTRAK3pTZqrNEBpUFgTRAO0pjdprtIApUFhTRAN0JrepLlKA5QGhTVBNEBrepPmKg1QGhTWBNEArelNmqs0QGlQWBNEA7SmN2mugj/Qu3XGzqhB7G5yzsgorNT/AQI1K7I2zvkPAAAAAElFTkSuQmCC';\n\n/**\n * One frame of the color blue in webm as a dataurl.\n *\n * Generated with\n * ffmpeg -f lavfi -i color=blue:s=1280x720 -vframes 1 ~/out.webm\n * cat ~/out.webm | base64 | tr -d '\\n'\n */\nexport const VIDEO_URL =\n  'data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAJrEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHYTbuMU6uEElTDZ1OsggEgTbuMU6uEHFO7a1OsggJV7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmsirXsYMPQkBNgI1MYXZmNTkuMjcuMTAwV0GNTGF2ZjU5LjI3LjEwMESJiEBEAAAAAAAAFlSua8OuAQAAAAAAADrXgQFzxYjFaDr5zFhASZyBACK1nIN1bmSIgQCGhVZfVlA5g4EBI+ODhAJiWgDgi7CCBQC6ggLQmoECElTDZ0CBc3OgY8CAZ8iaRaOHRU5DT0RFUkSHjUxhdmY1OS4yNy4xMDBzc9tjwItjxYjFaDr5zFhASWfIpUWjh0VOQ09ERVJEh5hMYXZjNTkuMzcuMTAwIGxpYnZweC12cDlnyKJFo4hEVVJBVElPTkSHlDAwOjAwOjAwLjA0MDAwMDAwMAAAH0O2dUCo54EAo0CigQAAgIJJg0IAT/As9gA4JBwYShgAQGIMw/o6+kdo6+kAuaP9KgAAAAAcZw5Vl/m2cRY6ymCqlMFVJYKqSwVSleqUBBBCAAAAABxnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAAAAAHGcOVZf5tnEWOspgqpTBVSWCqksFUpXqlAQQQgBnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAHFO7a5G7j7OBALeK94EB8YIBp/CBAw==';\n"
  },
  {
    "path": "list/test/window_size.json",
    "content": "{\n  \"capabilities\": {\n    \"goog:chromeOptions\": {\n      \"args\": [\n        \"--window-position=0,0\",\n        \"--window-size=1920,1200\"\n      ]\n    }\n  },\n  \"extension\": {\n    \"xvfbResolution\": \"1920x1200x24\"\n  }\n}"
  },
  {
    "path": "menu/_menu-item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/menuitem/menu-item' show theme;\n"
  },
  {
    "path": "menu/_menu.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/menu' show theme;\n"
  },
  {
    "path": "menu/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n  title,\n} from './material-collection.js';\nimport {Corner, FocusState} from '@material/web/menu/menu.js';\nimport {\n  boolInput,\n  Knob,\n  numberInput,\n  selectDropdown,\n  textInput,\n} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Menu',\n  [\n    new Knob('menu', {ui: title()}),\n    new Knob('anchorCorner', {\n      defaultValue: Corner.END_START as Corner,\n      ui: selectDropdown<Corner>({\n        options: [\n          {label: Corner.START_START, value: Corner.START_START},\n          {label: Corner.START_END, value: Corner.START_END},\n          {label: Corner.END_START, value: Corner.END_START},\n          {label: Corner.END_END, value: Corner.END_END},\n        ],\n      }),\n    }),\n    new Knob('menuCorner', {\n      defaultValue: Corner.START_START as Corner,\n      ui: selectDropdown<Corner>({\n        options: [\n          {label: Corner.START_START, value: Corner.START_START},\n          {label: Corner.START_END, value: Corner.START_END},\n          {label: Corner.END_START, value: Corner.END_START},\n          {label: Corner.END_END, value: Corner.END_END},\n        ],\n      }),\n    }),\n    new Knob('defaultFocus', {\n      defaultValue: FocusState.FIRST_ITEM as FocusState,\n      ui: selectDropdown<FocusState>({\n        options: [\n          {label: FocusState.FIRST_ITEM, value: FocusState.FIRST_ITEM},\n          {label: FocusState.LAST_ITEM, value: FocusState.LAST_ITEM},\n          {label: FocusState.LIST_ROOT, value: FocusState.LIST_ROOT},\n          {label: FocusState.NONE, value: FocusState.NONE},\n        ],\n      }),\n    }),\n    new Knob('positioning', {\n      defaultValue: 'absolute' as const,\n      ui: selectDropdown<'absolute' | 'fixed' | 'document' | 'popover'>({\n        options: [\n          {label: 'absolute', value: 'absolute'},\n          {label: 'fixed', value: 'fixed'},\n          {label: 'document', value: 'document'},\n          {label: 'popover', value: 'popover'},\n        ],\n      }),\n    }),\n    new Knob('open', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('quick', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('hasOverflow', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('stayOpenOnOutsideClick', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('stayOpenOnFocusout', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('skipRestoreFocus', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('xOffset', {\n      defaultValue: 0,\n      ui: numberInput(),\n    }),\n    new Knob('yOffset', {\n      defaultValue: 0,\n      ui: numberInput(),\n    }),\n    new Knob('noHorizontalFlip', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('noVerticalFlip', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('typeaheadDelay', {\n      defaultValue: 200,\n      ui: numberInput(),\n    }),\n    new Knob('listTabIndex', {\n      defaultValue: -1,\n      ui: numberInput(),\n    }),\n\n    // menu-item knobs\n    new Knob('menu-item', {ui: title()}),\n    new Knob('keepOpen', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('disabled', {\n      defaultValue: false,\n      ui: boolInput(),\n    }),\n    new Knob('href', {\n      defaultValue: 'https://google.com',\n      ui: textInput(),\n    }),\n    new Knob('link icon', {\n      defaultValue: 'open_in_new',\n      ui: textInput(),\n    }),\n\n    // sub-menu knobs\n    new Knob('sub-menu', {ui: title()}),\n    new Knob('submenu.anchorCorner', {\n      defaultValue: Corner.START_END as Corner,\n      ui: selectDropdown<Corner>({\n        options: [\n          {label: Corner.START_START, value: Corner.START_START},\n          {label: Corner.START_END, value: Corner.START_END},\n          {label: Corner.END_START, value: Corner.END_START},\n          {label: Corner.END_END, value: Corner.END_END},\n        ],\n      }),\n    }),\n    new Knob('submenu.menuCorner', {\n      defaultValue: Corner.START_START as Corner,\n      ui: selectDropdown<Corner>({\n        options: [\n          {label: Corner.START_START, value: Corner.START_START},\n          {label: Corner.START_END, value: Corner.START_END},\n          {label: Corner.END_START, value: Corner.END_START},\n          {label: Corner.END_END, value: Corner.END_END},\n        ],\n      }),\n    }),\n    new Knob('hoverOpenDelay', {\n      defaultValue: 400,\n      ui: numberInput(),\n    }),\n    new Knob('hoverCloseDelay', {\n      defaultValue: 400,\n      ui: numberInput(),\n    }),\n    new Knob('submenu item icon', {\n      defaultValue: 'navigate_next',\n      ui: textInput(),\n    }),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});\n"
  },
  {
    "path": "menu/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "menu/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/filled-button.js';\nimport '@material/web/divider/divider.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/menu/menu.js';\nimport '@material/web/menu/menu-item.js';\nimport '@material/web/menu/sub-menu.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {CloseMenuEvent} from '@material/web/menu/internal/controllers/shared.js';\nimport {Corner, FocusState, MdMenu, MenuItem} from '@material/web/menu/menu.js';\nimport {css, html} from 'lit';\n\n/** Knob types for Menu stories. */\nexport interface StoryKnobs {\n  menu: void;\n  anchorCorner: Corner | undefined;\n  menuCorner: Corner | undefined;\n  defaultFocus: FocusState | undefined;\n  positioning: 'absolute' | 'fixed' | 'document' | 'popover' | undefined;\n  open: boolean;\n  quick: boolean;\n  hasOverflow: boolean;\n  stayOpenOnOutsideClick: boolean;\n  stayOpenOnFocusout: boolean;\n  skipRestoreFocus: boolean;\n  xOffset: number;\n  yOffset: number;\n  noVerticalFlip: boolean;\n  noHorizontalFlip: boolean;\n  typeaheadDelay: number;\n  listTabIndex: number;\n\n  'menu-item': void;\n  keepOpen: boolean;\n  disabled: boolean;\n  href: string;\n  'link icon': string;\n\n  'sub-menu': void;\n  'submenu.anchorCorner': Corner | undefined;\n  'submenu.menuCorner': Corner | undefined;\n  hoverOpenDelay: number;\n  hoverCloseDelay: number;\n  'submenu item icon': string;\n}\n\nconst fruitNames = [\n  'Apple',\n  'Apricot',\n  'Avocado',\n  'Green Apple',\n  'Green Grapes',\n  'Olive',\n  'Orange',\n];\n\nconst sharedStyle = css`\n  #anchor {\n    display: block;\n    border: 1px solid var(--md-sys-color-on-background);\n    color: var(--md-sys-color-on-background);\n    width: 100px;\n    padding: 16px;\n    text-align: center;\n  }\n  .md-stories-bg-override {\n    display: flex;\n    justify-content: center;\n    width: min(700px, 80vw);\n  }\n  .root {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n  .output {\n    color: var(--md-sys-color-on-background);\n    margin-top: 4px;\n    font-family: sans-serif;\n  }\n  [dir='rtl'] md-icon {\n    transform: scaleX(-1);\n  }\n  [slot='headline'] {\n    white-space: nowrap;\n  }\n`;\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'Menu with items',\n  styles: sharedStyle,\n  render(knobs) {\n    return html`\n      <div class=\"root\">\n        <div\n          style=\"${knobs.positioning === 'document'\n            ? ''\n            : 'position:relative;'}\">\n          <md-filled-button\n            @click=${toggleMenu}\n            @keydown=${toggleMenu}\n            aria-haspopup=\"true\"\n            aria-controls=\"menu\"\n            aria-expanded=\"false\"\n            id=\"button\">\n            Open Menu\n          </md-filled-button>\n          <md-menu\n            id=\"menu\"\n            anchor=\"button\"\n            tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}\n            style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}\n            .quick=${knobs.quick}\n            .hasOverflow=${knobs.hasOverflow}\n            aria-label=\"Menu of fruit\"\n            .anchorCorner=\"${knobs.anchorCorner!}\"\n            .menuCorner=\"${knobs.menuCorner!}\"\n            .xOffset=${knobs.xOffset}\n            .yOffset=${knobs.yOffset}\n            .noVerticalFlip=${knobs.noVerticalFlip}\n            .noHorizontalFlip=${knobs.noHorizontalFlip}\n            .positioning=${knobs.positioning!}\n            .defaultFocus=${knobs.defaultFocus!}\n            .skipRestoreFocus=${knobs.skipRestoreFocus}\n            .typeaheadDelay=${knobs.typeaheadDelay}\n            .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}\n            .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}\n            @close-menu=${displayCloseEvent}\n            @closed=${setButtonAriaExpandedFalse}>\n            ${fruitNames.map(\n              (name, index) =>\n                html`<md-menu-item\n                  id=${index}\n                  .keepOpen=${knobs.keepOpen}\n                  .disabled=${knobs.disabled}>\n                  <div slot=\"headline\">${name}</div>\n                </md-menu-item>`,\n            )}\n          </md-menu>\n        </div>\n        <pre class=\"output\"></pre>\n      </div>\n    `;\n  },\n};\n\nconst linkable: MaterialStoryInit<StoryKnobs> = {\n  name: 'Menu with links',\n  styles: sharedStyle,\n  render(knobs) {\n    const items = fruitNames.map((name, index) => {\n      return html` <md-menu-item\n          id=${index}\n          target=\"_blank\"\n          .disabled=${knobs.disabled}\n          .href=${knobs.href}>\n          <div slot=\"headline\">${name}</div>\n          <md-icon slot=\"end\"> ${knobs['link icon']} </md-icon>\n        </md-menu-item>\n        ${index === 2\n          ? html`<md-divider role=\"separator\" tabindex=\"-1\"></md-divider>`\n          : ''}`;\n    });\n\n    return html`\n      <div class=\"root\">\n        <div\n          style=\"${knobs.positioning === 'document'\n            ? ''\n            : 'position:relative;'}\">\n          <md-filled-button\n            @click=${toggleMenu}\n            @keydown=${toggleMenu}\n            aria-haspopup=\"true\"\n            aria-controls=\"menu\"\n            aria-expanded=\"false\"\n            id=\"button\">\n            Open Menu\n          </md-filled-button>\n          <md-menu\n            id=\"menu\"\n            anchor=\"button\"\n            tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}\n            style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}\n            .quick=${knobs.quick}\n            .hasOverflow=${knobs.hasOverflow}\n            aria-label=\"Menu with links\"\n            .anchorCorner=\"${knobs.anchorCorner!}\"\n            .menuCorner=\"${knobs.menuCorner!}\"\n            .xOffset=${knobs.xOffset}\n            .yOffset=${knobs.yOffset}\n            .noVerticalFlip=${knobs.noVerticalFlip}\n            .noHorizontalFlip=${knobs.noHorizontalFlip}\n            .positioning=${knobs.positioning!}\n            .defaultFocus=${knobs.defaultFocus!}\n            .skipRestoreFocus=${knobs.skipRestoreFocus}\n            .typeaheadDelay=${knobs.typeaheadDelay}\n            .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}\n            .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}\n            @close-menu=${displayCloseEvent}\n            @closed=${setButtonAriaExpandedFalse}>\n            ${items}\n          </md-menu>\n        </div>\n        <pre class=\"output\"></pre>\n      </div>\n    `;\n  },\n};\n\nconst submenu: MaterialStoryInit<StoryKnobs> = {\n  name: 'Menu with sub-menus',\n  styles: sharedStyle,\n  render(knobs) {\n    let currentIndex = -1;\n\n    // This is the third layer with all menu items which close on selection\n    const layer2 = fruitNames.slice(4).map((name) => {\n      currentIndex++;\n\n      return html` <md-menu-item\n        .keepOpen=${knobs.keepOpen}\n        .disabled=${knobs.disabled}>\n        <div slot=\"headline\">${name}</div>\n      </md-menu-item>`;\n    });\n\n    // This is the second layer with a mix of submenu items and menu items\n    const layer1 = [\n      ...fruitNames.slice(0, 2).map((name) => {\n        currentIndex++;\n\n        return html` <md-sub-menu\n          id=${currentIndex}\n          .anchorCorner=${knobs['submenu.anchorCorner']!}\n          .menuCorner=${knobs['submenu.menuCorner']!}\n          .hoverOpenDelay=${knobs.hoverOpenDelay}\n          .hoverCloseDelay=${knobs.hoverCloseDelay}>\n          <md-menu-item\n            slot=\"item\"\n            id=${++currentIndex}\n            .disabled=${knobs.disabled}>\n            <div slot=\"headline\">${name}</div>\n            <md-icon slot=\"end\"> ${knobs['submenu item icon']} </md-icon>\n          </md-menu-item>\n          <!-- NOTE: slot=submenu -->\n          <md-menu\n            slot=\"menu\"\n            aria-label=\"Second sub-menu of fruit\"\n            .xOffset=${knobs.xOffset}\n            .yOffset=${knobs.yOffset}\n            .positioning=${knobs.positioning!}\n            .defaultFocus=${knobs.defaultFocus!}\n            .typeaheadDelay=${knobs.typeaheadDelay}>\n            ${layer2}\n          </md-menu>\n        </md-sub-menu>`;\n      }),\n      ...fruitNames.slice(2, 5).map((name) => {\n        currentIndex++;\n\n        return html` <md-menu-item\n          id=${currentIndex}\n          .keepOpen=${knobs.keepOpen}\n          .disabled=${knobs.disabled}>\n          <div slot=\"headline\">${name}</div>\n        </md-menu-item>`;\n      }),\n    ];\n\n    // This is the first layer with all sub menu items\n    const layer0 = fruitNames.map((name) => {\n      currentIndex++;\n\n      return html` <md-sub-menu\n        id=${currentIndex}\n        .anchorCorner=${knobs['submenu.anchorCorner']!}\n        .menuCorner=${knobs['submenu.menuCorner']!}\n        .hoverOpenDelay=${knobs.hoverOpenDelay}\n        .hoverCloseDelay=${knobs.hoverCloseDelay}>\n        <md-menu-item\n          slot=\"item\"\n          id=${++currentIndex}\n          .disabled=${knobs.disabled}>\n          <div slot=\"headline\">${name}</div>\n          <md-icon slot=\"end\"> ${knobs['submenu item icon']} </md-icon>\n        </md-menu-item>\n        <!-- NOTE: slot=submenu -->\n        <md-menu\n          slot=\"menu\"\n          aria-label=\"Sub-menu of fruit\"\n          .xOffset=${knobs.xOffset}\n          .yOffset=${knobs.yOffset}\n          .positioning=${knobs.positioning!}\n          .defaultFocus=${knobs.defaultFocus!}\n          .typeaheadDelay=${knobs.typeaheadDelay}>\n          ${layer1}\n        </md-menu>\n      </md-sub-menu>`;\n    });\n\n    return html`\n      <div class=\"root\">\n        <div\n          style=\"${knobs.positioning === 'document'\n            ? ''\n            : 'position:relative;'}\">\n          <md-filled-button\n            @click=${toggleMenu}\n            @keydown=${toggleMenu}\n            aria-haspopup=\"true\"\n            aria-controls=\"menu\"\n            aria-expanded=\"false\"\n            id=\"button\">\n            Open Menu\n          </md-filled-button>\n          <!-- NOTE: has-overflow -->\n          <md-menu\n            anchor=\"button\"\n            id=\"menu\"\n            tabindex=${knobs.defaultFocus === 'list-root' ? '0' : '-1'}\n            style=${knobs.defaultFocus === 'list-root' ? 'display:flex;' : ''}\n            has-overflow\n            .quick=${knobs.quick}\n            aria-label=\"Menu of fruit\"\n            .anchorCorner=\"${knobs.anchorCorner!}\"\n            .menuCorner=\"${knobs.menuCorner!}\"\n            .xOffset=${knobs.xOffset}\n            .yOffset=${knobs.yOffset}\n            .noVerticalFlip=${knobs.noVerticalFlip}\n            .noHorizontalFlip=${knobs.noHorizontalFlip}\n            .positioning=${knobs.positioning!}\n            .defaultFocus=${knobs.defaultFocus!}\n            .skipRestoreFocus=${knobs.skipRestoreFocus}\n            .typeaheadDelay=${knobs.typeaheadDelay}\n            .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}\n            .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}\n            @close-menu=${displayCloseEvent}\n            @closed=${setButtonAriaExpandedFalse}>\n            ${layer0}\n          </md-menu>\n        </div>\n        <pre class=\"output\"></pre>\n      </div>\n    `;\n  },\n};\n\nconst menuWithoutButton: MaterialStoryInit<StoryKnobs> = {\n  name: 'Menu without button',\n  styles: [\n    sharedStyle,\n    css`\n      #anchor {\n        display: block;\n        border: 1px solid var(--md-sys-color-on-background);\n        color: var(--md-sys-color-on-background);\n        width: 100px;\n      }\n      #storyWrapper {\n        display: flex;\n        justify-content: center;\n        width: min(700px, 80vw);\n      }\n    `,\n  ],\n  render(knobs) {\n    return html`\n      <div\n        class=\"root\"\n        style=\"${knobs.positioning === 'document' ? '' : 'position:relative;'}\">\n        <div id=\"anchor\"> This is the anchor (use the \"open\" knob) </div>\n        <md-menu\n          slot=\"menu\"\n          anchor=\"anchor\"\n          .open=${knobs.open}\n          .quick=${knobs.quick}\n          .hasOverflow=${knobs.hasOverflow}\n          aria-label=\"Menu of fruit\"\n          .anchorCorner=\"${knobs.anchorCorner!}\"\n          .menuCorner=\"${knobs.menuCorner!}\"\n          .xOffset=${knobs.xOffset}\n          .yOffset=${knobs.yOffset}\n          .noVerticalFlip=${knobs.noVerticalFlip}\n          .noHorizontalFlip=${knobs.noHorizontalFlip}\n          .positioning=${knobs.positioning!}\n          .defaultFocus=${knobs.defaultFocus!}\n          .skipRestoreFocus=${knobs.skipRestoreFocus}\n          .typeaheadDelay=${knobs.typeaheadDelay}\n          .stayOpenOnOutsideClick=${knobs.stayOpenOnOutsideClick}\n          .stayOpenOnFocusout=${knobs.stayOpenOnFocusout}\n          @close-menu=${displayCloseEvent}>\n          ${fruitNames.map(\n            (name, index) => html`\n              <md-menu-item\n                id=${index}\n                .keepOpen=${knobs.keepOpen}\n                .disabled=${knobs.disabled}>\n                <div slot=\"headline\">${name}</div>\n              </md-menu-item>\n            `,\n          )}\n        </md-menu>\n        <pre class=\"output\"></pre>\n      </div>\n    `;\n  },\n};\n\n/**\n * Searches for an MdMenu with the id=\"menu\" in the same shadow root and calls\n * `menu.show()` to open the menu. If it is a keyboard event, it will call show\n * only if the key is ArrowDown as is standard a11y practice. This function also\n * attempts to find a menu button with `#button` set on it and sets\n * aria-expanded=true.\n */\nfunction toggleMenu(event: Event | KeyboardEvent) {\n  // get the menu from the event\n  const root = (event.target as HTMLElement).getRootNode() as ShadowRoot;\n  const menu = root.querySelector('#menu') as MdMenu;\n\n  // determine if is keyboard event\n  const isKeyboardEvent = (\n    event: KeyboardEvent | Event,\n  ): event is KeyboardEvent => {\n    return (event as KeyboardEvent).key !== undefined;\n  };\n  const isKeyboard = isKeyboardEvent(event);\n\n  // if is a click, open the menu\n  if (!isKeyboard) {\n    menu.open = !menu.open;\n    // if is arrow down, open the menu and prevent default to prevent scrolling\n  } else if (event.key === 'ArrowDown') {\n    menu.open = !menu.open;\n    event.preventDefault();\n  }\n\n  // set aria-expanded true on the button\n  root.querySelector('#button')?.setAttribute('aria-expanded', 'true');\n}\n\n/**\n * Searches for an element with `class=\"output\"` set on it, and updates the\n * text of that element with the menu-closed event's content.\n */\nfunction displayCloseEvent(event: CloseMenuEvent) {\n  // get the output element from the shadow root\n  const root = (event.target as HTMLElement).getRootNode() as ShadowRoot;\n  const outputEl = root.querySelector('.output') as HTMLElement;\n\n  const stringifyItem = (menuItem: MenuItem & HTMLElement) => {\n    const tagName = menuItem.tagName.toLowerCase();\n    const headline = menuItem.typeaheadText;\n    return `${tagName}${\n      menuItem.id ? `[id=\"${menuItem.id}\"]` : ''\n    } > [slot=\"headline\"] > ${headline}`;\n  };\n\n  // display the event's details in the inner text of that output element\n  outputEl.textContent = `CustomEvent {\n  type: ${event.type},\n  target: ${stringifyItem(event.target as unknown as MenuItem)},\n  detail: {\n    initiator: ${stringifyItem(event.detail.initiator)},\n    itemPath: [\n      ${event.detail.itemPath.map((item) => stringifyItem(item)).join(`,\n      `)}\n    ],\n  },\n  reason: ${JSON.stringify(event.detail.reason)}\n}`;\n}\n\nfunction setButtonAriaExpandedFalse(e: Event) {\n  const root = (e.target as HTMLElement).getRootNode() as ShadowRoot;\n  // get the button element and remove aria-expaned if exists\n  root.querySelector('#button')?.removeAttribute('aria-expanded');\n}\n\n/** Menu stories. */\nexport const stories = [standard, linkable, submenu, menuWithoutButton];\n"
  },
  {
    "path": "menu/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './internal/menu.js';\nimport {MenuItemHarness} from './internal/menuitem/harness.js';\n\nexport {MenuItemHarness} from './internal/menuitem/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class MenuHarness extends Harness<Menu> {\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element as Menu;\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map(\n      (item) => new MenuItemHarness(item as typeof item & LitElement),\n    );\n  }\n\n  async show() {\n    const menu = this.element;\n    if (menu.open) {\n      return;\n    }\n\n    const opened = new Promise((resolve) => {\n      menu.addEventListener(\n        'opened',\n        () => {\n          resolve(true);\n        },\n        {once: true},\n      );\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"
  },
  {
    "path": "menu/internal/_menu.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../elevation/elevation';\n@use '../../focus/focus-ring';\n@use '../../list/list' as md-list;\n@use '../../list/list-item';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-menu-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-menu-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-menu-values();\n\n  :host {\n    @include elevation.theme(\n      (\n        'level': map.get($tokens, 'container-elevation'),\n        'shadow-color': map.get($tokens, 'container-shadow-color'),\n      )\n    );\n\n    min-width: 112px;\n    color: unset;\n    display: contents;\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape': map.get($tokens, 'container-shape'),\n      )\n    );\n  }\n\n  .menu {\n    border-radius: map.get($tokens, 'container-shape');\n    display: none;\n    inset: auto;\n    border: none;\n    padding: 0px;\n    overflow: visible;\n    // [popover] adds a canvas background\n    background-color: transparent;\n    color: inherit;\n    opacity: 0;\n    z-index: 20;\n    position: absolute;\n    user-select: none;\n    max-height: inherit;\n    height: inherit;\n    min-width: inherit;\n    max-width: inherit;\n    scrollbar-width: inherit;\n  }\n\n  .menu::backdrop {\n    display: none;\n  }\n\n  .fixed {\n    position: fixed;\n  }\n\n  .items {\n    display: block;\n    list-style-type: none;\n    margin: 0;\n    outline: none;\n    box-sizing: border-box;\n    background-color: map.get($tokens, 'container-color');\n    height: inherit;\n    max-height: inherit;\n    overflow: auto;\n    min-width: inherit;\n    max-width: inherit;\n    border-radius: inherit;\n    scrollbar-width: inherit;\n  }\n\n  .item-padding {\n    padding-block: map.get($tokens, 'top-space')\n      map.get($tokens, 'bottom-space');\n  }\n\n  .has-overflow:not([popover]) .items {\n    overflow: visible;\n  }\n\n  .has-overflow.animating .items,\n  .animating .items {\n    overflow: hidden;\n  }\n\n  .has-overflow.animating .items {\n    // Often has-overlow is set because there are submenus. Since we need\n    // overflow to be hidden to make the animation work, we need to disable\n    // submenus opening mid-animation or else it looks completely wrong.\n    pointer-events: none;\n  }\n\n  .animating ::slotted(.md-menu-hidden) {\n    opacity: 0;\n  }\n\n  slot {\n    display: block;\n    height: inherit;\n    max-height: inherit;\n  }\n\n  ::slotted(:is(md-divider, [role='separator'])) {\n    margin: 8px 0;\n  }\n\n  @media (forced-colors: active) {\n    .menu {\n      border-style: solid;\n      border-color: CanvasText;\n      border-width: 1px;\n    }\n  }\n}\n"
  },
  {
    "path": "menu/internal/controllers/menuItemController.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {\n  CloseReason,\n  createDefaultCloseMenuEvent,\n  isClosableKey,\n} from './shared.js';\n\n/**\n * Interface specific to menu item and not HTMLElement.\n *\n * NOTE: required properties are expected to be reactive.\n */\ninterface MenuItemAdditions {\n  /**\n   * Whether or not the item is in the disabled state.\n   */\n  disabled: boolean;\n  /**\n   * The text of the item that will be used for typeahead. If not set, defaults\n   * to the textContent of the element slotted into the headline.\n   */\n  typeaheadText: string;\n  /**\n   * Whether or not the item is in the selected visual state.\n   */\n  selected: boolean;\n  /**\n   * Sets the behavior and role of the menu item, defaults to \"menuitem\".\n   */\n  type: MenuItemType;\n  /**\n   * Whether it should keep the menu open after click.\n   */\n  keepOpen?: boolean;\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  href?: string;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * it should have the `md-menu-item` attribute set.\n *\n * NOTE, the required properties are recommended to be reactive properties.\n */\nexport type MenuItem = MenuItemAdditions & HTMLElement;\n\n/**\n * Supported behaviors for a menu item.\n */\nexport type MenuItemType = 'menuitem' | 'option' | 'button' | 'link';\n\n/**\n * The options used to inialize MenuItemController.\n */\nexport interface MenuItemControllerConfig {\n  /**\n   * A function that returns the headline element of the menu item.\n   */\n  getHeadlineElements: () => HTMLElement[];\n\n  /**\n   * A function that returns the supporting-text element of the menu item.\n   */\n  getSupportingTextElements: () => HTMLElement[];\n\n  /**\n   * A function that returns the default slot / misc content.\n   */\n  getDefaultElements: () => Node[];\n\n  /**\n   * The HTML Element that accepts user interactions like click. Used for\n   * occasions like programmatically clicking anchor tags when `Enter` is\n   * pressed.\n   */\n  getInteractiveElement: () => HTMLElement | null;\n}\n\n/**\n * A controller that provides most functionality of an element that implements\n * the MenuItem interface.\n */\nexport class MenuItemController implements ReactiveController {\n  private internalTypeaheadText: string | null = null;\n  private readonly getHeadlineElements: MenuItemControllerConfig['getHeadlineElements'];\n  private readonly getSupportingTextElements: MenuItemControllerConfig['getSupportingTextElements'];\n  private readonly getDefaultElements: MenuItemControllerConfig['getDefaultElements'];\n  private readonly getInteractiveElement: MenuItemControllerConfig['getInteractiveElement'];\n\n  /**\n   * @param host The MenuItem in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n    private readonly host: ReactiveControllerHost & MenuItem,\n    config: MenuItemControllerConfig,\n  ) {\n    this.getHeadlineElements = config.getHeadlineElements;\n    this.getSupportingTextElements = config.getSupportingTextElements;\n    this.getDefaultElements = config.getDefaultElements;\n    this.getInteractiveElement = config.getInteractiveElement;\n    this.host.addController(this);\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot, and if there are\n   * no slotted elements into headline, then it checks the _default_ slot, and\n   * then the `\"supporting-text\"` slot if nothing is in _default_.\n   */\n  get typeaheadText() {\n    if (this.internalTypeaheadText !== null) {\n      return this.internalTypeaheadText;\n    }\n\n    const headlineElements = this.getHeadlineElements();\n\n    const textParts: string[] = [];\n    headlineElements.forEach((headlineElement) => {\n      if (headlineElement.textContent && headlineElement.textContent.trim()) {\n        textParts.push(headlineElement.textContent.trim());\n      }\n    });\n\n    // If there are no headline elements, check the default slot's text content\n    if (textParts.length === 0) {\n      this.getDefaultElements().forEach((defaultElement) => {\n        if (defaultElement.textContent && defaultElement.textContent.trim()) {\n          textParts.push(defaultElement.textContent.trim());\n        }\n      });\n    }\n\n    // If there are no headline nor default slot elements, check the\n    //supporting-text slot's text content\n    if (textParts.length === 0) {\n      this.getSupportingTextElements().forEach((supportingTextElement) => {\n        if (\n          supportingTextElement.textContent &&\n          supportingTextElement.textContent.trim()\n        ) {\n          textParts.push(supportingTextElement.textContent.trim());\n        }\n      });\n    }\n\n    return textParts.join(' ');\n  }\n\n  /**\n   * The recommended tag name to render as the list item.\n   */\n  get tagName() {\n    const type = this.host.type;\n\n    switch (type) {\n      case 'link':\n        return 'a' as const;\n      case 'button':\n        return 'button' as const;\n      default:\n      case 'menuitem':\n      case 'option':\n        return 'li' as const;\n    }\n  }\n\n  /**\n   * The recommended role of the menu item.\n   */\n  get role() {\n    return this.host.type === 'option' ? 'option' : 'menuitem';\n  }\n\n  hostConnected() {\n    this.host.toggleAttribute('md-menu-item', true);\n  }\n\n  hostUpdate() {\n    if (this.host.href) {\n      this.host.type = 'link';\n    }\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    if (this.host.keepOpen) return;\n\n    this.host.dispatchEvent(\n      createDefaultCloseMenuEvent(this.host, {\n        kind: CloseReason.CLICK_SELECTION,\n      }),\n    );\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (event: KeyboardEvent) => {\n    // Check if the interactive element is an anchor tag. If so, click it.\n    if (this.host.href && event.code === 'Enter') {\n      const interactiveElement = this.getInteractiveElement();\n      if (interactiveElement instanceof HTMLAnchorElement) {\n        interactiveElement.click();\n      }\n    }\n\n    if (event.defaultPrevented) return;\n\n    // If the host has keepOpen = true we should ignore clicks & Space/Enter,\n    // however we always maintain the ability to close a menu with a explicit\n    // `escape` keypress.\n    const keyCode = event.code;\n    if (this.host.keepOpen && keyCode !== 'Escape') return;\n\n    if (isClosableKey(keyCode)) {\n      event.preventDefault();\n      this.host.dispatchEvent(\n        createDefaultCloseMenuEvent(this.host, {\n          kind: CloseReason.KEYDOWN,\n          key: keyCode,\n        }),\n      );\n    }\n  };\n\n  /**\n   * Use to set the typeaheadText when it changes.\n   */\n  setTypeaheadText(text: string) {\n    this.internalTypeaheadText = text;\n  }\n}\n"
  },
  {
    "path": "menu/internal/controllers/shared.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {MenuItem} from './menuItemController.js';\nimport type {Corner, SurfacePositionTarget} from './surfacePositionController.js';\n\n/**\n * The interface needed for a Menu to work with other md-menu elements.\n */\nexport interface MenuSelf {\n  /**\n   * Whether or not the menu is currently opened.\n   */\n  open: boolean;\n  /**\n   * Skips the opening and closing animations.\n   */\n  quick: boolean;\n  /**\n   * Displays overflow content like a submenu.\n   *\n   * __NOTE__: This may cause adverse effects if you set\n   * `md-menu {max-height:...}`\n   * and have items overflowing items in the \"y\" direction.\n   */\n  hasOverflow: boolean;\n  /**\n   * Communicates to the menu that it is a submenu and should not handle the\n   * ArrowLeft button in LTR and ArrowRight button in RTL.\n   */\n  isSubmenu: boolean;\n  /**\n   * After closing, does not restore focus to the last focused element before\n   * the menu was opened.\n   */\n  skipRestoreFocus: boolean;\n  /**\n   * The corner of the anchor in which the menu should anchor to.\n   */\n  anchorCorner: Corner;\n  /**\n   * The corner of the menu in which the menu should anchor from.\n   */\n  menuCorner: Corner;\n  /**\n   * The element the menu should anchor to.\n   */\n  anchorElement: (HTMLElement & Partial<SurfacePositionTarget>) | null;\n  /**\n   * What the menu should focus by default when opened.\n   */\n  defaultFocus: FocusState;\n  /**\n   * An array of items managed by the list.\n   */\n  items: MenuItem[];\n  /**\n   * The positioning strategy of the menu.\n   *\n   * - `absolute` is relative to the anchor element.\n   * - `fixed` is relative to the window\n   * - `document` is relative to the document\n   */\n  positioning?: 'absolute' | 'fixed' | 'document';\n  /**\n   * Opens the menu.\n   */\n  show: () => void;\n  /**\n   * Closes the menu.\n   */\n  close: () => void;\n}\n\n/**\n * The interface needed for a Menu to work with other md-menu elements. Useful\n * for keeping your types safe when wrapping `md-menu`.\n */\nexport type Menu = MenuSelf & LitElement;\n\n/**\n * The reason the `close-menu` event was dispatched.\n */\nexport interface Reason {\n  kind: string;\n}\n\n/**\n * The click selection reason for the `close-menu` event. The menu was closed\n * because an item was selected via user click.\n */\nexport interface ClickReason extends Reason {\n  kind: typeof CloseReason.CLICK_SELECTION;\n}\n\n/**\n * The keydown reason for the `close-menu` event. The menu was closed\n * because a specific key was pressed. The default closing keys for\n * `md-menu-item` are, Space, Enter or Escape.\n */\nexport interface KeydownReason extends Reason {\n  kind: typeof CloseReason.KEYDOWN;\n  key: string;\n}\n\n/**\n * The default menu closing reasons for the material md-menu package.\n */\nexport type DefaultReasons = ClickReason | KeydownReason;\n\n/**\n * Creates an event that closes any parent menus.\n */\nexport function createCloseMenuEvent<T extends Reason = DefaultReasons>(\n  initiator: MenuItem,\n  reason: T,\n) {\n  return new CustomEvent<{\n    initiator: MenuItem;\n    itemPath: MenuItem[];\n    reason: T;\n  }>('close-menu', {\n    bubbles: true,\n    composed: true,\n    detail: {initiator, reason, itemPath: [initiator]},\n  });\n}\n\n/**\n * Creates an event that signals to the menu that it should stay open on the\n * focusout event.\n */\nexport function createStayOpenOnFocusoutEvent() {\n  return new Event('stay-open-on-focusout', {bubbles: true, composed: true});\n}\n\n/**\n * Creates an event that signals to the menu that it should close open on the\n * focusout event.\n */\nexport function createCloseOnFocusoutEvent() {\n  return new Event('close-on-focusout', {bubbles: true, composed: true});\n}\n\n/**\n * Creates a default close menu event used by md-menu.\n */\nexport const createDefaultCloseMenuEvent = createCloseMenuEvent<DefaultReasons>;\n\n/**\n * The type of the default close menu event used by md-menu.\n */\n// tslint:disable-next-line\nexport type CloseMenuEvent<T extends Reason = DefaultReasons> = ReturnType<\n  typeof createCloseMenuEvent<T>\n>;\n\n/**\n * Creates an event that requests the given item be selected.\n */\nexport function createDeactivateTypeaheadEvent() {\n  return new Event('deactivate-typeahead', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the typeahead functionality of containing\n * menu be deactivated.\n */\nexport type DeactivateTypeaheadEvent = ReturnType<\n  typeof createDeactivateTypeaheadEvent\n>;\n\n/**\n * Creates an event that requests the typeahead functionality of containing menu\n * be activated.\n */\nexport function createActivateTypeaheadEvent() {\n  return new Event('activate-typeahead', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the typeahead functionality of containing\n * menu be activated.\n */\nexport type ActivateTypeaheadEvent = ReturnType<\n  typeof createActivateTypeaheadEvent\n>;\n\n/**\n * Keys that are used to navigate menus.\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const NavigableKey = {\n  UP: 'ArrowUp',\n  DOWN: 'ArrowDown',\n  RIGHT: 'ArrowRight',\n  LEFT: 'ArrowLeft',\n} as const;\n\n/**\n * Keys that are used for selection in menus.\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const SelectionKey = {\n  SPACE: 'Space',\n  ENTER: 'Enter',\n} as const;\n\n/**\n * Default close `Reason` kind values.\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const CloseReason = {\n  CLICK_SELECTION: 'click-selection',\n  KEYDOWN: 'keydown',\n} as const;\n\n/**\n * Keys that can close menus.\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const KeydownCloseKey = {\n  ESCAPE: 'Escape',\n  SPACE: SelectionKey.SPACE,\n  ENTER: SelectionKey.ENTER,\n} as const;\n\ntype Values<T> = T[keyof T];\n\n/**\n * Determines whether the given key code is a key code that should close the\n * menu.\n *\n * @param code The KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to close the\n * menu.\n */\nexport function isClosableKey(\n  code: string,\n): code is Values<typeof KeydownCloseKey> {\n  return Object.values(KeydownCloseKey).some((value) => value === code);\n}\n\n/**\n * Determines whether the given key code is a key code that should select a menu\n * item.\n *\n * @param code They KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to select a\n * menu item.\n */\nexport function isSelectableKey(\n  code: string,\n): code is Values<typeof SelectionKey> {\n  return Object.values(SelectionKey).some((value) => value === code);\n}\n\n/**\n * Determines whether a target element is contained inside another element's\n * composed tree.\n *\n * @param target The potential contained element.\n * @param container The potential containing element of the target.\n * @returns Whether the target element is contained inside the container's\n * composed subtree\n */\nexport function isElementInSubtree(\n  target: EventTarget,\n  container: EventTarget,\n) {\n  // Dispatch a composed, bubbling event to check its path to see if the\n  // newly-focused element is contained in container's subtree\n  const focusEv = new Event('md-contains', {bubbles: true, composed: true});\n  let composedPath: EventTarget[] = [];\n  const listener = (ev: Event) => {\n    composedPath = ev.composedPath();\n  };\n\n  container.addEventListener('md-contains', listener);\n  target.dispatchEvent(focusEv);\n  container.removeEventListener('md-contains', listener);\n\n  const isContained = composedPath.length > 0;\n  return isContained;\n}\n\n/**\n * Element to focus on when menu is first opened.\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const FocusState = {\n  NONE: 'none',\n  LIST_ROOT: 'list-root',\n  FIRST_ITEM: 'first-item',\n  LAST_ITEM: 'last-item',\n} as const;\n\n/**\n * Element to focus on when menu is first opened.\n */\nexport type FocusState = (typeof FocusState)[keyof typeof FocusState];\n"
  },
  {
    "path": "menu/internal/controllers/surfacePositionController.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\nimport {StyleInfo} from 'lit/directives/style-map.js';\n\n/**\n * Declare popoverAPI functions and properties. See\n * https://developer.mozilla.org/en-US/docs/Web/API/Popover_API\n * Without this, closure will rename these functions. Can remove once these\n * functions make it into the typescript lib.\n */\ndeclare global {\n  interface HTMLElement {\n    showPopover(): void;\n    hidePopover(): void;\n    togglePopover(force: boolean): void;\n    popover: string | null;\n  }\n}\n\n/**\n * An enum of supported Menu corners\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const Corner = {\n  END_START: 'end-start',\n  END_END: 'end-end',\n  START_START: 'start-start',\n  START_END: 'start-end',\n} as const;\n\n/**\n * A corner of a box in the standard logical property style of <block>_<inline>\n */\nexport type Corner = (typeof Corner)[keyof typeof Corner];\n\n/**\n * An interface that provides a method to customize the rect from which to\n * calculate the anchor positioning. Useful for when you want a surface to\n * anchor to an element in your shadow DOM rather than the host element.\n */\nexport interface SurfacePositionTarget extends HTMLElement {\n  getSurfacePositionClientRect?: () => DOMRect;\n}\n\n/**\n * The configurable options for the surface position controller.\n */\nexport interface SurfacePositionControllerProperties {\n  /**\n   * Disable the `flip` behavior on the block axis of the surface's corner\n   */\n  disableBlockFlip: boolean;\n  /**\n   * Disable the `flip` behavior on the inline axis of the surface's corner\n   */\n  disableInlineFlip: boolean;\n  /**\n   * The corner of the anchor to align the surface's position.\n   */\n  anchorCorner: Corner;\n  /**\n   * The corner of the surface to align to the given anchor corner.\n   */\n  surfaceCorner: Corner;\n  /**\n   * The HTMLElement reference of the surface to be positioned.\n   */\n  surfaceEl: SurfacePositionTarget | null;\n  /**\n   * The HTMLElement reference of the anchor to align to.\n   */\n  anchorEl: SurfacePositionTarget | null;\n  /**\n   * Whether the positioning algorithim should calculate relative to the parent\n   * of the anchor element (absolute) or relative to the window (fixed).\n   *\n   * Examples for `position = 'fixed'`:\n   *\n   * - If there is no `position:relative` in the given parent tree and the\n   *   surface is `position:absolute`\n   * - If the surface is `position:fixed`\n   * - If the surface is in the \"top layer\"\n   * - The anchor and the surface do not share a common `position:relative`\n   *   ancestor\n   */\n  positioning: 'absolute' | 'fixed' | 'document';\n  /**\n   * Whether or not the surface should be \"open\" and visible\n   */\n  isOpen: boolean;\n  /**\n   * The number of pixels in which to offset from the inline axis relative to\n   * logical property.\n   *\n   * Positive is right in LTR and left in RTL.\n   */\n  xOffset: number;\n  /**\n   * The number of pixes in which to offset the block axis.\n   *\n   * Positive is down and negative is up.\n   */\n  yOffset: number;\n  /**\n   * The strategy to follow when repositioning the menu to stay inside the\n   * viewport. \"move\" will simply move the surface to stay in the viewport.\n   * \"resize\" will attempt to resize the surface.\n   *\n   * Both strategies will still attempt to flip the anchor and surface corners.\n   */\n  repositionStrategy: 'move' | 'resize';\n  /**\n   * A function to call after the surface has been positioned.\n   */\n  onOpen: () => void;\n  /**\n   * A function to call before the surface should be closed. (A good time to\n   * perform animations while the surface is still visible)\n   */\n  beforeClose: () => Promise<void>;\n  /**\n   * A function to call after the surface has been closed.\n   */\n  onClose: () => void;\n}\n\n/**\n * Given a surface, an anchor, corners, and some options, this surface will\n * calculate the position of a surface to align the two given corners and keep\n * the surface inside the window viewport. It also provides a StyleInfo map that\n * can be applied to the surface to handle visiblility and position.\n */\nexport class SurfacePositionController implements ReactiveController {\n  // The current styles to apply to the surface.\n  private surfaceStylesInternal: StyleInfo = {\n    'display': 'none',\n  };\n  // Previous values stored for change detection. Open change detection is\n  // calculated separately so initialize it here.\n  private lastValues: SurfacePositionControllerProperties = {\n    isOpen: false,\n  } as SurfacePositionControllerProperties;\n\n  /**\n   * @param host The host to connect the controller to.\n   * @param getProperties A function that returns the properties for the\n   * controller.\n   */\n  constructor(\n    private readonly host: ReactiveControllerHost,\n    private readonly getProperties: () => SurfacePositionControllerProperties,\n  ) {\n    this.host.addController(this);\n  }\n\n  /**\n   * The StyleInfo map to apply to the surface via Lit's stylemap\n   */\n  get surfaceStyles() {\n    return this.surfaceStylesInternal;\n  }\n\n  /**\n   * Calculates the surface's new position required so that the surface's\n   * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the\n   * surface inside the window viewport. This positioning also respects RTL by\n   * checking `getComputedStyle()` on the surface element.\n   */\n  async position() {\n    const {\n      surfaceEl,\n      anchorEl,\n      anchorCorner: anchorCornerRaw,\n      surfaceCorner: surfaceCornerRaw,\n      positioning,\n      xOffset,\n      yOffset,\n      disableBlockFlip,\n      disableInlineFlip,\n      repositionStrategy,\n    } = this.getProperties();\n    const anchorCorner = anchorCornerRaw.toLowerCase().trim();\n    const surfaceCorner = surfaceCornerRaw.toLowerCase().trim();\n\n    if (!surfaceEl || !anchorEl) {\n      return;\n    }\n\n    // Store these before we potentially resize the window with the next set of\n    // lines\n    const windowInnerWidth = window.innerWidth;\n    const windowInnerHeight = window.innerHeight;\n\n    const div = document.createElement('div');\n    div.style.opacity = '0';\n    div.style.position = 'fixed';\n    div.style.display = 'block';\n    div.style.inset = '0';\n    document.body.appendChild(div);\n    const scrollbarTestRect = div.getBoundingClientRect();\n    div.remove();\n\n    // Calculate the widths of the scrollbars in the inline and block directions\n    // to account for window-relative calculations.\n    const blockScrollbarHeight = window.innerHeight - scrollbarTestRect.bottom;\n    const inlineScrollbarWidth = window.innerWidth - scrollbarTestRect.right;\n\n    // Paint the surface transparently so that we can get the position and the\n    // rect info of the surface.\n    this.surfaceStylesInternal = {\n      'display': 'block',\n      'opacity': '0',\n    };\n\n    // Wait for it to be visible.\n    this.host.requestUpdate();\n    await this.host.updateComplete;\n\n    // Safari has a bug that makes popovers render incorrectly if the node is\n    // made visible + Animation Frame before calling showPopover().\n    // https://bugs.webkit.org/show_bug.cgi?id=264069\n    // also the cast is required due to differing TS types in Google and OSS.\n    if (\n      (surfaceEl as unknown as {popover: string}).popover &&\n      surfaceEl.isConnected\n    ) {\n      (surfaceEl as unknown as {showPopover: () => void}).showPopover();\n    }\n\n    const surfaceRect = surfaceEl.getSurfacePositionClientRect\n      ? surfaceEl.getSurfacePositionClientRect()\n      : surfaceEl.getBoundingClientRect();\n    const anchorRect = anchorEl.getSurfacePositionClientRect\n      ? anchorEl.getSurfacePositionClientRect()\n      : anchorEl.getBoundingClientRect();\n    const [surfaceBlock, surfaceInline] = surfaceCorner.split('-') as Array<\n      'start' | 'end'\n    >;\n    const [anchorBlock, anchorInline] = anchorCorner.split('-') as Array<\n      'start' | 'end'\n    >;\n\n    // LTR depends on the direction of the SURFACE not the anchor.\n    const isLTR =\n      getComputedStyle(surfaceEl as HTMLElement).direction === 'ltr';\n\n    /*\n     * For more on inline and block dimensions, see MDN article:\n     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values\n     *\n     * ┌───── inline/blockDocumentOffset  inlineScrollbarWidth\n     * │       │                                    │\n     * │     ┌─▼─────┐                              │Document\n     * │    ┌┼───────┴──────────────────────────────┼────────┐\n     * │    ││                                      │        │\n     * └──► ││ ┌───── inline/blockWindowOffset      │        │\n     *      ││ │       │                            ▼        │\n     *      ││ │     ┌─▼───┐                 Window┌┐        │\n     *      └┤ │    ┌┼─────┴───────────────────────┼│        │\n     *       │ │    ││                             ││        │\n     *       │ └──► ││  ┌──inline/blockAnchorOffset││        │\n     *       │      ││  │     │                    ││        │\n     *       │      └┤  │  ┌──▼───┐                ││        │\n     *       │       │  │ ┌┼──────┤                ││        │\n     *       │       │  └─►│Anchor│                ││        │\n     *       │       │    └┴──────┘                ││        │\n     *       │       │                             ││        │\n     *       │       │     ┌───────────────────────┼┼────┐   │\n     *       │       │     │ Surface               ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │      ┌┼─────┼───────────────────────┼│    │   │\n     *       │   ┌─►┴──────┼────────────────────────┘    ├┐  │\n     *       │   │         │ inline/blockOOBCorrection   ││  │\n     *       │   │         │                         │   ││  │\n     *       │   │         │                         ├──►├│  │\n     *       │   │         │                         │   ││  │\n     *       │   │         └────────────────────────┐▼───┼┘  │\n     *       │  blockScrollbarHeight                └────┘   │\n     *       │                                               │\n     *       └───────────────────────────────────────────────┘\n     */\n\n    // Calculate the block positioning properties\n    let {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty} =\n      this.calculateBlock({\n        surfaceRect,\n        anchorRect,\n        anchorBlock,\n        surfaceBlock,\n        yOffset,\n        positioning,\n        windowInnerHeight,\n        blockScrollbarHeight,\n      });\n\n    // If the surface should be out of bounds in the block direction, flip the\n    // surface and anchor corner block values and recalculate\n    if (blockOutOfBoundsCorrection && !disableBlockFlip) {\n      const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start';\n      const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start';\n\n      const flippedBlock = this.calculateBlock({\n        surfaceRect,\n        anchorRect,\n        anchorBlock: flippedAnchorBlock,\n        surfaceBlock: flippedSurfaceBlock,\n        yOffset,\n        positioning,\n        windowInnerHeight,\n        blockScrollbarHeight,\n      });\n\n      // In the case that the flipped verion would require less out of bounds\n      // correcting, use the flipped corner block values\n      if (\n        blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection\n      ) {\n        blockInset = flippedBlock.blockInset;\n        blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection;\n        surfaceBlockProperty = flippedBlock.surfaceBlockProperty;\n      }\n    }\n\n    // Calculate the inline positioning properties\n    let {inlineInset, inlineOutOfBoundsCorrection, surfaceInlineProperty} =\n      this.calculateInline({\n        surfaceRect,\n        anchorRect,\n        anchorInline,\n        surfaceInline,\n        xOffset,\n        positioning,\n        isLTR,\n        windowInnerWidth,\n        inlineScrollbarWidth,\n      });\n\n    // If the surface should be out of bounds in the inline direction, flip the\n    // surface and anchor corner inline values and recalculate\n    if (inlineOutOfBoundsCorrection && !disableInlineFlip) {\n      const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start';\n      const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start';\n\n      const flippedInline = this.calculateInline({\n        surfaceRect,\n        anchorRect,\n        anchorInline: flippedAnchorInline,\n        surfaceInline: flippedSurfaceInline,\n        xOffset,\n        positioning,\n        isLTR,\n        windowInnerWidth,\n        inlineScrollbarWidth,\n      });\n\n      // In the case that the flipped verion would require less out of bounds\n      // correcting, use the flipped corner inline values\n      if (\n        Math.abs(inlineOutOfBoundsCorrection) >\n        Math.abs(flippedInline.inlineOutOfBoundsCorrection)\n      ) {\n        inlineInset = flippedInline.inlineInset;\n        inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection;\n        surfaceInlineProperty = flippedInline.surfaceInlineProperty;\n      }\n    }\n\n    // If we are simply repositioning the surface back inside the viewport,\n    // subtract the out of bounds correction values from the positioning.\n    if (repositionStrategy === 'move') {\n      blockInset = blockInset - blockOutOfBoundsCorrection;\n      inlineInset = inlineInset - inlineOutOfBoundsCorrection;\n    }\n\n    this.surfaceStylesInternal = {\n      'display': 'block',\n      'opacity': '1',\n      [surfaceBlockProperty]: `${blockInset}px`,\n      [surfaceInlineProperty]: `${inlineInset}px`,\n    };\n\n    // In the case that we are resizing the surface to stay inside the viewport\n    // we need to set height and width on the surface.\n    if (repositionStrategy === 'resize') {\n      // Add a height property to the styles if there is block height correction\n      if (blockOutOfBoundsCorrection) {\n        this.surfaceStylesInternal['height'] = `${\n          surfaceRect.height - blockOutOfBoundsCorrection\n        }px`;\n      }\n\n      // Add a width property to the styles if there is block height correction\n      if (inlineOutOfBoundsCorrection) {\n        this.surfaceStylesInternal['width'] = `${\n          surfaceRect.width - inlineOutOfBoundsCorrection\n        }px`;\n      }\n    }\n\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Calculates the css property, the inset, and the out of bounds correction\n   * for the surface in the block direction.\n   */\n  private calculateBlock(config: {\n    surfaceRect: DOMRect;\n    anchorRect: DOMRect;\n    anchorBlock: 'start' | 'end';\n    surfaceBlock: 'start' | 'end';\n    yOffset: number;\n    positioning: 'absolute' | 'fixed' | 'document';\n    windowInnerHeight: number;\n    blockScrollbarHeight: number;\n  }) {\n    const {\n      surfaceRect,\n      anchorRect,\n      anchorBlock,\n      surfaceBlock,\n      yOffset,\n      positioning,\n      windowInnerHeight,\n      blockScrollbarHeight,\n    } = config;\n    // We use number booleans to multiply values rather than `if` / ternary\n    // statements because it _heavily_ cuts down on nesting and readability\n    const relativeToWindow =\n      positioning === 'fixed' || positioning === 'document' ? 1 : 0;\n    const relativeToDocument = positioning === 'document' ? 1 : 0;\n    const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0;\n    const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0;\n    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0;\n\n    // Whether or not to apply the height of the anchor\n    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset;\n    // The absolute block position of the anchor relative to window\n    const blockTopLayerOffset =\n      isSurfaceBlockStart * anchorRect.top +\n      isSurfaceBlockEnd *\n        (windowInnerHeight - anchorRect.bottom - blockScrollbarHeight);\n    const blockDocumentOffset =\n      isSurfaceBlockStart * window.scrollY - isSurfaceBlockEnd * window.scrollY;\n\n    // If the surface's block would be out of bounds of the window, move it back\n    // in\n    const blockOutOfBoundsCorrection = Math.abs(\n      Math.min(\n        0,\n        windowInnerHeight -\n          blockTopLayerOffset -\n          blockAnchorOffset -\n          surfaceRect.height,\n      ),\n    );\n\n    // The block logical value of the surface\n    const blockInset =\n      relativeToWindow * blockTopLayerOffset +\n      relativeToDocument * blockDocumentOffset +\n      blockAnchorOffset;\n\n    const surfaceBlockProperty =\n      surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';\n\n    return {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty};\n  }\n\n  /**\n   * Calculates the css property, the inset, and the out of bounds correction\n   * for the surface in the inline direction.\n   */\n  private calculateInline(config: {\n    isLTR: boolean;\n    surfaceInline: 'start' | 'end';\n    anchorInline: 'start' | 'end';\n    anchorRect: DOMRect;\n    surfaceRect: DOMRect;\n    xOffset: number;\n    positioning: 'absolute' | 'fixed' | 'document';\n    windowInnerWidth: number;\n    inlineScrollbarWidth: number;\n  }) {\n    const {\n      isLTR: isLTRBool,\n      surfaceInline,\n      anchorInline,\n      anchorRect,\n      surfaceRect,\n      xOffset,\n      positioning,\n      windowInnerWidth,\n      inlineScrollbarWidth,\n    } = config;\n    // We use number booleans to multiply values rather than `if` / ternary\n    // statements because it _heavily_ cuts down on nesting and readability\n    const relativeToWindow =\n      positioning === 'fixed' || positioning === 'document' ? 1 : 0;\n    const relativeToDocument = positioning === 'document' ? 1 : 0;\n    const isLTR = isLTRBool ? 1 : 0;\n    const isRTL = isLTRBool ? 0 : 1;\n    const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0;\n    const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0;\n    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0;\n\n    // Whether or not to apply the width of the anchor\n    const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset;\n    // The inline position of the anchor relative to window in LTR\n    const inlineTopLayerOffsetLTR =\n      isSurfaceInlineStart * anchorRect.left +\n      isSurfaceInlineEnd *\n        (windowInnerWidth - anchorRect.right - inlineScrollbarWidth);\n    // The inline position of the anchor relative to window in RTL\n    const inlineTopLayerOffsetRTL =\n      isSurfaceInlineStart *\n        (windowInnerWidth - anchorRect.right - inlineScrollbarWidth) +\n      isSurfaceInlineEnd * anchorRect.left;\n    // The inline position of the anchor relative to window\n    const inlineTopLayerOffset =\n      isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;\n\n    // The inline position of the anchor relative to window in LTR\n    const inlineDocumentOffsetLTR =\n      isSurfaceInlineStart * window.scrollX -\n      isSurfaceInlineEnd * window.scrollX;\n    // The inline position of the anchor relative to window in RTL\n    const inlineDocumentOffsetRTL =\n      isSurfaceInlineEnd * window.scrollX -\n      isSurfaceInlineStart * window.scrollX;\n    // The inline position of the anchor relative to window\n    const inlineDocumentOffset =\n      isLTR * inlineDocumentOffsetLTR + isRTL * inlineDocumentOffsetRTL;\n\n    // If the surface's inline would be out of bounds of the window, move it\n    // back in\n    const inlineOutOfBoundsCorrection = Math.abs(\n      Math.min(\n        0,\n        windowInnerWidth -\n          inlineTopLayerOffset -\n          inlineAnchorOffset -\n          surfaceRect.width,\n      ),\n    );\n\n    // The inline logical value of the surface\n    const inlineInset =\n      relativeToWindow * inlineTopLayerOffset +\n      inlineAnchorOffset +\n      relativeToDocument * inlineDocumentOffset;\n\n    let surfaceInlineProperty =\n      surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';\n\n    // There are cases where the element is RTL but the root of the page is not.\n    // In these cases we want to not use logical properties.\n    if (positioning === 'document' || positioning === 'fixed') {\n      if (\n        (surfaceInline === 'start' && isLTRBool) ||\n        (surfaceInline === 'end' && !isLTRBool)\n      ) {\n        surfaceInlineProperty = 'left';\n      } else {\n        surfaceInlineProperty = 'right';\n      }\n    }\n\n    return {\n      inlineInset,\n      inlineOutOfBoundsCorrection,\n      surfaceInlineProperty,\n    };\n  }\n\n  hostUpdate() {\n    this.onUpdate();\n  }\n\n  hostUpdated() {\n    this.onUpdate();\n  }\n\n  /**\n   * Checks whether the properties passed into the controller have changed since\n   * the last positioning. If so, it will reposition if the surface is open or\n   * close it if the surface should close.\n   */\n  private async onUpdate() {\n    const props = this.getProperties();\n    let hasChanged = false;\n    for (const [key, value] of Object.entries(props)) {\n      // tslint:disable-next-line\n      hasChanged = hasChanged || value !== (this.lastValues as any)[key];\n      if (hasChanged) break;\n    }\n\n    const openChanged = this.lastValues.isOpen !== props.isOpen;\n    const hasAnchor = !!props.anchorEl;\n    const hasSurface = !!props.surfaceEl;\n\n    if (hasChanged && hasAnchor && hasSurface) {\n      // Only update isOpen, because if it's closed, we do not want to waste\n      // time on a useless reposition calculation. So save the other \"dirty\"\n      // values until next time it opens.\n      this.lastValues.isOpen = props.isOpen;\n\n      if (props.isOpen) {\n        // We are going to do a reposition, so save the prop values for future\n        // dirty checking.\n        this.lastValues = props;\n\n        await this.position();\n        props.onOpen();\n      } else if (openChanged) {\n        await props.beforeClose();\n        this.close();\n        props.onClose();\n      }\n    }\n  }\n\n  /**\n   * Hides the surface.\n   */\n  private close() {\n    this.surfaceStylesInternal = {\n      'display': 'none',\n    };\n    this.host.requestUpdate();\n    const surfaceEl = this.getProperties().surfaceEl;\n\n    // The following type casts are required due to differing TS types in Google\n    // and open source.\n    if (\n      (surfaceEl as unknown as {popover?: string})?.popover &&\n      surfaceEl?.isConnected\n    ) {\n      (surfaceEl as unknown as {hidePopover: () => void}).hidePopover();\n    }\n  }\n}\n"
  },
  {
    "path": "menu/internal/controllers/typeaheadController.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuItem} from './menuItemController.js';\n\n/**\n * The options that are passed to the typeahead controller.\n */\nexport interface TypeaheadControllerProperties {\n  /**\n   * A function that returns an array of menu items to be searched.\n   * @return An array of menu items to be searched by typing.\n   */\n  getItems: () => MenuItem[];\n  /**\n   * The maximum time between each keystroke to keep the current type buffer\n   * alive.\n   */\n  typeaheadBufferTime: number;\n  /**\n   * Whether or not the typeahead should listen for keystrokes or not.\n   */\n  active: boolean;\n}\n\n/**\n * Data structure tuple that helps with indexing.\n *\n * [index, item, normalized header text]\n */\ntype TypeaheadRecord = [number, MenuItem, string];\n/**\n * Indicies to access the TypeaheadRecord tuple type.\n */\nexport const TYPEAHEAD_RECORD = {\n  INDEX: 0,\n  ITEM: 1,\n  TEXT: 2,\n} as const;\n\n/**\n * This controller listens to `keydown` events and searches the header text of\n * an array of `MenuItem`s with the corresponding entered keys within the buffer\n * time and activates the item.\n *\n * @example\n * ```ts\n * const typeaheadController = new TypeaheadController(() => ({\n *   typeaheadBufferTime: 50,\n *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))\n * }));\n * html`\n *   <div\n *       @keydown=${typeaheadController.onKeydown}\n *       tabindex=\"0\"\n *       class=\"activeItemText\">\n *     <!-- focusable element that will receive keydown events -->\n *     Apple\n *   </div>\n *   <div>\n *     <md-menu-item active header=\"Apple\"></md-menu-item>\n *     <md-menu-item header=\"Apricot\"></md-menu-item>\n *     <md-menu-item header=\"Banana\"></md-menu-item>\n *     <md-menu-item header=\"Olive\"></md-menu-item>\n *     <md-menu-item header=\"Orange\"></md-menu-item>\n *   </div>\n * `;\n * ```\n */\nexport class TypeaheadController {\n  /**\n   * Array of tuples that helps with indexing.\n   */\n  private typeaheadRecords: TypeaheadRecord[] = [];\n  /**\n   * Currently-typed text since last buffer timeout\n   */\n  private typaheadBuffer = '';\n  /**\n   * The timeout id from the current buffer's setTimeout\n   */\n  private cancelTypeaheadTimeout = 0;\n  /**\n   * If we are currently \"typing\"\n   */\n  isTypingAhead = false;\n  /**\n   * The record of the last active item.\n   */\n  lastActiveRecord: TypeaheadRecord | null = null;\n\n  /**\n   * @param getProperties A function that returns the options of the typeahead\n   * controller:\n   *\n   * {\n   *   getItems: A function that returns an array of menu items to be searched.\n   *   typeaheadBufferTime: The maximum time between each keystroke to keep the\n   *       current type buffer alive.\n   * }\n   */\n  constructor(\n    private readonly getProperties: () => TypeaheadControllerProperties,\n  ) {}\n\n  private get items() {\n    return this.getProperties().getItems();\n  }\n\n  private get active() {\n    return this.getProperties().active;\n  }\n\n  /**\n   * Apply this listener to the element that will receive `keydown` events that\n   * should trigger this controller.\n   *\n   * @param event The native browser `KeyboardEvent` from the `keydown` event.\n   */\n  readonly onKeydown = (event: KeyboardEvent) => {\n    if (this.isTypingAhead) {\n      this.typeahead(event);\n    } else {\n      this.beginTypeahead(event);\n    }\n  };\n\n  /**\n   * Sets up typingahead\n   */\n  private beginTypeahead(event: KeyboardEvent) {\n    if (!this.active) {\n      return;\n    }\n\n    // We don't want to typeahead if the _beginning_ of the typeahead is a menu\n    // navigation, or a selection. We will handle \"Space\" only if it's in the\n    // middle of a typeahead\n    if (\n      event.code === 'Space' ||\n      event.code === 'Enter' ||\n      event.code.startsWith('Arrow') ||\n      event.code === 'Escape'\n    ) {\n      return;\n    }\n\n    this.isTypingAhead = true;\n    // Generates the record array data structure which is the index, the element\n    // and a normalized header.\n    this.typeaheadRecords = this.items.map((el, index) => [\n      index,\n      el,\n      el.typeaheadText.trim().toLowerCase(),\n    ]);\n    this.lastActiveRecord =\n      this.typeaheadRecords.find(\n        (record) => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0,\n      ) ?? null;\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n    }\n    this.typeahead(event);\n  }\n\n  /**\n   * Performs the typeahead. Based on the normalized items and the current text\n   * buffer, finds the _next_ item with matching text and activates it.\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: 'o'\n   * user types: l\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Orange\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange (active), Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   */\n  private typeahead(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n    clearTimeout(this.cancelTypeaheadTimeout);\n    // Stop typingahead if one of the navigation or selection keys (except for\n    // Space) are pressed\n    if (\n      event.code === 'Enter' ||\n      event.code.startsWith('Arrow') ||\n      event.code === 'Escape'\n    ) {\n      this.endTypeahead();\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n      }\n      return;\n    }\n\n    // If Space is pressed, prevent it from selecting and closing the menu\n    if (event.code === 'Space') {\n      event.preventDefault();\n    }\n\n    // Start up a new keystroke buffer timeout\n    this.cancelTypeaheadTimeout = setTimeout(\n      this.endTypeahead,\n      this.getProperties().typeaheadBufferTime,\n    );\n\n    this.typaheadBuffer += event.key.toLowerCase();\n\n    const lastActiveIndex = this.lastActiveRecord\n      ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]\n      : -1;\n    const numRecords = this.typeaheadRecords.length;\n\n    /**\n     * Sorting function that will resort the items starting with the given index\n     *\n     * @example\n     *\n     * this.typeaheadRecords =\n     * 0: [0, <reference>, 'apple']\n     * 1: [1, <reference>, 'apricot']\n     * 2: [2, <reference>, 'banana']\n     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 4: [4, <reference>, 'orange']\n     * 5: [5, <reference>, 'strawberry']\n     *\n     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)\n     *                                       - rebaseIndexOnActive(b)) ===\n     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 1: [4, <reference>, 'orange']\n     * 2: [5, <reference>, 'strawberry']\n     * 3: [0, <reference>, 'apple']\n     * 4: [1, <reference>, 'apricot']\n     * 5: [2, <reference>, 'banana']\n     */\n    const rebaseIndexOnActive = (record: TypeaheadRecord) => {\n      return (\n        (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %\n        numRecords\n      );\n    };\n\n    // records filtered and sorted / rebased around the last active index\n    const matchingRecords = this.typeaheadRecords\n      .filter(\n        (record) =>\n          !record[TYPEAHEAD_RECORD.ITEM].disabled &&\n          record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer),\n      )\n      .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));\n\n    // Just leave if there's nothing that matches. Native select will just\n    // choose the first thing that starts with the next letter in the alphabet\n    // but that's out of scope and hard to localize\n    if (matchingRecords.length === 0) {\n      clearTimeout(this.cancelTypeaheadTimeout);\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n      }\n      this.endTypeahead();\n      return;\n    }\n\n    const isNewQuery = this.typaheadBuffer.length === 1;\n    let nextRecord: TypeaheadRecord;\n\n    // This is likely the case that someone is trying to \"tab\" through different\n    // entries that start with the same letter\n    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {\n      nextRecord = matchingRecords[1] ?? matchingRecords[0];\n    } else {\n      nextRecord = matchingRecords[0];\n    }\n\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n    }\n\n    this.lastActiveRecord = nextRecord;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].focus();\n    return;\n  }\n\n  /**\n   * Ends the current typeahead and clears the buffer.\n   */\n  private readonly endTypeahead = () => {\n    this.isTypingAhead = false;\n    this.typaheadBuffer = '';\n    this.typeaheadRecords = [];\n  };\n}\n"
  },
  {
    "path": "menu/internal/menu-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './menu';\n// go/keep-sorted end\n\n@include menu.styles;\n"
  },
  {
    "path": "menu/internal/menu.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\n\nimport {LitElement, PropertyValues, html, isServer, nothing} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {EASING, createAnimationSignal} from '../../internal/motion/animation.js';\nimport {\n  ListController,\n  NavigableKeys,\n} from '../../list/internal/list-controller.js';\nimport {\n  getActiveItem,\n  getFirstActivatableItem,\n  getLastActivatableItem,\n} from '../../list/internal/list-navigation-helpers.js';\n\nimport {MenuItem} from './controllers/menuItemController.js';\nimport {\n  ActivateTypeaheadEvent,\n  DeactivateTypeaheadEvent,\n  FocusState,\n  isClosableKey,\n  isElementInSubtree,\n} from './controllers/shared.js';\nimport {\n  Corner,\n  SurfacePositionController,\n  SurfacePositionTarget,\n} from './controllers/surfacePositionController.js';\nimport {TypeaheadController} from './controllers/typeaheadController.js';\n\nexport {Corner} from './controllers/surfacePositionController.js';\n\n/**\n * The default value for the typeahead buffer time in Milliseconds.\n */\nexport const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;\n\nconst submenuNavKeys = new Set<string>([\n  NavigableKeys.ArrowDown,\n  NavigableKeys.ArrowUp,\n  NavigableKeys.Home,\n  NavigableKeys.End,\n]);\n\nconst menuNavKeys = new Set<string>([\n  NavigableKeys.ArrowLeft,\n  NavigableKeys.ArrowRight,\n  ...submenuNavKeys,\n]);\n\n/**\n * Gets the currently focused element on the page.\n *\n * @param activeDoc The document or shadowroot from which to start the search.\n *    Defaults to `window.document`\n * @return Returns the currently deeply focused element or `null` if none.\n */\nfunction getFocusedElement(\n  activeDoc: Document | ShadowRoot = document,\n): HTMLElement | null {\n  let activeEl = activeDoc.activeElement as HTMLElement | null;\n\n  // Check for activeElement in the case that an element with a shadow root host\n  // is currently focused.\n  while (activeEl && activeEl?.shadowRoot?.activeElement) {\n    activeEl = activeEl.shadowRoot.activeElement as HTMLElement | null;\n  }\n\n  return activeEl;\n}\n\n/**\n * @fires opening {Event} Fired before the opening animation begins\n * @fires opened {Event} Fired once the menu is open, after any animations\n * @fires closing {Event} Fired before the closing animation begins\n * @fires closed {Event} Fired once the menu is closed, after any animations\n */\nexport abstract class Menu extends LitElement {\n  @query('.menu') private readonly surfaceEl!: HTMLElement | null;\n  @query('slot') private readonly slotEl!: HTMLSlotElement | null;\n\n  /**\n   * The ID of the element in the same root node in which the menu should align\n   * to. Overrides setting `anchorElement = elementReference`.\n   *\n   * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve\n   * to an HTMLElement in order for menu to open.\n   */\n  @property() anchor = '';\n  /**\n   * Whether the positioning algorithm should calculate relative to the parent\n   * of the anchor element (`absolute`), relative to the window (`fixed`), or\n   * relative to the document (`document`). `popover` will use the popover API\n   * to render the menu in the top-layer. If your browser does not support the\n   * popover API, it will fall back to `fixed`.\n   *\n   * __Examples for `position = 'fixed'`:__\n   *\n   * - If there is no `position:relative` in the given parent tree and the\n   *   surface is `position:absolute`\n   * - If the surface is `position:fixed`\n   * - If the surface is in the \"top layer\"\n   * - The anchor and the surface do not share a common `position:relative`\n   *   ancestor\n   *\n   * When using `positioning=fixed`, in most cases, the menu should position\n   * itself above most other `position:absolute` or `position:fixed` elements\n   * when placed inside of them. e.g. using a menu inside of an `md-dialog`.\n   *\n   * __NOTE__: Fixed menus will not scroll with the page and will be fixed to\n   * the window instead.\n   *\n   * __Examples for `position = 'document'`:__\n   *\n   * - There is no parent that creates a relative positioning context e.g.\n   *   `position: relative`, `position: absolute`, `transform: translate(x, y)`,\n   *   etc.\n   * - You put the effort into hoisting the menu to the top of the DOM like the\n   *   end of the `<body>` to render over everything or in a top-layer.\n   * - You are reusing a single `md-menu` element that dynamically renders\n   *   content.\n   *\n   * __Examples for `position = 'popover'`:__\n   *\n   * - Your browser supports `popover`.\n   * - Most cases. Once popover is in browsers, this will become the default.\n   */\n  @property() positioning: 'absolute' | 'fixed' | 'document' | 'popover' =\n    'absolute';\n  /**\n   * Skips the opening and closing animations.\n   */\n  @property({type: Boolean}) quick = false;\n  /**\n   * Displays overflow content like a submenu. Not required in most cases when\n   * using `positioning=\"popover\"`.\n   *\n   * __NOTE__: This may cause adverse effects if you set\n   * `md-menu {max-height:...}`\n   * and have items overflowing items in the \"y\" direction.\n   */\n  @property({type: Boolean, attribute: 'has-overflow'}) hasOverflow = false;\n  /**\n   * Opens the menu and makes it visible. Alternative to the `.show()` and\n   * `.close()` methods\n   */\n  @property({type: Boolean, reflect: true}) open = false;\n  /**\n   * Offsets the menu's inline alignment from the anchor by the given number in\n   * pixels. This value is direction aware and will follow the LTR / RTL\n   * direction.\n   *\n   * e.g. LTR: positive -> right, negative -> left\n   *      RTL: positive -> left, negative -> right\n   */\n  @property({type: Number, attribute: 'x-offset'}) xOffset = 0;\n  /**\n   * Offsets the menu's block alignment from the anchor by the given number in\n   * pixels.\n   *\n   * e.g. positive -> down, negative -> up\n   */\n  @property({type: Number, attribute: 'y-offset'}) yOffset = 0;\n  /**\n   * Disable the `flip` behavior that usually happens on the horizontal axis\n   * when the surface would render outside the viewport.\n   */\n  @property({type: Boolean, attribute: 'no-horizontal-flip'}) noHorizontalFlip =\n    false;\n  /**\n   * Disable the `flip` behavior that usually happens on the vertical axis when\n   * the surface would render outside the viewport.\n   */\n  @property({type: Boolean, attribute: 'no-vertical-flip'}) noVerticalFlip =\n    false;\n  /**\n   * The max time between the keystrokes of the typeahead menu behavior before\n   * it clears the typeahead buffer.\n   */\n  @property({type: Number, attribute: 'typeahead-delay'})\n  typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n  /**\n   * The corner of the anchor which to align the menu in the standard logical\n   * property style of <block>-<inline> e.g. `'end-start'`.\n   *\n   * NOTE: This value may not be respected by the menu positioning algorithm\n   * if the menu would render outisde the viewport.\n   * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value\n   */\n  @property({attribute: 'anchor-corner'})\n  anchorCorner: Corner = Corner.END_START;\n  /**\n   * The corner of the menu which to align the anchor in the standard logical\n   * property style of <block>-<inline> e.g. `'start-start'`.\n   *\n   * NOTE: This value may not be respected by the menu positioning algorithm\n   * if the menu would render outisde the viewport.\n   * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = Corner.START_START;\n  /**\n   * Keeps the user clicks outside the menu.\n   *\n   * NOTE: clicking outside may still cause focusout to close the menu so see\n   * `stayOpenOnFocusout`.\n   */\n  @property({type: Boolean, attribute: 'stay-open-on-outside-click'})\n  stayOpenOnOutsideClick = false;\n  /**\n   * Keeps the menu open when focus leaves the menu's composed subtree.\n   *\n   * NOTE: Focusout behavior will stop propagation of the focusout event. Set\n   * this property to true to opt-out of menu's focusout handling altogether.\n   */\n  @property({type: Boolean, attribute: 'stay-open-on-focusout'})\n  stayOpenOnFocusout = false;\n  /**\n   * After closing, does not restore focus to the last focused element before\n   * the menu was opened.\n   */\n  @property({type: Boolean, attribute: 'skip-restore-focus'})\n  skipRestoreFocus = false;\n  /**\n   * The element that should be focused by default once opened.\n   *\n   * NOTE: When setting default focus to 'LIST_ROOT', remember to change\n   * `tabindex` to `0` and change md-menu's display to something other than\n   * `display: contents` when necessary.\n   */\n  @property({attribute: 'default-focus'})\n  defaultFocus: FocusState = FocusState.FIRST_ITEM;\n\n  /**\n   * Turns off navigation wrapping. By default, navigating past the end of the\n   * menu items will wrap focus back to the beginning and vice versa. Use this\n   * for ARIA patterns that do not wrap focus, like combobox.\n   */\n  @property({type: Boolean, attribute: 'no-navigation-wrap'})\n  noNavigationWrap = false;\n\n  @queryAssignedElements({flatten: true}) protected slotItems!: HTMLElement[];\n  @state() private typeaheadActive = true;\n\n  /**\n   * Whether or not the current menu is a submenu and should not handle specific\n   * navigation keys.\n   *\n   * @export\n   */\n  isSubmenu = false;\n\n  /**\n   * The event path of the last window pointerdown event.\n   */\n  private pointerPath: EventTarget[] = [];\n\n  /**\n   * Whether or not the menu is repositoining due to window / document resize\n   */\n  private isRepositioning = false;\n  private readonly openCloseAnimationSignal = createAnimationSignal();\n\n  private readonly listController = new ListController<MenuItem>({\n    isItem: (maybeItem: HTMLElement): maybeItem is MenuItem => {\n      return maybeItem.hasAttribute('md-menu-item');\n    },\n    getPossibleItems: () => this.slotItems,\n    isRtl: () => getComputedStyle(this).direction === 'rtl',\n    deactivateItem: (item: MenuItem) => {\n      item.selected = false;\n      item.tabIndex = -1;\n    },\n    activateItem: (item: MenuItem) => {\n      item.selected = true;\n      item.tabIndex = 0;\n    },\n    isNavigableKey: (key: string) => {\n      if (!this.isSubmenu) {\n        return menuNavKeys.has(key);\n      }\n\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      // we want md-submenu to handle the submenu's left/right arrow exit\n      // key so it can close the menu instead of navigate the list.\n      // Therefore we need to include all keys but left/right arrow close\n      // key\n      const arrowOpen = isRtl\n        ? NavigableKeys.ArrowLeft\n        : NavigableKeys.ArrowRight;\n\n      if (key === arrowOpen) {\n        return true;\n      }\n\n      return submenuNavKeys.has(key);\n    },\n    wrapNavigation: () => !this.noNavigationWrap,\n  });\n\n  /**\n   * Whether the menu is animating upwards or downwards when opening. This is\n   * helpful for calculating some animation calculations.\n   */\n  private get openDirection(): 'UP' | 'DOWN' {\n    const menuCornerBlock = this.menuCorner.split('-')[0];\n    return menuCornerBlock === 'start' ? 'DOWN' : 'UP';\n  }\n\n  /**\n   * The element that was focused before the menu opened.\n   */\n  private lastFocusedElement: HTMLElement | null = null;\n\n  /**\n   * Handles typeahead navigation through the menu.\n   */\n  typeaheadController = new TypeaheadController(() => {\n    return {\n      getItems: () => this.items,\n      typeaheadBufferTime: this.typeaheadDelay,\n      active: this.typeaheadActive,\n    };\n  });\n\n  private currentAnchorElement: HTMLElement | null = null;\n\n  /**\n   * The element which the menu should align to. If `anchor` is set to a\n   * non-empty idref string, then `anchorEl` will resolve to the element with\n   * the given id in the same root node. Otherwise, `null`.\n   */\n  get anchorElement(): (HTMLElement & Partial<SurfacePositionTarget>) | null {\n    if (this.anchor) {\n      return (this.getRootNode() as Document | ShadowRoot).querySelector(\n        `#${this.anchor}`,\n      );\n    }\n\n    return this.currentAnchorElement;\n  }\n\n  set anchorElement(\n    element: (HTMLElement & Partial<SurfacePositionTarget>) | null,\n  ) {\n    this.currentAnchorElement = element;\n    this.requestUpdate('anchorElement');\n  }\n\n  private readonly internals =\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'menu';\n      this.addEventListener('keydown', this.handleKeydown);\n      // Capture so that we can grab the event before it reaches the menu item\n      // istelf. Specifically useful for the case where typeahead encounters a\n      // space and we don't want the menu item to close the menu.\n      this.addEventListener('keydown', this.captureKeydown, {capture: true});\n      this.addEventListener('focusout', this.handleFocusout);\n    }\n  }\n\n  /**\n   * Handles positioning the surface and aligning it to the anchor as well as\n   * keeping it in the viewport.\n   */\n  private readonly menuPositionController = new SurfacePositionController(\n    this,\n    () => {\n      return {\n        anchorCorner: this.anchorCorner,\n        surfaceCorner: this.menuCorner,\n        surfaceEl: this.surfaceEl,\n        anchorEl: this.anchorElement,\n        positioning:\n          this.positioning === 'popover' ? 'document' : this.positioning,\n        isOpen: this.open,\n        xOffset: this.xOffset,\n        yOffset: this.yOffset,\n        disableBlockFlip: this.noVerticalFlip,\n        disableInlineFlip: this.noHorizontalFlip,\n        onOpen: this.onOpened,\n        beforeClose: this.beforeClose,\n        onClose: this.onClosed,\n        // We can't resize components that have overflow like menus with\n        // submenus because the overflow-y will show menu items / content\n        // outside the bounds of the menu. Popover API fixes this because each\n        // submenu is hoisted to the top-layer and are not considered overflow\n        // content.\n        repositionStrategy:\n          this.hasOverflow && this.positioning !== 'popover'\n            ? 'move'\n            : 'resize',\n      };\n    },\n  );\n\n  /**\n   * The menu items associated with this menu. The items must be `MenuItem`s and\n   * have both the `md-menu-item` and `md-list-item` attributes.\n   */\n  get items(): MenuItem[] {\n    return this.listController.items;\n  }\n\n  protected override willUpdate(changed: PropertyValues<Menu>) {\n    if (!changed.has('open')) {\n      return;\n    }\n\n    if (this.open) {\n      this.removeAttribute('aria-hidden');\n      return;\n    }\n\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  override update(changed: PropertyValues<Menu>) {\n    if (changed.has('open')) {\n      if (this.open) {\n        this.setUpGlobalEventListeners();\n      } else {\n        this.cleanUpGlobalEventListeners();\n      }\n    }\n\n    // Firefox does not support popover. Fall-back to using fixed.\n    if (\n      changed.has('positioning') &&\n      this.positioning === 'popover' &&\n      // type required for Google JS conformance\n      !(this as unknown as {showPopover?: () => void}).showPopover\n    ) {\n      this.positioning = 'fixed';\n    }\n\n    super.update(changed);\n  }\n\n  private readonly onWindowResize = () => {\n    if (\n      this.isRepositioning ||\n      (this.positioning !== 'document' &&\n        this.positioning !== 'fixed' &&\n        this.positioning !== 'popover')\n    ) {\n      return;\n    }\n    this.isRepositioning = true;\n    this.reposition();\n    this.isRepositioning = false;\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.open) {\n      this.setUpGlobalEventListeners();\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanUpGlobalEventListeners();\n  }\n\n  override getBoundingClientRect() {\n    if (!this.surfaceEl) {\n      return super.getBoundingClientRect();\n    }\n    return this.surfaceEl.getBoundingClientRect();\n  }\n\n  override getClientRects() {\n    if (!this.surfaceEl) {\n      return super.getClientRects();\n    }\n    return this.surfaceEl.getClientRects();\n  }\n\n  protected override render() {\n    return this.renderSurface();\n  }\n\n  /**\n   * Renders the positionable surface element and its contents.\n   */\n  private renderSurface() {\n    return html`\n      <div\n        class=\"menu ${classMap(this.getSurfaceClasses())}\"\n        style=${styleMap(this.menuPositionController.surfaceStyles)}\n        popover=${this.positioning === 'popover' ? 'manual' : nothing}>\n        ${this.renderElevation()}\n        <div class=\"items\">\n          <div class=\"item-padding\"> ${this.renderMenuItems()} </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the menu items' slot\n   */\n  private renderMenuItems() {\n    return html`<slot\n      @close-menu=${this.onCloseMenu}\n      @deactivate-items=${this.onDeactivateItems}\n      @request-activation=${this.onRequestActivation}\n      @deactivate-typeahead=${this.handleDeactivateTypeahead}\n      @activate-typeahead=${this.handleActivateTypeahead}\n      @stay-open-on-focusout=${this.handleStayOpenOnFocusout}\n      @close-on-focusout=${this.handleCloseOnFocusout}\n      @slotchange=${this.listController.onSlotchange}></slot>`;\n  }\n\n  /**\n   * Renders the elevation component.\n   */\n  private renderElevation() {\n    return html`<md-elevation part=\"elevation\"></md-elevation>`;\n  }\n\n  private getSurfaceClasses(): ClassInfo {\n    return {\n      open: this.open,\n      fixed: this.positioning === 'fixed',\n      'has-overflow': this.hasOverflow,\n    };\n  }\n\n  private readonly handleFocusout = async (event: FocusEvent) => {\n    const anchorEl = this.anchorElement!;\n    // Do not close if we focused out by clicking on the anchor element. We\n    // can't assume anchor buttons can be the related target because of iOS does\n    // not focus buttons.\n    if (\n      this.stayOpenOnFocusout ||\n      !this.open ||\n      this.pointerPath.includes(anchorEl)\n    ) {\n      return;\n    }\n\n    if (event.relatedTarget) {\n      // Don't close the menu if we are switching focus between menu,\n      // md-menu-item, and md-list or if the anchor was click focused, but check\n      // if length of pointerPath is 0 because that means something was at least\n      // clicked (shift+tab case).\n      if (\n        isElementInSubtree(event.relatedTarget, this) ||\n        (this.pointerPath.length !== 0 &&\n          isElementInSubtree(event.relatedTarget, anchorEl))\n      ) {\n        return;\n      }\n    } else if (this.pointerPath.includes(this)) {\n      // If menu tabindex == -1 and the user clicks on the menu or a divider, we\n      // want to keep the menu open.\n      return;\n    }\n\n    const oldRestoreFocus = this.skipRestoreFocus;\n    // allow focus to continue to the next focused object rather than returning\n    this.skipRestoreFocus = true;\n    this.close();\n    // await for close\n    await this.updateComplete;\n    // return to previous behavior\n    this.skipRestoreFocus = oldRestoreFocus;\n  };\n\n  private captureKeydown(event: KeyboardEvent) {\n    if (\n      event.target === this &&\n      !event.defaultPrevented &&\n      isClosableKey(event.code)\n    ) {\n      event.preventDefault();\n      this.close();\n    }\n\n    this.typeaheadController.onKeydown(event);\n  }\n\n  /**\n   * Saves the last focused element focuses the new element based on\n   * `defaultFocus`, and animates open.\n   */\n  private readonly onOpened = async () => {\n    this.lastFocusedElement = getFocusedElement();\n\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items);\n\n    if (activeItemRecord && this.defaultFocus !== FocusState.NONE) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n\n    let animationAborted = !this.quick;\n\n    if (this.quick) {\n      this.dispatchEvent(new Event('opening'));\n    } else {\n      animationAborted = !!(await this.animateOpen());\n    }\n\n    // This must come after the opening animation or else it may focus one of\n    // the items before the animation has begun and causes the list to slide\n    // (block-padding-of-the-menu)px at the end of the animation\n    switch (this.defaultFocus) {\n      case FocusState.FIRST_ITEM:\n        const first = getFirstActivatableItem(items);\n        if (first) {\n          first.tabIndex = 0;\n          first.focus();\n          await (first as LitElement & MenuItem).updateComplete;\n        }\n        break;\n      case FocusState.LAST_ITEM:\n        const last = getLastActivatableItem(items);\n        if (last) {\n          last.tabIndex = 0;\n          last.focus();\n          await (last as LitElement & MenuItem).updateComplete;\n        }\n        break;\n      case FocusState.LIST_ROOT:\n        this.focus();\n        break;\n      default:\n      case FocusState.NONE:\n        // Do nothing.\n        break;\n    }\n\n    if (!animationAborted) {\n      this.dispatchEvent(new Event('opened'));\n    }\n  };\n\n  /**\n   * Animates closed.\n   */\n  private readonly beforeClose = async () => {\n    this.open = false;\n\n    if (!this.skipRestoreFocus) {\n      this.lastFocusedElement?.focus?.();\n    }\n\n    if (!this.quick) {\n      await this.animateClose();\n    }\n  };\n\n  /**\n   * Focuses the last focused element.\n   */\n  private readonly onClosed = () => {\n    if (this.quick) {\n      this.dispatchEvent(new Event('closing'));\n      this.dispatchEvent(new Event('closed'));\n    }\n  };\n\n  /**\n   * Performs the opening animation:\n   *\n   * https://direct.googleplex.com/#/spec/295000003+271060003\n   *\n   * @return A promise that resolve to `true` if the animation was aborted,\n   *     `false` if it was not aborted.\n   */\n  private async animateOpen() {\n    const surfaceEl = this.surfaceEl;\n    const slotEl = this.slotEl;\n\n    if (!surfaceEl || !slotEl) return true;\n\n    const openDirection = this.openDirection;\n    this.dispatchEvent(new Event('opening'));\n    // needs to be imperative because we don't want to mix animation and Lit\n    // render timing\n    surfaceEl.classList.toggle('animating', true);\n\n    const signal = this.openCloseAnimationSignal.start();\n    const height = surfaceEl.offsetHeight;\n    const openingUpwards = openDirection === 'UP';\n    const children = this.items;\n    const FULL_DURATION = 500;\n    const SURFACE_OPACITY_DURATION = 50;\n    const ITEM_OPACITY_DURATION = 250;\n    // We want to fit every child fade-in animation within the full duration of\n    // the animation.\n    const DELAY_BETWEEN_ITEMS =\n      (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length;\n\n    const surfaceHeightAnimation = surfaceEl.animate(\n      [{height: '0px'}, {height: `${height}px`}],\n      {\n        duration: FULL_DURATION,\n        easing: EASING.EMPHASIZED,\n      },\n    );\n    // When we are opening upwards, we want to make sure the last item is always\n    // in view, so we need to translate it upwards the opposite direction of the\n    // height animation\n    const upPositionCorrectionAnimation = slotEl.animate(\n      [\n        {transform: openingUpwards ? `translateY(-${height}px)` : ''},\n        {transform: ''},\n      ],\n      {duration: FULL_DURATION, easing: EASING.EMPHASIZED},\n    );\n\n    const surfaceOpacityAnimation = surfaceEl.animate(\n      [{opacity: 0}, {opacity: 1}],\n      SURFACE_OPACITY_DURATION,\n    );\n\n    const childrenAnimations: Array<[HTMLElement, Animation]> = [];\n\n    for (let i = 0; i < children.length; i++) {\n      // If we are animating upwards, then reverse the children list.\n      const directionalIndex = openingUpwards ? children.length - 1 - i : i;\n      const child = children[directionalIndex];\n      const animation = child.animate([{opacity: 0}, {opacity: 1}], {\n        duration: ITEM_OPACITY_DURATION,\n        delay: DELAY_BETWEEN_ITEMS * i,\n      });\n\n      // Make them all initially hidden and then clean up at the end of each\n      // animation.\n      child.classList.toggle('md-menu-hidden', true);\n      animation.addEventListener('finish', () => {\n        child.classList.toggle('md-menu-hidden', false);\n      });\n\n      childrenAnimations.push([child, animation]);\n    }\n\n    let resolveAnimation = (value: boolean) => {};\n    const animationFinished = new Promise<boolean>((resolve) => {\n      resolveAnimation = resolve;\n    });\n\n    signal.addEventListener('abort', () => {\n      surfaceHeightAnimation.cancel();\n      upPositionCorrectionAnimation.cancel();\n      surfaceOpacityAnimation.cancel();\n      childrenAnimations.forEach(([child, animation]) => {\n        child.classList.toggle('md-menu-hidden', false);\n        animation.cancel();\n      });\n\n      resolveAnimation(true);\n    });\n\n    surfaceHeightAnimation.addEventListener('finish', () => {\n      surfaceEl.classList.toggle('animating', false);\n      this.openCloseAnimationSignal.finish();\n      resolveAnimation(false);\n    });\n\n    return await animationFinished;\n  }\n\n  /**\n   * Performs the closing animation:\n   *\n   * https://direct.googleplex.com/#/spec/295000003+271060003\n   */\n  private animateClose() {\n    let resolve!: (value: unknown) => void;\n\n    // This promise blocks the surface position controller from setting\n    // display: none on the surface which will interfere with this animation.\n    const animationEnded = new Promise((res) => {\n      resolve = res;\n    });\n\n    const surfaceEl = this.surfaceEl;\n    const slotEl = this.slotEl;\n\n    if (!surfaceEl || !slotEl) {\n      resolve(false);\n      return animationEnded;\n    }\n\n    const openDirection = this.openDirection;\n    const closingDownwards = openDirection === 'UP';\n    this.dispatchEvent(new Event('closing'));\n    // needs to be imperative because we don't want to mix animation and Lit\n    // render timing\n    surfaceEl.classList.toggle('animating', true);\n    const signal = this.openCloseAnimationSignal.start();\n    const height = surfaceEl.offsetHeight;\n    const children = this.items;\n    const FULL_DURATION = 150;\n    const SURFACE_OPACITY_DURATION = 50;\n    // The surface fades away at the very end\n    const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION;\n    const ITEM_OPACITY_DURATION = 50;\n    const ITEM_OPACITY_INITIAL_DELAY = 50;\n    const END_HEIGHT_PERCENTAGE = 0.35;\n\n    // We want to fit every child fade-out animation within the full duration of\n    // the animation.\n    const DELAY_BETWEEN_ITEMS =\n      (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /\n      children.length;\n\n    // The mock has the animation shrink to 35%\n    const surfaceHeightAnimation = surfaceEl.animate(\n      [\n        {height: `${height}px`},\n        {height: `${height * END_HEIGHT_PERCENTAGE}px`},\n      ],\n      {\n        duration: FULL_DURATION,\n        easing: EASING.EMPHASIZED_ACCELERATE,\n      },\n    );\n\n    // When we are closing downwards, we want to make sure the last item is\n    // always in view, so we need to translate it upwards the opposite direction\n    // of the height animation\n    const downPositionCorrectionAnimation = slotEl.animate(\n      [\n        {transform: ''},\n        {\n          transform: closingDownwards\n            ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`\n            : '',\n        },\n      ],\n      {duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE},\n    );\n\n    const surfaceOpacityAnimation = surfaceEl.animate(\n      [{opacity: 1}, {opacity: 0}],\n      {duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY},\n    );\n\n    const childrenAnimations: Array<[HTMLElement, Animation]> = [];\n\n    for (let i = 0; i < children.length; i++) {\n      // If the animation is closing upwards, then reverse the list of\n      // children so that we animate in the opposite direction.\n      const directionalIndex = closingDownwards ? i : children.length - 1 - i;\n      const child = children[directionalIndex];\n      const animation = child.animate([{opacity: 1}, {opacity: 0}], {\n        duration: ITEM_OPACITY_DURATION,\n        delay: ITEM_OPACITY_INITIAL_DELAY + DELAY_BETWEEN_ITEMS * i,\n      });\n\n      // Make sure the items stay hidden at the end of each child animation.\n      // We clean this up at the end of the overall animation.\n      animation.addEventListener('finish', () => {\n        child.classList.toggle('md-menu-hidden', true);\n      });\n      childrenAnimations.push([child, animation]);\n    }\n\n    signal.addEventListener('abort', () => {\n      surfaceHeightAnimation.cancel();\n      downPositionCorrectionAnimation.cancel();\n      surfaceOpacityAnimation.cancel();\n      childrenAnimations.forEach(([child, animation]) => {\n        animation.cancel();\n        child.classList.toggle('md-menu-hidden', false);\n      });\n      resolve(false);\n    });\n\n    surfaceHeightAnimation.addEventListener('finish', () => {\n      surfaceEl.classList.toggle('animating', false);\n      childrenAnimations.forEach(([child]) => {\n        child.classList.toggle('md-menu-hidden', false);\n      });\n      this.openCloseAnimationSignal.finish();\n      this.dispatchEvent(new Event('closed'));\n      resolve(true);\n    });\n\n    return animationEnded;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    // At any key event, the pointer interaction is done so we need to clear our\n    // cached pointerpath. This handles the case where the user clicks on the\n    // anchor, and then hits shift+tab\n    this.pointerPath = [];\n    this.listController.handleKeydown(event);\n  }\n\n  private setUpGlobalEventListeners() {\n    document.addEventListener('click', this.onDocumentClick, {capture: true});\n    window.addEventListener('pointerdown', this.onWindowPointerdown);\n    document.addEventListener('resize', this.onWindowResize, {passive: true});\n    window.addEventListener('resize', this.onWindowResize, {passive: true});\n  }\n\n  private cleanUpGlobalEventListeners() {\n    document.removeEventListener('click', this.onDocumentClick, {\n      capture: true,\n    });\n    window.removeEventListener('pointerdown', this.onWindowPointerdown);\n    document.removeEventListener('resize', this.onWindowResize);\n    window.removeEventListener('resize', this.onWindowResize);\n  }\n\n  private readonly onWindowPointerdown = (event: PointerEvent) => {\n    this.pointerPath = event.composedPath();\n  };\n\n  /**\n   * We cannot listen to window click because Safari on iOS will not bubble a\n   * click event on window if the item clicked is not a \"clickable\" item such as\n   * <body>\n   */\n  private readonly onDocumentClick = (event: Event) => {\n    if (!this.open) {\n      return;\n    }\n\n    const path = event.composedPath();\n\n    if (\n      !this.stayOpenOnOutsideClick &&\n      !path.includes(this) &&\n      !path.includes(this.anchorElement!)\n    ) {\n      this.open = false;\n    }\n  };\n\n  private onCloseMenu() {\n    this.close();\n  }\n\n  private onDeactivateItems(event: Event) {\n    event.stopPropagation();\n    this.listController.onDeactivateItems();\n  }\n\n  private onRequestActivation(event: Event) {\n    event.stopPropagation();\n    this.listController.onRequestActivation(event);\n  }\n\n  private handleDeactivateTypeahead(event: DeactivateTypeaheadEvent) {\n    // stopPropagation so that this does not deactivate any typeaheads in menus\n    // nested above it e.g. md-sub-menu\n    event.stopPropagation();\n    this.typeaheadActive = false;\n  }\n\n  private handleActivateTypeahead(event: ActivateTypeaheadEvent) {\n    // stopPropagation so that this does not activate any typeaheads in menus\n    // nested above it e.g. md-sub-menu\n    event.stopPropagation();\n    this.typeaheadActive = true;\n  }\n\n  private handleStayOpenOnFocusout(event: Event) {\n    event.stopPropagation();\n    this.stayOpenOnFocusout = true;\n  }\n\n  private handleCloseOnFocusout(event: Event) {\n    event.stopPropagation();\n    this.stayOpenOnFocusout = false;\n  }\n\n  close() {\n    this.open = false;\n    const maybeSubmenu = this.slotItems as Array<\n      HTMLElement & {close?: () => void}\n    >;\n    maybeSubmenu.forEach((item) => {\n      item.close?.();\n    });\n  }\n\n  show() {\n    this.open = true;\n  }\n\n  /**\n   * Activates the next item in the menu. If at the end of the menu, the first\n   * item will be activated.\n   *\n   * @return The activated menu item or `null` if there are no items.\n   */\n  activateNextItem() {\n    return this.listController.activateNextItem() ?? null;\n  }\n\n  /**\n   * Activates the previous item in the menu. If at the start of the menu, the\n   * last item will be activated.\n   *\n   * @return The activated menu item or `null` if there are no items.\n   */\n  activatePreviousItem() {\n    return this.listController.activatePreviousItem() ?? null;\n  }\n\n  /**\n   * Repositions the menu if it is open.\n   *\n   * Useful for the case where document or window-positioned menus have their\n   * anchors moved while open.\n   */\n  reposition() {\n    if (this.open) {\n      this.menuPositionController.position();\n    }\n  }\n}\n"
  },
  {
    "path": "menu/internal/menuitem/_menu-item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../focus/focus-ring';\n@use '../../../icon/icon';\n@use '../../../list/list-item';\n@use '../../../ripple/ripple';\n@use '../../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-menu-item-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-menu-item-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-menu-item-values();\n\n  :host {\n    border-radius: map.get($tokens, 'container-shape');\n    display: flex;\n    gap: 16px;\n\n    @include ripple.theme(\n      (\n        hover-color: map.get($tokens, 'hover-state-layer-color'),\n        hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),\n        pressed-color: map.get($tokens, 'pressed-state-layer-color'),\n        pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),\n      )\n    );\n  }\n\n  :host([disabled]) {\n    opacity: map.get($tokens, 'disabled-opacity');\n    pointer-events: none;\n  }\n\n  md-focus-ring {\n    z-index: 1;\n\n    @include focus-ring.theme(\n      (\n        'shape': 8px,\n      )\n    );\n  }\n\n  a,\n  button,\n  li {\n    // Resets. These can be removed once we're no longer use these tags\n    background: none;\n    border: none;\n    padding: 0;\n    margin: 0;\n    text-align: unset;\n    text-decoration: none;\n  }\n\n  .list-item {\n    border-radius: inherit;\n    display: flex;\n    flex: 1;\n    gap: inherit;\n    max-width: inherit;\n    min-width: inherit;\n    outline: none;\n    // hide android tap color since we have ripple\n    -webkit-tap-highlight-color: transparent;\n\n    &:not(.disabled) {\n      cursor: pointer;\n    }\n  }\n\n  [slot='container'] {\n    pointer-events: none;\n  }\n\n  md-ripple {\n    border-radius: inherit;\n  }\n\n  md-item {\n    border-radius: inherit;\n    flex: 1;\n    color: map.get($tokens, 'label-text-color');\n    font-family: map.get($tokens, 'label-text-font');\n    font-size: map.get($tokens, 'label-text-size');\n    line-height: map.get($tokens, 'label-text-line-height');\n    font-weight: map.get($tokens, 'label-text-weight');\n    min-height: map.get($tokens, 'one-line-container-height');\n    padding-top: map.get($tokens, 'top-space');\n    padding-bottom: map.get($tokens, 'bottom-space');\n    padding-inline-start: map.get($tokens, 'leading-space');\n    padding-inline-end: map.get($tokens, 'trailing-space');\n    gap: inherit;\n  }\n\n  md-item[multiline] {\n    min-height: map.get($tokens, 'two-line-container-height');\n  }\n\n  [slot='supporting-text'] {\n    color: map.get($tokens, 'supporting-text-color');\n    font-family: map.get($tokens, 'supporting-text-font');\n    font-size: map.get($tokens, 'supporting-text-size');\n    line-height: map.get($tokens, 'supporting-text-line-height');\n    font-weight: map.get($tokens, 'supporting-text-weight');\n  }\n\n  [slot='trailing-supporting-text'] {\n    color: map.get($tokens, 'trailing-supporting-text-color');\n    font-family: map.get($tokens, 'trailing-supporting-text-font');\n    font-size: map.get($tokens, 'trailing-supporting-text-size');\n    line-height: map.get($tokens, 'trailing-supporting-text-line-height');\n    font-weight: map.get($tokens, 'trailing-supporting-text-weight');\n  }\n\n  :is([slot='start'], [slot='end'])::slotted(*) {\n    fill: currentColor;\n  }\n\n  [slot='start'] {\n    color: map.get($tokens, 'leading-icon-color');\n  }\n\n  [slot='end'] {\n    color: map.get($tokens, 'trailing-icon-color');\n  }\n\n  .list-item {\n    background-color: map.get($tokens, 'container-color');\n  }\n\n  .list-item.selected {\n    background-color: map.get($tokens, 'selected-container-color');\n  }\n\n  .selected:not(.disabled) ::slotted(*) {\n    color: map.get($tokens, 'selected-label-text-color');\n  }\n\n  @media (forced-colors: active) {\n    :host([disabled]),\n    :host([disabled]) slot {\n      color: GrayText;\n      opacity: 1;\n    }\n\n    .list-item {\n      position: relative;\n    }\n\n    .list-item.selected::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      box-sizing: border-box;\n      border-radius: inherit;\n      pointer-events: none;\n      border: 3px double CanvasText;\n    }\n  }\n}\n"
  },
  {
    "path": "menu/internal/menuitem/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {ListItemHarness} from '../../../list/internal/listitem/harness.js';\nimport {MenuItem} from '../controllers/menuItemController.js';\n\n/**\n * Test harness for menu item.\n */\nexport class MenuItemHarness extends ListItemHarness<MenuItem & LitElement> {}\n"
  },
  {
    "path": "menu/internal/menuitem/menu-item-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './menu-item';\n// go/keep-sorted end\n\n@include menu-item.styles;\n"
  },
  {
    "path": "menu/internal/menuitem/menu-item.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  queryAssignedNodes,\n} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {\n  MenuItem,\n  MenuItemController,\n  type MenuItemType,\n} from '../controllers/menuItemController.js';\n\n// Separate variable needed for closure.\nconst menuItemBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}\n * Closes the encapsulating menu on closable interaction. --bubbles --composed\n */\nexport class MenuItemEl extends menuItemBaseClass implements MenuItem {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Sets the behavior and role of the menu item, defaults to \"menuitem\".\n   */\n  @property() type: MenuItemType = 'menuitem';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Keeps the menu open if clicked or keyboard selected.\n   */\n  @property({type: Boolean, attribute: 'keep-open'}) keepOpen = false;\n\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean}) selected = false;\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'headline'})\n  protected readonly headlineElements!: HTMLElement[];\n  @queryAssignedElements({slot: 'supporting-text'})\n  protected readonly supportingTextElements!: HTMLElement[];\n  @queryAssignedNodes({slot: ''})\n  protected readonly defaultElements!: Node[];\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.menuItemController.typeaheadText;\n  }\n\n  @property({attribute: 'typeahead-text'})\n  set typeaheadText(text: string) {\n    this.menuItemController.setTypeaheadText(text);\n  }\n\n  private readonly menuItemController = new MenuItemController(this, {\n    getHeadlineElements: () => {\n      return this.headlineElements;\n    },\n    getSupportingTextElements: () => {\n      return this.supportingTextElements;\n    },\n    getDefaultElements: () => {\n      return this.defaultElements;\n    },\n    getInteractiveElement: () => this.listItemRoot,\n  });\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = this.type === 'link';\n    let tag: StaticValue;\n    switch (this.menuItemController.tagName) {\n      case 'a':\n        tag = literal`a`;\n        break;\n      case 'button':\n        tag = literal`button`;\n        break;\n      default:\n      case 'li':\n        tag = literal`li`;\n        break;\n    }\n\n    // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n    // then all are \"menuitem\" roles for correct announcement.\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=${this.disabled && !isAnchor ? -1 : 0}\n        role=${this.menuItemController.role}\n        aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        href=${this.href || nothing}\n        target=${target}\n        @click=${this.menuItemController.onClick}\n        @keydown=${this.menuItemController.onKeydown}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult | typeof nothing {\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult | typeof nothing {\n    return html` <md-focus-ring\n      part=\"focus-ring\"\n      for=\"item\"\n      inward></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n      'selected': this.selected,\n    };\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"
  },
  {
    "path": "menu/internal/submenu/_sub-menu.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles {\n  :host {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n}\n"
  },
  {
    "path": "menu/internal/submenu/sub-menu-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './sub-menu';\n// go/keep-sorted end\n\n@include sub-menu.styles;\n"
  },
  {
    "path": "menu/internal/submenu/sub-menu.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {\n  createDeactivateItemsEvent,\n  createRequestActivationEvent,\n  deactivateActiveItem,\n  getFirstActivatableItem,\n} from '../../../list/internal/list-navigation-helpers.js';\nimport {MenuItem} from '../controllers/menuItemController.js';\nimport {\n  CloseMenuEvent,\n  CloseReason,\n  createActivateTypeaheadEvent,\n  createDeactivateTypeaheadEvent,\n  KeydownCloseKey,\n  Menu,\n  NavigableKey,\n  SelectionKey,\n} from '../controllers/shared.js';\nimport {Corner} from '../menu.js';\n\n/**\n * @fires deactivate-items {Event} Requests the parent menu to deselect other\n * items when a submenu opens. --bubbles --composed\n * @fires request-activation {Event} Requests the parent to make the slotted item\n * focusable and focus the item. --bubbles --composed\n * @fires deactivate-typeahead {Event} Requests the parent menu to deactivate\n * the typeahead functionality when a submenu opens. --bubbles --composed\n * @fires activate-typeahead {Event} Requests the parent menu to activate the\n * typeahead functionality when a submenu closes. --bubbles --composed\n */\nexport class SubMenu extends LitElement {\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'})\n  anchorCorner: Corner = Corner.START_END;\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = Corner.START_START;\n  /**\n   * The delay between mouseenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({type: Boolean, reflect: true, attribute: 'md-sub-menu'})\n  isSubMenu = true;\n\n  get item() {\n    return this.items[0] ?? null;\n  }\n\n  get menu() {\n    return this.menus[0] ?? null;\n  }\n\n  @queryAssignedElements({slot: 'item', flatten: true})\n  private readonly items!: MenuItem[];\n\n  @queryAssignedElements({slot: 'menu', flatten: true})\n  private readonly menus!: Menu[];\n\n  private previousOpenTimeout = 0;\n  private previousCloseTimeout = 0;\n\n  constructor() {\n    super();\n\n    if (!isServer) {\n      this.addEventListener('mouseenter', this.onMouseenter);\n      this.addEventListener('mouseleave', this.onMouseleave);\n    }\n  }\n\n  override render() {\n    return html`\n      <slot\n        name=\"item\"\n        @click=${this.onClick}\n        @keydown=${this.onKeydown}\n        @slotchange=${this.onSlotchange}>\n      </slot>\n      <slot\n        name=\"menu\"\n        @keydown=${this.onSubMenuKeydown}\n        @close-menu=${this.onCloseSubmenu}\n        @slotchange=${this.onSlotchange}>\n      </slot>\n    `;\n  }\n\n  protected override firstUpdated() {\n    // slotchange is not fired if the contents have been SSRd\n    this.onSlotchange();\n  }\n\n  /**\n   * Shows the submenu.\n   */\n  async show() {\n    const menu = this.menu;\n    if (!menu || menu.open) return;\n\n    // Ensures that we deselect items when the menu closes and reactivate\n    // typeahead when the menu closes, so that we do not have dirty state of\n    // `sub-menu > menu-item[selected]` when we reopen.\n    //\n    // This cannot happen in `close()` because the menu may close via other\n    // means Additionally, this cannot happen in onCloseSubmenu because\n    // `close-menu` may not be called via focusout of outside click and not\n    // triggered by an item\n    menu.addEventListener(\n      'closed',\n      () => {\n        this.item.ariaExpanded = 'false';\n        this.dispatchEvent(createActivateTypeaheadEvent());\n        this.dispatchEvent(createDeactivateItemsEvent());\n        // aria-hidden required so ChromeVox doesn't announce the closed menu\n        menu.ariaHidden = 'true';\n      },\n      {once: true},\n    );\n\n    // Parent menu is `position: absolute` – this creates a new CSS relative\n    // positioning context (similar to doing `position: relative`), so the\n    // submenu's `<md-menu slot=\"submenu\" positioning=\"document\">` would be\n    // wrong even if we change `md-sub-menu` from `position: relative` to\n    // `position: static` because the submenu it would still be positioning\n    // itself relative to the parent menu.\n    if (menu.positioning === 'document') {\n      menu.positioning = 'absolute';\n    }\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchorElement = this.item;\n    menu.defaultFocus = 'first-item';\n    // aria-hidden management required so ChromeVox doesn't announce the closed\n    // menu. Remove it here since we are about to show and focus it.\n    menu.removeAttribute('aria-hidden');\n    // This is required in the case where we have a leaf menu open and and the\n    // user hovers a parent menu's item which is not an md-sub-menu item.\n    // If this were set to true, then the menu would close and focus would be\n    // lost. That means the focusout event would have a `relatedTarget` of\n    // `null` since nothing in the menu would be focused anymore due to the\n    // leaf menu closing. restoring focus ensures that we keep focus in the\n    // submenu tree.\n    menu.skipRestoreFocus = false;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    menu.show();\n    this.item.ariaExpanded = 'true';\n    this.item.ariaHasPopup = 'menu';\n    if (menu.id) {\n      this.item.setAttribute('aria-controls', menu.id);\n    }\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(createDeactivateItemsEvent());\n    this.dispatchEvent(createDeactivateTypeaheadEvent());\n    this.item.selected = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (!menuAlreadyOpen) {\n      let open = (value: unknown) => {};\n      const opened = new Promise((resolve) => {\n        open = resolve;\n      });\n      menu.addEventListener('opened', open, {once: true});\n      await opened;\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   */\n  async close() {\n    const menu = this.menu;\n    if (!menu || !menu.open) return;\n\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    menu.quick = true;\n    menu.close();\n    this.dispatchEvent(createDeactivateItemsEvent());\n    let close = (value: unknown) => {};\n    const closed = new Promise((resolve) => {\n      close = resolve;\n    });\n    menu.addEventListener('closed', close, {once: true});\n    await closed;\n  }\n\n  protected onSlotchange() {\n    if (!this.item) {\n      return;\n    }\n\n    // TODO(b/301296618): clean up old aria values on change\n    this.item.ariaExpanded = 'false';\n    this.item.ariaHasPopup = 'menu';\n    if (this.menu?.id) {\n      this.item.setAttribute('aria-controls', this.menu.id);\n    }\n    this.item.keepOpen = true;\n\n    const menu = this.menu;\n    if (!menu) return;\n\n    menu.isSubmenu = true;\n    // Required for ChromeVox to not linearly navigate to the menu while closed\n    menu.ariaHidden = 'true';\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   *\n   * NOTE: We explicitly use mouse events and not pointer events because\n   * pointer events apply to touch events. And if a user were to tap a\n   * sub-menu, it would fire the \"pointerenter\", \"pointerleave\", \"click\" events\n   * which would open the menu on click, and then set the timeout to close the\n   * menu due to pointerleave.\n   */\n  protected onMouseenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.menu?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   *\n   * NOTE: We explicitly use mouse events and not pointer events because\n   * pointer events apply to touch events. And if a user were to tap a\n   * sub-menu, it would fire the \"pointerenter\", \"pointerleave\", \"click\" events\n   * which would open the menu on click, and then set the timeout to close the\n   * menu due to pointerleave.\n   */\n  protected onMouseleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected onClick() {\n    this.show();\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected async onKeydown(event: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);\n\n    if (event.defaultPrevented) return;\n\n    const openedWithLR =\n      shouldOpenSubmenu &&\n      (NavigableKey.LEFT === event.code || NavigableKey.RIGHT === event.code);\n\n    if (event.code === SelectionKey.SPACE || openedWithLR) {\n      // prevent space from scrolling and Left + Right from selecting previous /\n      // next items or opening / closing parent menus. Only open the submenu.\n      event.preventDefault();\n\n      if (openedWithLR) {\n        event.stopPropagation();\n      }\n    }\n\n    if (!shouldOpenSubmenu) {\n      return;\n    }\n\n    const submenu = this.menu;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      await this.show();\n\n      firstActivatableItem.tabIndex = 0;\n      firstActivatableItem.focus();\n\n      return;\n    }\n  }\n\n  private onCloseSubmenu(event: CloseMenuEvent) {\n    const {itemPath, reason} = event.detail;\n    itemPath.push(this.item);\n\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (\n      reason.kind === CloseReason.KEYDOWN &&\n      reason.key === KeydownCloseKey.ESCAPE\n    ) {\n      event.stopPropagation();\n      this.item.dispatchEvent(createRequestActivationEvent());\n      return;\n    }\n\n    this.dispatchEvent(createDeactivateItemsEvent());\n  }\n\n  private async onSubMenuKeydown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n    const {close: shouldClose, keyCode} = this.isSubmenuCloseKey(event.code);\n    if (!shouldClose) return;\n\n    // Communicate that it's handled so that we don't accidentally close every\n    // parent menu. Additionally, we want to isolate things like the typeahead\n    // keydowns from bubbling up to the parent menu and confounding things.\n    event.preventDefault();\n\n    if (keyCode === NavigableKey.LEFT || keyCode === NavigableKey.RIGHT) {\n      // Prevent this from bubbling to parents\n      event.stopPropagation();\n    }\n\n    await this.close();\n\n    deactivateActiveItem(this.menu.items);\n    this.item?.focus();\n    this.item.tabIndex = 0;\n    this.item.focus();\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  private isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NavigableKey.LEFT : NavigableKey.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SelectionKey.SPACE:\n      case SelectionKey.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  private isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NavigableKey.RIGHT : NavigableKey.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KeydownCloseKey.ESCAPE:\n        return {close: true, keyCode: code} as const;\n      default:\n        return {close: false} as const;\n    }\n  }\n}\n"
  },
  {
    "path": "menu/internal/types.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\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\n  extends 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": "menu/menu-item.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {MenuItemEl} from './internal/menuitem/menu-item.js';\nimport {styles} from './internal/menuitem/menu-item-styles.js';\n\nexport {type MenuItem} from './internal/controllers/menuItemController.js';\nexport {type CloseMenuEvent} from './internal/controllers/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu-item')\nexport class MdMenuItem extends MenuItemEl {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "menu/menu.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Menu} from './internal/menu.js';\nimport {styles} from './internal/menu-styles.js';\n\nexport {type ListItem} from '../list/internal/list-navigation-helpers.js';\nexport {type MenuItem} from './internal/controllers/menuItemController.js';\nexport {\n  CloseReason,\n  FocusState,\n  type CloseMenuEvent,\n  type Menu,\n} from './internal/controllers/shared.js';\nexport {Corner} from './internal/menu.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menus appear when users interact with a button, action, or other control.\n *\n * They can be opened from a variety of elements, most commonly icon buttons,\n * buttons, and text fields.\n *\n * md-menu listens for the `close-menu` and `deselect-items` events.\n *\n * - `close-menu` closes the menu when dispatched from a child element.\n * - `deselect-items` deselects all of its immediate menu-item children.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       id=\"anchor\"\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents.\n *\n *     Additionally, `anchor` ingests an idref which do not pass through shadow\n *     roots. You can also set `.anchorElement` to an element reference if\n *     necessary.\n *   -->\n *   <md-menu anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <md-menu-item headline=\"This is a headline\"></md-menu-item>\n *     <md-sub-menu>\n *       <md-menu-item\n *           slot=\"item\"\n *           headline=\"this is a submenu item\">\n *       </md-menu-item>\n *       <md-menu slot=\"menu\">\n *         <md-menu-item headline=\"This is an item inside a submenu\">\n *         </md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "menu/menu_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\nimport './menu.js';\nimport './sub-menu.js';\n\nimport {html, render} from 'lit';\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MenuItemHarness} from './harness.js';\nimport {MdMenu} from './menu.js';\nimport {MdMenuItem} from './menu-item.js';\n\ndescribe('<md-menu>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdMenu.styles);\n  });\n\n  let root: HTMLDivElement;\n\n  beforeEach(() => {\n    root = document.createElement('div');\n    document.body.appendChild(root);\n  });\n\n  afterEach(() => {\n    root?.remove();\n  });\n\n  it('escape on list root closes menu', async () => {\n    render(\n      html`\n        <button>OpenMenu</button>\n        <md-menu quick></md-menu>\n      `,\n      root,\n    );\n\n    const button = root.querySelector('button')!;\n    const menu = root.querySelector('md-menu')!;\n    menu.anchorElement = button;\n    menu.show();\n\n    expect(menu.open).toBeTrue();\n\n    const escapeKeydownEvent = new KeyboardEvent('keydown', {\n      key: 'Escape',\n      code: 'Escape',\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n    menu.dispatchEvent(escapeKeydownEvent);\n\n    await menu.updateComplete;\n\n    expect(menu.open).toBeFalse();\n    expect(escapeKeydownEvent.defaultPrevented).toBeTrue();\n  });\n\n  // Regression test for b/314706578.\n  it('escape on submenu items closes menu', async () => {\n    render(\n      html`\n        <button>OpenMenu</button>\n        <md-menu quick>\n          <md-sub-menu hover-open-delay=\"0\" hover-close-delay=\"0\">\n            <md-menu-item id=\"submenu-item\" slot=\"item\">\n              <div slot=\"headline\">Link Item 1</div>\n            </md-menu-item>\n            <md-menu quick slot=\"menu\">\n              <md-menu-item slot=\"item\">\n                <div slot=\"headline\">Submenu Item 1</div>\n              </md-menu-item>\n            </md-menu>\n          </md-sub-menu>\n        </md-menu>\n      `,\n      root,\n    );\n\n    const button = root.querySelector('button')!;\n    const menu = root.querySelector('md-menu')!;\n    const submenuItemHarness = new MenuItemHarness(\n      menu.querySelector('#submenu-item')!,\n    );\n    menu.anchorElement = button;\n    menu.show();\n\n    expect(menu.open).toBeTrue();\n\n    const escapeKeydownEvent = new KeyboardEvent('keydown', {\n      key: 'Escape',\n      code: 'Escape',\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n    const interactiveElement = await submenuItemHarness.getInteractiveElement();\n    interactiveElement.dispatchEvent(escapeKeydownEvent);\n\n    await menu.updateComplete;\n\n    expect(menu.open).toBeFalse();\n    expect(escapeKeydownEvent.defaultPrevented).toBeTrue();\n  });\n});\n\ndescribe('<md-menu-item>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdMenuItem.styles);\n  });\n});\n"
  },
  {
    "path": "menu/sub-menu.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {SubMenu} from './internal/submenu/sub-menu.js';\nimport {styles} from './internal/submenu/sub-menu-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-sub-menu': MdSubMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `Menu` interface and also have the `md-menu`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * This menu item will open a sub-menu that is slotted in the `submenu` slot.\n * Additionally, the containing menu must either have `has-overflow` or\n * `positioning=fixed` set to `true` in order to display the containing menu\n * properly.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       id=\"anchor\"\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents\n *   -->\n *   <md-menu anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <md-menu-item headline=\"This is a headline\"></md-menu-item>\n *     <md-sub-menu>\n *       <md-menu-item\n *           slot=\"item\"\n *           headline=\"this is a submenu item\">\n *       </md-menu-item>\n *       <md-menu slot=\"menu\">\n *         <md-menu-item headline=\"This is an item inside a submenu\">\n *         </md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-sub-menu')\nexport class MdSubMenu extends SubMenu {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "menu/test/window_size.json",
    "content": "{\n  \"capabilities\": {\n    \"goog:chromeOptions\": {\n      \"args\": [\"--window-position=0,0\", \"--window-size=3400,2215\"]\n    },\n    \"moz:firefoxOptions\": {\n      \"args\": [\"-width=3400\",\"-height=2215\"]\n    }\n  },\n  \"extension\": {\n    \"xvfbResolution\": \"3400x2215x24\"\n  }\n}\n"
  },
  {
    "path": "migrations/v2/README.md",
    "content": "# Breaking changes from v1 to v2\n\n<!-- go/mwc-migrations-v2 -->\n\n## ARIA attribute querySelector\n\n**What changed?**\n\n`role` and `aria-*` attributes now shift at runtime to `data-role` and\n`data-aria-*` attributes. This fixes a screen reader bug around labels\nannouncing more than once.\n\n**What broke?**\n\nUsing `querySelector` or `querySelectorAll` with `[role]` or `[aria-*]`\nattribute selectors.\n\n```html\n<md-checkbox aria-label=\"Agree\"></md-checkbox>\n<script>\n  const agreeCheckbox = document.querySelector(\n    'md-checkbox[aria-label=\"Agree\"]'\n  );\n  // `agreeCheckbox` is null!\n</script>\n```\n\n**How to fix?**\n\nProvide selector strings to `ariaSelector()` before querying.\n\n```ts\nimport {ariaSelector} from '@material/web/migrations/v2/query-selector-aria';\n\nconst agreeCheckbox = document.querySelector(\n  ariaSelector('md-checkbox[aria-label=\"Agree\"]')\n);\n```\n\nNote: Element APIs, such as `element.getAttribute('role')` and\n`element.ariaLabel` will continue to work as expected.\n\n## Sass `tokens.md-comp-*-values()` include custom properties by default\n\n**What changed?**\n\nSass component token functions return a `var()` with the component's custom\nproperty, instead of just a value.\n\n```scss\n@use '@material/web/tokens';\n\n$checkbox-tokens: tokens.md-comp-checkbox-values();\n// (\n//   // 'icon-size': 18px, // Before\n//   'icon-size': var(--md-checkbox-icon-size, 18px), // After\n// )\n```\n\n**What broke?**\n\nSass token values from `tokens.md-comp-*-values()` functions are `var()`\nfunctions instead of CSS values. This may introduce additional unnecessary CSS\nor break Sass.\n\n```scss\n@use '@material/web/tokens';\n\n$checkbox-tokens: tokens.md-comp-checkbox-values();\n\n$double-icon-size: math.mult(map.get($checkbox-tokens, 'icon-size'), 2);\n// @error var(--md-checkbox-icon-size, 18px) is not a number.\n```\n\n**How to fix?**\n\nAdd the parameter `$exclude-custom-properties: true` to the values function.\n\n```scss\n@use '@material/web/tokens';\n\n$checkbox-tokens: tokens.md-comp-checkbox-values($exclude-custom-properties: true);\n// (\n//   'icon-size': 18px,\n// )\n```\n"
  },
  {
    "path": "migrations/v2/query-selector-aria.ts",
    "content": "/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nconst HAS_ARIA_ATTRIBUTE_REGEX = /\\[(aria-|role)/g;\n\n/**\n * Patches a CSS selector string to include `data-*` shifting `role` and\n * `aria-*` attributes. Use this with `querySelector()` and `querySelectorAll()`\n * for MWC elements.\n *\n * @example\n * ```ts\n * const agreeCheckbox = document.querySelector(\n *   ariaSelector('md-checkbox[aria-label=\"Agree\"]')\n * );\n * ```\n *\n * @param selector A CSS selector string.\n * @return A CSS selector string that includes `data-*` shifting aria\n *     attributes.\n */\nexport function ariaSelector(selector: string) {\n  if (!HAS_ARIA_ATTRIBUTE_REGEX.test(selector)) {\n    return selector;\n  }\n\n  const selectorWithDataShifted = selector.replaceAll(\n    HAS_ARIA_ATTRIBUTE_REGEX,\n    '[data-$1',\n  );\n  return `${selector},${selectorWithDataShifted}`;\n}\n"
  },
  {
    "path": "migrations/v2/query-selector-aria_test.ts",
    "content": "/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/checkbox/checkbox.js';\nimport {html} from 'lit';\n\nimport {Environment} from '../../testing/environment.js';\nimport {ariaSelector} from './query-selector-aria.js';\n\ndescribe('query-selector-aria', () => {\n  const env = new Environment();\n\n  it('is needed when querying by aria attribute selectors fails', () => {\n    // Arrange\n    const root = env.render(\n      html`<md-checkbox aria-label=\"Agree\"></md-checkbox>`,\n    );\n\n    // Act\n    const checkbox = root.querySelector('[aria-label=\"Agree\"]');\n\n    // Assert\n    expect(checkbox)\n      .withContext('aria attribute query expected to fail without patches')\n      .toBeNull();\n  });\n\n  describe('ariaSelector()', () => {\n    it('returns the element with an aria attribute query', () => {\n      // Arrange\n      const root = env.render(\n        html`<md-checkbox aria-label=\"Agree\"></md-checkbox>`,\n      );\n\n      // Act\n      const element = root.querySelector(ariaSelector('[aria-label=\"Agree\"]'));\n\n      // Assert\n      expect(element).withContext('queried element').not.toBeNull();\n    });\n\n    it('returns the element with a role attribute query', () => {\n      // Arrange\n      const root = env.render(html`<md-checkbox role=\"radio\"></md-checkbox>`);\n\n      // Act\n      const element = root.querySelector(ariaSelector('[role=\"radio\"]'));\n\n      // Assert\n      expect(element).withContext('queried element').not.toBeNull();\n    });\n\n    it('returns the element when combined with other selectors', () => {\n      // Arrange\n      const root = env.render(html`\n        <md-checkbox\n          class=\"checkbox\"\n          aria-label=\"Agree\"\n          aria-haspopup=\"true\"></md-checkbox>\n      `);\n\n      // Act\n      const element = root.querySelector(\n        ariaSelector('.checkbox[aria-label=\"Agree\"][aria-haspopup=\"true\"]'),\n      );\n\n      // Assert\n      expect(element).withContext('queried element').not.toBeNull();\n    });\n\n    it('returns expected elements when not using aria attribute selectors', () => {\n      // Arrange\n      const root = env.render(html`\n        <md-checkbox class=\"checkbox\"></md-checkbox>\n      `);\n\n      // Act\n      const element = root.querySelector(ariaSelector('.checkbox'));\n\n      // Assert\n      expect(element).withContext('queried element').not.toBeNull();\n    });\n  });\n});\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@material/web\",\n  \"version\": \"2.4.1\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"description\": \"Material web components\",\n  \"keywords\": [\n    \"material\",\n    \"material design\",\n    \"design system\",\n    \"components\",\n    \"web components\",\n    \"lit\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/material-components/material-web.git\"\n  },\n  \"license\": \"Apache-2.0\",\n  \"bugs\": {\n    \"url\": \"https://github.com/material-components/material-web/issues\"\n  },\n  \"homepage\": \"https://github.com/material-components/material-web#readme\",\n  \"scripts\": {\n    \"build\": \"wireit\",\n    \"build:ts\": \"wireit\",\n    \"build:css-to-ts\": \"wireit\",\n    \"build:sass\": \"wireit\",\n    \"test\": \"wireit\",\n    \"build:catalog\": \"wireit\",\n    \"build:scripts\": \"wireit\",\n    \"update-docs\": \"wireit\",\n    \"update-docs:components\": \"wireit\",\n    \"update-docs:sass-ext\": \"wireit\",\n    \"update-size\": \"wireit\"\n  },\n  \"type\": \"module\",\n  \"files\": [\n    \"**/*.js\",\n    \"**/*.js.map\",\n    \"**/*.d.ts\",\n    \"**/*.scss\",\n    \"**/*.css\",\n    \"**/*.css.map\",\n    \"!web-test-runner.config.js\",\n    \"!commitlint.config.js\",\n    \"!**/test/**\",\n    \"!**/*_test.*\",\n    \"!.wireit/**\",\n    \"!catalog/\",\n    \"!scripts/\",\n    \"!**/testing/**\",\n    \"testing/harness.{js,js.map,d.ts}\",\n    \"testing/transform-pseudo-classes.{js,js.map,d.ts}\"\n  ],\n  \"workspaces\": [\n    \"catalog\"\n  ],\n  \"dependencies\": {\n    \"lit\": \"^2.8.0 || ^3.0.0\",\n    \"tslib\": \"^2.4.0\"\n  },\n  \"devDependencies\": {\n    \"@lit-labs/analyzer\": \"^0.12.1\",\n    \"@rollup/plugin-multi-entry\": \"^6.0.1\",\n    \"@rollup/plugin-node-resolve\": \"^15.2.3\",\n    \"@rollup/plugin-terser\": \"^0.4.4\",\n    \"@types/jasmine\": \"^4.0.3\",\n    \"@types/node\": \"^24.10.1\",\n    \"@web/test-runner\": \"^0.18.2\",\n    \"@web/test-runner-playwright\": \"^0.11.0\",\n    \"element-internals-polyfill\": \"^1.3.12\",\n    \"jasmine\": \"^4.5.0\",\n    \"playwright\": \"^1.49.0\",\n    \"rollup\": \"^2.79.1\",\n    \"sass\": \"^1.93.2\",\n    \"sass-true\": \"^6.1.0\",\n    \"typescript\": \"5.8.2\",\n    \"web-test-runner-jasmine\": \"^0.0.6\",\n    \"wireit\": \"^0.14.12\"\n  },\n  \"wireit\": {\n    \"build\": {\n      \"dependencies\": [\n        \"build:ts\"\n      ]\n    },\n    \"build:ts\": {\n      \"command\": \"tsc --pretty\",\n      \"files\": [\n        \"tsconfig.json\",\n        \"**/*.ts\",\n        \"!**/*.d.ts\",\n        \"!**/*-styles.ts\",\n        \"!catalog/\",\n        \"!scripts/\"\n      ],\n      \"output\": [\n        \".tsbuildinfo\",\n        \"**/*.js\",\n        \"**/*.js.map\",\n        \"**/*.d.ts\",\n        \"!web-test-runner.config.js\",\n        \"!commitlint.config.js\",\n        \"!types/\",\n        \"!catalog/\",\n        \"!scripts/\"\n      ],\n      \"clean\": \"if-file-deleted\",\n      \"dependencies\": [\n        \"build:css-to-ts\"\n      ]\n    },\n    \"build:css-to-ts\": {\n      \"command\": \"find . \\\\( -path ./.wireit -o -path ./node_modules -o -path ./catalog \\\\) -prune -o -name '*-styles.css' -print | xargs -L1 node scripts/css-to-ts.js\",\n      \"files\": [\n        \"**/*-styles.css\",\n        \"!catalog/\"\n      ],\n      \"output\": [\n        \"**/*-styles.ts\",\n        \"!catalog/\"\n      ],\n      \"dependencies\": [\n        \"build:scripts\",\n        \"build:sass\"\n      ]\n    },\n    \"build:sass\": {\n      \"command\": \"sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -vE 'node_modules|catalog')\",\n      \"files\": [\n        \"**/*.scss\",\n        \"!catalog/\"\n      ],\n      \"output\": [\n        \"**/*.css\",\n        \"**/*.css.map\",\n        \"!catalog/\"\n      ]\n    },\n    \"test\": {\n      \"command\": \"wtr\",\n      \"dependencies\": [\n        \"build:ts\"\n      ],\n      \"files\": [\n        \"web-test-runner.config.js\"\n      ],\n      \"output\": []\n    },\n    \"build:catalog\": {\n      \"dependencies\": [\n        \"./catalog:build:prod\"\n      ]\n    },\n    \"build:scripts\": {\n      \"command\": \"tsc -b scripts/tsconfig.json --pretty\",\n      \"files\": [\n        \"scripts/tsconfig.json\",\n        \"scripts/**/*.ts\",\n        \"!**/*.d.ts\",\n        \"!**/*-styles.ts\"\n      ],\n      \"output\": [\n        \"scripts/.tsbuildinfo\",\n        \"scripts/**/*.js\",\n        \"scripts/**/*.js.map\",\n        \"scripts/**/*.d.ts\"\n      ],\n      \"clean\": \"if-file-deleted\"\n    },\n    \"update-docs\": {\n      \"dependencies\": [\n        \"update-docs:components\",\n        \"update-docs:sass-ext\"\n      ]\n    },\n    \"update-docs:components\": {\n      \"command\": \"node scripts/analyzer/update-docs.js\",\n      \"files\": [\n        \"docs/components/*.md\",\n        \"**/*.ts\",\n        \"!**/*.d.ts\",\n        \"!**/*-styles.ts\",\n        \"!catalog/\",\n        \"!scripts/\",\n        \"scripts/analyzer/update-docs.js\"\n      ],\n      \"output\": [],\n      \"dependencies\": [\n        \"build:scripts\"\n      ]\n    },\n    \"update-docs:sass-ext\": {\n      \"command\": \"node scripts/update-sass-ext-docs.js --input=./sass/ext/ --output=./docs/sass/sass-ext.md\",\n      \"files\": [\n        \"docs/sass/sass-ext.md\",\n        \"sass/ext/_*.scss\",\n        \"!sass/ext/*_test.scss\",\n        \"scripts/update-sass-ext-docs.js\"\n      ],\n      \"output\": [],\n      \"dependencies\": [\n        \"build:scripts\"\n      ]\n    },\n    \"update-size\": {\n      \"command\": \"node scripts/size/update-size.js\",\n      \"dependencies\": [\n        \"build:scripts\",\n        \"build\"\n      ]\n    }\n  }\n}\n"
  },
  {
    "path": "progress/_circular-progress.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/circular-progress' show theme;\n"
  },
  {
    "path": "progress/_linear-progress.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/linear-progress' show theme;\n"
  },
  {
    "path": "progress/circular-progress.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {CircularProgress} from './internal/circular-progress.js';\nimport {styles} from './internal/circular-progress-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-circular-progress': MdCircularProgress;\n  }\n}\n\n/**\n * @summary Circular progress indicators display progress by animating along an\n * invisible circular track in a clockwise direction. They can be applied\n * directly to a surface, such as a button or card.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-circular-progress')\nexport class MdCircularProgress extends CircularProgress {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "progress/circular-progress_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdCircularProgress} from './circular-progress.js';\n\ndescribe('<md-circular-progress>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdCircularProgress.styles);\n  });\n});\n"
  },
  {
    "path": "progress/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {\n  boolInput,\n  colorPicker,\n  Knob,\n  numberInput,\n} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nfunction cssWire<T = string>(prop: string, unit = '') {\n  return (knob: Knob<T>) => {\n    const value =\n      knob.latestValue === undefined ? knob.defaultValue : knob.latestValue;\n    document.body.style.setProperty(prop, `${value}${unit}`);\n  };\n}\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Progress indicators',\n  [\n    new Knob('value', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),\n    new Knob('max', {ui: numberInput(), defaultValue: 1}),\n    new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),\n    new Knob('fourColor', {ui: boolInput(), defaultValue: false}),\n    new Knob('buffer (linear)', {\n      ui: numberInput({step: 0.1}),\n      defaultValue: 0.8,\n    }),\n    new Knob('track color (linear)', {\n      ui: colorPicker(),\n      defaultValue: '',\n      wiring: cssWire('--md-linear-progress-track-color'),\n    }),\n    new Knob('track height (linear)', {\n      ui: numberInput(),\n      defaultValue: 4,\n      wiring: cssWire<number>('--md-linear-progress-track-height', 'px'),\n    }),\n    new Knob('indicator height (linear)', {\n      ui: numberInput(),\n      defaultValue: 4,\n      wiring: cssWire<number>(\n        '--md-linear-progress-active-indicator-height',\n        'px',\n      ),\n    }),\n    new Knob('custom theme (linear)', {ui: boolInput()}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "progress/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "progress/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/filled-tonal-button.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/progress/circular-progress.js';\nimport '@material/web/progress/linear-progress.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {MdCircularProgress} from '@material/web/progress/circular-progress.js';\nimport {css, html} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/** Knob types for linear progress stories. */\nexport interface StoryKnobs {\n  value: number;\n  max: number;\n  'buffer (linear)': number;\n  indeterminate: boolean;\n  fourColor: boolean;\n  'track color (linear)': string;\n  'track height (linear)': number;\n  'indicator height (linear)': number;\n  'custom theme (linear)': boolean;\n}\n\nconst linear: MaterialStoryInit<StoryKnobs> = {\n  name: 'Linear progress',\n  styles: css`\n    md-linear-progress {\n      inline-size: 50vw;\n    }\n\n    .custom {\n      --md-linear-progress-active-indicator-color: linear-gradient(\n        steelblue,\n        lightblue\n      );\n      --md-linear-progress-track-color: gainsboro;\n      --md-linear-progress-active-indicator-height: 20px;\n      --md-linear-progress-track-height: 20px;\n      --md-linear-progress-track-shape: 9999px;\n    }\n  `,\n  render(knobs) {\n    const {value, max, indeterminate, fourColor} = knobs;\n    const buffer = knobs['buffer (linear)'];\n    const classes = {'custom': knobs['custom theme (linear)']};\n\n    return html` <md-linear-progress\n      aria-label=\"An example linear progress bar\"\n      class=${classMap(classes)}\n      .value=${value}\n      .max=${max}\n      .buffer=${buffer}\n      .indeterminate=${indeterminate}\n      .fourColor=${fourColor}></md-linear-progress>`;\n  },\n};\n\nconst circular: MaterialStoryInit<StoryKnobs> = {\n  name: 'Circular progress',\n  render({value, max, indeterminate, fourColor}) {\n    return html`\n      <md-circular-progress\n        aria-label=\"An example circular progress\"\n        value=${value}\n        max=${max}\n        ?indeterminate=${indeterminate}\n        ?four-color=${fourColor}></md-circular-progress>\n    `;\n  },\n};\n\nconst components: MaterialStoryInit<StoryKnobs> = {\n  name: 'Indicators in components',\n  styles: css`\n    .components {\n      align-items: center;\n      display: flex;\n      flex-wrap: wrap;\n      gap: 32px;\n    }\n\n    md-filled-tonal-button {\n      width: 80px;\n    }\n\n    md-filled-tonal-button md-circular-progress {\n      --md-circular-progress-size: 36px;\n      --md-circular-progress-active-indicator-width: ${(4 / 36) * 100};\n      --md-filled-tonal-button-with-leading-icon-trailing-space: 8px;\n    }\n\n    .around-icon {\n      height: 48px;\n      position: relative;\n      width: 48px;\n    }\n\n    .around-icon md-icon-button {\n      inset: 0;\n      margin: auto;\n      position: absolute;\n    }\n  `,\n  render({value, max}) {\n    const toggleIndeterminate = ({target}: Event) => {\n      const spinner = (target as HTMLElement).parentElement?.querySelector(\n        'md-circular-progress',\n      );\n      if (!spinner) {\n        return;\n      }\n      spinner.indeterminate = !spinner.indeterminate;\n    };\n\n    const loadTime = 2500;\n    let loadTimeout = -1;\n    const toggleLoad = ({target}: {target: HTMLElement}) => {\n      const spinner = target.firstElementChild as MdCircularProgress;\n      const label = target.lastElementChild as HTMLElement;\n      const shouldLoad = spinner.style.display === 'none';\n      label.style.display = shouldLoad ? 'none' : '';\n      spinner.style.display = shouldLoad ? '' : 'none';\n      clearTimeout(loadTimeout);\n      if (shouldLoad) {\n        loadTimeout = setTimeout(() => {\n          toggleLoad({target});\n        }, loadTime);\n      }\n    };\n\n    return html`\n      <div class=\"components\">\n        <md-filled-tonal-button @click=${toggleLoad}>\n          <md-circular-progress\n            style=\"display: none\"\n            indeterminate\n            aria-label=\"Loading, please wait\"></md-circular-progress>\n          <span>Load</span>\n        </md-filled-tonal-button>\n\n        <div class=\"around-icon\">\n          <md-circular-progress\n            value=${value}\n            max=${max}\n            aria-label=\"Playback progress\"></md-circular-progress>\n          <md-icon-button\n            toggle\n            aria-label=\"Play or pause music\"\n            @change=${toggleIndeterminate}>\n            <md-icon>play_arrow</md-icon>\n            <md-icon slot=\"selected\">pause</md-icon>\n          </md-icon-button>\n        </div>\n      </div>\n    `;\n  },\n};\n\n/** Linear Progress stories. */\nexport const stories = [linear, circular, components];\n"
  },
  {
    "path": "progress/harness.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {CircularProgress} from './internal/circular-progress.js';\nimport {LinearProgress} from './internal/linear-progress.js';\n\n/**\n * Test harness for linear-progress.\n */\nexport class LinearProgressHarness extends Harness<LinearProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.progress')!;\n  }\n}\n\n/**\n * Test harness for circular-progress.\n */\nexport class CircularProgressHarness extends Harness<CircularProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.progress')!;\n  }\n}\n"
  },
  {
    "path": "progress/internal/_circular-progress.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-circular-progress-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-circular-progress-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-circular-progress-values();\n\n  // If changing this value, make sure to change $size-without-padding in the\n  // circular-progress tokens.\n  $container-padding: 4px;\n\n  // note, these value come from the m2 version but match current gm3 values.\n  // Constants:\n  //       ARCSIZE     = 270 degrees (amount of circle the arc takes up)\n  //       ARCTIME     = 1333ms (time it takes to expand and contract arc)\n  //       ARCSTARTROT = 216 degrees (how much the start location of the arc\n  //                                 should rotate each time, 216 gives us a\n  //                                 5 pointed star shape (it's 360/5 * 3).\n  //                                 For a 7 pointed star, we might do\n  //                                 360/7 * 3 = 154.286)\n  // ARCTIME\n  $arc-duration: 1333ms;\n  // 4 * ARCTIME\n  $cycle-duration: calc(4 * $arc-duration);\n  // ARCTIME * 360 / (ARCSTARTROT + (360-ARCSIZE))\n  $linear-rotate-duration: calc($arc-duration * 360 / 306);\n\n  $indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    display: inline-flex;\n    vertical-align: middle;\n    width: var(--_size);\n    height: var(--_size);\n    position: relative;\n    align-items: center;\n    justify-content: center;\n\n    // `contain` and `content-visibility` are performance optimizations\n    // important here because progress indicators are often used when a cpu\n    // intensive task is underway so it's especially important to minimize\n    // their cpu consumption.\n    contain: strict;\n    content-visibility: auto;\n  }\n\n  .progress {\n    flex: 1;\n    align-self: stretch;\n    margin: $container-padding;\n  }\n\n  .progress,\n  .spinner,\n  .left,\n  .right,\n  .circle,\n  svg,\n  .track,\n  .active-track {\n    position: absolute;\n    inset: 0;\n  }\n\n  svg {\n    transform: rotate(-90deg);\n  }\n\n  circle {\n    cx: 50%;\n    cy: 50%;\n    r: calc(50% * (1 - var(--_active-indicator-width) / 100));\n    // match size to indeterminate border width\n    stroke-width: calc(var(--_active-indicator-width) * 1%);\n    // note, pathLength is set so this can be normalized\n    stroke-dasharray: 100;\n    fill: transparent;\n  }\n\n  .active-track {\n    // note, these value come from the m2 version but match current gm3 values.\n    transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);\n    stroke: var(--_active-indicator-color);\n  }\n\n  .track {\n    stroke: transparent;\n  }\n\n  .progress.indeterminate {\n    animation: linear infinite linear-rotate;\n    animation-duration: $linear-rotate-duration;\n  }\n\n  .spinner {\n    animation: infinite both rotate-arc;\n    animation-duration: $cycle-duration;\n    animation-timing-function: $indeterminate-easing;\n  }\n\n  .left {\n    overflow: hidden;\n    inset: 0 50% 0 0;\n  }\n\n  .right {\n    overflow: hidden;\n    inset: 0 0 0 50%;\n  }\n\n  .circle {\n    box-sizing: border-box;\n    border-radius: 50%;\n    // match size to svg stroke width, which is a fraction of the overall\n    // padding box width.\n    $_padding-box-width: calc(var(--_size) - 2 * $container-padding);\n    $_active-indicator-fraction: calc(var(--_active-indicator-width) / 100);\n    border: solid calc($_active-indicator-fraction * $_padding-box-width);\n    border-color: var(--_active-indicator-color) var(--_active-indicator-color)\n      transparent transparent;\n    animation: expand-arc;\n    animation-iteration-count: infinite;\n    animation-fill-mode: both;\n    animation-duration: $arc-duration, $cycle-duration;\n    animation-timing-function: $indeterminate-easing;\n  }\n\n  .four-color .circle {\n    animation-name: expand-arc, four-color;\n  }\n\n  .left .circle {\n    rotate: 135deg;\n    inset: 0 -100% 0 0;\n  }\n  .right .circle {\n    rotate: 100deg;\n    inset: 0 0 0 -100%;\n    animation-delay: calc(-0.5 * $arc-duration), 0ms;\n  }\n\n  @media (forced-colors: active) {\n    .active-track {\n      stroke: CanvasText;\n    }\n\n    .circle {\n      border-color: CanvasText CanvasText Canvas Canvas;\n    }\n  }\n\n  // Indeterminate mode is 3 animations composed together:\n  // 1. expand-arc: an arc is expanded/contracted between 10deg and 270deg.\n  // 2. rotate-arc: at the same time, the arc is rotated in increments\n  // of 270deg.\n  // 3. linear-rotate: that rotating arc is then linearly rotated to produce\n  // a spinning expanding/contracting arc.\n  //\n  // See original implementation:\n  // https://github.com/PolymerElements/paper-spinner/blob/master/paper-spinner-styles.js.\n\n  // 1. expand-arc\n  // This is used on 2 divs which each represent half the desired\n  // 270deg arc with one offset by 50%. This creates an arc which expands from\n  // 10deg to 270deg.\n  @keyframes expand-arc {\n    0% {\n      transform: rotate(265deg);\n    }\n    50% {\n      transform: rotate(130deg);\n    }\n    100% {\n      transform: rotate(265deg);\n    }\n  }\n\n  // 2. rotate-arc\n  // The arc seamlessly travels around the circle indefinitely so it needs to\n  // end at a full rotation of the circle. This rotates the 270 deg\n  // (270/360 = 3/4) arc 4x (4 * 3/4 = 3) so it ends at\n  // (3 * 360 = 1080).\n  // This is sub-divided into increments of 135deg since the arc is rendered\n  // with 2 divs acting together.\n  @keyframes rotate-arc {\n    12.5% {\n      transform: rotate(135deg);\n    }\n    25% {\n      transform: rotate(270deg);\n    }\n    37.5% {\n      transform: rotate(405deg);\n    }\n    50% {\n      transform: rotate(540deg);\n    }\n    62.5% {\n      transform: rotate(675deg);\n    }\n    75% {\n      transform: rotate(810deg);\n    }\n    87.5% {\n      transform: rotate(945deg);\n    }\n    100% {\n      transform: rotate(1080deg);\n    }\n  }\n\n  // 3. linear-rotate\n  // The traveling expanding arc is linearly rotated to produce the spinner\n  // effect.\n  @keyframes linear-rotate {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  // This animates between 4 colors which are each shown for 25% of the time.\n  // Each color is shown solid for 3/5 of that time (3/5 * 25% = 15%) and\n  // transitions to the next color for 2/5 of that time (2/5 * 25% = 10%).\n  @keyframes four-color {\n    0% {\n      border-top-color: var(--_four-color-active-indicator-one-color);\n      border-right-color: var(--_four-color-active-indicator-one-color);\n    }\n    15% {\n      border-top-color: var(--_four-color-active-indicator-one-color);\n      border-right-color: var(--_four-color-active-indicator-one-color);\n    }\n    25% {\n      border-top-color: var(--_four-color-active-indicator-two-color);\n      border-right-color: var(--_four-color-active-indicator-two-color);\n    }\n    40% {\n      border-top-color: var(--_four-color-active-indicator-two-color);\n      border-right-color: var(--_four-color-active-indicator-two-color);\n    }\n    50% {\n      border-top-color: var(--_four-color-active-indicator-three-color);\n      border-right-color: var(--_four-color-active-indicator-three-color);\n    }\n    65% {\n      border-top-color: var(--_four-color-active-indicator-three-color);\n      border-right-color: var(--_four-color-active-indicator-three-color);\n    }\n    75% {\n      border-top-color: var(--_four-color-active-indicator-four-color);\n      border-right-color: var(--_four-color-active-indicator-four-color);\n    }\n    90% {\n      border-top-color: var(--_four-color-active-indicator-four-color);\n      border-right-color: var(--_four-color-active-indicator-four-color);\n    }\n    100% {\n      border-top-color: var(--_four-color-active-indicator-one-color);\n      border-right-color: var(--_four-color-active-indicator-one-color);\n    }\n  }\n}\n"
  },
  {
    "path": "progress/internal/_linear-progress.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-linear-progress-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-linear-progress-#{$token}: #{$value};\n    }\n  }\n}\n\n// note, transition settings match MDC\n// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L79\n$_determinate-duration: 250ms;\n$_determinate-easing: cubic-bezier(0.4, 0, 0.6, 1);\n// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L218\n$_indeterminate-duration: 2s;\n\n@mixin styles() {\n  $tokens: tokens.md-comp-linear-progress-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    border-radius: var(--_track-shape);\n    display: flex;\n    position: relative;\n    // note, this matches the `meter` element and is just done so\n    // there's a default width.\n    min-width: 80px;\n    height: var(--_track-height);\n    content-visibility: auto;\n    contain: strict;\n  }\n\n  .progress,\n  .dots,\n  .inactive-track,\n  .bar,\n  .bar-inner {\n    position: absolute;\n  }\n\n  .progress {\n    // Animations need to be in LTR. We support RTL by flipping the indicator\n    // with scale(-1).\n    direction: ltr;\n    inset: 0;\n    border-radius: inherit;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n  }\n\n  .bar {\n    animation: none;\n    // position is offset for indeterminate animation, so we lock the inline size here.\n    width: 100%;\n    height: var(--_active-indicator-height);\n    transform-origin: left center;\n    transition: transform $_determinate-duration $_determinate-easing;\n  }\n\n  .secondary-bar {\n    display: none;\n  }\n\n  .bar-inner {\n    inset: 0;\n    animation: none;\n    background: var(--_active-indicator-color);\n  }\n\n  .inactive-track {\n    background: var(--_track-color);\n    inset: 0;\n    transition: transform $_determinate-duration $_determinate-easing;\n    transform-origin: left center;\n  }\n\n  .dots {\n    inset: 0;\n    animation: linear infinite $_determinate-duration;\n    animation-name: buffering;\n    // The color of the buffer dots, which are masked out of this background\n    // color.\n    background-color: var(--_track-color);\n    background-repeat: repeat-x;\n    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)\n    // This svg creates a black circle on a transparent background which is used\n    // to mask out the animated buffering dots. This technique allows for dot\n    // color customization via the background-color property, and mask-image\n    // displays when forced-colors are active.\n    $svg: \"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\";\n    // required for full support with Chrome, Edge, and Opera.\n    -webkit-mask-image: url($svg);\n    mask-image: url($svg);\n    z-index: -1; // Place behind tracks for Safari\n  }\n\n  // dots are hidden when indeterminate or when there is no visible buffer to\n  // prevent infinite invisible animation.\n  .dots[hidden] {\n    display: none;\n  }\n\n  // indeterminate\n  .indeterminate .bar {\n    transition: none;\n  }\n\n  // note, the numbers here come directly from the mdc implementation.\n  // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.\n  .indeterminate .primary-bar {\n    inset-inline-start: -145.167%;\n  }\n\n  .indeterminate .secondary-bar {\n    inset-inline-start: -54.8889%;\n    // this is display none by default.\n    display: block;\n  }\n\n  .indeterminate .primary-bar {\n    animation: linear infinite $_indeterminate-duration;\n    animation-name: primary-indeterminate-translate;\n  }\n\n  .indeterminate .primary-bar > .bar-inner {\n    animation: linear infinite $_indeterminate-duration\n      primary-indeterminate-scale;\n  }\n\n  .indeterminate.four-color .primary-bar > .bar-inner {\n    animation-name: primary-indeterminate-scale, four-color;\n    animation-duration: $_indeterminate-duration,\n      calc($_indeterminate-duration * 2);\n  }\n\n  .indeterminate .secondary-bar {\n    animation: linear infinite $_indeterminate-duration;\n    animation-name: secondary-indeterminate-translate;\n  }\n\n  .indeterminate .secondary-bar > .bar-inner {\n    animation: linear infinite $_indeterminate-duration\n      secondary-indeterminate-scale;\n  }\n\n  .indeterminate.four-color .secondary-bar > .bar-inner {\n    animation-name: secondary-indeterminate-scale, four-color;\n    animation-duration: $_indeterminate-duration,\n      calc($_indeterminate-duration * 2);\n  }\n\n  :host(:dir(rtl)) {\n    transform: scale(-1);\n  }\n\n  @keyframes 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  @keyframes 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.00432\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  @keyframes buffering {\n    0% {\n      $_dot-size: calc(var(--_track-height) / 2);\n      // the amount to animate is aligned with the default track background\n      $_dot-background-width: calc($_dot-size * 5);\n      transform: translateX(#{$_dot-background-width});\n    }\n  }\n\n  // note, the numbers here come directly from the mdc implementation.\n  // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.\n  // keyframes\n  @keyframes primary-indeterminate-translate {\n    0% {\n      transform: translateX(0px);\n    }\n\n    20% {\n      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n      transform: translateX(0px);\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      transform: translateX(83.6714%);\n    }\n\n    100% {\n      transform: translateX(200.611%);\n    }\n  }\n\n  @keyframes secondary-indeterminate-translate {\n    0% {\n      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);\n      transform: translateX(0px);\n    }\n\n    25% {\n      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);\n      transform: translateX(37.6519%);\n    }\n\n    48.35% {\n      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);\n      transform: translateX(84.3862%);\n    }\n\n    100% {\n      transform: translateX(160.278%);\n    }\n  }\n\n  @keyframes four-color {\n    0% {\n      background: var(--_four-color-active-indicator-one-color);\n    }\n\n    15% {\n      background: var(--_four-color-active-indicator-one-color);\n    }\n    25% {\n      background: var(--_four-color-active-indicator-two-color);\n    }\n    40% {\n      background: var(--_four-color-active-indicator-two-color);\n    }\n\n    50% {\n      background: var(--_four-color-active-indicator-three-color);\n    }\n    65% {\n      background: var(--_four-color-active-indicator-three-color);\n    }\n    75% {\n      background: var(--_four-color-active-indicator-four-color);\n    }\n    90% {\n      background: var(--_four-color-active-indicator-four-color);\n    }\n    100% {\n      background: var(--_four-color-active-indicator-one-color);\n    }\n  }\n\n  @media (forced-colors: active) {\n    :host {\n      outline: 1px solid CanvasText;\n    }\n\n    .bar-inner,\n    .dots {\n      background-color: CanvasText;\n    }\n\n    // TODO(b/296262544): fix dots not being CanvasText. This need a refactor,\n    // since background gradiants are not displayed in HCM.\n  }\n}\n"
  },
  {
    "path": "progress/internal/circular-progress-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use './circular-progress';\n\n@include circular-progress.styles;\n"
  },
  {
    "path": "progress/internal/circular-progress.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Progress} from './progress.js';\n\n/**\n * A circular progress component.\n */\nexport class CircularProgress extends Progress {\n  protected override renderIndicator() {\n    if (this.indeterminate) {\n      return this.renderIndeterminateContainer();\n    }\n\n    return this.renderDeterminateContainer();\n  }\n\n  // Determinate mode is rendered with an svg so the progress arc can be\n  // easily animated via stroke-dashoffset.\n  private renderDeterminateContainer() {\n    const dashOffset = (1 - this.value / this.max) * 100;\n    // note, dash-array/offset are relative to Setting `pathLength` but\n    // Chrome seems to render this inaccurately and using a large viewbox helps.\n    return html`\n      <svg viewBox=\"0 0 4800 4800\">\n        <circle class=\"track\" pathLength=\"100\"></circle>\n        <circle\n          class=\"active-track\"\n          pathLength=\"100\"\n          stroke-dashoffset=${dashOffset}></circle>\n      </svg>\n    `;\n  }\n\n  // Indeterminate mode rendered with 2 bordered-divs. The borders are\n  // clipped into half circles by their containers. The divs are then carefully\n  // animated to produce changes to the spinner arc size.\n  // This approach has 4.5x the FPS of rendering via svg on Chrome 111.\n  // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.\n  private renderIndeterminateContainer() {\n    return html` <div class=\"spinner\">\n      <div class=\"left\">\n        <div class=\"circle\"></div>\n      </div>\n      <div class=\"right\">\n        <div class=\"circle\"></div>\n      </div>\n    </div>`;\n  }\n}\n"
  },
  {
    "path": "progress/internal/linear-progress-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use './linear-progress';\n\n@include linear-progress.styles;\n"
  },
  {
    "path": "progress/internal/linear-progress.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Progress} from './progress.js';\n\n/**\n * A linear progress component.\n */\nexport class LinearProgress extends Progress {\n  /**\n   * Buffer amount to display, a fraction between 0 and `max`.\n   * If the value is 0 or negative, the buffer is not displayed.\n   */\n  @property({type: Number}) buffer = 0;\n\n  // Note, the indeterminate animation is rendered with transform %'s\n  // Previously, this was optimized to use px calculated with the resizeObserver\n  // due to a now fixed Chrome bug: crbug.com/389359.\n  protected override renderIndicator() {\n    const progressStyles = {\n      transform: `scaleX(${\n        (this.indeterminate ? 1 : this.value / this.max) * 100\n      }%)`,\n    };\n\n    const bufferValue = this.buffer ?? 0;\n    const hasBuffer = bufferValue > 0;\n\n    const dotSize = this.indeterminate || !hasBuffer ? 1 : bufferValue / this.max;\n\n    const dotStyles = {\n      transform: `scaleX(${dotSize * 100}%)`,\n    };\n\n    // Only display dots when visible - this prevents invisible infinite\n    // animation.\n    const hideDots =\n      this.indeterminate || !hasBuffer || bufferValue >= this.max || this.value >= this.max;\n    return html`\n      <div class=\"dots\" ?hidden=${hideDots}></div>\n      <div class=\"inactive-track\" style=${styleMap(dotStyles)}></div>\n      <div class=\"bar primary-bar\" style=${styleMap(progressStyles)}>\n        <div class=\"bar-inner\"></div>\n      </div>\n      <div class=\"bar secondary-bar\">\n        <div class=\"bar-inner\"></div>\n      </div>\n    `;\n  }\n}\n"
  },
  {
    "path": "progress/internal/progress.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\n\n// Separate variable needed for closure.\nconst progressBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A progress component.\n */\nexport abstract class Progress extends progressBaseClass {\n  /**\n   * Progress to display, a fraction between 0 and `max`.\n   */\n  @property({type: Number}) value = 0;\n\n  /**\n   * Maximum progress to display, defaults to 1.\n   */\n  @property({type: Number}) max = 1;\n\n  /**\n   * Whether or not to display indeterminate progress, which gives no indication\n   * to how long an activity will take.\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * Whether or not to render indeterminate mode using 4 colors instead of one.\n   */\n  @property({type: Boolean, attribute: 'four-color'}) fourColor = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div\n        class=\"progress ${classMap(this.getRenderClasses())}\"\n        role=\"progressbar\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n        >${this.renderIndicator()}</div\n      >\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'indeterminate': this.indeterminate,\n      'four-color': this.fourColor,\n    };\n  }\n\n  protected abstract renderIndicator(): TemplateResult;\n}\n"
  },
  {
    "path": "progress/linear-progress.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {LinearProgress} from './internal/linear-progress.js';\nimport {styles} from './internal/linear-progress-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-linear-progress': MdLinearProgress;\n  }\n}\n\n/**\n * @summary Linear progress indicators display progress by animating along the\n * length of a fixed, visible track.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-linear-progress')\nexport class MdLinearProgress extends LinearProgress {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "progress/linear-progress_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdLinearProgress} from './linear-progress.js';\n\ndescribe('<md-linear-progress>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdLinearProgress.styles);\n  });\n});\n"
  },
  {
    "path": "radio/_radio.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/radio' show theme;\n"
  },
  {
    "path": "radio/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Radio',\n  [new Knob('disabled', {ui: boolInput(), defaultValue: false})],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "radio/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "radio/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/radio/radio.js';\n\nimport {\n  labelStyles,\n  MaterialStoryInit,\n} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for radio stories. */\nexport interface StoryKnobs {\n  disabled: boolean;\n}\n\nconst radio: MaterialStoryInit<StoryKnobs> = {\n  name: 'Radios',\n  render({disabled}) {\n    return html`\n      <div role=\"radiogroup\" aria-label=\"An example group of radio buttons\">\n        <md-radio\n          aria-label=\"First radio\"\n          name=\"group\"\n          touch-target=\"wrapper\"\n          ?disabled=${disabled}>\n        </md-radio>\n        <md-radio\n          aria-label=\"Second radio\"\n          name=\"group\"\n          touch-target=\"wrapper\"\n          ?disabled=${disabled}>\n        </md-radio>\n        <md-radio\n          aria-label=\"Third radio\"\n          name=\"group\"\n          touch-target=\"wrapper\"\n          ?disabled=${disabled}>\n        </md-radio>\n      </div>\n    `;\n  },\n};\n\nconst withLabels: MaterialStoryInit<StoryKnobs> = {\n  name: 'With labels',\n  styles: [\n    labelStyles,\n    css`\n      .column {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .radio-label {\n        display: flex;\n        align-items: center;\n      }\n    `,\n  ],\n  render({disabled}) {\n    return html`\n      <div class=\"column\" role=\"radiogroup\" aria-label=\"Animals\">\n        <div class=\"radio-label\">\n          <md-radio\n            aria-label=\"Birds\"\n            id=\"birds-radio\"\n            name=\"with-labels\"\n            touch-target=\"wrapper\"\n            ?disabled=${disabled}>\n          </md-radio>\n          <label for=\"birds-radio\">Birds</label>\n        </div>\n        <div class=\"radio-label\">\n          <md-radio\n            aria-label=\"Cats\"\n            id=\"cats-radio\"\n            name=\"with-labels\"\n            touch-target=\"wrapper\"\n            ?disabled=${disabled}>\n          </md-radio>\n          <label for=\"cats-radio\">Cats</label>\n        </div>\n        <div class=\"radio-label\">\n          <md-radio\n            aria-label=\"Dogs\"\n            id=\"dogs-radio\"\n            name=\"with-labels\"\n            touch-target=\"wrapper\"\n            ?disabled=${disabled}>\n          </md-radio>\n          <label for=\"dogs-radio\">Dogs</label>\n        </div>\n      </div>\n    `;\n  },\n};\n\n/** Radio stories. */\nexport const stories = [radio, withLabels];\n"
  },
  {
    "path": "radio/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Radio} from './internal/radio.js';\n\n/**\n * Test harness for radio.\n */\nexport class RadioHarness extends Harness<Radio> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element as HTMLElement;\n  }\n}\n"
  },
  {
    "path": "radio/internal/_radio.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n@use '../../internal/motion/animation';\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-radio-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-radio-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-radio-values();\n\n  @layer {\n    :host {\n      display: inline-flex;\n      height: map.get($tokens, 'icon-size');\n      outline: none;\n      position: relative;\n      vertical-align: top; // Fix extra space when placed inside display: block\n      width: map.get($tokens, 'icon-size');\n      // Remove highlight color for mobile Safari\n      -webkit-tap-highlight-color: transparent;\n      cursor: pointer;\n\n      @include ripple.theme(\n        (\n          hover-color: map.get($tokens, 'hover-state-layer-color'),\n          hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),\n          pressed-color: map.get($tokens, 'pressed-state-layer-color'),\n          pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),\n        )\n      );\n    }\n\n    :host([disabled]) {\n      cursor: default;\n    }\n\n    :host([touch-target='wrapper']) {\n      margin: max(0px, ((48px - map.get($tokens, 'icon-size')) / 2));\n    }\n\n    .container {\n      display: flex;\n      height: 100%;\n      place-content: center;\n      place-items: center;\n      width: 100%;\n    }\n\n    md-focus-ring {\n      height: 44px;\n      inset: unset;\n      width: 44px;\n    }\n\n    .checked {\n      @include ripple.theme(\n        (\n          hover-color: map.get($tokens, 'selected-hover-state-layer-color'),\n          hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),\n          pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),\n          pressed-opacity:\n            map.get($tokens, 'selected-pressed-state-layer-opacity'),\n        )\n      );\n    }\n\n    .touch-target {\n      height: 48px;\n      position: absolute;\n      width: 48px;\n    }\n\n    :host([touch-target='none']) .touch-target {\n      display: none;\n    }\n\n    md-ripple {\n      border-radius: 50%;\n      height: map.get($tokens, 'state-layer-size');\n      inset: unset;\n      width: map.get($tokens, 'state-layer-size');\n    }\n\n    .icon {\n      fill: map.get($tokens, 'icon-color');\n      inset: 0;\n      position: absolute;\n    }\n\n    .outer.circle {\n      // Outline color enter/exit transition\n      transition: fill 50ms linear;\n    }\n\n    .inner.circle {\n      opacity: 0;\n      transform-origin: center;\n      transition: opacity 50ms linear;\n    }\n\n    .checked .icon {\n      fill: map.get($tokens, 'selected-icon-color');\n    }\n\n    .checked .inner.circle {\n      animation: inner-circle-grow 300ms\n        map.get($_md-sys-motion, easing-emphasized-decelerate);\n      opacity: 1;\n    }\n\n    @keyframes inner-circle-grow {\n      from {\n        transform: scale(0);\n      }\n      to {\n        transform: scale(1);\n      }\n    }\n\n    // Don't animate when disabled\n    :host([disabled]) .circle {\n      animation-duration: 0s;\n      transition-duration: 0s;\n    }\n\n    :host(:hover) .icon {\n      fill: map.get($tokens, 'hover-icon-color');\n    }\n\n    :host(:focus-within) .icon {\n      fill: map.get($tokens, 'focus-icon-color');\n    }\n\n    :host(:active) .icon {\n      fill: map.get($tokens, 'pressed-icon-color');\n    }\n\n    :host([disabled]) .icon {\n      fill: map.get($tokens, 'disabled-unselected-icon-color');\n      opacity: map.get($tokens, 'disabled-unselected-icon-opacity');\n    }\n\n    :host(:hover) .checked .icon {\n      fill: map.get($tokens, 'selected-hover-icon-color');\n    }\n\n    :host(:focus-within) .checked .icon {\n      fill: map.get($tokens, 'selected-focus-icon-color');\n    }\n\n    :host(:active) .checked .icon {\n      fill: map.get($tokens, 'selected-pressed-icon-color');\n    }\n\n    :host([disabled]) .checked .icon {\n      fill: map.get($tokens, 'disabled-selected-icon-color');\n      opacity: map.get($tokens, 'disabled-selected-icon-opacity');\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .icon {\n        fill: CanvasText;\n      }\n\n      :host([disabled]) .icon {\n        fill: GrayText;\n        opacity: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "radio/internal/radio-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './radio';\n// go/keep-sorted end\n\n@include radio.styles;\n"
  },
  {
    "path": "radio/internal/radio.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {isActivationClick} from '../../internal/events/form-label-activation.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {RadioValidator} from '../../labs/behaviors/validators/radio-validator.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\nlet maskId = 0;\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n  mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/**\n * A radio component.\n *\n * @fires input {InputEvent} Dispatched when the value changes from user\n * interaction. --bubbles\n * @fires change {Event} Dispatched when the value changes from user\n * interaction. --bubbles --composed\n */\nexport class Radio extends radioBaseClass {\n  // Unique maskId is required because of a Safari bug that fail to persist\n  // reference to the mask. This should be removed once the bug is fixed.\n  private readonly maskId = `cutout${++maskId}`;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * Whether or not the radio is required. If any radio is required in a group,\n   * all radios are implicitly required.\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @query('.container') private readonly container!: HTMLElement;\n  private readonly selectionController = new SingleSelectionController(this);\n\n  constructor() {\n    super();\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this[internals].role = 'radio';\n      this.addEventListener('click', this.handleClick.bind(this));\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const classes = {'checked': this.checked};\n    return html`\n      <div class=\"container ${classMap(classes)}\" aria-hidden=\"true\">\n        <md-ripple\n          part=\"ripple\"\n          .control=${this}\n          ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring part=\"focus-ring\" .control=${this}></md-focus-ring>\n        <svg class=\"icon\" viewBox=\"0 0 20 20\">\n          <mask id=\"${this.maskId}\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n          </mask>\n          <circle\n            class=\"outer circle\"\n            cx=\"10\"\n            cy=\"10\"\n            r=\"10\"\n            mask=\"url(#${this.maskId})\" />\n          <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n        </svg>\n\n        <div class=\"touch-target\"></div>\n      </div>\n    `;\n  }\n\n  protected override updated() {\n    this[internals].ariaChecked = String(this.checked);\n  }\n\n  private async handleClick(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (isActivationClick(event)) {\n      this.focus();\n    }\n\n    // Per spec, clicking on a radio input always selects it.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n    this.dispatchEvent(\n      new InputEvent('input', {bubbles: true, composed: true}),\n    );\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.key !== ' ' || event.defaultPrevented) {\n      return;\n    }\n\n    this.click();\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new RadioValidator(() => {\n      if (!this.selectionController) {\n        // Validation runs on superclass construction, so selection controller\n        // might not actually be ready until this class constructs.\n        return [this];\n      }\n\n      return this.selectionController.controls as [Radio, ...Radio[]];\n    });\n  }\n\n  override [getValidityAnchor]() {\n    return this.container;\n  }\n}\n"
  },
  {
    "path": "radio/internal/single-selection-controller.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController} from 'lit';\n\n/**\n * An element that supports single-selection with `SingleSelectionController`.\n */\nexport interface SingleSelectionElement extends HTMLElement {\n  /**\n   * Whether or not the element is selected.\n   */\n  checked: boolean;\n}\n\n/**\n * A `ReactiveController` that provides root node-scoped single selection for\n * elements, similar to native `<input type=\"radio\">` selection.\n *\n * To use, elements should add the controller and call\n * `selectionController.handleCheckedChange()` in a getter/setter. This must\n * be synchronous to match native behavior.\n *\n * @example\n * const CHECKED = Symbol('checked');\n *\n * class MyToggle extends LitElement {\n *   get checked() { return this[CHECKED]; }\n *   set checked(checked: boolean) {\n *     const oldValue = this.checked;\n *     if (oldValue === checked) {\n *       return;\n *     }\n *\n *     this[CHECKED] = checked;\n *     this.selectionController.handleCheckedChange();\n *     this.requestUpdate('checked', oldValue);\n *   }\n *\n *   [CHECKED] = false;\n *\n *   private selectionController = new SingleSelectionController(this);\n *\n *   constructor() {\n *     super();\n *     this.addController(this.selectionController);\n *   }\n * }\n */\nexport class SingleSelectionController implements ReactiveController {\n  /**\n   * All single selection elements in the host element's root with the same\n   * `name` attribute, including the host element.\n   */\n  get controls(): [SingleSelectionElement, ...SingleSelectionElement[]] {\n    const name = this.host.getAttribute('name');\n    if (!name || !this.root || !this.host.isConnected) {\n      return [this.host];\n    }\n\n    // Cast as unknown since there is not enough information for typescript to\n    // know that there is always at least one element (the host).\n    return Array.from(\n      this.root.querySelectorAll<SingleSelectionElement>(`[name=\"${name}\"]`),\n    ) as unknown as [SingleSelectionElement, ...SingleSelectionElement[]];\n  }\n\n  private focused = false;\n  private root: ParentNode | null = null;\n\n  constructor(private readonly host: SingleSelectionElement) {}\n\n  hostConnected() {\n    this.host.addEventListener('keydown', this.handleKeyDown);\n    this.host.addEventListener('focusin', this.handleFocusIn);\n    this.host.addEventListener('focusout', this.handleFocusOut);\n\n    // Update siblings after a microtask to allow other synchronous connected\n    // callbacks to settle before triggering additional Lit updates. This avoids\n    // stack overflow issues when too many elements are being rendered and\n    // connected at the same time.\n    queueMicrotask(() => {\n      // Update for the newly added host.\n      this.root = this.host.getRootNode() as ParentNode;\n      if (this.host.checked) {\n        // Uncheck other siblings when attached if already checked. This mimics\n        // native <input type=\"radio\"> behavior.\n        this.uncheckSiblings();\n      }\n\n      this.updateTabIndices();\n    });\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('keydown', this.handleKeyDown);\n    this.host.removeEventListener('focusin', this.handleFocusIn);\n    this.host.removeEventListener('focusout', this.handleFocusOut);\n    // Update siblings after a microtask to allow other synchronous disconnected\n    // callbacks to settle before triggering additional Lit updates. This avoids\n    // stack overflow issues when too many elements are being rendered and\n    // connected at the same time.\n    queueMicrotask(() => {\n      // Update for siblings that are still connected.\n      this.updateTabIndices();\n      this.root = null;\n    });\n  }\n\n  /**\n   * Should be called whenever the host's `checked` property changes\n   * synchronously.\n   */\n  handleCheckedChange() {\n    if (!this.host.checked) {\n      return;\n    }\n\n    this.uncheckSiblings();\n    this.updateTabIndices();\n  }\n\n  private readonly handleFocusIn = () => {\n    this.focused = true;\n    this.updateTabIndices();\n  };\n\n  private readonly handleFocusOut = () => {\n    this.focused = false;\n    this.updateTabIndices();\n  };\n\n  private uncheckSiblings() {\n    for (const sibling of this.controls) {\n      if (sibling !== this.host) {\n        sibling.checked = false;\n      }\n    }\n  }\n\n  /**\n   * Updates the `tabindex` of the host and its siblings.\n   */\n  private updateTabIndices() {\n    // There are three tabindex states for a group of elements:\n    // 1. If any are checked, that element is focusable.\n    const siblings = this.controls;\n    const checkedSibling = siblings.find((sibling) => sibling.checked);\n    // 2. If an element is focused, the others are no longer focusable.\n    if (checkedSibling || this.focused) {\n      const focusable = checkedSibling || this.host;\n      focusable.tabIndex = 0;\n\n      for (const sibling of siblings) {\n        if (sibling !== focusable) {\n          sibling.tabIndex = -1;\n        }\n      }\n      return;\n    }\n\n    // 3. If none are checked or focused, all are focusable.\n    for (const sibling of siblings) {\n      sibling.tabIndex = 0;\n    }\n  }\n\n  /**\n   * Handles arrow key events from the host. Using the arrow keys will\n   * select and check the next or previous sibling with the host's\n   * `name` attribute.\n   */\n  private readonly handleKeyDown = (event: KeyboardEvent) => {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    // Ignore non-arrow keys\n    if (!isLeft && !isRight && !isDown && !isUp) {\n      return;\n    }\n\n    // Don't try to select another sibling if there aren't any.\n    const siblings = this.controls;\n    if (!siblings.length) {\n      return;\n    }\n\n    // Prevent default interactions on the element for arrow keys,\n    // since this controller will introduce new behavior.\n    event.preventDefault();\n\n    // Check if moving forwards or backwards\n    const isRtl = getComputedStyle(this.host).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n\n    const hostIndex = siblings.indexOf(this.host);\n    let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1;\n    // Search for the next sibling that is not disabled to select.\n    // If we return to the host index, there is nothing to select.\n    while (nextIndex !== hostIndex) {\n      if (nextIndex >= siblings.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = siblings.length - 1;\n      }\n\n      // Check if the next sibling is disabled. If so,\n      // move the index and continue searching.\n      const nextSibling = siblings[nextIndex];\n      if (nextSibling.hasAttribute('disabled')) {\n        if (forwards) {\n          nextIndex++;\n        } else {\n          nextIndex--;\n        }\n\n        continue;\n      }\n\n      // Uncheck and remove focusability from other siblings.\n      for (const sibling of siblings) {\n        if (sibling !== nextSibling) {\n          sibling.checked = false;\n          sibling.tabIndex = -1;\n          sibling.blur();\n        }\n      }\n\n      // The next sibling should be checked, focused and dispatch a change event\n      nextSibling.checked = true;\n      nextSibling.tabIndex = 0;\n      nextSibling.focus();\n      // Fire a change event since the change is triggered by a user action.\n      // This matches native <input type=\"radio\"> behavior.\n      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n\n      break;\n    }\n  };\n}\n"
  },
  {
    "path": "radio/radio.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Radio} from './internal/radio.js';\nimport {styles} from './internal/radio-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n  }\n}\n\n/**\n * @summary Radio buttons allow users to select one option from a set.\n *\n * @description\n * Radio buttons are the recommended way to allow users to make a single\n * selection from a list of options.\n *\n * Only one radio button can be selected at a time.\n *\n * Use radio buttons to:\n * - Select a single option from a set\n * - Expose all available options\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-radio')\nexport class MdRadio extends Radio {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "radio/radio_test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createFormTests} from '../testing/forms.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {RadioHarness} from './harness.js';\nimport {MdRadio} from './radio.js';\n\nconst defaultRadio = html`<md-radio></md-radio>`;\n\nconst radioGroup = html`\n  <md-radio id=\"a1\" name=\"a\"></md-radio>\n  <md-radio id=\"a2\" name=\"a\"></md-radio>\n  <md-radio id=\"b1\" name=\"b\"></md-radio>\n`;\n\nconst radioGroupDisabled = html`\n  <md-radio id=\"a1\" name=\"a\" disabled></md-radio>\n  <md-radio id=\"a2\" name=\"a\" disabled checked></md-radio>\n`;\n\nconst radioGroupPreSelected = html`\n  <md-radio id=\"a1\" name=\"a\"></md-radio>\n  <md-radio id=\"a2\" name=\"a\" checked></md-radio>\n  <md-radio id=\"a3\" name=\"a\"></md-radio>\n  <md-radio id=\"b1\" name=\"b\"></md-radio>\n`;\n\ndescribe('<md-radio>', () => {\n  const env = new Environment();\n\n  // Note, this would be better in the harness, but waiting in the test setup\n  // can be flaky without access to the test `env`.\n  async function simulateKeyDown(element: HTMLElement, key: string) {\n    const event = new KeyboardEvent('keydown', {key, bubbles: true});\n    element.dispatchEvent(event);\n    // We can remove the delay when FF issue addressed:\n    // https://bugzilla.mozilla.org/show_bug.cgi?id=1804576\n    await env.waitForStability();\n  }\n\n  async function setupTest(template = defaultRadio) {\n    const root = env.render(template);\n    await env.waitForStability();\n    const radios = Array.from(root.querySelectorAll('md-radio'));\n    const harnesses = radios.map((radio) => new RadioHarness(radio));\n    return {harnesses, root};\n  }\n\n  describe('.styles', () => {\n    createTokenTests(MdRadio.styles);\n  });\n\n  describe('basic', () => {\n    it('initializes as an md-radio', async () => {\n      const {harnesses} = await setupTest();\n      expect(harnesses[0].element).toBeInstanceOf(MdRadio);\n    });\n\n    it('clicking a radio should select it', async () => {\n      const {harnesses} = await setupTest(radioGroup);\n      const unselected = harnesses[1];\n      expect(unselected.element.checked)\n        .withContext('unselected checked')\n        .toBeFalse();\n\n      await unselected.clickWithMouse();\n      expect(unselected.element.checked)\n        .withContext('after clicking checked')\n        .toBeTrue();\n    });\n\n    it('clicking a radio can be default prevented', async () => {\n      const {harnesses} = await setupTest(radioGroup);\n      const unselected = harnesses[1];\n      expect(unselected.element.checked)\n        .withContext('unselected checked')\n        .toBeFalse();\n\n      unselected.element.addEventListener('click', (event) => {\n        event.preventDefault();\n      });\n\n      await unselected.clickWithMouse();\n      expect(unselected.element.checked)\n        .withContext('after clicking checked')\n        .toBeFalse();\n    });\n\n    it('clicking a radio should unselect other radio which is already selected', async () => {\n      const {harnesses} = await setupTest(radioGroupPreSelected);\n      const [, a2, a3] = harnesses;\n      expect(a2.element.checked).withContext('already checked').toBeTrue();\n\n      await a3.clickWithMouse();\n      expect(a3.element.checked).withContext('new radio checked').toBeTrue();\n      expect(a2.element.checked)\n        .withContext('previous radio checked')\n        .toBeFalse();\n    });\n\n    it('disabled radio should not be selected when clicked', async () => {\n      const {harnesses} = await setupTest(radioGroupDisabled);\n      const [a1, a2] = harnesses;\n\n      expect(a1.element.checked).withContext('unchecked radio').toBeFalse();\n      expect(a2.element.checked).withContext('checked radio').toBeTrue();\n\n      await a1.clickWithMouse();\n      expect(a1.element.checked)\n        .withContext('still unchecked radio')\n        .toBeFalse();\n\n      await a2.clickWithMouse();\n      expect(a2.element.checked).withContext('still checked radio').toBeTrue();\n    });\n  });\n\n  describe('events', () => {\n    it('Should trigger change event when a radio is selected', async () => {\n      const {harnesses, root} = await setupTest(radioGroupPreSelected);\n      const changeHandler = jasmine.createSpy('changeHandler');\n      root.addEventListener('change', changeHandler);\n\n      const a3 = harnesses[2];\n      await a3.clickWithMouse();\n\n      expect(a3.element.checked)\n        .withContext('clicked radio checked')\n        .toBeTrue();\n      expect(changeHandler).toHaveBeenCalledTimes(1);\n      expect(changeHandler).toHaveBeenCalledWith(jasmine.any(Event));\n    });\n\n    it('Should trigger input event when a radio is selected', async () => {\n      const {harnesses, root} = await setupTest(radioGroupPreSelected);\n      const inputHandler = jasmine.createSpy('inputHandler');\n      root.addEventListener('input', inputHandler);\n\n      const a3 = harnesses[2];\n      await a3.clickWithMouse();\n\n      expect(a3.element.checked)\n        .withContext('clicked radio checked')\n        .toBeTrue();\n      expect(inputHandler).toHaveBeenCalledTimes(1);\n      expect(inputHandler).toHaveBeenCalledWith(jasmine.any(InputEvent));\n    });\n  });\n\n  describe('navigation', () => {\n    it('Using arrow right should select the next radio button', async () => {\n      const {harnesses} = await setupTest(radioGroupPreSelected);\n      const [, a2, a3] = harnesses;\n      expect(a2.element.checked)\n        .withContext('default checked radio')\n        .toBeTrue();\n\n      await simulateKeyDown(a2.element, 'ArrowRight');\n\n      expect(a3.element.checked).withContext('next radio checked').toBeTrue();\n      expect(a2.element.checked).withContext('prev radio checked').toBeFalse();\n    });\n\n    it('dispatched a change event on user navigation', async () => {\n      const {harnesses, root} = await setupTest(radioGroupPreSelected);\n      const changeHandler = jasmine.createSpy('changeHandler');\n      root.addEventListener('change', changeHandler);\n      const [, a2] = harnesses;\n      expect(a2.element.checked)\n        .withContext('default checked radio')\n        .toBeTrue();\n\n      await simulateKeyDown(a2.element, 'ArrowRight');\n\n      expect(changeHandler).toHaveBeenCalledTimes(1);\n    });\n\n    it('Using arrow right on the last radio should select the first radio in that group', async () => {\n      const {harnesses} = await setupTest(radioGroupPreSelected);\n      const [a1, a2, a3, b1] = harnesses;\n\n      expect(a2.element.checked).toBeTrue();\n\n      await simulateKeyDown(a2.element, 'ArrowRight');\n      await simulateKeyDown(a3.element, 'ArrowRight');\n\n      expect(a3.element.checked).withContext('last radio checked').toBeFalse();\n      expect(a1.element.checked).withContext('first radio checked').toBeTrue();\n      expect(b1.element.checked)\n        .withContext('unrelated radio checked')\n        .toBeFalse();\n    });\n  });\n\n  describe('manages selection groups', () => {\n    it('synchronously', async () => {\n      const {harnesses} = await setupTest(radioGroup);\n      const [a1, a2, b1] = harnesses;\n\n      expect(a1.element.checked).withContext('initially unchecked').toBeFalse();\n      expect(a2.element.checked).withContext('initially unchecked').toBeFalse();\n      expect(b1.element.checked).withContext('initially unchecked').toBeFalse();\n\n      // Should uncheck previously checked radio\n      a2.element.checked = true;\n      a1.element.checked = true;\n\n      expect(a1.element.checked).withContext('last radio checked').toBeTrue();\n      expect(a2.element.checked)\n        .withContext('unchecked by last radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated radio unchecked')\n        .toBeFalse();\n\n      // Should re-check radio\n      a2.element.checked = true;\n      a1.element.checked = true;\n      a2.element.checked = true;\n      expect(a1.element.checked)\n        .withContext('unchecked by second radio')\n        .toBeFalse();\n      expect(a2.element.checked).withContext('last radio checked').toBeTrue();\n      expect(b1.element.checked)\n        .withContext('unrelated radio unchecked')\n        .toBeFalse();\n\n      // Should ignore unrelated radios\n      a1.element.checked = true;\n      expect(a1.element.checked)\n        .withContext('related checked radio')\n        .toBeTrue();\n      expect(a2.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated unchecked radio')\n        .toBeFalse();\n\n      b1.element.checked = true;\n      expect(a1.element.checked)\n        .withContext('related checked radio')\n        .toBeTrue();\n      expect(a2.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated checked radio')\n        .toBeTrue();\n\n      a1.element.checked = false;\n      b1.element.checked = false;\n      expect(a1.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(a2.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated unchecked radio')\n        .toBeFalse();\n    });\n\n    it('after updates settle', async () => {\n      const {harnesses} = await setupTest(radioGroup);\n      const [a1, a2, b1] = harnesses;\n      const allUpdatesComplete = () =>\n        Promise.all(harnesses.map((harness) => harness.element.updateComplete));\n\n      await allUpdatesComplete();\n      expect(a1.element.checked).withContext('initially unchecked').toBeFalse();\n      expect(a2.element.checked).withContext('initially unchecked').toBeFalse();\n      expect(b1.element.checked).withContext('initially unchecked').toBeFalse();\n\n      // Should uncheck previously checked radio\n      a2.element.checked = true;\n      a1.element.checked = true;\n      await allUpdatesComplete();\n\n      expect(a1.element.checked).withContext('last radio checked').toBeTrue();\n      expect(a2.element.checked)\n        .withContext('unchecked by last radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated radio unchecked')\n        .toBeFalse();\n\n      // Should re-check radio\n      a2.element.checked = true;\n      a1.element.checked = true;\n      a2.element.checked = true;\n      await allUpdatesComplete();\n      expect(a1.element.checked)\n        .withContext('unchecked by second radio')\n        .toBeFalse();\n      expect(a2.element.checked).withContext('last radio checked').toBeTrue();\n      expect(b1.element.checked)\n        .withContext('unrelated radio unchecked')\n        .toBeFalse();\n\n      // Should ignore unrelated radios\n      a1.element.checked = true;\n      expect(a1.element.checked)\n        .withContext('related checked radio')\n        .toBeTrue();\n      expect(a2.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated unchecked radio')\n        .toBeFalse();\n\n      b1.element.checked = true;\n      await allUpdatesComplete();\n      expect(a1.element.checked)\n        .withContext('related checked radio')\n        .toBeTrue();\n      expect(a2.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated checked radio')\n        .toBeTrue();\n\n      a1.element.checked = false;\n      b1.element.checked = false;\n      await allUpdatesComplete();\n      expect(a1.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(a2.element.checked)\n        .withContext('related unchecked radio')\n        .toBeFalse();\n      expect(b1.element.checked)\n        .withContext('unrelated unchecked radio')\n        .toBeFalse();\n    });\n\n    it('when checked before connected', async () => {\n      const root = env.render(html`<main></main>`);\n      const container = root.querySelector('main')!;\n\n      const r1 = document.createElement('md-radio');\n      r1.setAttribute('name', 'a');\n      const r2 = document.createElement('md-radio');\n      r2.setAttribute('name', 'a');\n      const r3 = document.createElement('md-radio');\n      r3.setAttribute('name', 'a');\n\n      // r1 and r2 should both be checked, because even though they have the\n      // same name, they aren't yet connected to a root. Groups are scoped to\n      // roots, and we can't know which root a radio belongs to until it is\n      // connected to one. This matches native <input type=\"radio\"> behavior.\n      r1.checked = true;\n      r2.checked = true;\n      expect(r1.checked).toBeTrue();\n      expect(r2.checked).toBeTrue();\n      expect(r3.checked).toBeFalse();\n\n      // Connecting r1 shouldn't change anything, since it's the only one in the\n      // group.\n      container.appendChild(r1);\n      await env.waitForStability();\n      expect(r1.checked).toBeTrue();\n      expect(r2.checked).toBeTrue();\n      expect(r3.checked).toBeFalse();\n\n      // Appending r2 should uncheck r1, because when a new checked radio is\n      // connected, it wins (this matches native input behavior).\n      container.appendChild(r2);\n      await env.waitForStability();\n      expect(r1.checked).toBeFalse();\n      expect(r2.checked).toBeTrue();\n      expect(r3.checked).toBeFalse();\n\n      // Appending r3 shouldn't change anything, because it's not checked.\n      container.appendChild(r3);\n      await env.waitForStability();\n      expect(r1.checked).toBeFalse();\n      expect(r2.checked).toBeTrue();\n      expect(r3.checked).toBeFalse();\n\n      // Checking r3 should uncheck r2 because it's now in the same group.\n      r3.checked = true;\n      expect(r1.checked).toBeFalse();\n      expect(r2.checked).toBeFalse();\n      expect(r3.checked).toBeTrue();\n    });\n\n    it('in a lit repeat', async () => {\n      const values = ['a1', 'a2'];\n      const repeated = values.map(\n        (value) => html`<md-radio value=${value} name=\"a\"></md-radio>`,\n      );\n      const root = env.render(html`${repeated}`);\n      await env.waitForStability();\n      const [a1, a2] = root.querySelectorAll('md-radio');\n\n      expect(a1.checked).toBeFalse();\n      expect(a2.checked).toBeFalse();\n      expect(a1.value).toEqual(values[0]);\n      expect(a2.value).toEqual(values[1]);\n\n      a1.checked = true;\n      expect(a1.checked).toBeTrue();\n      expect(a2.checked).toBeFalse();\n\n      a2.checked = true;\n      expect(a1.checked).toBeFalse();\n      expect(a2.checked).toBeTrue();\n\n      a2.checked = false;\n      expect(a1.checked).toBeFalse();\n      expect(a2.checked).toBeFalse();\n    });\n  });\n\n  describe('label activation', () => {\n    async function setupLabelTest() {\n      const root = env.render(html`\n        <label> <md-radio name=\"a\"></md-radio></label>\n        <label> <md-radio name=\"a\"></md-radio></label>\n      `);\n      await env.waitForStability();\n      // [[label, radio]]\n      return Array.from(root.querySelectorAll('label')).map(\n        (el) => [el, el.firstElementChild as MdRadio] as const,\n      );\n    }\n\n    it('toggles when label is clicked', async () => {\n      const [[label1, radio1], [label2, radio2]] = await setupLabelTest();\n\n      label1.click();\n      await env.waitForStability();\n      expect(radio1.checked).toBeTrue();\n      expect(radio2.checked).toBeFalse();\n\n      label2.click();\n      await env.waitForStability();\n      expect(radio1.checked).toBeFalse();\n      expect(radio2.checked).toBeTrue();\n    });\n  });\n\n  describe('forms', () => {\n    createFormTests({\n      queryControl: (root) => root.querySelector('md-radio'),\n      valueTests: [\n        {\n          name: 'unnamed',\n          render: () => html`\n            <md-radio value=\"One\" checked></md-radio>\n            <md-radio value=\"Two\"></md-radio>\n          `,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form without a name')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'unchecked',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\"></md-radio>\n            <md-radio name=\"radio\" value=\"Two\"></md-radio>\n          `,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when unchecked')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'checked first value',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\" checked></md-radio>\n            <md-radio name=\"radio\" value=\"Two\"></md-radio>\n          `,\n          assertValue(formData) {\n            expect(formData.get('radio')).toBe('One');\n          },\n        },\n        {\n          name: 'checked second value',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\"></md-radio>\n            <md-radio name=\"radio\" value=\"Two\" checked></md-radio>\n          `,\n          assertValue(formData) {\n            expect(formData.get('radio')).toBe('Two');\n          },\n        },\n        {\n          name: 'disabled',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\" checked disabled></md-radio>\n            <md-radio name=\"radio\" value=\"Two\" disabled></md-radio>\n          `,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when disabled')\n              .toHaveSize(0);\n          },\n        },\n      ],\n      resetTests: [\n        {\n          name: 'reset to unchecked',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\"></md-radio>\n            <md-radio name=\"radio\" value=\"Two\"></md-radio>\n          `,\n          change(radio) {\n            radio.checked = true;\n          },\n          assertReset(radio) {\n            expect(radio.checked)\n              .withContext('radio.checked after reset')\n              .toBeFalse();\n          },\n        },\n        {\n          name: 'reset to checked',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\" checked></md-radio>\n            <md-radio name=\"radio\" value=\"Two\"></md-radio>\n          `,\n          change(radio) {\n            radio.checked = false;\n          },\n          assertReset(radio) {\n            expect(radio.checked)\n              .withContext('radio.checked after reset')\n              .toBeTrue();\n          },\n        },\n      ],\n      restoreTests: [\n        {\n          name: 'restore unchecked',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\"></md-radio>\n            <md-radio name=\"radio\" value=\"Two\"></md-radio>\n          `,\n          assertRestored(radio) {\n            expect(radio.checked)\n              .withContext('radio.checked after restore')\n              .toBeFalse();\n          },\n        },\n        {\n          name: 'restore checked',\n          render: () => html`\n            <md-radio name=\"radio\" value=\"One\" checked></md-radio>\n            <md-radio name=\"radio\" value=\"Two\"></md-radio>\n          `,\n          assertRestored(radio) {\n            expect(radio.checked)\n              .withContext('radio.checked after restore')\n              .toBeTrue();\n          },\n        },\n      ],\n    });\n  });\n});\n"
  },
  {
    "path": "release-please-config.json",
    "content": "{\n  \"bootstrap-sha\": \"41d41cc2788f237f376d32409f51ca59e9b2bf75\",\n  \"include-component-in-tag\": false,\n  \"include-v-in-tag\": true,\n  \"pull-request-title-pattern\": \"chore: release ${version}\",\n  \"packages\": {\n    \".\": {}\n  }\n}\n"
  },
  {
    "path": "ripple/_ripple.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/ripple' show theme;\n"
  },
  {
    "path": "ripple/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {\n  colorPicker,\n  cssCustomProperty,\n  Knob,\n  numberInput,\n} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nfunction cssCustomPropertyAsNumber(\n  knob: Knob<number>,\n  val: number,\n  container: HTMLElement,\n) {\n  const value = knob.isUnset ? knob.defaultValue : val;\n  if (value) {\n    container.style.setProperty(knob.name, String(value));\n  } else {\n    container.style.removeProperty(knob.name);\n  }\n}\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Ripple',\n  [\n    new Knob('--md-ripple-pressed-color', {\n      ui: colorPicker(),\n      wiring: cssCustomProperty,\n    }),\n    new Knob('--md-ripple-pressed-opacity', {\n      ui: numberInput({step: 0.01}),\n      defaultValue: 0.12,\n      wiring: cssCustomPropertyAsNumber,\n    }),\n    new Knob('--md-ripple-hover-color', {\n      ui: colorPicker(),\n      wiring: cssCustomProperty,\n    }),\n    new Knob('--md-ripple-hover-opacity', {\n      ui: numberInput({step: 0.01}),\n      defaultValue: 0.08,\n      wiring: cssCustomPropertyAsNumber,\n    }),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "ripple/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "ripple/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/ripple/ripple.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for ripple stories. */\nexport interface StoryKnobs {\n  '--md-ripple-pressed-color': string;\n  '--md-ripple-pressed-opacity': number;\n  '--md-ripple-hover-color': string;\n  '--md-ripple-hover-opacity': number;\n}\n\nconst ripples: MaterialStoryInit<StoryKnobs> = {\n  name: 'Ripples',\n  styles: css`\n    .row {\n      align-items: center;\n      display: flex;\n      gap: 32px;\n    }\n\n    .container {\n      align-items: center;\n      border-radius: 24px;\n      display: flex;\n      height: 64px;\n      justify-content: center;\n      outline: 1px solid var(--md-sys-color-outline);\n      padding: 16px;\n      position: relative;\n      width: 64px;\n    }\n\n    .container:has(.unbounded) {\n      border-radius: 50%;\n      outline-style: dashed;\n    }\n\n    .anchor {\n      background: var(--md-sys-color-primary-container);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: 50%;\n      height: 24px;\n      width: 24px;\n\n      /* Recommended styles for an unbounded ripple's anchor. */\n      display: flex;\n      place-content: center;\n      place-items: center;\n      position: relative;\n    }\n\n    md-ripple.unbounded {\n      height: 64px;\n      width: 64px;\n\n      /* Recommended styles for an unbounded ripple. */\n      border-radius: 50%;\n      inset: unset;\n    }\n  `,\n  render() {\n    return html`\n      <div class=\"row\">\n        <div class=\"container\">\n          <md-ripple></md-ripple>\n        </div>\n\n        <div class=\"container\" id=\"touch\">\n          <div class=\"anchor\">\n            <md-ripple for=\"touch\" class=\"unbounded\"></md-ripple>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n};\n\n/** Ripple stories. */\nexport const stories = [ripples];\n"
  },
  {
    "path": "ripple/internal/_ripple.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-ripple-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-ripple-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-ripple-values();\n\n  :host {\n    display: flex;\n    margin: auto;\n    pointer-events: none;\n  }\n\n  :host([disabled]) {\n    display: none;\n  }\n\n  @media (forced-colors: active) {\n    :host {\n      display: none;\n    }\n  }\n\n  :host,\n  .surface {\n    border-radius: inherit;\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n  }\n\n  .surface {\n    -webkit-tap-highlight-color: transparent;\n\n    &::before,\n    &::after {\n      content: '';\n      opacity: 0;\n      position: absolute;\n    }\n\n    &::before {\n      background-color: map.get($tokens, 'hover-color');\n      inset: 0;\n      transition: opacity 15ms linear, background-color 15ms linear;\n    }\n\n    &::after {\n      // press ripple fade-out\n      background: radial-gradient(\n        closest-side,\n        map.get($tokens, 'pressed-color') max(calc(100% - 70px), 65%),\n        transparent 100%\n      );\n      transform-origin: center center;\n      transition: opacity 375ms linear;\n    }\n  }\n\n  .hovered::before {\n    background-color: map.get($tokens, 'hover-color');\n    opacity: map.get($tokens, 'hover-opacity');\n  }\n\n  .pressed::after {\n    // press ripple fade-in\n    opacity: map.get($tokens, 'pressed-opacity');\n    transition-duration: 105ms;\n  }\n}\n"
  },
  {
    "path": "ripple/internal/ripple-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './ripple';\n// go/keep-sorted end\n\n@include ripple.styles;\n"
  },
  {
    "path": "ripple/internal/ripple.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {\n  Attachable,\n  AttachableController,\n} from '../../internal/controller/attachable-controller.js';\nimport {EASING} from '../../internal/motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click end press; transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK,\n}\n\n/**\n * Events that the ripple listens to.\n */\nconst EVENTS = [\n  'click',\n  'contextmenu',\n  'pointercancel',\n  'pointerdown',\n  'pointerenter',\n  'pointerleave',\n  'pointerup',\n];\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * Used to detect if HCM is active. Events do not process during HCM when the\n * ripple is not displayed.\n */\nconst FORCED_COLORS = isServer\n  ? null\n  : window.matchMedia('(forced-colors: active)');\n\n/**\n * A ripple component.\n */\nexport class Ripple extends LitElement implements Attachable {\n  /**\n   * Disables the ripple.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string | null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n  set control(control: HTMLElement | null) {\n    this.attachableController.control = control;\n  }\n\n  @state() private hovered = false;\n  @state() private pressed = false;\n\n  @query('.surface') private readonly mdRoot!: HTMLElement | null;\n  private rippleSize = '';\n  private rippleScale = '';\n  private initialSize = 0;\n  private growAnimation?: Animation;\n  private state = State.INACTIVE;\n  private rippleStartEvent?: PointerEvent;\n  private readonly attachableController = new AttachableController(\n    this,\n    this.onControlChange.bind(this),\n  );\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  protected override render() {\n    const classes = {\n      'hovered': this.hovered,\n      'pressed': this.pressed,\n    };\n\n    return html`<div class=\"surface ${classMap(classes)}\"></div>`;\n  }\n\n  protected override update(changedProps: PropertyValues<Ripple>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.hovered = false;\n      this.pressed = false;\n    }\n    super.update(changedProps);\n  }\n\n  /**\n   * TODO(b/269799771): make private\n   * @private only public for slider\n   */\n  handlePointerenter(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  /**\n   * TODO(b/269799771): make private\n   * @private only public for slider\n   */\n  handlePointerleave(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = false;\n\n    // release a held mouse or pen press that moves outside the element\n    if (this.state !== State.INACTIVE) {\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointerup(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n      return;\n    }\n\n    if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(this.rippleStartEvent);\n      return;\n    }\n  }\n\n  private async handlePointerdown(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.rippleStartEvent = event;\n    if (!this.isTouch(event)) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(event);\n      return;\n    }\n\n    // Wait for a hold after touch delay\n    this.state = State.TOUCH_DELAY;\n    await new Promise((resolve) => {\n      setTimeout(resolve, TOUCH_DELAY_MS);\n    });\n\n    if (this.state !== State.TOUCH_DELAY) {\n      return;\n    }\n\n    this.state = State.HOLDING;\n    this.startPressAnimation(event);\n  }\n\n  private handleClick() {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPressAnimation();\n      return;\n    }\n\n    if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.startPressAnimation();\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointercancel(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  private handleContextmenu() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  private determineRippleSize() {\n    const {height, width} = this.getBoundingClientRect();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize = Math.max(\n      SOFT_EDGE_CONTAINER_RATIO * maxDim,\n      SOFT_EDGE_MINIMUM_SIZE,\n    );\n\n    // `?? 1` may be removed once `currentCSSZoom` is widely available.\n    const zoom = this.currentCSSZoom ?? 1;\n    const initialSize = Math.floor((maxDim * INITIAL_ORIGIN_SCALE) / zoom);\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    const maxRadius = hypotenuse + PADDING;\n\n    this.initialSize = initialSize;\n    // The dimensions may be altered by CSS `zoom`, which needs to be\n    // compensated for in the final scale() value.\n    const maybeZoomedScale = (maxRadius + softEdgeSize) / initialSize;\n    this.rippleScale = `${maybeZoomedScale / zoom}`;\n    this.rippleSize = `${initialSize}px`;\n  }\n\n  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent): {\n    x: number;\n    y: number;\n  } {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getBoundingClientRect();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    // `?? 1` may be removed once `currentCSSZoom` is widely available.\n    const zoom = this.currentCSSZoom ?? 1;\n    return {\n      x: (pageX - documentX) / zoom,\n      y: (pageY - documentY) / zoom,\n    };\n  }\n\n  private getTranslationCoordinates(positionEvent?: Event) {\n    const {height, width} = this.getBoundingClientRect();\n    // `?? 1` may be removed once `currentCSSZoom` is widely available.\n    const zoom = this.currentCSSZoom ?? 1;\n    // end in the center\n    const endPoint = {\n      x: (width / zoom - this.initialSize) / 2,\n      y: (height / zoom - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / zoom / 2,\n        y: height / zoom / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - this.initialSize / 2,\n      y: startPoint.y - this.initialSize / 2,\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  private startPressAnimation(positionEvent?: Event) {\n    if (!this.mdRoot) {\n      return;\n    }\n\n    this.pressed = true;\n    this.growAnimation?.cancel();\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n      this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    this.growAnimation = this.mdRoot.animate(\n      {\n        top: [0, 0],\n        left: [0, 0],\n        height: [this.rippleSize, this.rippleSize],\n        width: [this.rippleSize, this.rippleSize],\n        transform: [\n          `translate(${translateStart}) scale(1)`,\n          `translate(${translateEnd}) scale(${this.rippleScale})`,\n        ],\n      },\n      {\n        pseudoElement: PRESS_PSEUDO,\n        duration: PRESS_GROW_MS,\n        easing: EASING.STANDARD,\n        fill: ANIMATION_FILL,\n      },\n    );\n  }\n\n  private async endPressAnimation() {\n    this.rippleStartEvent = undefined;\n    this.state = State.INACTIVE;\n    const animation = this.growAnimation;\n    let pressAnimationPlayState = Infinity;\n    if (typeof animation?.currentTime === 'number') {\n      pressAnimationPlayState = animation.currentTime;\n    } else if (animation?.currentTime) {\n      pressAnimationPlayState = animation.currentTime.to('ms').value;\n    }\n\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n      return;\n    }\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    });\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return;\n    }\n\n    this.pressed = false;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(event: PointerEvent) {\n    if (this.disabled || !event.isPrimary) {\n      return false;\n    }\n\n    if (\n      this.rippleStartEvent &&\n      this.rippleStartEvent.pointerId !== event.pointerId\n    ) {\n      return false;\n    }\n\n    if (event.type === 'pointerenter' || event.type === 'pointerleave') {\n      return !this.isTouch(event);\n    }\n\n    const isPrimaryButton = event.buttons === 1;\n    return this.isTouch(event) || isPrimaryButton;\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\n  }\n\n  /** @private */\n  async handleEvent(event: Event) {\n    if (FORCED_COLORS?.matches) {\n      // Skip event logic since the ripple is `display: none`.\n      return;\n    }\n\n    switch (event.type) {\n      case 'click':\n        this.handleClick();\n        break;\n      case 'contextmenu':\n        this.handleContextmenu();\n        break;\n      case 'pointercancel':\n        this.handlePointercancel(event as PointerEvent);\n        break;\n      case 'pointerdown':\n        await this.handlePointerdown(event as PointerEvent);\n        break;\n      case 'pointerenter':\n        this.handlePointerenter(event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.handlePointerleave(event as PointerEvent);\n        break;\n      case 'pointerup':\n        this.handlePointerup(event as PointerEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {\n    if (isServer) return;\n\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this);\n      next?.addEventListener(event, this);\n    }\n  }\n}\n"
  },
  {
    "path": "ripple/internal/ripple_test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {Harness} from '../../testing/harness.js';\n\nimport {Ripple} from './ripple.js';\n\nenum RippleStateClasses {\n  HOVERED = 'hovered',\n  PRESSED = 'pressed',\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-ripple': TestRipple;\n  }\n}\n\n@customElement('test-ripple')\nclass TestRipple extends Ripple {}\n\ninterface WithState {\n  state: number;\n}\n\ndescribe('Ripple', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const root = env.render(html`\n      <div>\n        <test-ripple></test-ripple>\n      </div>\n    `);\n\n    const container = root.querySelector('div');\n    if (!container) {\n      throw new Error('Could not query rendered container.');\n    }\n\n    const instance = root.querySelector('test-ripple');\n    if (!instance) {\n      throw new Error('Could not query rendered <test-ripple>.');\n    }\n\n    await env.waitForStability();\n\n    const surface = instance.renderRoot.querySelector('.surface');\n    if (!surface) {\n      throw new Error('Could not query rendered surface.');\n    }\n\n    return {\n      instance,\n      surface,\n      harness: new Harness(container),\n    };\n  }\n\n  describe('basic', () => {\n    it('initializes as a test-ripple', async () => {\n      const {instance} = await setupTest();\n      expect(instance).toBeInstanceOf(TestRipple);\n    });\n\n    it('sets pressed class on begin press', async () => {\n      const {harness, surface} = await setupTest();\n      await harness.startTap();\n      jasmine.clock().tick(150); // touch delay\n      await env.waitForStability();\n\n      expect(surface).toHaveClass(RippleStateClasses.PRESSED);\n    });\n\n    it('removes pressed class on end press', async () => {\n      const {harness, surface} = await setupTest();\n      await harness.startTap();\n      jasmine.clock().tick(150); // touch delay\n      await harness.endTap();\n      await harness.endTapClick();\n      jasmine.clock().tick(225); // MINIMUM_PRESS_MS\n      await env.waitForStability();\n\n      expect(surface).not.toHaveClass(RippleStateClasses.PRESSED);\n    });\n\n    it('sets hover class on pointer enter', async () => {\n      const {harness, surface} = await setupTest();\n      await harness.startHover();\n      await env.waitForStability();\n\n      expect(surface).toHaveClass(RippleStateClasses.HOVERED);\n    });\n\n    it('removes hover class on pointer leave', async () => {\n      const {harness, surface} = await setupTest();\n      await harness.startHover();\n      await env.waitForStability();\n      await harness.endHover();\n      await env.waitForStability();\n\n      expect(surface).not.toHaveClass(RippleStateClasses.HOVERED);\n    });\n\n    it('stops hovering when disabled', async () => {\n      const {instance, harness, surface} = await setupTest();\n      await harness.startHover();\n      await env.waitForStability();\n      instance.disabled = true;\n      await env.waitForStability();\n\n      expect(surface).not.toHaveClass(RippleStateClasses.HOVERED);\n    });\n\n    it('responds to keyboard click after mouse click', async () => {\n      const {instance, harness} = await setupTest();\n      const STATE_INACTIVE = 0;\n      await harness.clickWithMouse();\n      await env.waitForStability();\n      expect((instance as unknown as WithState).state).toBe(STATE_INACTIVE);\n      await harness.clickWithKeyboard();\n      await env.waitForStability();\n      expect((instance as unknown as WithState).state).toBe(STATE_INACTIVE);\n    });\n  });\n});\n"
  },
  {
    "path": "ripple/ripple.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Ripple} from './internal/ripple.js';\nimport {styles} from './internal/ripple-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-ripple': MdRipple;\n  }\n}\n\n/**\n * @summary Ripples, also known as state layers, are visual indicators used to\n * communicate the status of a component or interactive element.\n *\n * @description A state layer is a semi-transparent covering on an element that\n * indicates its state. State layers provide a systematic approach to\n * visualizing states by using opacity. A layer can be applied to an entire\n * element or in a circular shape and only one state layer can be applied at a\n * given time.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-ripple')\nexport class MdRipple extends Ripple {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "ripple/ripple_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdRipple} from './ripple.js';\n\ndescribe('<md-ripple>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdRipple.styles);\n  });\n});\n"
  },
  {
    "path": "sass/ext/_assert.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Utility assert functions that throw errors.\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:meta';\n@use 'throw';\n@use 'type';\n// go/keep-sorted end\n\n/// Asserts that the argument is a specific type. If it is, the argument is\n/// returned, otherwise an error is thrown.\n///\n/// @example scss\n///   @mixin multiply($a, $b) {\n///     $a: assert.is-type($a, 'number');\n///     $b: assert.is-type($b, 'number');\n///     @return $a * $b;\n///   }\n///\n///   @function is-empty($value) {\n///     $value: assert.is-type(\n///       $value,\n///       'list|map|null',\n///       $message: '$value must be a list, map, or null',\n///       $source: 'is-empty'\n///     );\n///     @return $value and list.length($value) == 0;\n///   }\n///\n/// @param {*} $arg - The argument to check.\n/// @param {string} $type - The string type to assert the argument matches.\n///     Multiple types may be separated by '|'.\n/// @param {string} $message - Optional custom error message.\n/// @param {string} $source - Optional source of the error message.\n/// @return {*} The argument if it matches the type string.\n/// @throw Error if the argument does not match the type string.\n@function is-type(\n  $arg,\n  $type,\n  $message: 'Argument must be type #{meta.inspect($type)}. $arg: #{meta.inspect($arg)}',\n  $source: 'assert.is-type'\n) {\n  @if type.matches($arg, $type) {\n    @return $arg;\n  }\n  @return throw.error($message, $source);\n}\n\n/// Asserts that the argument is not a specific type. The argument is returned\n/// if it does not match. An error is thrown if the argument matches the type.\n///\n/// @example scss\n///   @function get-strict($map, $key) {\n///     @return assert.not-type(\n///       map.get($map, $key),\n///       'null',\n///       $message: 'Key must be in the map'\n///     );\n///   }\n///\n/// @param {*} $arg - The argument to check.\n/// @param {string} $type - The string type to assert the argument does not\n///     match. Multiple types may be separated by '|'.\n/// @param {string} $message - Optional custom error message.\n/// @param {string} $source - Optional source of the error message.\n/// @return {*} The argument if it does not match the type string.\n/// @throw Error if the argument matches the type string.\n@function not-type(\n  $arg,\n  $type,\n  $message: 'Argument may not be type #{meta.inspect($type)}. $arg: #{meta.inspect($arg)}',\n  $source: 'assert.not-type'\n) {\n  @if type.matches($arg, $type) {\n    @return throw.error($message, $source);\n  }\n  @return $arg;\n}\n"
  },
  {
    "path": "sass/ext/_assert_test.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test;\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:string';\n@use 'assert';\n@use 'throw';\n// go/keep-sorted end\n\n@include test.describe('assert') {\n  // Value types\n  $number: 1;\n  $string: 'a-string';\n  $color: red;\n  $bool: true;\n  $null: null;\n  $list: ('list', 'of', 'values');\n  $map: (\n    'map': 'value',\n  );\n\n  @include test.describe('is-type()') {\n    @include test.it('returns the argument when it matches a single type') {\n      @include test.assert-equal(assert.is-type($number, 'number'), $number);\n      @include test.assert-equal(assert.is-type($string, 'string'), $string);\n      @include test.assert-equal(assert.is-type($bool, 'bool'), $bool);\n      @include test.assert-equal(assert.is-type($null, 'null'), $null);\n      @include test.assert-equal(assert.is-type($list, 'list'), $list);\n      @include test.assert-equal(assert.is-type($map, 'map'), $map);\n    }\n\n    @include test.it(\n      'returns the argument when it matches one of multiple types'\n    ) {\n      @include test.assert-equal(\n        assert.is-type($number, 'number|string'),\n        $number\n      );\n      @include test.assert-equal(\n        assert.is-type($string, 'number|string'),\n        $string\n      );\n      @include test.assert-equal(assert.is-type($null, 'list|map|null'), $null);\n      @include test.assert-equal(assert.is-type($list, 'list|map|null'), $list);\n      @include test.assert-equal(assert.is-type($map, 'list|map|null'), $map);\n    }\n\n    @include test.it('throws an error when it does not match the type') {\n      @include test.assert-true(\n        throw.get-error(assert.is-type($number, 'string')),\n        'number should not match \"string\" type'\n      );\n      @include test.assert-true(\n        throw.get-error(assert.is-type($string, 'number')),\n        'string should not match \"number\" type'\n      );\n      @include test.assert-true(\n        throw.get-error(assert.is-type($null, 'list|map')),\n        'null should not match \"list|map\" type'\n      );\n    }\n  }\n\n  @include test.describe('not-type()') {\n    @include test.it(\n      'returns the argument when it does not match a single type'\n    ) {\n      @include test.assert-equal(assert.not-type($number, 'string'), $number);\n      @include test.assert-equal(assert.not-type($string, 'number'), $string);\n      @include test.assert-equal(assert.not-type($bool, 'string'), $bool);\n      @include test.assert-equal(assert.not-type($null, 'string'), $null);\n      @include test.assert-equal(assert.not-type($list, 'string'), $list);\n      @include test.assert-equal(assert.not-type($map, 'string'), $map);\n    }\n\n    @include test.it(\n      'returns the argument when it does not match one of multiple types'\n    ) {\n      @include test.assert-equal(\n        assert.not-type($number, 'string|map'),\n        $number\n      );\n      @include test.assert-equal(\n        assert.not-type($string, 'number|map'),\n        $string\n      );\n      @include test.assert-equal(assert.not-type($null, 'list|map'), $null);\n    }\n\n    @include test.it('throws an error when it matches the type') {\n      @include test.assert-true(\n        throw.get-error(assert.not-type($number, 'number')),\n        'number should match \"number\" type and throw'\n      );\n      @include test.assert-true(\n        throw.get-error(assert.not-type($string, 'string')),\n        'string should match \"string\" type and throw'\n      );\n      @include test.assert-true(\n        throw.get-error(assert.not-type($null, 'null')),\n        'null should match \"null\" type and throw'\n      );\n      @include test.assert-true(\n        throw.get-error(assert.not-type($number, 'number|string')),\n        'number should match \"number|string\" type and throw'\n      );\n      @include test.assert-true(\n        throw.get-error(assert.not-type($string, 'number|string')),\n        'string should match \"number|string\" type and throw'\n      );\n      @include test.assert-true(\n        throw.get-error(assert.not-type($null, 'list|map|null')),\n        'null should match \"list|map|null\" type and throw'\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "sass/ext/_list_ext.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Extensions to the go/sass:list built-in module.\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:list';\n@use 'assert';\n@use 'throw';\n// go/keep-sorted end\n\n/// Returns the difference between two lists.\n///\n/// @example scss\n///   $listA: ('apple', 'banana', 'cherry', 'date');\n///   $listB: ('banana', 'cherry', 'apple');\n///   $listC: ('apple', 'banana', 'date');\n///\n///   @debug list_ext.difference($listA, $listB); // ('date')\n///   @debug list_ext.difference($listA, $listC); // ('cherry')\n///\n/// @param {list} $listA - The first list to compare.\n/// @param {list} $listB - The second list to compare.\n/// @return {list} All items in $listA that are not in $listB.\n@function difference($listA, $listB) {\n  $listA: assert.is-type($listA, 'list', $source: 'list_ext.difference');\n  $listB: assert.is-type($listB, 'list', $source: 'list_ext.difference');\n  $error: throw.get-error($listA, $listB);\n  @if $error {\n    @return $error;\n  }\n\n  $result: ();\n  @each $item in $listA {\n    @if not list.index($listB, $item) {\n      $result: list.append($result, $item, list.separator($listA));\n    }\n  }\n  @return $result;\n}\n\n/// Checks if two lists contain the same elements, regardless of their order.\n///\n/// The function iterates through each list and verifies that every element in\n/// one list is present in the other. The order of elements does not affect the\n/// result.\n///\n/// @example scss\n///   $listA: ('apple', 'banana', 'cherry');\n///   $listB: ('banana', 'cherry', 'apple');\n///   $listC: ('apple', 'banana', 'date');\n///\n///   @debug list_ext.are-equal($listA, $listB); // true\n///   @debug list_ext.are-equal($listA, $listC); // false\n///\n/// @param {list} $listA - The first list to compare.\n/// @param {list} $listB - The second list to compare.\n/// @return {boolean} `true` if the lists contain the same elements, otherwise\n///     `false`.\n@function are-equal($listA, $listB) {\n  $listA: assert.is-type($listA, 'list', $source: 'list_ext.are-equal');\n  $listB: assert.is-type($listB, 'list', $source: 'list_ext.are-equal');\n  $error: throw.get-error($listA, $listB);\n  @if $error {\n    @return $error;\n  }\n  @if list.length($listA) != list.length($listB) {\n    @return false;\n  }\n  $result: true;\n  @each $key in $listA {\n    @if not list.index($listB, $key) {\n      $result: false;\n    }\n  }\n\n  @each $key in $listB {\n    @if not list.index($listA, $key) {\n      $result: false;\n    }\n  }\n  @return $result;\n}\n\n/// Returns the intersection of two lists.\n///\n/// @example scss\n///   $listA: ('apple', 'banana', 'cherry', 'date');\n///   $listB: ('banana', 'cherry', 'apple');\n///   $listC: ('apple', 'banana', 'date');\n///\n///   @debug list_ext.intersection($listA, $listB); // ('apple', 'banana', 'cherry')\n///   @debug list_ext.intersection($listA, $listC); // ('apple', 'banana')\n///\n/// @param {list} $listA - The first list to compare.\n/// @param {list} $listB - The second list to compare.\n/// @return {list} All items in $listA that are also in $listB.\n@function intersection($listA, $listB) {\n  $listA: assert.is-type($listA, 'list', $source: 'list_ext.intersection');\n  $listB: assert.is-type($listB, 'list', $source: 'list_ext.intersection');\n  $error: throw.get-error($listA, $listB);\n  @if $error {\n    @return $error;\n  }\n  $result: ();\n  @each $item in $listA {\n    @if list.index($listB, $item) {\n      $result: list.append($result, $item, list.separator($listA));\n    }\n  }\n  @return $result;\n}\n"
  },
  {
    "path": "sass/ext/_list_ext_test.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test;\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'list_ext';\n@use 'throw';\n// go/keep-sorted end\n\n@include test.describe('list_ext') {\n  @include test.describe('difference()') {\n    @include test.it('returns the difference for basic lists') {\n      @include test.assert-equal(\n        list_ext.difference((1, 2, 3), (2, 4)),\n        (1, 3)\n      );\n    }\n\n    @include test.it('returns the first list when there is no overlap') {\n      @include test.assert-equal(\n        list_ext.difference((1, 2, 3), (4, 5)),\n        (1, 2, 3)\n      );\n    }\n\n    @include test.it('returns an empty list when there is full overlap') {\n      @include test.assert-equal(list_ext.difference((1, 2, 3), (1, 2, 3)), ());\n    }\n\n    @include test.it('returns an empty list when the first list is empty') {\n      @include test.assert-equal(list_ext.difference((), (1, 2, 3)), ());\n    }\n\n    @include test.it('returns the first list when the second list is empty') {\n      @include test.assert-equal(list_ext.difference((1, 2, 3), ()), (1, 2, 3));\n    }\n\n    @include test.it(\n      'returns the difference when the first list contains null'\n    ) {\n      @include test.assert-equal(\n        list_ext.difference((1, null, 3), (2, 4)),\n        (1, null, 3)\n      );\n    }\n\n    @include test.it(\n      'returns the difference when the second list contains null'\n    ) {\n      @include test.assert-equal(\n        list_ext.difference((1, 2, 3), (null, 4)),\n        (1, 2, 3)\n      );\n    }\n\n    @include test.it('throws an error when the first list is null') {\n      // Act\n      $result: list_ext.difference(null, (1, 2, 3));\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the second list is null') {\n      // Act\n      $result: list_ext.difference((1, 2, 3), null);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the first list is a map') {\n      // Act\n      $result: list_ext.difference(\n        (\n          a: 1,\n        ),\n        (1, 2, 3)\n      );\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the second list is a map') {\n      // Act\n      $result: list_ext.difference(\n        (1, 2, 3),\n        (\n          a: 1,\n        )\n      );\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n  }\n\n  @include test.describe('are-equal()') {\n    @include test.it('returns true if lists are the same') {\n      @include test.assert-true(list_ext.are-equal((1, 2, 3), (1, 2, 3)));\n    }\n\n    @include test.it(\n      'returns true if lists have the same elements but the second list is reversed'\n    ) {\n      @include test.assert-true(list_ext.are-equal((1, 2, 3), (3, 2, 1)));\n    }\n\n    @include test.it(\n      'returns true if lists have the same elements but the first list is reversed'\n    ) {\n      @include test.assert-true(list_ext.are-equal((3, 2, 1), (1, 2, 3)));\n    }\n\n    @include test.it('returns false when the first list is empty') {\n      @include test.assert-false(list_ext.are-equal((), (1, 2, 3)));\n    }\n\n    @include test.it('returns false when the second list is empty') {\n      @include test.assert-false(list_ext.are-equal((1, 2, 3), ()));\n    }\n\n    @include test.it(\n      'returns false when the first list has more items than the second one'\n    ) {\n      @include test.assert-false(list_ext.are-equal((1, 2, 3, 4), (1, 2, 3)));\n    }\n    @include test.it(\n      'returns false when the second list has more items than the first one'\n    ) {\n      @include test.assert-false(list_ext.are-equal((1, 2, 3), (1, 2, 3, 4)));\n    }\n\n    @include test.it('throws an error when the first list is null') {\n      // Act\n      $result: list_ext.are-equal(null, (1, 2, 3));\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the second list is null') {\n      // Act\n      $result: list_ext.are-equal((1, 2, 3), null);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the first list is a map') {\n      // Act\n      $result: list_ext.are-equal(\n        (\n          a: 1,\n        ),\n        (1, 2, 3)\n      );\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the second list is a map') {\n      // Act\n      $result: list_ext.are-equal(\n        (1, 2, 3),\n        (\n          a: 1,\n        )\n      );\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n  }\n\n  @include test.describe('intersection()') {\n    @include test.it('returns the intersection for basic lists') {\n      @include test.assert-equal(\n        list_ext.intersection((1, 2, 3), (2, 3, 4)),\n        (2, 3)\n      );\n    }\n\n    @include test.it('returns an empty list when there is no overlap') {\n      @include test.assert-equal(list_ext.intersection((1, 2, 3), (4, 5)), ());\n    }\n\n    @include test.it('returns an empty list when the first list is empty') {\n      @include test.assert-equal(list_ext.intersection((), (1, 2, 3)), ());\n    }\n\n    @include test.it('returns an empty list when the second list is empty') {\n      @include test.assert-equal(list_ext.intersection((1, 2, 3), ()), ());\n    }\n\n    @include test.it(\n      'returns the inersection when the first list contains null'\n    ) {\n      @include test.assert-equal(\n        list_ext.intersection((1, null, 3), (1, 2, 4, 3)),\n        (1, 3)\n      );\n    }\n\n    @include test.it(\n      'returns the inersection when the second list contains null'\n    ) {\n      @include test.assert-equal(\n        list_ext.intersection((1, 2, 3), (1, 3, null, 4)),\n        (1, 3)\n      );\n    }\n\n    @include test.it('returns the inersection when both lists contain null') {\n      @include test.assert-equal(\n        list_ext.intersection((null, 2, 3), (3, null, 4)),\n        (null, 3)\n      );\n    }\n\n    @include test.it('throws an error when the first list is null') {\n      // Act\n      $result: list_ext.intersection(null, (1, 2, 3));\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the second list is null') {\n      // Act\n      $result: list_ext.intersection((1, 2, 3), null);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the first list is a map') {\n      // Act\n      $result: list_ext.intersection(\n        (\n          a: 1,\n        ),\n        (1, 2, 3)\n      );\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error when the second list is a map') {\n      // Act\n      $result: list_ext.intersection(\n        (1, 2, 3),\n        (\n          a: 1,\n        )\n      );\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "sass/ext/_map_ext.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Extensions to the go/sass:map built-in module.\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'assert';\n@use 'throw';\n@use 'type';\n// go/keep-sorted end\n\n/// The same as `map.get()` but throws an error if the key is not found.\n///\n/// This is useful over `map.get()` when using Sass maps like records, where\n/// the key is expected to exist.\n///\n/// @example scss\n///   $map: (\n///     'name': 'foo',\n///     'value': blue,\n///   );\n///\n///   @debug map_ext.get-strict($map, 'name'); // 'foo'\n///   @debug map_ext.get-strict($map, 'bar'); // ERROR: Key \"bar\" expected but not found in $map: ('name': 'foo', 'value': blue)\n///\n/// @param {map} $map - The map to retrieve the value from.\n/// @param {string} $key - The key of the value to retrieve.\n/// @param {list} $keys - Additional keys to retrieve deeply nested values.\n/// @return {*} The value at the given key.\n/// @throw Error if the key does not exist in the map.\n@function get-strict($map, $key, $keys...) {\n  $map: assert.is-type($map, 'map', $source: 'map_ext.get-strict');\n  @if throw.get-error($map) {\n    @return $map;\n  }\n  @if not map.has-key($map, $key, $keys...) {\n    @return throw.error(\n      'Key #{$key} expected but not found in $map: #{meta.inspect($map)}',\n      $source: 'map.get-strict'\n    );\n  }\n\n  @return map.get($map, $key, $keys...);\n}\n\n/// Splits a Map and returns a List pair with two new Maps: the first with the\n/// provided keys and the second without.\n///\n/// @example scss\n///   $map: (\n///     'focus': blue,\n///     'focus-within': blue,\n///     'hover': teal,\n///     'active': green,\n///   );\n///\n///   $pair: map_ext.split($map, ('focus', 'focus-within'));\n///\n///   $map-with-focus-keys: list.nth($pair, 1);\n///   @debug $map-with-focus-keys; // ('focus': blue, 'focus-within': blue)\n///\n///   $map-with-remaining-keys: list.nth($pair, 2);\n///   @debug $map-with-remaining-keys; // ('hover': teal, 'active': green)\n///\n/// @param {map} $map - The Map to split.\n/// @param {list} $keys - List of keys to split the Map by.\n/// @return {list} A List pair with two new Maps: the first with the keys\n///     provided, and the second with the remaining keys.\n@function split($map, $keys) {\n  @if type.matches($keys, 'string') {\n    // A list with a single string `('key')` collapses to a single string type\n    // at build time. We can force it to be a list using a list API method.\n    // Ex:\n    // map_ext.split($map, ('key')) is the same as\n    // map_ext.split($map, 'key')\n    $keys: list.append((), $keys);\n  }\n\n  // In Sass, `()` counts as both a map and a list, and always reports its type\n  // as a list. If we're given an empty map-list, we don't need to throw a type\n  // error.\n  $map: assert.is-type($map, 'map|list', $source: 'map_ext.split');\n  $keys: assert.is-type($keys, 'list', $source: 'map_ext.split');\n  $error: throw.get-error($map, $keys);\n  @if not $error and list.length($keys) == 0 {\n    $error: throw.error(\n      'List of keys to split by are empty',\n      $source: 'map_ext.split'\n    );\n  }\n  @if $error {\n    @return $error;\n  }\n\n  // In Sass, `()` is an empty list. We can force Sass to use map types by\n  // creating the map with map APIs. This ensures that even if a map is empty,\n  // `meta.type-of()` will report it as a map.\n  $map-with-keys: map.merge((), ());\n  $map-without-keys: map.merge((), ());\n  @each $key, $value in $map {\n    $has-key: list.index($keys, $key) != null;\n    @if $has-key {\n      $map-with-keys: map.set($map-with-keys, $key, $value);\n    } @else {\n      $map-without-keys: map.set($map-without-keys, $key, $value);\n    }\n  }\n\n  @return ($map-with-keys, $map-without-keys);\n}\n\n/// Splits a Map and returns a new Map that only includes 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///   $map-with-focus-keys: map_ext.pick($map, ('focus', 'focus-within'));\n///   @debug $map-with-focus-keys; // ('focus': blue, 'focus-within': blue)\n///\n/// @param {map} $map - The Map to split.\n/// @param {list} $keys - List of keys to include in the new Map.\n/// @return {map} Map with only the keys provided.\n@function pick($map, $keys) {\n  $result: split($map, $keys);\n  @if throw.get-error($result) {\n    @return $result;\n  }\n  @return list.nth($result, 1);\n}\n\n/// Splits a Map and returns a new Map that excludes 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///   $map-without-focus-keys: map_ext.omit($map, ('focus', 'focus-within'));\n///   @debug $map-without-focus-keys; // ('hover': teal, 'active': green)\n///\n/// @param {map} $map - The Map to split.\n/// @param {list} $keys - List of keys to exclude from the new Map.\n/// @return {map} Map without the keys provided.\n@function omit($map, $keys) {\n  $result: split($map, $keys);\n  @if throw.get-error($result) {\n    @return $result;\n  }\n  @return list.nth($result, 2);\n}\n\n/// Returns the given map with any matching keys renamed according to the\n/// provided Map of keys to rename.\n///\n/// @example scss\n///   $map: ('foo': red);\n///\n///   $new-map: map_ext.rename-keys($map, ('foo': 'bar'));\n///   @debug $new-map; // ('bar': red)\n///\n/// @param {map} $map - The map to rename keys within.\n/// @param {map} $keys-to-rename - A map of keys and their new names.\n/// @return {map} The map with any matching keys renamed.\n@function rename-keys($map, $keys-to-rename) {\n  $new-map: omit($map, map.keys($keys-to-rename));\n  @if throw.get-error($new-map) {\n    @return $new-map;\n  }\n\n  @each $old-key-name, $new-key-name in $keys-to-rename {\n    @if map.has-key($map, $old-key-name) {\n      $new-map: map.set($new-map, $new-key-name, map.get($map, $old-key-name));\n    }\n  }\n\n  @return $new-map;\n}\n\n/// Returns a list of keys where $mapB diverges from $mapA.\n/// Divergence occurs when:\n///   1. A key exists in $mapB but not in $mapA.\n///   2. A key exists in both maps but with different values.\n///\n/// @example scss\n///   $mapA: ('foo': red, 'bar': yellow, 'baz': 10);\n///   $mapB: ('foo': red, 'bar': green,  'baz': 10, 'fooBar': blue);\n///\n///   $differences: map_ext.difference($mapA, $mapB);\n///   @debug $differences; // ('bar', 'fooBar')\n///\n/// @param {map} $mapA - The reference map.\n/// @param {map} $mapB - The map to compare against the reference.\n/// @return {list} A list of keys where $mapB diverges from $mapA.\n@function difference($mapA, $mapB) {\n  $mapA: assert.is-type($mapA, 'map', $source: 'map_ext.difference');\n  $mapB: assert.is-type($mapB, 'map', $source: 'map_ext.difference');\n  $error: throw.get-error($mapA, $mapB);\n  @if $error {\n    @return $error;\n  }\n  $differences: ();\n  @each $key, $value in $mapB {\n    @if not map.has-key($mapA, $key) or map.get($mapA, $key) != $value {\n      $differences: list.append($differences, $key);\n    }\n  }\n\n  @return $differences;\n}\n"
  },
  {
    "path": "sass/ext/_map_ext_test.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test;\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'map_ext';\n@use 'throw';\n// go/keep-sorted end\n\n@include test.describe('map_ext') {\n  @include test.describe('get-strict()') {\n    @include test.it('returns the value of the key when it exists in the map') {\n      // Arrange\n      $map: (\n        'foo': blue,\n        'bar': red,\n      );\n\n      // Act\n      $result: map_ext.get-strict($map, 'bar');\n\n      // Assert\n      @include test.assert-equal(\n        $result,\n        red,\n        $description: \"returns the value of map key 'bar': `red`\"\n      );\n    }\n\n    @include test.it('throws an error when the key does not exist in the map') {\n      // Arrange\n      $map: (\n        'foo': blue,\n      );\n\n      // Act\n      $result: map_ext.get-strict($map, 'does-not-exist');\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error if the map is null') {\n      // Arrange\n      $map: null;\n\n      // Act\n      $result: map_ext.get-strict($map, 'foo');\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error if the map is empty') {\n      // Arrange\n      $map: ();\n\n      // Act\n      $result: map_ext.get-strict($map, 'foo');\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it(\n      'returns the value if the key is present and the value is null'\n    ) {\n      // Arrange\n      $map: (\n        'foo': null,\n      );\n\n      // Act\n      $result: map_ext.get-strict($map, 'foo');\n\n      // Assert\n      @include test.assert-equal(\n        $result,\n        null,\n        $description: \"returns the value of map key 'foo', `null`\"\n      );\n    }\n\n    // See go/gm3-wiz-token-upgrade-css-keyname-issue\n    @include test.it(\n      'throws an error when using unquoted strings that are also CSS color types'\n    ) {\n      // Arrange\n      $map: (\n        'white': #fff,\n      );\n\n      // Act\n      $result: map_ext.get-strict($map, white);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n  }\n\n  @include test.describe('split()') {\n    @include test.it('returns a list with two map pairs') {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: ('foo');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n\n      // Assert\n      @include test.assert-equal(\n        meta.type-of($result),\n        'list',\n        $description: 'result is type of list'\n      );\n      @include test.assert-equal(\n        list.length($result),\n        2,\n        $description: 'result list has two items'\n      );\n      @include test.assert-equal(\n        meta.type-of(list.nth($result, 1)),\n        'map',\n        $description: 'the first item is a map'\n      );\n      @include test.assert-equal(\n        meta.type-of(list.nth($result, 2)),\n        'map',\n        $description: 'the second item is a map'\n      );\n    }\n\n    @include test.it('the first map only includes provided keys (one key)') {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: ('foo');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n      $first-map: list.nth($result, 1);\n\n      // Assert\n      @include test.assert-equal(\n        $first-map,\n        (\n          'foo': blue,\n        ),\n        $description: 'the first map only includes the single provided key'\n      );\n    }\n\n    @include test.it(\n      'the first map only includes provided keys (multiple keys)'\n    ) {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: ('foo', 'bar');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n      $first-map: list.nth($result, 1);\n\n      // Assert\n      @include test.assert-equal(\n        $first-map,\n        (\n          'foo': blue,\n          'bar': red,\n        ),\n        $description: 'the first map only includes the two provided keys'\n      );\n    }\n\n    @include test.it('the first map is empty if provided keys are not found') {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: ('does-not-exist');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n      $first-map: list.nth($result, 1);\n\n      // Assert\n      @include test.assert-equal(\n        $first-map,\n        (),\n        $description: 'the first map is empty if provided keys are not found'\n      );\n    }\n\n    @include test.it('the second map only includes remaining keys') {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: ('foo');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n      $second-map: list.nth($result, 2);\n\n      // Assert\n      @include test.assert-equal(\n        $second-map,\n        (\n          'bar': red,\n          'baz': green,\n        ),\n        $description: 'the second map only includes remaining keys'\n      );\n    }\n\n    @include test.it('the second map is empty if there are no remaining keys') {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: ('foo', 'bar', 'baz');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n      $second-map: list.nth($result, 2);\n\n      // Assert\n      @include test.assert-equal(\n        $second-map,\n        (),\n        $description: 'the second map is empty if there are no remaining keys'\n      );\n    }\n\n    @include test.it('throws an error if the map is null') {\n      // Arrange\n      $map-to-split: null;\n      $keys-to-split-by: ('foo');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error if no keys are provided') {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: ();\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('throws an error if keys are null') {\n      // Arrange\n      $map-to-split: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-split-by: null;\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($result),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n\n    @include test.it('returns two empty maps if given an empty map') {\n      // Arrange\n      $map-to-split: ();\n      $keys-to-split-by: ('foo');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n\n      // Assert\n      @include test.assert-equal(\n        list.nth($result, 1),\n        (),\n        $description: 'the first item is an empty map'\n      );\n      @include test.assert-equal(\n        list.nth($result, 2),\n        (),\n        $description: 'the second item is an empty map'\n      );\n    }\n\n    @include test.it('ensures that empty maps report as type of map') {\n      // Arrange\n      $map-to-split: ();\n      $keys-to-split-by: ('foo');\n\n      // Act\n      $result: map_ext.split($map-to-split, $keys-to-split-by);\n\n      // Assert\n      @include test.assert-equal(\n        meta.type-of(list.nth($result, 1)),\n        'map',\n        $description: 'type-of first empty map result is a map'\n      );\n      @include test.assert-equal(\n        meta.type-of(list.nth($result, 2)),\n        'map',\n        $description: 'type-of second empty map result is a map'\n      );\n    }\n  }\n\n  @include test.describe('pick()') {\n    @include test.it('returns a map with the provided keys included') {\n      // Arrange\n      $map: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-pick: ('foo', 'bar');\n\n      // Act\n      $result: map_ext.pick($map, $keys-to-pick);\n\n      // Assert\n      @include test.assert-equal(\n        $result,\n        (\n          'foo': blue,\n          'bar': red,\n        ),\n        $description: 'the result is a map only including the keys to pick'\n      );\n    }\n  }\n\n  @include test.describe('omit()') {\n    @include test.it('returns a map with the provided keys excluded') {\n      // Arrange\n      $map: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-omit: ('foo', 'bar');\n\n      // Act\n      $result: map_ext.omit($map, $keys-to-omit);\n\n      // Assert\n      @include test.assert-equal(\n        $result,\n        (\n          'baz': green,\n        ),\n        $description: 'the result is a map excluding the keys to omit'\n      );\n    }\n  }\n\n  @include test.describe('rename-keys()') {\n    @include test.it('renames the keys in a map') {\n      // Arrange\n      $map: (\n        'foo': blue,\n        'bar': red,\n        'baz': green,\n      );\n      $keys-to-rename: (\n        'foo': 'foo-renamed',\n        'bar': 'bar-renamed',\n      );\n\n      // Act\n      $result: map_ext.rename-keys($map, $keys-to-rename);\n\n      // Assert\n      @include test.assert-equal(\n        $result,\n        (\n          'foo-renamed': blue,\n          'bar-renamed': red,\n          'baz': green,\n        ),\n        $description:\n          'the result is a map with keys renamed according to the key rename map'\n      );\n    }\n  }\n\n  @include test.describe('difference()') {\n    @include test.it(\n      'a key exists in mapB but not in mapA and a key exists in both maps but with different values'\n    ) {\n      // Arrange\n      $mapA: (\n        'foo': red,\n        'baz': green,\n      );\n      $mapB: (\n        'foo': red,\n        'bar': blue,\n        'baz': yellow,\n      );\n\n      // Act\n      $difference: map_ext.difference($mapA, $mapB);\n\n      // Assert\n      @include test.assert-equal($difference, ('bar' 'baz'));\n    }\n\n    @include test.it('a key exists in mapB but not in mapA') {\n      // Arrange\n      $mapA: (\n        'foo': red,\n      );\n      $mapB: (\n        'foo': red,\n        'bar': blue,\n      );\n\n      // Act\n      $difference: map_ext.difference($mapA, $mapB);\n\n      // Assert\n      @include test.assert-equal($difference, list.append((), 'bar'));\n    }\n\n    @include test.it('a key exists in both maps but with different values') {\n      // Arrange\n      $mapA: (\n        'foo': red,\n        'bar': green,\n      );\n      $mapB: (\n        'foo': yellow,\n        'bar': green,\n      );\n\n      // Act\n      $difference: map_ext.difference($mapA, $mapB);\n\n      // Assert\n      @include test.assert-equal($difference, list.append((), 'foo'));\n    }\n\n    @include test.it('trhwos an error if mapA is null') {\n      // Arrange\n      $mapA: null;\n      $mapB: (\n        'foo': red,\n        'bar': green,\n      );\n\n      // Act\n      $difference: map_ext.difference($mapA, $mapB);\n\n      // Assert\n      @include test.assert-true(\n        throw.get-error($difference),\n        $description:\n          'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n      );\n    }\n  }\n\n  @include test.it('throws an error if mapB is null') {\n    // Arrange\n    $mapA: (\n      'foo': red,\n      'bar': yellow,\n    );\n    $mapB: null;\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-true(\n      throw.get-error($difference),\n      $description:\n        'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n    );\n  }\n\n  @include test.it('throws an error if both maps are null') {\n    // Arrange\n    $mapA: null;\n    $mapB: null;\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-true(\n      throw.get-error($difference),\n      $description:\n        'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n    );\n  }\n\n  @include test.it('returns all keys in mapB if mapA is empty') {\n    // Arrange\n    $mapA: map.merge((), ());\n    $mapB: (\n      'foo': red,\n    );\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-equal($difference, list.append((), 'foo'));\n  }\n\n  @include test.it('returns an empty list if mapB is empty') {\n    // Arrange\n    $mapA: (\n      'foo': red,\n      'bar': yellow,\n    );\n    $mapB: map.merge((), ());\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-equal($difference, ());\n  }\n\n  @include test.it('returns an empty list if both maps are empty') {\n    // Arrange\n    $mapA: map.merge((), ());\n    $mapB: map.merge((), ());\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-equal($difference, ());\n  }\n\n  @include test.it('throws an error if mapA is a list') {\n    // Arrange\n    $mapA: ('foo', 'bar');\n    $mapB: (\n      'foo': red,\n      'bar': green,\n    );\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-true(\n      throw.get-error($difference),\n      $description:\n        'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n    );\n  }\n\n  @include test.it('throws an error if mapB is a list') {\n    // Arrange\n    $mapA: (\n      'foo': red,\n      'bar': yellow,\n    );\n    $mapB: ('foo', 'bar');\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-true(\n      throw.get-error($difference),\n      $description:\n        'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n    );\n  }\n\n  @include test.it('throws an error if both maps are lists') {\n    // Arrange\n    $mapA: ('foo', 'bar');\n    $mapB: ('foo', 'bar');\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-true(\n      throw.get-error($difference),\n      $description:\n        'an error is thrown (returned as a string \"ERROR: <msg>\" during tests)'\n    );\n  }\n\n  @include test.it('returns an empty list if mapA and mapB are equal maps') {\n    // Arrange\n    $mapA: (\n      'foo': red,\n      'bar': yellow,\n    );\n    $mapB: (\n      'foo': red,\n      'bar': yellow,\n    );\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-equal($difference, ());\n  }\n\n  @include test.it('if a key exists in mapA but not mapB, gets ignored') {\n    // Arrange\n    $mapA: (\n      'foo': red,\n      'bar': yellow,\n    );\n    $mapB: (\n      'foo': red,\n    );\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-equal($difference, ());\n  }\n\n  @include test.it(\n    'Detects key with differing quotation (string vs. unquoted)'\n  ) {\n    // Arrange\n    $mapA: (\n      'foo': red,\n      'bar': yellow,\n    );\n    $mapB: (\n      'foo': red,\n      'bar': 'green',\n    );\n\n    // Act\n    $difference: map_ext.difference($mapA, $mapB);\n\n    // Assert\n    @include test.assert-equal($difference, list.append((), 'bar'));\n  }\n}\n"
  },
  {
    "path": "sass/ext/_string_ext.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Extensions to the go/sass:string built-in module.\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:list';\n@use 'sass:string';\n// go/keep-sorted end\n\n/// Checks if a string starts with a given prefix.\n///\n/// @example scss\n///   @debug string_ext.starts-with('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 starts-with($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 string_ext.ends-with('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 ends-with($string, $suffix) {\n  @return string.slice($string, -1 * string.length($suffix)) == $suffix;\n}\n\n/// Trims leading whitespace from the start of a string.\n///\n/// @example scss\n///   @debug string_ext.trim-start('  foo bar  '); // \"foo bar  \"\n///\n/// @param {string} $string - The string to trim.\n/// @return {string} The string with whitespace trimmed from the start.\n@function trim-start($string) {\n  @while starts-with($string, ' ') {\n    $string: replace-start($string, ' ', '');\n  }\n\n  @return $string;\n}\n\n/// Trims trailing whitespace from the end of a string.\n///\n/// @example scss\n///   @debug string_ext.trim-end('  foo bar  '); // \"  foo bar\"\n///\n/// @param {string} $string - The string to trim.\n/// @return {string} The string with trailing whitespace trimmed from the end.\n@function trim-end($string) {\n  @while ends-with($string, ' ') {\n    $string: replace-end($string, ' ', '');\n  }\n\n  @return $string;\n}\n\n/// Trims leading and trailing whitespace from a string.\n///\n/// @example scss\n///   @debug string_ext.trim('  foo bar  '); // \"foo bar\"\n///\n/// @param {string} $string - The string to trim.\n/// @return {string} The string with leading and trailing whitespace trimmed.\n@function trim($string) {\n  @return trim-start(trim-end($string));\n}\n\n/// Returns a new string with the first match of a pattern replaced by a given\n/// string.\n///\n/// @example scss\n///   @debug string_ext.replace('foo bar baz', 'bar', 'quux'); // \"foo quux baz\"\n///\n/// @param {string} $string - The string to be searched.\n/// @param {string} $pattern - The pattern to search for.\n/// @param {string} $replacement - The value to replace the pattern.\n/// @return {string} The string with the first match of pattern replaced by the\n///     replacement or the initial string itself.\n@function replace($string, $pattern, $replacement) {\n  $pattern-index: string.index($string, $pattern);\n  @if not $pattern-index {\n    @return $string;\n  }\n\n  $before: string.slice($string, 1, $pattern-index - 1);\n  $after: string.slice($string, string.length($pattern) + $pattern-index);\n\n  @return $before + $replacement + $after;\n}\n\n/// Returns a new string with all matches of a pattern replaced by a given\n/// string.\n///\n/// @example scss\n///   @debug string_ext.replace-all('foo bar baz', 'ba', 'qua'); // \"foo quar quaz\"\n///\n/// @param {string} $string - The string to be searched.\n/// @param {string} $pattern - The pattern to search for.\n/// @param {string} $replacement - The value to replace the pattern.\n/// @return {string} The string with all matches of pattern replaced by the\n///     replacement or the initial string itself.\n@function replace-all($string, $pattern, $replacement) {\n  @while string.index($string, $pattern) {\n    $string: replace($string, $pattern, $replacement);\n  }\n\n  @return $string;\n}\n\n/// Returns a new string that replaces a prefix at the start of the string.\n///\n/// @example scss\n///   @debug string_ext.replace-start('var(--foo)', 'var(', ''); // \"--foo)\"\n///\n/// @param {string} $string - The string to be searched.\n/// @param {string} $prefix - The prefix string to replace.\n/// @param {string} $replacement - The value to replace the prefix.\n/// @return {string} The string with the prefix replaced.\n@function replace-start($string, $prefix, $replacement) {\n  @if starts-with($string, $prefix) {\n    $string: $replacement + string.slice($string, string.length($prefix) + 1);\n  }\n\n  @return $string;\n}\n\n/// Returns a new string that replaces a suffix at the end of the string.\n///\n/// @example scss\n///   @debug string_ext.replace-end('var(--foo)', ')', ''); // \"var(--foo\"\n///\n/// @param {string} $string - The string to be searched.\n/// @param {string} $suffix - The suffix string to replace.\n/// @param {string} $replacement - The value to replace the suffix.\n/// @return {string} The string with the suffix trimmed from the end.\n@function replace-end($string, $suffix, $replacement) {\n  @if ends-with($string, $suffix) {\n    $string: string.slice($string, 1, -1 * string.length($suffix) - 1) +\n      $replacement;\n  }\n\n  @return $string;\n}\n"
  },
  {
    "path": "sass/ext/_string_ext_test.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test;\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:list';\n@use 'sass:meta';\n@use 'string_ext';\n// go/keep-sorted end\n\n@include test.describe('string_ext') {\n  @include test.describe('starts-with()') {\n    @include test.it('should return true if the string has the prefix') {\n      @include test.assert-true(string_ext.starts-with('foo', 'f'));\n    }\n\n    @include test.it(\n      'should return false if the string does not have the prefix'\n    ) {\n      @include test.assert-false(string_ext.starts-with('foo', 'b'));\n    }\n  }\n\n  @include test.describe('ends-with()') {\n    @include test.it('should return true if the string has the suffix') {\n      @include test.assert-true(string_ext.ends-with('foo', 'o'));\n    }\n\n    @include test.it(\n      'should return false if the string does not have the suffix'\n    ) {\n      @include test.assert-false(string_ext.ends-with('foo', 'b'));\n    }\n  }\n\n  @include test.describe('trim-start()') {\n    @include test.it(\n      'should return the string with leading whitespace removed'\n    ) {\n      @include test.assert-equal(string_ext.trim-start('  foo'), 'foo');\n    }\n\n    @include test.it('should do nothing if there is no leading whitespace') {\n      @include test.assert-equal(string_ext.trim-start('foo'), 'foo');\n    }\n  }\n\n  @include test.describe('trim-end()') {\n    @include test.it(\n      'should return the string with trailing whitespace removed'\n    ) {\n      @include test.assert-equal(string_ext.trim-end('bar  '), 'bar');\n    }\n\n    @include test.it('should do nothing if there is no trailing whitespace') {\n      @include test.assert-equal(string_ext.trim-end('bar'), 'bar');\n    }\n  }\n\n  @include test.describe('trim()') {\n    @include test.it('should trim leading and trailing whitespace') {\n      @include test.assert-equal(string_ext.trim('  foo bar  '), 'foo bar');\n    }\n  }\n\n  @include test.describe('replace()') {\n    @include test.it('should replace a pattern') {\n      @include test.assert-equal(\n        string_ext.replace('foo bar baz', 'foo', 'quux'),\n        'quux bar baz'\n      );\n\n      @include test.assert-equal(\n        string_ext.replace('foo bar baz', 'bar', 'quux'),\n        'foo quux baz'\n      );\n\n      @include test.assert-equal(\n        string_ext.replace('foo bar baz', 'baz', 'quux'),\n        'foo bar quux'\n      );\n    }\n\n    @include test.it('should return the string if pattern does not match') {\n      @include test.assert-equal(\n        string_ext.replace('foo bar baz', 'quux', 'womp'),\n        'foo bar baz'\n      );\n    }\n\n    @include test.it('replaces only first match') {\n      @include test.assert-equal(\n        string_ext.replace('womp womp', 'womp', 'doo'),\n        'doo womp'\n      );\n    }\n  }\n\n  @include test.describe('replace-all()') {\n    @include test.it('should replace a single pattern') {\n      @include test.assert-equal(\n        string_ext.replace-all('foo bar baz', 'foo', 'quux'),\n        'quux bar baz'\n      );\n\n      @include test.assert-equal(\n        string_ext.replace-all('foo bar baz', 'bar', 'quux'),\n        'foo quux baz'\n      );\n\n      @include test.assert-equal(\n        string_ext.replace-all('foo bar baz', 'baz', 'quux'),\n        'foo bar quux'\n      );\n    }\n\n    @include test.it('should return the string if pattern does not match') {\n      @include test.assert-equal(\n        string_ext.replace-all('foo bar baz', 'quux', 'womp'),\n        'foo bar baz'\n      );\n    }\n\n    @include test.it('replaces multiple matches') {\n      @include test.assert-equal(\n        string_ext.replace-all('womp womp', 'womp', 'doo'),\n        'doo doo'\n      );\n    }\n  }\n\n  @include test.describe('replace-start()') {\n    @include test.it('should replace the prefix of a string') {\n      @include test.assert-equal(\n        string_ext.replace-start('babar', 'ba', 'foo'),\n        'foobar'\n      );\n    }\n\n    @include test.it('should return the string if prefix does not match') {\n      @include test.assert-equal(\n        string_ext.replace-start('foo', 'bar', 'baz'),\n        'foo'\n      );\n    }\n  }\n\n  @include test.describe('replace-end()') {\n    @include test.it('should replace the suffix of a string') {\n      @include test.assert-equal(\n        string_ext.replace-end('foobar', 'bar', 'foo'),\n        'foofoo'\n      );\n    }\n\n    @include test.it('should return the string if suffix does not match') {\n      @include test.assert-equal(\n        string_ext.replace-end('foo', 'bar', 'baz'),\n        'foo'\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "sass/ext/_throw.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Utilities for `sass-true` errors, to support testing error behavior.\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:meta';\n@use 'sass:string';\n// go/keep-sorted end\n\n@forward 'true' show error;\n\n/// Returns false if none of the given values are error strings, or returns an\n/// error string if any value has an error.\n///\n/// This is used to support testing error behavior with `sass-true`, since\n/// `@error` messages cannot be caught at build time.\n///\n/// @example scss\n///   // A function that may return an \"ERROR:\" string in a test.\n///   @function get-value($map, $key) {\n///     @if meta.type-of($map) != 'map' {\n///       // Identical to `@error 'ERROR: Arg is not a map'` outside of tests.\n///       @return throw.error('Arg is not a map');\n///     }\n///     @return map.get($map, $key);\n///   }\n///\n///   // A function that needs to handle potential errors from other functions.\n///   @function mix-primary-on-surface($values) {\n///     $primary: get-value($values, 'primary');\n///     $surface: get-value($values, 'surface');\n///     $error: throw.get-error($primary, $surface);\n///     @if $error {\n///       // Return early to guard logic against additional errors since\n///       // $primary or $surface may be a string instead of a color.\n///       @return $error;\n///     }\n///\n///     @return color.mix($primary, $surface, 10%);\n///   }\n///\n/// Note: `throw.error()` and `throw.get-error()` are only useful when testing\n/// error behavior using `sass-true`. If you are not testing a function, use\n/// `@error` instead.\n///\n/// @example scss\n///   // In a `sass-true` test, `throw.get-error()` can be used to assert that\n///   // an error is thrown.\n///   @use 'true' as test with ($catch-errors: true);\n///\n///   @include test.describe('module.get-value()') {\n///     @include test.it('throws an error if the value is not a map') {\n///       $result: module.get-value('not a map', 'primary');\n///       @include test.assert-truthy(throw.get-error($result), '$result is an error');\n///     }\n///   }\n///\n/// @param {*} $error - The value to check.\n/// @param {list} $errors - Additional values to check. Useful for checking\n///     multiple errors at the same time.\n/// @return {string|boolean} The error string if any value is an error, or false\n///     otherwise.\n@function get-error($error, $errors...) {\n  @if _is-error($error) {\n    @return $error;\n  }\n\n  @each $additional-error in $errors {\n    @if _is-error($additional-error) {\n      @return $additional-error;\n    }\n  }\n\n  @return false;\n}\n\n@function _is-error($error) {\n  @return (meta.type-of($error) == 'string') and\n    (string.index($error, 'ERROR') == 1);\n}\n"
  },
  {
    "path": "sass/ext/_throw_test.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test;\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'throw';\n// go/keep-sorted end\n\n@include test.describe('throw') {\n  @include test.describe('get-error()') {\n    @include test.it('returns the string if the value is an error string') {\n      $error: throw.error('test error message');\n      @include test.assert-equal(throw.get-error($error), $error);\n    }\n\n    @include test.it('returns null for non-error strings') {\n      @include test.assert-false(\n        throw.get-error('not an error'),\n        'get-error(\"not an error\") should return null for non-error strings'\n      );\n    }\n\n    @include test.it('returns null for other values') {\n      @include test.assert-false(\n        throw.get-error(1),\n        'get-error(1) should return null'\n      );\n      @include test.assert-false(\n        throw.get-error(true),\n        'get-error(true) should return null'\n      );\n      @include test.assert-false(\n        throw.get-error(null),\n        'get-error(null) should return null'\n      );\n      @include test.assert-false(\n        throw.get-error(()),\n        'get-error(()) should return null'\n      );\n    }\n\n    @include test.it(\n      'returns the first error if multiple values are provided'\n    ) {\n      $error: throw.error('test error message');\n      @include test.assert-equal(\n        throw.get-error(\n          'not an error',\n          'still not an error',\n          $error,\n          'not an error either'\n        ),\n        $error\n      );\n    }\n\n    @include test.it('returns null if multiple non-error values are provided') {\n      @include test.assert-false(\n        throw.get-error('not an error', 'still not an error'),\n        'get-error(\"not an error\", \"still not an error\") should return null'\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "sass/ext/_type.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Utilities for Sass type checking.\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:meta';\n@use 'sass:string';\n@use 'throw';\n// go/keep-sorted end\n\n/// Returns true if the given value matches the provided type string.\n///\n/// The type string supports multiple types separated by `|`, such as\n/// `'string|null'`. Type options are any values returned by `meta.type-of()`.\n///\n/// @example scss\n///   @function is-empty($value) {\n///     @if type.matches($value, 'list|map') {\n///       @return list.length($value) == 0;\n///     }\n///     @if type.matches($value, 'string') {\n///       @return $value == '';\n///     }\n///     @return type.matches($value, 'null');\n///   }\n///\n/// @param {*} $value - The value to check the type of.\n/// @param {string} $type-string - The type to check. May be multiple types\n///     separated by `|`.\n/// @return {boolean} True if the value matches the type string.\n@function matches($value, $type-string) {\n  @if meta.type-of($type-string) != 'string' or $type-string == '' {\n    @return throw.error(\n      '$type-string must be a non-empty string',\n      $source: 'type.matches'\n    );\n  }\n  @if string.index($type-string, ' ') {\n    @return throw.error(\n      '$type-string may not contain spaces',\n      $source: 'type.matches'\n    );\n  }\n  @if string.index($type-string, 'boolean') {\n    @return throw.error(\n      'Use \"bool\" instead of \"boolean\"',\n      $source: 'type.matches'\n    );\n  }\n\n  $value-type: meta.type-of($value);\n  @if $value-type == $type-string {\n    @return true;\n  }\n\n  @each $type in string.split($type-string, '|') {\n    @if $value-type == $type {\n      @return true;\n    }\n  }\n\n  @return false;\n}\n"
  },
  {
    "path": "sass/ext/_type_test.scss",
    "content": "//\n// Copyright 2025 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test;\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'throw';\n@use 'type';\n// go/keep-sorted end\n\n@include test.describe('type') {\n  @include test.describe('matches()') {\n    @include test.it(\n      'returns true when the value matches a single string type'\n    ) {\n      @include test.assert-true(\n        type.matches(1, 'number'),\n        '1 should match \"number\" type'\n      );\n      @include test.assert-true(\n        type.matches('foo', 'string'),\n        '\"foo\" should match \"string\" type'\n      );\n      @include test.assert-true(\n        type.matches(true, 'bool'),\n        'true should match \"bool\" type'\n      );\n      @include test.assert-true(\n        type.matches(null, 'null'),\n        'null should match \"null\" type'\n      );\n      @include test.assert-true(\n        type.matches((1, 2, 3), 'list'),\n        '(1, 2, 3) should match \"list\" type'\n      );\n      $map: (\n        'key': 'value',\n      );\n      @include test.assert-true(\n        type.matches($map, 'map'),\n        '(\"key\": \"value\") should match \"map\" type'\n      );\n    }\n\n    @include test.it(\n      'returns true when the value matches multiple string types'\n    ) {\n      @include test.assert-true(\n        type.matches(1, 'number|string'),\n        '1 should match \"number|string\" type'\n      );\n      @include test.assert-true(\n        type.matches('foo', 'number|string'),\n        '\"foo\" should match \"number|string\" type'\n      );\n      @include test.assert-true(\n        type.matches(null, 'number|string|null'),\n        'null should match \"number|string|null\" type'\n      );\n      @include test.assert-true(\n        type.matches((), 'list|map'),\n        '() should match \"list|map\" type'\n      );\n    }\n\n    @include test.it('returns false when the value does not match any types') {\n      @include test.assert-false(\n        type.matches(1, 'string'),\n        '1 should not match \"string\" type'\n      );\n      @include test.assert-false(\n        type.matches('foo', 'number'),\n        '\"foo\" should not match \"number\" type'\n      );\n      @include test.assert-false(\n        type.matches(1, 'list|map|null'),\n        '1 should not match \"list|map|null\" type'\n      );\n    }\n\n    @include test.it('throws an error when the type string is empty') {\n      @include test.assert-true(\n        throw.get-error(type.matches('foo', '')),\n        'should throw error'\n      );\n    }\n\n    @include test.it('throws an error when the type string is not a string') {\n      @include test.assert-true(\n        throw.get-error(type.matches(1, 1)),\n        'should throw error'\n      );\n    }\n\n    @include test.it('throws an error when the type string contains spaces') {\n      @include test.assert-true(\n        throw.get-error(type.matches('foo', 'number | string')),\n        'should throw error'\n      );\n    }\n\n    @include test.it('throws an error if the type string uses \"boolean\" instead of \"bool\"') {\n      @include test.assert-true(\n        throw.get-error(type.matches(true, 'boolean')),\n        'should throw error'\n      );\n      @include test.assert-true(\n        throw.get-error(type.matches(1, 'number|boolean')),\n        'should throw error'\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "sass/ext/_var.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Utility functions for \"var()\" custom property string manipulation.\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use 'assert';\n@use 'string_ext';\n@use 'throw';\n// go/keep-sorted end\n\n/// Creates a custom property `var()` string.\n///\n/// @example scss\n///   @debug var.create(--foo); // \"var(--foo)\"\n///   @debug var.create(--foo, 8px); // \"var(--foo, 8px)\"\n///\n/// @param {string} $name - The name of the custom property.\n/// @param {*} $fallback [null] - Optional `var()` fallback value.\n/// @return {string} A custom property `var()` string.\n@function create($name, $fallback: null) {\n  $name: assert.is-type($name, 'string');\n  @if throw.get-error($name) {\n    @return $name;\n  }\n  @if not string_ext.starts-with($name, '--') {\n    @return throw.error(\n      'Custom property names must start with \"--\". $name: #{meta.inspect($name)}',\n      $source: 'var.create'\n    );\n  }\n\n  @if $fallback == null {\n    @return var(#{$name});\n  }\n\n  @return var(#{$name}, #{$fallback});\n}\n\n/// Returns the custom property variable name of `var()` string.\n///\n/// @example scss\n///   $var: var(--foo);\n///   @debug var.name($var); // \"--foo\"\n///\n/// @param {string} $var - A custom property `var()` string.\n/// @return {string} The custom property variable name.\n/// @throw If the value is not a custom property.\n@function name($var) {\n  $var: _parse-and-validate($var);\n  @if throw.get-error($var) {\n    @return $var;\n  }\n  @return map.get($var, 'name');\n}\n\n/// Returns the fallback value of a custom property `var()` string. The value\n/// may be null if the `var()` does not have a fallback value.\n///\n/// @example scss\n///   $var: var(--foo, var(--bar, 8px));\n///   @debug var.fallback($var); // \"var(--bar, 8px)\"\n///\n/// @param {string} $var - A custom property `var()` string.\n/// @return {string} The fallback value of the `var()` string. May be null if\n///     the `var()` does not have a fallback value.\n/// @throw If the value is not a custom property.\n@function fallback($var) {\n  $var: _parse-and-validate($var);\n  @if throw.get-error($var) {\n    @return $var;\n  }\n  @return map.get($var, 'fallback');\n}\n\n/// Returns the deep fallback value of a custom property `var()` string. The\n/// value may be null if the `var()` does not have a fallback value.\n///\n/// If a fallback value is another `var()`, this function will return the final\n/// concrete value in the chain.\n///\n/// @example scss\n///   $var: var(--foo, var(--bar, 8px));\n///   @debug var.deep-fallback($var); // \"8px\"\n///\n/// @param {string} $var - A custom property `var()` string.\n/// @return {string} The deep fallback value of the `var()` string. May be null\n///     if the `var()` does not have a fallback value.\n/// @throw If the value is not a custom property.\n@function deep-fallback($var) {\n  $fallback: fallback($var);\n  @while is-var($fallback) {\n    $fallback: fallback($fallback);\n  }\n\n  @return $fallback;\n}\n\n/// Creates a new custom property `var()` string and returns it with the\n/// specified new fallback value.\n///\n/// @example scss\n///   $var: var(--foo, var(--bar, 8px));\n///   $new-var: set-fallback($var, 16px);\n///   @debug $new-var; // \"var(--foo, 16px)\"\n///\n/// @param {string} $var - A custom property `var()` string.\n/// @param {*} $new-fallback - The new fallback value. May be null to remove a\n///     value.\n/// @return {string} A custom property `var()` string with the new fallback\n///     value.\n/// @throw If the value is not a custom property.\n@function set-fallback($var, $new-fallback) {\n  $name: name($var);\n  @return create($name, $new-fallback);\n}\n\n/// Creates a new custom property `var()` string and returns it with the\n/// specified new deep fallback value.\n///\n/// If the provided `var()` string's fallback value is another `var()`, this\n/// function will set the final fallback value in the chain.\n///\n/// @example scss\n///   $var: var(--foo, var(--bar, 8px));\n///   $new-var: var.deep-set-fallback($var, 16px);\n///   @debug $new-var; // \"var(--foo, var(--bar, 16px))\"\n///\n/// @param {string} $var - A custom property `var()` string.\n/// @param {*} $new-fallback - The new fallback value. May be null to remove a\n///     value.\n/// @return {string} A custom property `var()` string with the new deep\n///     fallback value.\n/// @throw If the value is not a custom property.\n@function deep-set-fallback($var, $new-fallback) {\n  $old-fallback: fallback($var);\n  @if is-var($old-fallback) {\n    $new-fallback: deep-set-fallback($old-fallback, $new-fallback);\n  }\n\n  @return set-fallback($var, $new-fallback);\n}\n\n/// Indicates whether or not a value is a custom property `var()` string.\n///\n/// @example scss\n///   $var: var(--foo);\n///   @debug var.is-var($var); // true\n///\n/// @param {*} $var - The value to test.\n/// @return {boolean} True if the value is a custom property `var()` string, or\n///     false if not.\n@function is-var($var) {\n  @return _parse($var) != null;\n}\n\n/// Indicates whether or not a value is a `var()` string.\n///\n/// @param {*} $var - The value to test.\n/// @return {boolean} True if the value is a custom property `var()` string, or\n///     false if not.\n@function _is-var-string($var) {\n  @return meta.type-of($var) == 'string' and\n    string_ext.starts-with($var, 'var(');\n}\n\n/// Parses a `var()` string into a Map with `name` and `fallback` keys. This\n/// function returns null if the value is invalid.\n///\n/// @param {*} $var - The value to parse.\n/// @return {map} A Map containing a string `name` key with the custom property\n///     name and a `fallback` key with the fallback value (which may be null).\n///     The returned Map itself may be null if the provided value is not valid.\n@function _parse($var) {\n  @if meta.type-of($var) ==\n    'map' and\n    map.has-key($var, 'name') and\n    map.has-key($var, 'fallback')\n  {\n    @return $var;\n  }\n\n  @if not _is-var-string($var) {\n    @return null;\n  }\n\n  // Remove function name and parens\n  $var: string_ext.replace-start($var, 'var(', '');\n  $var: string_ext.replace-end($var, ')', '');\n\n  $name: string_ext.trim($var);\n  $fallback: null;\n  $comma: string.index($var, ',');\n  @if $comma != null {\n    $name: string_ext.trim(string.slice($var, 1, $comma - 1));\n    $fallback: string_ext.trim(string.slice($var, $comma + 1));\n  }\n\n  @if $name == '' or $fallback == '' {\n    @return null;\n  }\n\n  @return ('name': $name, 'fallback': $fallback);\n}\n\n/// Parses a `var()` string into a Map with `name` and `fallback` keys.\n///\n/// @param {*} $var - The value to parse.\n/// @return {map} A Map containing a string `name` key with the custom property\n///     name and a `fallback` key with the fallback value (which may be null).\n/// @throw If the value is not a custom property.\n@function _parse-and-validate($var) {\n  $var-map: _parse($var);\n  @if $var-map == null {\n    @return throw.error(\n      '#{meta.inspect($var)} is not a valid var() string',\n      $source: 'var._parse-and-validate'\n    );\n  }\n\n  @return $var-map;\n}\n"
  },
  {
    "path": "sass/ext/_var_test.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test;\n\n// go/keep-sorted start by_regex='(.+) prefix_order=sass:\n@use 'sass:list';\n@use 'sass:meta';\n@use 'throw';\n@use 'var';\n// go/keep-sorted end\n\n@include test.describe('var') {\n  @include test.describe('create()') {\n    @include test.it('should create a var()') {\n      @include test.assert-equal(var.create('--foo'), var(--foo));\n    }\n\n    @include test.it('should create a var() with a fallback') {\n      @include test.assert-equal(var.create('--foo', blue), var(--foo, blue));\n    }\n\n    @include test.it('should create a var() with a var() fallback') {\n      @include test.assert-equal(\n        var.create('--foo', var.create('--bar')),\n        var(--foo, var(--bar))\n      );\n    }\n\n    @include test.it('should create a var() with a deep var() fallback') {\n      @include test.assert-equal(\n        var.create('--foo', var.create('--bar', blue)),\n        var(--foo, var(--bar, blue))\n      );\n    }\n\n    @include test.it('should throw if name does not start with --') {\n      @include test.assert-true(\n        throw.get-error(var.create('foo')),\n        'var.create(\"foo\") should throw'\n      );\n    }\n  }\n\n  @include test.describe('name()') {\n    @include test.it('should return the name of a var()') {\n      @include test.assert-equal(var.name(var(--foo)), '--foo');\n    }\n\n    @include test.it('should return the name of a var() with a fallback') {\n      @include test.assert-equal(var.name(var(--foo, blue)), '--foo');\n    }\n  }\n\n  @include test.describe('fallback()') {\n    @include test.it('should return null if there is no fallback') {\n      @include test.assert-equal(var.fallback(var(--foo)), null);\n    }\n\n    @include test.it('should return the fallback of a var() as a string') {\n      @include test.assert-equal(var.fallback(var(--foo, blue)), 'blue');\n    }\n\n    @include test.it('should return a var() fallback as a string') {\n      @include test.assert-equal(\n        var.fallback(var(--foo, var(--bar))),\n        'var(--bar)'\n      );\n    }\n\n    @include test.it('should return a deep var() fallback as a string') {\n      @include test.assert-equal(\n        var.fallback(var(--foo, var(--bar, blue))),\n        'var(--bar, blue)'\n      );\n    }\n  }\n\n  @include test.describe('deep-fallback()') {\n    @include test.it('should return null if there is no fallback') {\n      @include test.assert-equal(var.deep-fallback(var(--foo)), null);\n    }\n\n    @include test.it('should return the fallback of a var() as a string') {\n      @include test.assert-equal(var.deep-fallback(var(--foo, blue)), 'blue');\n    }\n\n    @include test.it('should return the deep fallback of a var() as a string') {\n      @include test.assert-equal(\n        var.deep-fallback(var(--foo, var(--bar, blue))),\n        'blue'\n      );\n    }\n  }\n\n  @include test.describe('set-fallback()') {\n    @include test.it('should set a fallback') {\n      @include test.assert-equal(\n        var.set-fallback(var(--foo), 'blue'),\n        var(--foo, blue)\n      );\n    }\n\n    @include test.it('should replace a fallback') {\n      @include test.assert-equal(\n        var.set-fallback(var(--foo, blue), red),\n        var(--foo, red)\n      );\n    }\n\n    @include test.it('should replace a var() fallback') {\n      @include test.assert-equal(\n        var.set-fallback(var(--foo, var(--bar)), 'blue'),\n        var(--foo, blue)\n      );\n    }\n  }\n\n  @include test.describe('deep-set-fallback()') {\n    @include test.it('should set a fallback') {\n      @include test.assert-equal(\n        var.deep-set-fallback(var(--foo), 'blue'),\n        var(--foo, blue)\n      );\n    }\n\n    @include test.it('should replace a fallback') {\n      @include test.assert-equal(\n        var.deep-set-fallback(var(--foo, blue), 'red'),\n        var(--foo, red)\n      );\n    }\n\n    @include test.it('should replace a deep fallback') {\n      @include test.assert-equal(\n        var.deep-set-fallback(var(--foo, var(--bar, blue)), 'red'),\n        var(--foo, var(--bar, red))\n      );\n    }\n  }\n\n  @include test.describe('is-var()') {\n    @include test.it('should return true for var()') {\n      @include test.assert-true(var.is-var(var(--foo)));\n    }\n\n    @include test.it('should return true for var() with fallback') {\n      @include test.assert-true(var.is-var(var(--foo, blue)));\n    }\n\n    @include test.it('should return true for var() with var() fallback') {\n      @include test.assert-true(var.is-var(var(--foo, var(--bar))));\n    }\n\n    @include test.it('should return false for non-var()') {\n      @include test.assert-false(var.is-var('foo'));\n    }\n  }\n}\n"
  },
  {
    "path": "sass/ext/tests.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'true' as test with (\n  $catch-errors: true\n);\n\n// go/keep-sorted start\n@use 'assert_test';\n@use 'list_ext_test';\n@use 'map_ext_test';\n@use 'string_ext_test';\n@use 'throw_test';\n@use 'type_test';\n@use 'var_test';\n// go/keep-sorted end\n"
  },
  {
    "path": "scripts/analyzer/analyze-element.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type {ReactiveProperty} from '@lit-labs/analyzer/lib/model.js';\nimport {\n  AbsolutePath,\n  Analyzer,\n  ClassDeclaration,\n  LitElementDeclaration,\n  LitElementExport,\n  Module,\n} from '@lit-labs/analyzer/package-analyzer.js';\nimport * as path from 'path';\nimport type ts from 'typescript';\n\n/**\n * Represents a module that exports a custom element and links its superclasses\n * via the superClass property up to the `LitElement` superclass.\n */\nexport interface MdModuleInfo {\n  customElementName?: string;\n  className: string;\n  classPath: string;\n  summary?: string;\n  description?: string;\n  properties: MdPropertyInfo[];\n  reactiveProperties: MdPropertyInfo[];\n  methods: MdMethodInfo[];\n  superClass?: MdModuleInfo;\n  events: MdEventInfo[];\n}\n\n/**\n * Describes an event that a material design custom element can dispatch.\n */\nexport interface MdEventInfo {\n  name: string;\n  description?: string;\n  type?: string;\n  bubbles: boolean;\n  composed: boolean;\n}\n\n/**\n * Describes a material design element's property\n */\nexport interface MdPropertyInfo {\n  name: string;\n  attribute?: string;\n  description?: string;\n  type?: string;\n  privacy?: string;\n  default?: string;\n}\n\n/**\n * Describes a material design element's method\n */\nexport interface MdMethodInfo {\n  name: string;\n  description?: string;\n  privacy?: string;\n  parameters: MdMethodParameterInfo[];\n  returns?: string;\n}\n\n/**\n * Describes a material design element's method parameters\n */\nexport interface MdMethodParameterInfo {\n  name: string;\n  description?: string;\n  type?: string;\n  default?: string;\n}\n\n/**\n * Analyzes a material design custom element and its superclass chain and\n * formats the data into a Module info object that describes the Material web\n * custom element and its superclass chain with data useful for API\n * documentation.\n *\n * @param analyzer An instance of the lit analyzer for the material-web project\n * @param elementEntrypoint The entrypoint of the custom elemenr or superclass\n * to analyze.\n * @param superClassName (optional) The name of the superclass we are currently\n * analyzing.\n * @returns A Module info object that describes the Material web custom element\n * and its superclass chain with data useful for API documentation.\n */\nexport function analyzeElementApi(\n  analyzer: Analyzer,\n  elementEntrypoint: string,\n  superClassName = '',\n) {\n  // The description of the module\n  const elementModule = analyzer.getModule(elementEntrypoint as AbsolutePath);\n  let customElementModule: LitElementDeclaration | ClassDeclaration =\n    elementModule.getCustomElementExports()[0];\n\n  if (!customElementModule) {\n    const unknownSuperClassDeclaration =\n      elementModule.getDeclaration(superClassName);\n\n    // Type-cast declaration\n    if (\n      unknownSuperClassDeclaration.isLitElementDeclaration() ||\n      unknownSuperClassDeclaration.isClassDeclaration()\n    ) {\n      customElementModule = unknownSuperClassDeclaration;\n    } else {\n      throw new Error(\n        `Unknown superclass declaration type for superclass or entrypoint: '${\n          superClassName || elementEntrypoint\n        }'`,\n      );\n    }\n  }\n\n  const {properties, reactiveProperties} = analyzeFields(\n    customElementModule,\n    elementModule,\n  );\n  const methods = analyzeMethods(customElementModule);\n  let events: MdEventInfo[] = [];\n  if (customElementModule.isLitElementDeclaration()) {\n    events = analyzeEvents(customElementModule);\n  }\n\n  const superclass = customElementModule.heritage.superClass;\n\n  const elementDocModule: MdModuleInfo = {\n    customElementName: (customElementModule as unknown as {tagname?: string})\n      .tagname,\n    className: customElementModule.name,\n    classPath: elementEntrypoint,\n    summary: makeMarkdownFriendly(customElementModule.summary),\n    description: makeMarkdownFriendly(customElementModule.description),\n    properties,\n    reactiveProperties,\n    methods,\n    events,\n  };\n\n  // If there is no superclass or we've gotten to the LitElement superclass,\n  // we're done. Stop analyzing. Otherwise, analyze the superclass.\n  if (superclass !== undefined && superclass.name !== 'LitElement') {\n    // Get the typescript source path of the superclass since we use js imports\n    const superClassLocation = superclass.module.replace(/\\.js$/, '.ts');\n    const absolutePath = path.resolve(\n      elementEntrypoint,\n      path.relative(elementEntrypoint, superClassLocation),\n    );\n    const superClassModule = analyzeElementApi(\n      analyzer,\n      absolutePath,\n      superclass.name,\n    );\n    elementDocModule.superClass = superClassModule;\n  }\n\n  return elementDocModule;\n}\n\n/**\n * These are fields we do not want to expose on the API docs.\n */\nconst FIELDS_TO_IGNORE = new Set(['isListItem', 'isMenuItem']);\n\n/**\n * Analyzes the fields of a LitElement class and returns information about the\n * properties and reactive properties of the LitElement class in a format\n * useful for API documentation generation.\n *\n * @param classDeclaration The LitElement class declaration from which to\n * analyze and formatthe property fields.\n * @param module The analyzer module descriptor used to resolve default value\n * variable values.\n * @returns The information about the properties and reactive properties of the\n * LitElement class.\n */\nexport function analyzeFields(\n  classDeclaration: LitElementExport | LitElementDeclaration | ClassDeclaration,\n  module: Module,\n): {properties: MdPropertyInfo[]; reactiveProperties: MdPropertyInfo[]} {\n  const properties: MdPropertyInfo[] = [];\n  const reactiveProperties: MdPropertyInfo[] = [];\n\n  for (const field of classDeclaration.fields) {\n    // skip certain fields and symbols\n    if (FIELDS_TO_IGNORE.has(field.name) || field.name.includes('[')) {\n      continue;\n    }\n\n    let defaultVal = field.default;\n    let reactiveProp: ReactiveProperty | null = null;\n    if (classDeclaration.isLitElementDeclaration()) {\n      reactiveProp = classDeclaration.reactiveProperties.get(field.name);\n    }\n\n    // Check the module and see if the default value is a variable declared in\n    // the same file.\n    if (module.declarations.find((dec) => dec.name === field.default)) {\n      // Check if the default value is a variable declared in the same file.\n      const variableDeclaration = module.getDeclaration(field.default);\n\n      if (variableDeclaration.isVariableDeclaration()) {\n        const node =\n          variableDeclaration.node as unknown as ts.VariableDeclaration;\n\n        // attempt to get the default value. If it's not a string, just use the\n        // variable name.\n        defaultVal = node.initializer?.getText() ?? defaultVal;\n      }\n    }\n\n    let attribute: string | undefined = undefined;\n    let propertyArray = properties;\n\n    // If it is a reactive property, put it in the reactive properties array\n    // and add the attribute name.\n    if (reactiveProp) {\n      propertyArray = reactiveProperties;\n      // If the attribute is true, try to convert the name to an attribute.\n      if (reactiveProp.attribute === true) {\n        attribute = nameToAttribute(reactiveProp.name);\n        // If it is a string, use that as the attribute name.\n      } else if (reactiveProp.attribute !== false) {\n        attribute = reactiveProp.attribute;\n      }\n    }\n\n    propertyArray.push({\n      name: field.name,\n      attribute,\n      description: makeMarkdownFriendly(field.description),\n      type: makeMarkdownFriendly(field.type.text),\n      privacy: field.privacy,\n      default: makeMarkdownFriendly(defaultVal),\n    });\n  }\n  return {properties, reactiveProperties};\n}\n\n/**\n * These are substrings that we do not want to convert to kebab case. For\n * example, we want to keep tabIndex as tabindex attribute and not convert it to\n * tab-index.\n */\nconst SUBSTRINGS_TO_NOT_KEBAB = new Set(['tabIndex']);\n\n/**\n * Converts a snakeCase property name to a kebab-case attribute name.\n *\n * @param propertyName The snakeCase property name to convert to an attribute\n * @returns A kebab case attribute name.\n */\nfunction nameToAttribute(propertyName: string) {\n  for (const substring of SUBSTRINGS_TO_NOT_KEBAB) {\n    propertyName.replace(substring, substring.toLowerCase());\n  }\n\n  // Camel case to kebab case taken from Polymer source\n  // https://github.com/Polymer/polymer/blob/1e8b246d01ea99adba305ea04c45d26da31f68f1/lib/utils/case-map.js#L45\n  return propertyName.replace(/([A-Z])/g, '-$1').toLowerCase();\n}\n\n/**\n * These are methods we do not want to expose on the API docs.\n */\nconst METHODS_TO_IGNORE = new Set([\n  'attributeChangedCallback',\n  'connectedCallback',\n  'disconnectedCallback',\n  'update',\n  'render',\n  'firstUpdated',\n  'updated',\n  'focus',\n  'blur',\n]);\n\n/**\n * Analyzes the methods of a LitElement class and returns information about the\n * methods of the LitElement class in a format useful for API documentation\n * generation.\n *\n * @param classDeclaration The LitElement class declaration from which to\n *     analyze and format the method data.\n * @returns The information about the methods of the LitElement class.\n */\nexport function analyzeMethods(\n  classDeclaration: LitElementExport | LitElementDeclaration | ClassDeclaration,\n) {\n  const methods: MdMethodInfo[] = [];\n  for (const method of classDeclaration.methods) {\n    // Skip methods we decided to skip and symbols\n    if (METHODS_TO_IGNORE.has(method.name) || method.name.includes('[')) {\n      continue;\n    }\n\n    methods.push({\n      name: method.name,\n      description: makeMarkdownFriendly(method.description),\n      privacy: method.privacy,\n      parameters: method.parameters.map((parameter) => ({\n        name: parameter.name,\n        summary: makeMarkdownFriendly(parameter.summary),\n        description: makeMarkdownFriendly(parameter.description),\n        type: makeMarkdownFriendly(parameter.type.text),\n        default: parameter.default,\n      })),\n      returns: makeMarkdownFriendly(method.return?.type.text),\n    });\n  }\n\n  return methods;\n}\n\n/**\n * Analyzes the events dispatched by a LitElement class and returns information\n * about the events dispatched by the LitElement class in a format useful for\n * API documentation generation. NOTE if --buubbles or --composed is in the\n * event description, it will be removed from the description and the bubbles\n * and composed properties will be set to true.\n *\n * @param classDeclaration The LitElement class declaration from which to\n *     analyze and format the event data.\n * @returns The information about the events dispatched by the LitElement class.\n */\nexport function analyzeEvents(\n  classDeclaration: LitElementExport | LitElementDeclaration,\n): MdEventInfo[] {\n  const events: MdEventInfo[] = [];\n  const eventsKeys = classDeclaration.events.keys();\n\n  for (const eventName of eventsKeys) {\n    const event = classDeclaration.events.get(eventName);\n    let description = event.description;\n    const bubbles = description?.includes('--bubbles') || false;\n    const composed = description?.includes('--composed') || false;\n\n    // Remove the --bubbles and --composed from the description\n    description = description?.replace(/\\s*\\-\\-bubbles\\s*/g, '');\n    description = description?.replace(/\\s*\\-\\-composed\\s*/g, '');\n    description = makeMarkdownFriendly(description);\n\n    events.push({\n      name: eventName,\n      description,\n      bubbles,\n      composed,\n      type: makeMarkdownFriendly(event?.type?.text),\n    });\n  }\n  return events;\n}\n\n/**\n * Attempts to make a string to be friendly to be inserted into a markdown\n * table. This includes replacing newlines with `<br>`, replacing | with \\\\| and\n * replacing multiple spaces with a single space.\n *\n * @param text The text to make markdown friendly.\n * @returns The text transformed to friendly to markdown tables, or undefined if\n * the text is undefined.\n */\nexport function makeMarkdownFriendly(text?: string) {\n  if (!text) return undefined;\n\n  text = text.trim();\n  // create a newline marker so i don't have to deal with regex flags\n  text = text.replaceAll('\\n', '<newline>');\n  // keep double newlines\n  text = text.replaceAll(/<newline>\\s*<newline>/g, '<br>');\n  // replace single newlines with a space\n  text = text.replaceAll('<newline>', ' ');\n  text = text.replaceAll('|', '\\\\|');\n  text = text.replaceAll(/\\s+/g, ' ');\n  // remove any newly created newline spaces at the start and end\n  text = text.trim();\n\n  return text;\n}\n"
  },
  {
    "path": "scripts/analyzer/element-docs-map.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {COMPONENT_CUSTOM_ELEMENTS} from '../component-custom-elements.js';\n\n/**\n * A map of Markdown documentation file name to element entrypoints associated\n * with that documentation.\n */\nexport const docsToElementMapping: {[key: string]: readonly string[]} = {\n  'button.md': COMPONENT_CUSTOM_ELEMENTS.button,\n  'checkbox.md': COMPONENT_CUSTOM_ELEMENTS.checkbox,\n  'chip.md': COMPONENT_CUSTOM_ELEMENTS.chips,\n  'dialog.md': COMPONENT_CUSTOM_ELEMENTS.dialog,\n  'divider.md': COMPONENT_CUSTOM_ELEMENTS.divider,\n  'elevation.md': COMPONENT_CUSTOM_ELEMENTS.elevation,\n  'fab.md': COMPONENT_CUSTOM_ELEMENTS.fab,\n  'focus-ring.md': COMPONENT_CUSTOM_ELEMENTS.focus,\n  'icon-button.md': COMPONENT_CUSTOM_ELEMENTS.iconButton,\n  'icon.md': COMPONENT_CUSTOM_ELEMENTS.icon,\n  'list.md': COMPONENT_CUSTOM_ELEMENTS.list,\n  'menu.md': COMPONENT_CUSTOM_ELEMENTS.menu,\n  'progress.md': COMPONENT_CUSTOM_ELEMENTS.progress,\n  'radio.md': COMPONENT_CUSTOM_ELEMENTS.radio,\n  'ripple.md': COMPONENT_CUSTOM_ELEMENTS.ripple,\n  'slider.md': COMPONENT_CUSTOM_ELEMENTS.slider,\n  'switch.md': COMPONENT_CUSTOM_ELEMENTS.switch,\n  'tabs.md': COMPONENT_CUSTOM_ELEMENTS.tabs,\n  'text-field.md': COMPONENT_CUSTOM_ELEMENTS.textField,\n  'select.md': COMPONENT_CUSTOM_ELEMENTS.select,\n};\n"
  },
  {
    "path": "scripts/analyzer/markdown-tree-builder.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A class that represents a markown table as column titles and rows. The\n * `toString()` method outputs a markdown-compatible table.\n */\nexport class MarkdownTable {\n  private readonly rowsInternal: string[][] = [];\n\n  /**\n   * @param columnsInternal The column titles of the table.\n   */\n  constructor(private readonly columnsInternal: string[]) {}\n\n  /**\n   * The columns of the table.\n   */\n  get columns() {\n    return this.columnsInternal;\n  }\n\n  /**\n   * The rows of the table. (add rows with the `addRow()` method)\n   */\n  get rows() {\n    return this.rowsInternal;\n  }\n\n  /**\n   * Adds a row to the table. The row must be the same length as the number of\n   * columns and be in order of the provided columns.\n   *\n   * @param row The row to add to the table. Must be the same length as the\n   * number of columns.\n   */\n  addRow(row: string[]) {\n    if (row.length !== this.columnsInternal.length) {\n      throw new Error(\n        `Row length (${row.length}) must match column length (${this.columnsInternal.length})`\n      );\n    }\n\n    this.rowsInternal.push(row);\n  }\n\n  /**\n   * Generates a markdown-compatible table from the columns and rows provided.\n   *\n   * @returns A markdown-compatible table.\n   */\n  toString() {\n    const headerRow = `| ${this.columnsInternal.join(' | ')} |`;\n    const dividerRow = `| ${this.columnsInternal\n      .map(() => '---')\n      .join(' | ')} |`;\n    const rows = this.rowsInternal\n      .map((row) => `| ${row.join(' | ')} |`)\n      .join('\\n');\n    return `<!-- mdformat off(autogenerated might break rendering in catalog) -->\n\n${headerRow}\n${dividerRow}\n${rows}\n\n<!-- mdformat on(autogenerated might break rendering in catalog) -->`;\n  }\n}\n"
  },
  {
    "path": "scripts/analyzer/update-docs.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  AbsolutePath,\n  Analyzer,\n  createPackageAnalyzer,\n} from '@lit-labs/analyzer/package-analyzer.js';\nimport * as fs from 'fs/promises';\nimport * as path from 'path';\n\nimport {\n  analyzeElementApi,\n  MdMethodParameterInfo,\n  MdModuleInfo,\n  MdPropertyInfo,\n} from './analyze-element.js';\nimport {docsToElementMapping} from './element-docs-map.js';\nimport {MarkdownTable} from './markdown-tree-builder.js';\n\ninterface MarkdownTableSection {\n  name: string;\n  table: MarkdownTable;\n}\n\ninterface ElementTableSection {\n  className: string;\n  customElementName: string;\n  summary: string;\n  description: string;\n  tables: Array<{name: string; table: MarkdownTable}>;\n}\n\n/**\n * The main side-effect function of this module.\n *\n * It will analyze the element files in `element-docs-map.ts` and update the\n * markdown file's API section with the latest API information. It will replace\n * the code in between the `<!-- auto-generated API docs start -->` and\n * `<!-- auto-generated API docs end -->` comments.\n */\nasync function updateApiDocs() {\n  const packagePath = path.resolve('.');\n  // Analyzes the entire material-web repository.\n  const analyzer = createPackageAnalyzer(packagePath as AbsolutePath);\n  const documentationFileNames = Object.keys(docsToElementMapping);\n\n  const filesWritten: Array<Promise<void>> = [];\n\n  // Update all the documentation files in parallel\n  for (const docFileName of documentationFileNames) {\n    filesWritten.push(\n      updateDocFileApiSection(docFileName, analyzer, packagePath),\n    );\n  }\n\n  // Wait for all the files to be written\n  await Promise.all(filesWritten);\n}\n\n/**\n * Updates the API section of an individual documentation file with the latest\n * API information of the related elements in the `element-docs-map.ts` file.\n *\n * @param docFileName The name of the documentation file to update.\n * @param analyzer The instance of the package analyzer from which to pull\n *     module information.\n * @param packagePath The path of the package root.\n *\n * @returns A promise that resolves when the file has been updated.\n */\nasync function updateDocFileApiSection(\n  docFileName: string,\n  analyzer: Analyzer,\n  packagePath: string,\n) {\n  const elementEntrypoints = docsToElementMapping[docFileName];\n  // This is a data structure that describes an element and its associated API\n  // tables. e.g. a single section for MdFilledButton represents MdFilledButton\n  // and it's associated Property, Methods, and Events tables.\n  const elementTableSections: ElementTableSection[] = [];\n\n  for (const elementEntrypoint of elementEntrypoints) {\n    elementTableSections.push(\n      generateTableSection(elementEntrypoint, packagePath, analyzer),\n    );\n  }\n\n  const documentationFileContents = await fs.readFile(\n    path.resolve(packagePath, 'docs', 'components', docFileName),\n  );\n\n  const updatedFileContents = insertMarkdownTables(\n    documentationFileContents.toString(),\n    elementTableSections,\n  );\n\n  await fs.writeFile(\n    path.resolve(packagePath, 'docs', 'components', docFileName),\n    updatedFileContents,\n  );\n}\n\n/**\n * Generates the API table section for a single element.\n *\n * @param elementEntrypoint The file path of where an element is defined.\n * @param packagePath The path of the package root.\n * @param analyzer An instance of the package analyzer from which to pull module\n *     information.\n *\n * @returns The table section of an element. e.g. MdFilledButton's table section\n * would be the element class name, summary, description, and the API tables\n * associated with this element's section e.g. Properties, Methods, and Events.\n */\nfunction generateTableSection(\n  elementEntrypoint: string,\n  packagePath: string,\n  analyzer: Analyzer,\n): ElementTableSection {\n  const elementDoc = analyzeElementApi(\n    analyzer,\n    path.resolve(packagePath, elementEntrypoint),\n  );\n  const tables: MarkdownTableSection[] = [];\n\n  const propertiesTable = generateFieldMarkdownTable(elementDoc);\n  const methodsTable = generateMethodMarkdownTable(elementDoc);\n  const eventsTable = generateEventsMarkdownTable(elementDoc);\n\n  if (propertiesTable.rows.length > 0) {\n    tables.push({name: 'Properties', table: propertiesTable});\n  }\n\n  if (methodsTable.rows.length > 0) {\n    tables.push({name: 'Methods', table: methodsTable});\n  }\n\n  if (eventsTable.rows.length > 0) {\n    tables.push({name: 'Events', table: eventsTable});\n  }\n\n  return {\n    className: elementDoc.className,\n    customElementName: elementDoc.customElementName || '',\n    summary: elementDoc.summary ?? '',\n    description: elementDoc.description ?? '',\n    tables,\n  };\n}\n\n/**\n * Given an object that represents a row in a markdown table, and another object\n * that represents the same row in the table but for the superclass, this\n * function will update the subclass row with the values of the superclass row\n * if they are not defined in the subclass row.\n *\n * @param subclassRow The row object that will be updated with the values of the\n *     superClassRow.\n * @param superClassRow The row object of the superclass that will be used to\n *     update the subclassRow.\n * @returns The mutated subclass row object.\n */\nfunction updateRow<T extends {[key: string]: unknown}>(\n  subclassRow: T,\n  superClassRow: T,\n) {\n  const keys = Object.keys(superClassRow) as Array<keyof T>;\n  // update the row values if they are not defined\n  for (const key of keys) {\n    if (subclassRow[key] === undefined) {\n      subclassRow[key] = superClassRow[key];\n    }\n  }\n\n  return subclassRow;\n}\n\n/**\n * Generates a markdown table of all the public properties of an element.\n *\n * @param element The analyzed element documentation module from which to\n * generate the properties table.\n * @returns A Markdown table where the rows are thepubli  properties of the\n * element. It is organized by inheritance order and with all reactive\n * properties listed first, then all other properties.\n */\nfunction generateFieldMarkdownTable(element: MdModuleInfo): MarkdownTable {\n  const propertiesTable = new MarkdownTable([\n    'Property',\n    'Attribute',\n    'Type',\n    'Default',\n    'Description',\n  ]);\n  const fieldNameOrder: string[] = [];\n  const fieldToRow = new Map<\n    string,\n    {\n      name: string;\n      attribute?: string;\n      type?: string;\n      default: string;\n      description?: string;\n    }\n  >();\n\n  /**\n   * Adds rows to the fieldToRow map and fieldNameOrder array but deduplicates\n   * overriden fields and updates the info for the row only if it's not defined\n   * in the subclass.\n   */\n  const generateRow = (property: MdPropertyInfo) => {\n    if (property.privacy !== 'public') {\n      return;\n    }\n\n    let defaultVal = property.default;\n    if (defaultVal && property.default.includes('=>')) {\n      defaultVal = 'function { ... }';\n    }\n\n    const row = {\n      name: property.name,\n      attribute: property.attribute,\n      type: property.type,\n      default: defaultVal,\n      description: property.description,\n    };\n\n    const isPropertyInSubclass = fieldToRow.has(property.name);\n\n    if (isPropertyInSubclass) {\n      const subclassRow = fieldToRow.get(property.name);\n      updateRow(subclassRow, row);\n      return;\n    }\n\n    fieldToRow.set(property.name, row);\n    fieldNameOrder.push(property.name);\n  };\n\n  let currentClass = element;\n\n  // Append reactive properties first in inheritance order\n  while (currentClass) {\n    for (const property of currentClass.reactiveProperties) {\n      generateRow(property);\n    }\n\n    currentClass = currentClass.superClass;\n  }\n\n  // Reset and append the non-reactive properties in inheritance order.\n  currentClass = element;\n\n  while (currentClass) {\n    for (const property of currentClass.properties) {\n      generateRow(property);\n    }\n\n    currentClass = currentClass.superClass;\n  }\n\n  for (const property of fieldNameOrder) {\n    const rowObj = fieldToRow.get(property);\n    propertiesTable.addRow([\n      `\\`${rowObj.name}\\``,\n      rowObj.attribute ? `\\`${rowObj.attribute}\\`` : '',\n      rowObj.type ? `\\`${rowObj.type}\\`` : '',\n      `\\`${rowObj.default}\\``,\n      rowObj.description ?? '',\n    ]);\n  }\n\n  return propertiesTable;\n}\n\n/**\n * Generates a markdown table of all the public methods of an element.\n *\n * @param element The analyzed element documentation module from which to\n * generate the methods table.\n * @returns A Markdown table where the rows are the public methods of the\n * element.\n */\nfunction generateMethodMarkdownTable(element: MdModuleInfo): MarkdownTable {\n  const methodsTable = new MarkdownTable([\n    'Method',\n    'Parameters',\n    'Returns',\n    'Description',\n  ]);\n  const methodNameOrder: string[] = [];\n  const methodToRow = new Map<\n    string,\n    {\n      name: string;\n      parameters: MdMethodParameterInfo[];\n      returns?: string;\n      description?: string;\n    }\n  >();\n\n  let currentClass = element;\n  while (currentClass) {\n    for (const method of currentClass.methods) {\n      if (method.privacy !== 'public') {\n        continue;\n      }\n\n      const row = {\n        name: method.name,\n        parameters: method.parameters,\n        returns: method.returns,\n        description: method.description,\n      };\n\n      const isMethodInSubclass = methodToRow.has(method.name);\n\n      if (isMethodInSubclass) {\n        const subclassRow = methodToRow.get(method.name);\n        updateRow(subclassRow, row);\n        continue;\n      }\n\n      methodToRow.set(method.name, row);\n      methodNameOrder.push(method.name);\n    }\n\n    currentClass = currentClass.superClass;\n  }\n\n  for (const methodName of methodNameOrder) {\n    const rowObj = methodToRow.get(methodName);\n    methodsTable.addRow([\n      `\\`${rowObj.name}\\``,\n      rowObj.parameters.map((p) => `\\`${p.name}\\``).join(', ') || '_None_',\n      `\\`${rowObj.returns ?? 'void'}\\``,\n      rowObj.description ?? '',\n    ]);\n  }\n\n  return methodsTable;\n}\n\n/**\n * Generates a markdown table of all the __documented__ events of an element.\n *\n * @param element The analyzed element documentation module from which to\n * generate the events table.\n * @returns A Markdown table where the rows are the events of the element.\n */\nfunction generateEventsMarkdownTable(element: MdModuleInfo): MarkdownTable {\n  const eventsTable = new MarkdownTable([\n    'Event',\n    'Type',\n    '[Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles)',\n    '[Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed)',\n    'Description',\n  ]);\n  const eventNameOrder: string[] = [];\n  const eventToRow = new Map<\n    string,\n    {\n      name: string;\n      type?: string;\n      bubbles: boolean;\n      composed: boolean;\n      description?: string;\n    }\n  >();\n\n  let currentClass = element;\n\n  while (currentClass) {\n    for (const event of currentClass.events) {\n      const row = {\n        name: event.name,\n        type: event.type,\n        bubbles: event.bubbles,\n        composed: event.composed,\n        description: event.description,\n      };\n\n      const isEventInSubclass = eventToRow.has(event.name);\n\n      if (isEventInSubclass) {\n        const subclassRow = eventToRow.get(event.name);\n        updateRow(subclassRow, row);\n        continue;\n      }\n\n      eventToRow.set(event.name, row);\n      eventNameOrder.push(event.name);\n    }\n\n    currentClass = currentClass.superClass;\n  }\n\n  for (const eventName of eventNameOrder) {\n    const rowObj = eventToRow.get(eventName);\n    eventsTable.addRow([\n      `\\`${rowObj.name}\\``,\n      rowObj.type ? `\\`${rowObj.type}\\`` : '`Event`',\n      rowObj.bubbles ? 'Yes' : 'No',\n      rowObj.composed ? 'Yes' : 'No',\n      rowObj.description ?? '',\n    ]);\n  }\n\n  return eventsTable;\n}\n\n/**\n * Returns the updated documentation file contents with the API section filled\n * with the _Markdownified_ API table sections.\n *\n * @param fileContents The stringified contents of a documentation file.\n * @param elementTableSections An array of elements and their associated\n * API tables to insert into the documentation file.\n * @returns The updated documentation file contents with the API section.\n */\nfunction insertMarkdownTables(\n  fileContents: string,\n  elementTableSections: ElementTableSection[],\n) {\n  // A file that has no tables to insert should have its API section cleared.\n  const hasContent = elementTableSections.reduce((hasContent, element) => {\n    return hasContent || element.tables.length > 0;\n  }, false);\n\n  // If there is no content, clear the api section.\n  if (!hasContent) {\n    return replaceFileContents(fileContents);\n  }\n\n  const tablesStrings = stringifyMarkdownTableSections(elementTableSections);\n\n  return replaceFileContents(fileContents, tablesStrings);\n}\n\n/**\n * Replaces the fileContents' API section with the provided tablesStrings. If\n * tablesStrings is not provided, the API section will be cleared.\n *\n * @param fileContents The stringified contents of a documentation file.\n * @param tablesStrings The stringified markdown tables to insert into the\n * documentation file. If not provided, the API section will be cleared.\n * @returns The updated documentation file contents with the API section.\n */\nfunction replaceFileContents(fileContents: string, tablesStrings?: string) {\n  const injectionPointRegex =\n    /<!-- auto-generated API docs start -->.*<!-- auto-generated API docs end -->/s;\n\n  if (!tablesStrings) {\n    return fileContents.replace(\n      injectionPointRegex,\n      `<!-- auto-generated API docs start -->\n<!-- auto-generated API docs end -->`,\n    );\n  }\n\n  return fileContents.replace(\n    injectionPointRegex,\n    `<!-- auto-generated API docs start -->\n\n## API\n\n${tablesStrings}\n<!-- auto-generated API docs end -->`,\n  );\n}\n\n/**\n * Stringifies the markdown table sections of all the elements and their\n * associated API tables in markdown.\n *\n * @param elements The element classes and their associated API tables to\n * stringify into markdown.\n * @returns A stringified markdown table section of all the elements and their\n * associated API tables.\n */\nfunction stringifyMarkdownTableSections(elements: ElementTableSection[]) {\n  let tablesStrings = '';\n\n  for (const element of elements) {\n    const {className, tables, customElementName} = element;\n    tablesStrings += `\n### ${className}${\n      customElementName ? ` <code>&lt;${customElementName}&gt;</code>` : ''\n    }\n${tables\n  .map(\n    ({name, table}) => `\n#### ${name}\n\n${table.toString()}\n`,\n  )\n  .join('')}`;\n  }\n\n  return tablesStrings;\n}\n\n// Run the main script\nawait updateApiDocs();\n"
  },
  {
    "path": "scripts/component-custom-elements.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A map of components and their custom element TypeScript entrypoints.\n */\nexport const COMPONENT_CUSTOM_ELEMENTS = {\n  button: [\n    'button/elevated-button.ts',\n    'button/filled-button.ts',\n    'button/filled-tonal-button.ts',\n    'button/outlined-button.ts',\n    'button/text-button.ts',\n  ],\n  checkbox: ['checkbox/checkbox.ts'],\n  chips: [\n    'chips/chip-set.ts',\n    'chips/assist-chip.ts',\n    'chips/filter-chip.ts',\n    'chips/input-chip.ts',\n    'chips/suggestion-chip.ts',\n  ],\n  dialog: ['dialog/dialog.ts'],\n  divider: ['divider/divider.ts'],\n  elevation: ['elevation/elevation.ts'],\n  fab: ['fab/fab.ts', 'fab/branded-fab.ts'],\n  field: ['field/filled-field.ts', 'field/outlined-field.ts'],\n  focus: ['focus/md-focus-ring.ts'],\n  icon: ['icon/icon.ts'],\n  iconButton: [\n    'iconbutton/icon-button.ts',\n    'iconbutton/filled-icon-button.ts',\n    'iconbutton/filled-tonal-icon-button.ts',\n    'iconbutton/outlined-icon-button.ts',\n  ],\n  list: ['list/list.ts', 'list/list-item.ts'],\n  menu: ['menu/menu.ts', 'menu/menu-item.ts', 'menu/sub-menu.ts'],\n  progress: ['progress/linear-progress.ts', 'progress/circular-progress.ts'],\n  radio: ['radio/radio.ts'],\n  ripple: ['ripple/ripple.ts'],\n  select: [\n    'select/filled-select.ts',\n    'select/outlined-select.ts',\n    'select/select-option.ts',\n  ],\n  slider: ['slider/slider.ts'],\n  switch: ['switch/switch.ts'],\n  tabs: ['tabs/tabs.ts', 'tabs/primary-tab.ts', 'tabs/secondary-tab.ts'],\n  textField: [\n    'textfield/filled-text-field.ts',\n    'textfield/outlined-text-field.ts',\n  ],\n} as const;\n"
  },
  {
    "path": "scripts/css-to-ts.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport * as fs from 'fs';\n\nconst cssFilePath = process.argv[2];\nif (!cssFilePath) {\n  throw new Error(`Usage: node scripts/css-to-ts.js <input.css> [output.ts]`);\n}\n\nconst tsFilePath = process.argv[3] || cssFilePath.replace('.css', '.ts');\nconst cssContent = fs\n  .readFileSync(cssFilePath, {encoding: 'utf8'})\n  // Remove source map comments since the css is embedded.\n  // \"/*# sourceMappingURL=checkbox-styles.css.map */\"\n  .replace(/\\/\\*#\\ sourceMappingURL=[^\\*]+ \\*\\//, '');\n\nfs.writeFileSync(\n  tsFilePath,\n  `/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ${cssFilePath}.\nimport {css} from 'lit';\nexport const styles = css\\`${cssContent}\\`;\nexport default styles.styleSheet!;\n`,\n);\n"
  },
  {
    "path": "scripts/size/bundle-size.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport multiEntry from '@rollup/plugin-multi-entry';\nimport nodeResolve from '@rollup/plugin-node-resolve';\nimport terser from '@rollup/plugin-terser';\nimport {rollup} from 'rollup';\nimport {promisify} from 'util';\nimport {gzip} from 'zlib';\n\nconst gzipPromise = promisify(gzip);\n\nexport interface Bundle {\n  name: string;\n  inputs: string[];\n}\n\nexport interface BundleSize {\n  name: string;\n  size: Size;\n  inputs: InputSize[];\n}\n\nexport interface InputSize {\n  input: string;\n  size: Size;\n}\n\nexport interface Size {\n  raw: number;\n  css: number;\n  gzip: number;\n}\n\nexport async function getBundleSize(bundle: Bundle): Promise<BundleSize> {\n  const bundleSize = await computeBundleSize(bundle.inputs);\n  let inputSizes: InputSize[];\n  if (bundle.inputs.length === 1) {\n    // If there's only one input, we don't need to re-generate the bundle.\n    inputSizes = [{input: bundle.inputs[0], size: bundleSize}];\n  } else {\n    // Include computed bundle size for individual inputs.\n    inputSizes = await Promise.all(\n      bundle.inputs.map(async (input) => {\n        return {\n          input,\n          size: await computeBundleSize(input),\n        };\n      }),\n    );\n  }\n\n  return {\n    name: bundle.name,\n    size: bundleSize,\n    inputs: inputSizes,\n  };\n}\n\nasync function computeBundleSize(input: string | string[]): Promise<Size> {\n  const rollupBundle = await rollup({\n    input,\n    external: [/node_modules/],\n    plugins: [multiEntry(), nodeResolve(), terser()],\n  });\n\n  let code = '';\n  try {\n    const {output} = await rollupBundle.generate({});\n    code = output[0].code;\n  } finally {\n    rollupBundle.close();\n  }\n\n  const litCssTagNameMatch = code.match(/css\\s*as\\s*(\\w+)/);\n  if (!litCssTagNameMatch) {\n    throw new Error(\"Cannot find `import { css as X } from 'lit'`\");\n  }\n\n  const litCssTagName = litCssTagNameMatch[1];\n  const codeWithoutCss = code.replaceAll(\n    new RegExp(`${litCssTagName}\\`([^\\`]*)\\``, 'g'),\n    '',\n  );\n\n  const encoder = new TextEncoder();\n  const codeSize = encoder.encode(code).length;\n  const codeSizeWithoutCss = encoder.encode(codeWithoutCss).length;\n  const cssSize = codeSize - codeSizeWithoutCss;\n  const gzipSize = (await gzipPromise(code)).length;\n  return {\n    raw: codeSize,\n    css: cssSize,\n    gzip: gzipSize,\n  };\n}\n"
  },
  {
    "path": "scripts/size/update-size.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport * as fs from 'fs/promises';\n\nimport {MarkdownTable} from '../analyzer/markdown-tree-builder.js';\nimport {COMPONENT_CUSTOM_ELEMENTS} from '../component-custom-elements.js';\nimport {Bundle, Size, getBundleSize} from './bundle-size.js';\n\n// The bundles to track sizes for.\n\nconst bundles: Bundle[] = [\n  {\n    name: 'all',\n    inputs: ['all.js'],\n  },\n  {\n    name: 'common',\n    inputs: ['common.js'],\n  },\n  ...(\n    Object.keys(COMPONENT_CUSTOM_ELEMENTS) as Array<\n      keyof typeof COMPONENT_CUSTOM_ELEMENTS\n    >\n  ).map((component) => {\n    const tsCustomElementPaths = COMPONENT_CUSTOM_ELEMENTS[component];\n    const jsCustomElementPaths = tsCustomElementPaths.map((tsPath) =>\n      tsPath.replace(/\\.ts$/, '.js'),\n    );\n\n    return {\n      name: component,\n      inputs: jsCustomElementPaths,\n    };\n  }),\n];\n\n// Compute bundle sizes.\n\nconst bundleSizes = await Promise.all(\n  bundles.map((bundle) => getBundleSize(bundle)),\n);\n\n// Create a markdown table with size data.\n\nconst columns = ['Component', 'gzip', 'minified', '*% CSS*', 'Import'];\nconst rows: string[][] = [];\nfor (const {name, size, inputs} of bundleSizes) {\n  rows.push([\n    `**${camelToSentenceCase(name)}**`,\n    `**${bytesToString(size.gzip)}**`,\n    bytesToString(size.raw),\n    getCssPercent(size),\n    inputs.length === 1 ? getImport(inputs[0].input) : '',\n  ]);\n\n  if (inputs.length > 1) {\n    rows.push(\n      ...inputs.map((input) => {\n        return [\n          '',\n          bytesToString(input.size.gzip),\n          bytesToString(input.size.raw),\n          getCssPercent(input.size),\n          getImport(input.input),\n        ];\n      }),\n    );\n  }\n}\n\nconst markdownTable = new MarkdownTable(columns);\nfor (const row of rows) {\n  markdownTable.addRow(row);\n}\n\n// Update markdown file.\n\nconst markdownContent = await fs.readFile('docs/size.md', {encoding: 'utf8'});\nconst updateTrackingStart = '<!-- MWC_UPDATE_TRACKING_START -->';\nconst updateTrackingEnd = '<!-- MWC_UPDATE_TRACKING_END -->';\n\nconst now = new Date();\nconst nowString = now.toISOString().split('T')[0];\n\nconst newMarkdownContent = [\n  markdownContent.substring(0, markdownContent.indexOf(updateTrackingStart)),\n  updateTrackingStart,\n  '\\n\\n',\n  `<sub>Last updated ${nowString}.</sub>\\n\\n`,\n  markdownTable.toString(),\n  '\\n\\n',\n  markdownContent.substring(markdownContent.indexOf(updateTrackingEnd)),\n].join('');\n\nawait fs.writeFile('docs/size.md', newMarkdownContent);\n\n// Text formatting functions for markdown table.\n\nfunction getImport(input: string) {\n  return `\\`@material/web/${input}\\``;\n}\n\nfunction getCssPercent(size: Size) {\n  return `*${Math.round((size.css / size.raw) * 100)}% CSS*`;\n}\n\nfunction bytesToString(bytes: number) {\n  return `${(Math.round(bytes / 100) / 10).toFixed(1)}kb`;\n}\n\nfunction camelToSentenceCase(value: string) {\n  const withSpaces = value.replaceAll(/([a-z])([A-Z])/g, '$1 $2');\n  return withSpaces[0].toUpperCase() + withSpaces.slice(1).toLowerCase();\n}\n"
  },
  {
    "path": "scripts/tsconfig.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"types\": [\"node\"],\n    \"allowSyntheticDefaultImports\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\"\n  },\n  \"exclude\": [\n    \"catalog\",\n    \"**/demo\"\n  ],\n  \"include\": [\"**/*\"]\n}\n"
  },
  {
    "path": "scripts/update-sass-ext-docs.ts",
    "content": "/**\n * @license\n * Copyright 2025 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport * as util from 'util';\n\n/**\n * A Sassdoc comment block.\n */\ninterface SassdocComment {\n  /**\n   * The content of the Sassdoc comment block, without the forward slashes\n   * (`///`).\n   */\n  content: string;\n  /**\n   * The Sass symbol the comment block is attached to (ex: `@function foo`,\n   * `@mixin bar`, `$baz`).\n   */\n  symbol: string;\n}\n\n/**\n * A sassdoc file.\n */\ninterface SassdocModule {\n  /**\n   * The Sass file's module name (ex: `foo-ext` for `_foo-ext.scss`).\n   */\n  name: string;\n  /**\n   * The Sassdoc comments in the file.\n   */\n  comments: SassdocComment[];\n}\n\nfunction parseSassFile(sassFile: string): SassdocModule {\n  const content = fs.readFileSync(sassFile, 'utf-8');\n\n  const comments: SassdocComment[] = [];\n  let sassdocLines: string[] = [];\n  for (const line of content.split('\\n')) {\n    if (line.startsWith('///')) {\n      sassdocLines.push(line.replace(/^\\/\\/\\/\\s?/, ''));\n      continue;\n    }\n\n    const symbolMatch = line.match(/(?:@function|@mixin)\\s*(\\$?[\\w-]+)/);\n    if (symbolMatch && sassdocLines.length) {\n      const symbol = symbolMatch[1];\n      // Ignore private documented symbols.\n      if (!symbol.startsWith('_')) {\n        comments.push({\n          symbol,\n          content: sassdocLines.join('\\n'),\n        });\n      }\n\n      sassdocLines = [];\n      continue;\n    }\n  }\n\n  return {\n    name: path.basename(sassFile).replace(/^_|\\.scss$/g, ''),\n    comments,\n  };\n}\n\nconst TWO_SPACES = '  ';\nconst FOUR_SPACES = '    ';\n\nfunction sassdocToMarkdown(\n  comment: SassdocComment,\n  moduleName: string,\n): string {\n  const header = `### \\`${comment.symbol}\\` {#${moduleName}.${comment.symbol}}\\n\\n`;\n  let markdown = '';\n\n  const lines = comment.content.split('\\n');\n  const annotations: string[] = [];\n  for (let i = 0; i < lines.length; i++) {\n    const line = lines[i];\n\n    const exampleMatch = line.match(/^@example(?:\\s-?(\\w+))?/);\n    if (exampleMatch) {\n      const exampleLines = [];\n      while (lines[i + 1] === '' || lines[i + 1]?.startsWith(TWO_SPACES)) {\n        exampleLines.push(lines[i + 1].replace(/^\\s\\s/, ''));\n        i++;\n      }\n\n      const exampleLang = exampleMatch[1] || 'scss';\n      const exampleMarkdown =\n        '```' + `${exampleLang}\\n` + exampleLines.join('\\n') + '```\\n\\n';\n      markdown += exampleMarkdown;\n      continue;\n    }\n\n    const annotationMatch = line.match(/^@(\\w+)/);\n    if (annotationMatch) {\n      const annotationLines = [line];\n      // Collect multi-line annotation lines.\n      while (lines[i + 1]?.startsWith(FOUR_SPACES)) {\n        annotationLines.push(lines[i + 1].trim());\n        i++;\n      }\n\n      // Annotations are listed at the end of the markdown.\n      annotations.push(annotationLines.join(' '));\n      continue;\n    }\n\n    markdown += `${line}\\n`;\n  }\n\n  const params = annotations\n    .filter((annotation) => annotation.startsWith('@param'))\n    .map((annotation) => annotation.match(/(\\$[\\w-]+)/)?.[1]);\n  const returnType = annotations\n    .find((annotation) => annotation.startsWith('@return'))\n    ?.match(/@return\\s{(\\w+)}/)?.[1];\n  const returnComment = returnType ? ` //=> ${returnType}` : '';\n  const signature =\n    '```scss\\n' +\n    `${moduleName}.${comment.symbol}(${params.join(', ')})${returnComment}` +\n    '\\n\\n' +\n    annotations.map((a) => `/// ${a}`).join('\\n') +\n    '\\n```\\n\\n';\n\n  return header + signature + markdown;\n}\n\nconst {values} = util.parseArgs({\n  options: {\n    input: {type: 'string'},\n    output: {type: 'string'},\n  },\n});\n\nif (!values.input || !values.output) {\n  throw new Error(\n    'Usage: update-sass-ext-docs --input=path/to/sass/ext/ --output=path/to/sass-ext.md',\n  );\n}\n\nconst outputPath = values.output;\nconst sassExtPath = values.input;\nconst sassdocModules = fs\n  .readdirSync(sassExtPath)\n  .filter(\n    (file) =>\n      file.startsWith('_') && file.endsWith('.scss') && !file.includes('test'),\n  )\n  .map((file) => parseSassFile(path.join(sassExtPath, file)));\n\nlet generatedDocs = ``;\nfor (const sassdocModule of sassdocModules) {\n  generatedDocs += `## \\`${sassdocModule.name}\\`\\n\\n`;\n  for (const comment of sassdocModule.comments) {\n    generatedDocs += sassdocToMarkdown(comment, sassdocModule.name);\n  }\n}\n\nconst mdContent = fs.readFileSync(outputPath, 'utf-8');\nconst MARKER = '<!-- generated_docs_start -->\\n';\nconst newMdContent =\n  mdContent.substring(0, mdContent.indexOf(MARKER)) +\n  MARKER +\n  '\\n' +\n  generatedDocs.trim() +\n  '\\n';\n\nfs.writeFileSync(outputPath, newMdContent);\n\nconsole.log('Updated sass-ext.md');\n"
  },
  {
    "path": "select/_filled-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-select' show theme;\n"
  },
  {
    "path": "select/_outlined-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/outlined-select' show theme;\n"
  },
  {
    "path": "select/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n  title,\n} from './material-collection.js';\nimport {\n  boolInput,\n  Knob,\n  numberInput,\n  selectDropdown,\n  textInput,\n} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Select',\n  [\n    new Knob('md-select', {ui: title()}),\n    new Knob('label', {ui: textInput(), defaultValue: 'Fruit'}),\n    new Knob('typeaheadDelay', {ui: numberInput(), defaultValue: 200}),\n    new Knob('quick', {ui: boolInput(), defaultValue: false}),\n    new Knob('required', {ui: boolInput(), defaultValue: false}),\n    new Knob('noAsterisk', {ui: boolInput(), defaultValue: false}),\n    new Knob('disabled', {ui: boolInput(), defaultValue: false}),\n    new Knob('errorText', {ui: textInput(), defaultValue: ''}),\n    new Knob('supportingText', {ui: textInput(), defaultValue: ''}),\n    new Knob('menuAlign', {\n      defaultValue: 'start' as const,\n      ui: selectDropdown<'start' | 'end'>({\n        options: [\n          {label: 'start', value: 'start'},\n          {label: 'end', value: 'end'},\n        ],\n      }),\n    }),\n    new Knob('menuPositioning', {\n      defaultValue: 'popover' as const,\n      ui: selectDropdown<'absolute' | 'fixed' | 'popover'>({\n        options: [\n          {label: 'popover', value: 'popover'},\n          {label: 'absolute', value: 'absolute'},\n          {label: 'fixed', value: 'fixed'},\n        ],\n      }),\n    }),\n    new Knob('clampMenuWidth', {ui: boolInput(), defaultValue: false}),\n    new Knob('error', {ui: boolInput(), defaultValue: false}),\n\n    new Knob('md-select Slots', {ui: title()}),\n    new Knob('slot=leading-icon', {ui: textInput(), defaultValue: ''}),\n    new Knob('slot=trailing-icon', {ui: textInput(), defaultValue: ''}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "select/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "select/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport '@material/web/select/select-option.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {html, nothing} from 'lit';\n\n/** Knob types for select stories. */\nexport interface StoryKnobs {\n  'md-select': void;\n  label: string;\n  typeaheadDelay: number;\n  quick: boolean;\n  required: boolean;\n  noAsterisk: boolean;\n  disabled: boolean;\n  errorText: string;\n  supportingText: string;\n  error: boolean;\n  clampMenuWidth: boolean;\n  menuAlign: 'start' | 'end' | undefined;\n  menuPositioning: 'absolute' | 'fixed' | 'popover' | undefined;\n\n  'md-select Slots': void;\n  'slot=leading-icon': string;\n  'slot=trailing-icon': string;\n}\n\nconst selects: MaterialStoryInit<StoryKnobs> = {\n  name: 'Selects',\n  render(knobs) {\n    return html`\n      <div style=\"display: flex; gap: 16px;\">\n        <md-filled-select\n          .label=${knobs.label}\n          .quick=${knobs.quick}\n          .required=${knobs.required}\n          .noAsterisk=${knobs.noAsterisk}\n          .disabled=${knobs.disabled}\n          .errorText=${knobs.errorText}\n          .supportingText=${knobs.supportingText}\n          .clampMenuWidth=${knobs.clampMenuWidth}\n          .menuAlign=${knobs.menuAlign!}\n          .menuPositioning=${knobs.menuPositioning!}\n          .typeaheadDelay=${knobs.typeaheadDelay}\n          .error=${knobs.error}>\n          ${renderIcon(knobs['slot=leading-icon'], 'leading-icon')}\n          ${renderIcon(knobs['slot=trailing-icon'], 'trailing-icon')}\n          ${renderItems()}\n        </md-filled-select>\n\n        <md-outlined-select\n          .label=${knobs.label}\n          .quick=${knobs.quick}\n          .required=${knobs.required}\n          .noAsterisk=${knobs.noAsterisk}\n          .disabled=${knobs.disabled}\n          .errorText=${knobs.errorText}\n          .supportingText=${knobs.supportingText}\n          .clampMenuWidth=${knobs.clampMenuWidth}\n          .menuAlign=${knobs.menuAlign!}\n          .menuPositioning=${knobs.menuPositioning!}\n          .typeaheadDelay=${knobs.typeaheadDelay}\n          .error=${knobs.error}>\n          ${renderIcon(knobs['slot=leading-icon'], 'leading-icon')}\n          ${renderIcon(knobs['slot=trailing-icon'], 'trailing-icon')}\n          ${renderItems()}\n        </md-outlined-select>\n      </div>\n    `;\n  },\n};\n\nfunction renderIcon(iconName: string, slot: 'leading-icon' | 'trailing-icon') {\n  return iconName\n    ? html`<md-icon slot=${slot}><span>${iconName}</span></md-icon>`\n    : nothing;\n}\n\nfunction renderItems() {\n  return html` <md-select-option aria-label=\"blank\" value=\"\"></md-select-option>\n    <md-select-option selected value=\"apple\">\n      <div slot=\"headline\">Apple</div>\n    </md-select-option>\n    <md-select-option value=\"apricot\">\n      <div slot=\"headline\">Apricot</div>\n    </md-select-option>\n    <md-select-option value=\"apricot\">\n      <div slot=\"headline\">Apricots</div>\n    </md-select-option>\n    <md-select-option value=\"avocado\">\n      <div slot=\"headline\">Avocado</div>\n    </md-select-option>\n    <md-select-option value=\"green_apple\">\n      <div slot=\"headline\">Green Apple</div>\n    </md-select-option>\n    <md-select-option value=\"green_grapes\">\n      <div slot=\"headline\">Green Grapes</div>\n    </md-select-option>\n    <md-select-option value=\"olive\">\n      <div slot=\"headline\">Olive</div>\n    </md-select-option>\n    <md-select-option value=\"orange\">\n      <div slot=\"headline\">Orange</div>\n    </md-select-option>`;\n}\n\n/** Select stories. */\nexport const stories = [selects];\n"
  },
  {
    "path": "select/filled-select.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledSelect} from './internal/filled-select.js';\nimport {styles} from './internal/filled-select-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-select': MdFilledSelect;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the \"filled\"\n * variant.\n *\n * @example\n * ```html\n * <md-filled-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-filled-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-select')\nexport class MdFilledSelect extends FilledSelect {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles];\n}\n"
  },
  {
    "path": "select/harness.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {FieldHarness} from '../field/harness.js';\nimport {Field} from '../field/internal/field.js';\nimport {Harness} from '../testing/harness.js';\n\nimport {Select} from './internal/select.js';\nimport {SelectOptionHarness} from './internal/selectoption/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class SelectHarness extends Harness<Select> {\n  protected getField() {\n    return this.element.renderRoot.querySelector('.field') as Field;\n  }\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.getField();\n  }\n\n  override async startHover() {\n    const field = await this.getField();\n    const element = await new SelectFieldHardness(\n      field,\n    ).getInteractiveElement();\n    this.simulateStartHover(element);\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.options.map(\n      (item) => new SelectOptionHarness(item as typeof item & LitElement),\n    );\n  }\n\n  async click() {\n    const field = await this.getField();\n    field.click();\n  }\n\n  async clickOption(index: number) {\n    const menu = this.element.renderRoot.querySelector('md-menu')!;\n    if (!menu.open) {\n      console.warn(\n        'Internal menu is not open. Try calling SelectHarness.prototype.click()',\n      );\n    }\n    (await this.getItems()[index].getInteractiveElement()).click();\n  }\n\n  get isOpen() {\n    const menu = this.element.renderRoot.querySelector('md-menu')!;\n    if (!menu) {\n      throw new Error(\n        'Internal md-menu is not found. md-select may not have finished rendering when isOpen has been checked',\n      );\n    }\n    return menu.open;\n  }\n}\n\n// Private class (not exported)\nclass SelectFieldHardness extends FieldHarness {\n  /* Expose so that we can call it from our internal code in SelectHarness. */\n  override getInteractiveElement() {\n    return super.getInteractiveElement();\n  }\n}\n"
  },
  {
    "path": "select/internal/_filled-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../field/filled-field';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filled-select-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $token ==\n      'text-field-container-shape' and\n      meta.type-of($value) ==\n      'list'\n    {\n      @error 'Filled select `text-field-container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';\n    }\n\n    @if $value {\n      --md-filled-select-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-select-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'text-field-container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    @include filled-field.theme(\n      (\n        // go/keep-sorted start\n        'active-indicator-color': var(--_text-field-active-indicator-color),\n        'active-indicator-height': var(--_text-field-active-indicator-height),\n        'container-color': var(--_text-field-container-color),\n        'container-shape-end-end': var(--_text-field-container-shape-end-end),\n        'container-shape-end-start':\n          var(--_text-field-container-shape-end-start),\n        'container-shape-start-end':\n          var(--_text-field-container-shape-start-end),\n        'container-shape-start-start':\n          var(--_text-field-container-shape-start-start),\n        'content-color': var(--_text-field-input-text-color),\n        'content-font': var(--_text-field-input-text-font),\n        'content-line-height': var(--_text-field-input-text-line-height),\n        'content-size': var(--_text-field-input-text-size),\n        'content-weight': var(--_text-field-input-text-weight),\n        'disabled-active-indicator-color':\n          var(--_text-field-disabled-active-indicator-color),\n        'disabled-active-indicator-height':\n          var(--_text-field-disabled-active-indicator-height),\n        'disabled-active-indicator-opacity':\n          var(--_text-field-disabled-active-indicator-opacity),\n        'disabled-container-color': var(--_text-field-disabled-container-color),\n        'disabled-container-opacity':\n          var(--_text-field-disabled-container-opacity),\n        'disabled-content-color': var(--_text-field-disabled-input-text-color),\n        'disabled-content-opacity':\n          var(--_text-field-disabled-input-text-opacity),\n        'disabled-label-text-color':\n          var(--_text-field-disabled-label-text-color),\n        'disabled-label-text-opacity':\n          var(--_text-field-disabled-label-text-opacity),\n        'disabled-leading-content-color':\n          var(--_text-field-disabled-leading-icon-color),\n        'disabled-leading-content-opacity':\n          var(--_text-field-disabled-leading-icon-opacity),\n        'disabled-supporting-text-color':\n          var(--_text-field-disabled-supporting-text-color),\n        'disabled-supporting-text-opacity':\n          var(--_text-field-disabled-supporting-text-opacity),\n        'disabled-trailing-content-color':\n          var(--_text-field-disabled-trailing-icon-color),\n        'disabled-trailing-content-opacity':\n          var(--_text-field-disabled-trailing-icon-opacity),\n        'error-active-indicator-color':\n          var(--_text-field-error-active-indicator-color),\n        'error-content-color': var(--_text-field-error-input-text-color),\n        'error-focus-active-indicator-color':\n          var(--_text-field-error-focus-active-indicator-color),\n        'error-focus-content-color':\n          var(--_text-field-error-focus-input-text-color),\n        'error-focus-label-text-color':\n          var(--_text-field-error-focus-label-text-color),\n        'error-focus-leading-content-color':\n          var(--_text-field-error-focus-leading-icon-color),\n        'error-focus-supporting-text-color':\n          var(--_text-field-error-focus-supporting-text-color),\n        'error-focus-trailing-content-color':\n          var(--_text-field-error-focus-trailing-icon-color),\n        'error-hover-active-indicator-color':\n          var(--_text-field-error-hover-active-indicator-color),\n        'error-hover-content-color':\n          var(--_text-field-error-hover-input-text-color),\n        'error-hover-label-text-color':\n          var(--_text-field-error-hover-label-text-color),\n        'error-hover-leading-content-color':\n          var(--_text-field-error-hover-leading-icon-color),\n        'error-hover-state-layer-color':\n          var(--_text-field-error-hover-state-layer-color),\n        'error-hover-state-layer-opacity':\n          var(--_text-field-error-hover-state-layer-opacity),\n        'error-hover-supporting-text-color':\n          var(--_text-field-error-hover-supporting-text-color),\n        'error-hover-trailing-content-color':\n          var(--_text-field-error-hover-trailing-icon-color),\n        'error-label-text-color': var(--_text-field-error-label-text-color),\n        'error-leading-content-color':\n          var(--_text-field-error-leading-icon-color),\n        'error-supporting-text-color':\n          var(--_text-field-error-supporting-text-color),\n        'error-trailing-content-color':\n          var(--_text-field-error-trailing-icon-color),\n        'focus-active-indicator-color':\n          var(--_text-field-focus-active-indicator-color),\n        'focus-active-indicator-height':\n          var(--_text-field-focus-active-indicator-height),\n        'focus-content-color': var(--_text-field-focus-input-text-color),\n        'focus-label-text-color': var(--_text-field-focus-label-text-color),\n        'focus-leading-content-color':\n          var(--_text-field-focus-leading-icon-color),\n        'focus-supporting-text-color':\n          var(--_text-field-focus-supporting-text-color),\n        'focus-trailing-content-color':\n          var(--_text-field-focus-trailing-icon-color),\n        'hover-active-indicator-color':\n          var(--_text-field-hover-active-indicator-color),\n        'hover-active-indicator-height':\n          var(--_text-field-hover-active-indicator-height),\n        'hover-content-color': var(--_text-field-hover-input-text-color),\n        'hover-label-text-color': var(--_text-field-hover-label-text-color),\n        'hover-leading-content-color':\n          var(--_text-field-hover-leading-icon-color),\n        'hover-state-layer-color': var(--_text-field-hover-state-layer-color),\n        'hover-state-layer-opacity':\n          var(--_text-field-hover-state-layer-opacity),\n        'hover-supporting-text-color':\n          var(--_text-field-hover-supporting-text-color),\n        'hover-trailing-content-color':\n          var(--_text-field-hover-trailing-icon-color),\n        'label-text-color': var(--_text-field-label-text-color),\n        'label-text-font': var(--_text-field-label-text-font),\n        'label-text-line-height': var(--_text-field-label-text-line-height),\n        'label-text-populated-line-height':\n          var(--_text-field-label-text-populated-line-height),\n        'label-text-populated-size':\n          var(--_text-field-label-text-populated-size),\n        'label-text-size': var(--_text-field-label-text-size),\n        'label-text-weight': var(--_text-field-label-text-weight),\n        'leading-content-color': var(--_text-field-leading-icon-color),\n        'supporting-text-color': var(--_text-field-supporting-text-color),\n        'supporting-text-font': var(--_text-field-supporting-text-font),\n        'supporting-text-line-height':\n          var(--_text-field-supporting-text-line-height),\n        'supporting-text-size': var(--_text-field-supporting-text-size),\n        'supporting-text-weight': var(--_text-field-supporting-text-weight),\n        'trailing-content-color': var(--_text-field-trailing-icon-color),\n        // go/keep-sorted end\n      )\n    );\n  }\n\n  [has-start] .icon.leading {\n    font-size: var(--_text-field-leading-icon-size);\n    height: var(--_text-field-leading-icon-size);\n    width: var(--_text-field-leading-icon-size);\n  }\n\n  .icon.trailing {\n    font-size: var(--_text-field-trailing-icon-size);\n    height: var(--_text-field-trailing-icon-size);\n    width: var(--_text-field-trailing-icon-size);\n  }\n}\n"
  },
  {
    "path": "select/internal/_outlined-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../field/outlined-field';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-outlined-select-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-outlined-select-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-select-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'text-field-container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    @include outlined-field.theme(\n      (\n        // go/keep-sorted start\n        'container-shape-end-end': var(--_text-field-container-shape-end-end),\n        'container-shape-end-start':\n          var(--_text-field-container-shape-end-start),\n        'container-shape-start-end':\n          var(--_text-field-container-shape-start-end),\n        'container-shape-start-start':\n          var(--_text-field-container-shape-start-start),\n        'content-color': var(--_text-field-input-text-color),\n        'content-font': var(--_text-field-input-text-font),\n        'content-line-height': var(--_text-field-input-text-line-height),\n        'content-size': var(--_text-field-input-text-size),\n        'content-weight': var(--_text-field-input-text-weight),\n        'disabled-content-color': var(--_text-field-disabled-input-text-color),\n        'disabled-content-opacity':\n          var(--_text-field-disabled-input-text-opacity),\n        'disabled-label-text-color':\n          var(--_text-field-disabled-label-text-color),\n        'disabled-label-text-opacity':\n          var(--_text-field-disabled-label-text-opacity),\n        'disabled-leading-content-color':\n          var(--_text-field-disabled-leading-icon-color),\n        'disabled-leading-content-opacity':\n          var(--_text-field-disabled-leading-icon-opacity),\n        'disabled-outline-color': var(--_text-field-disabled-outline-color),\n        'disabled-outline-opacity': var(--_text-field-disabled-outline-opacity),\n        'disabled-outline-width': var(--_text-field-disabled-outline-width),\n        'disabled-supporting-text-color':\n          var(--_text-field-disabled-supporting-text-color),\n        'disabled-supporting-text-opacity':\n          var(--_text-field-disabled-supporting-text-opacity),\n        'disabled-trailing-content-color':\n          var(--_text-field-disabled-trailing-icon-color),\n        'disabled-trailing-content-opacity':\n          var(--_text-field-disabled-trailing-icon-opacity),\n        'error-content-color': var(--_text-field-error-input-text-color),\n        'error-focus-content-color':\n          var(--_text-field-error-focus-input-text-color),\n        'error-focus-label-text-color':\n          var(--_text-field-error-focus-label-text-color),\n        'error-focus-leading-content-color':\n          var(--_text-field-error-focus-leading-icon-color),\n        'error-focus-outline-color':\n          var(--_text-field-error-focus-outline-color),\n        'error-focus-supporting-text-color':\n          var(--_text-field-error-focus-supporting-text-color),\n        'error-focus-trailing-content-color':\n          var(--_text-field-error-focus-trailing-icon-color),\n        'error-hover-content-color':\n          var(--_text-field-error-hover-input-text-color),\n        'error-hover-label-text-color':\n          var(--_text-field-error-hover-label-text-color),\n        'error-hover-leading-content-color':\n          var(--_text-field-error-hover-leading-icon-color),\n        'error-hover-outline-color':\n          var(--_text-field-error-hover-outline-color),\n        'error-hover-supporting-text-color':\n          var(--_text-field-error-hover-supporting-text-color),\n        'error-hover-trailing-content-color':\n          var(--_text-field-error-hover-trailing-icon-color),\n        'error-label-text-color': var(--_text-field-error-label-text-color),\n        'error-leading-content-color':\n          var(--_text-field-error-leading-icon-color),\n        'error-outline-color': var(--_text-field-error-outline-color),\n        'error-supporting-text-color':\n          var(--_text-field-error-supporting-text-color),\n        'error-trailing-content-color':\n          var(--_text-field-error-trailing-icon-color),\n        'focus-content-color': var(--_text-field-focus-input-text-color),\n        'focus-label-text-color': var(--_text-field-focus-label-text-color),\n        'focus-leading-content-color':\n          var(--_text-field-focus-leading-icon-color),\n        'focus-outline-color': var(--_text-field-focus-outline-color),\n        'focus-outline-width': var(--_text-field-focus-outline-width),\n        'focus-supporting-text-color':\n          var(--_text-field-focus-supporting-text-color),\n        'focus-trailing-content-color':\n          var(--_text-field-focus-trailing-icon-color),\n        'hover-content-color': var(--_text-field-hover-input-text-color),\n        'hover-label-text-color': var(--_text-field-hover-label-text-color),\n        'hover-leading-content-color':\n          var(--_text-field-hover-leading-icon-color),\n        'hover-outline-color': var(--_text-field-hover-outline-color),\n        'hover-outline-width': var(--_text-field-hover-outline-width),\n        'hover-supporting-text-color':\n          var(--_text-field-hover-supporting-text-color),\n        'hover-trailing-content-color':\n          var(--_text-field-hover-trailing-icon-color),\n        'label-text-color': var(--_text-field-label-text-color),\n        'label-text-font': var(--_text-field-label-text-font),\n        'label-text-line-height': var(--_text-field-label-text-line-height),\n        'label-text-populated-line-height':\n          var(--_text-field-label-text-populated-line-height),\n        'label-text-populated-size':\n          var(--_text-field-label-text-populated-size),\n        'label-text-size': var(--_text-field-label-text-size),\n        'label-text-weight': var(--_text-field-label-text-weight),\n        'leading-content-color': var(--_text-field-leading-icon-color),\n        'outline-color': var(--_text-field-outline-color),\n        'outline-width': var(--_text-field-outline-width),\n        'supporting-text-color': var(--_text-field-supporting-text-color),\n        'supporting-text-font': var(--_text-field-supporting-text-font),\n        'supporting-text-line-height':\n          var(--_text-field-supporting-text-line-height),\n        'supporting-text-size': var(--_text-field-supporting-text-size),\n        'supporting-text-weight': var(--_text-field-supporting-text-weight),\n        'trailing-content-color': var(--_text-field-trailing-icon-color),\n        // go/keep-sorted end\n      )\n    );\n  }\n\n  [has-start] .icon.leading {\n    font-size: var(--_text-field-leading-icon-size);\n    height: var(--_text-field-leading-icon-size);\n    width: var(--_text-field-leading-icon-size);\n  }\n\n  .icon.trailing {\n    font-size: var(--_text-field-trailing-icon-size);\n    height: var(--_text-field-trailing-icon-size);\n    width: var(--_text-field-trailing-icon-size);\n  }\n}\n"
  },
  {
    "path": "select/internal/_shared.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../elevation/internal/elevation';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    color: unset;\n    min-width: 210px;\n    display: flex;\n  }\n\n  .field {\n    cursor: default;\n    outline: none;\n  }\n\n  .select {\n    position: relative;\n    flex-direction: column;\n  }\n\n  .icon.trailing svg,\n  .icon ::slotted(*) {\n    fill: currentColor;\n  }\n\n  .icon ::slotted(*) {\n    width: inherit;\n    height: inherit;\n    font-size: inherit;\n  }\n\n  .icon slot {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .icon.trailing :is(.up, .down) {\n    opacity: 0;\n    /* 75 ms is half of min(animate open duration, animate closed duration)*/\n    transition: opacity 75ms linear 75ms;\n  }\n\n  .select:not(.open) .down,\n  .select.open .up {\n    opacity: 1;\n  }\n\n  .field,\n  .select,\n  md-menu {\n    min-width: inherit;\n    width: inherit;\n    max-width: inherit;\n    display: flex;\n  }\n\n  md-menu {\n    // Not inherited because it is applied every time the menu opens\n    min-width: var(--__menu-min-width);\n    // Inherits from `.menu-wrapper` because it is applied only when\n    // `clampMenuWidth` is true\n    max-width: var(--__menu-max-width, inherit);\n  }\n\n  .menu-wrapper {\n    width: 0px;\n    height: 0px;\n    max-width: inherit;\n  }\n\n  md-menu ::slotted(:not[disabled]) {\n    cursor: pointer;\n  }\n\n  .field,\n  .select {\n    width: 100%;\n  }\n\n  :host {\n    display: inline-flex;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n}\n"
  },
  {
    "path": "select/internal/filled-select-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filled-select';\n// go/keep-sorted end\n\n@include filled-select.styles();\n"
  },
  {
    "path": "select/internal/filled-select.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../field/filled-field.js';\n\nimport {literal} from 'lit/static-html.js';\n\nimport {Select} from './select.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class FilledSelect extends Select {\n  protected readonly fieldTag = literal`md-filled-field`;\n}\n"
  },
  {
    "path": "select/internal/outlined-select-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './outlined-select';\n// go/keep-sorted end\n\n@include outlined-select.styles();\n"
  },
  {
    "path": "select/internal/outlined-select.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../field/outlined-field.js';\n\nimport {literal} from 'lit/static-html.js';\n\nimport {Select} from './select.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class OutlinedSelect extends Select {\n  protected readonly fieldTag = literal`md-outlined-field`;\n}\n"
  },
  {
    "path": "select/internal/select.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../menu/menu.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {Field} from '../../field/internal/field.js';\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {\n  mixinOnReportValidity,\n  onReportValidity,\n} from '../../labs/behaviors/on-report-validity.js';\nimport {SelectValidator} from '../../labs/behaviors/validators/select-validator.js';\nimport {getActiveItem} from '../../list/internal/list-navigation-helpers.js';\nimport {\n  CloseMenuEvent,\n  FocusState,\n  isElementInSubtree,\n  isSelectableKey,\n} from '../../menu/internal/controllers/shared.js';\nimport {TYPEAHEAD_RECORD} from '../../menu/internal/controllers/typeaheadController.js';\nimport {DEFAULT_TYPEAHEAD_BUFFER_TIME, Menu} from '../../menu/internal/menu.js';\nimport {SelectOption} from './selectoption/select-option.js';\nimport {\n  createRequestDeselectionEvent,\n  createRequestSelectionEvent,\n} from './selectoption/selectOptionController.js';\nimport {getSelectedItems, SelectOptionRecord} from './shared.js';\n\nconst VALUE = Symbol('value');\n\n// Separate variable needed for closure.\nconst selectBaseClass = mixinDelegatesAria(\n  mixinOnReportValidity(\n    mixinConstraintValidation(\n      mixinFormAssociated(mixinElementInternals(LitElement)),\n    ),\n  ),\n);\n\n/**\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n * @fires opening {Event} Fired when the select's menu is about to open.\n * @fires opened {Event} Fired when the select's menu has finished animations\n * and opened.\n * @fires closing {Event} Fired when the select's menu is about to close.\n * @fires closed {Event} Fired when the select's menu has finished animations\n * and closed.\n */\nexport abstract class Select extends selectBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Opens the menu synchronously with no animation.\n   */\n  @property({type: Boolean}) quick = false;\n\n  /**\n   * Whether or not the select is required.\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * This error message overrides the error message displayed by\n   * `reportValidity()`.\n   */\n  @property({type: String, attribute: 'error-text'}) errorText = '';\n\n  /**\n   * The floating label for the field.\n   */\n  @property() label = '';\n\n  /**\n   * Disables the asterisk on the floating label, when the select is\n   * required.\n   */\n  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;\n\n  /**\n   * Conveys additional information below the select, such as how it should\n   * be used.\n   */\n  @property({type: String, attribute: 'supporting-text'}) supportingText = '';\n\n  /**\n   * Gets or sets whether or not the select is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   */\n  @property({type: Boolean, reflect: true}) error = false;\n\n  /**\n   * Whether or not the underlying md-menu should be position: fixed to display\n   * in a top-level manner, or position: absolute.\n   *\n   * position:fixed is useful for cases where select is inside of another\n   * element with stacking context and hidden overflows such as `md-dialog`.\n   */\n  @property({attribute: 'menu-positioning'})\n  menuPositioning: 'absolute' | 'fixed' | 'popover' = 'popover';\n\n  /**\n   * Clamps the menu-width to the width of the select.\n   */\n  @property({type: Boolean, attribute: 'clamp-menu-width'})\n  clampMenuWidth = false;\n\n  /**\n   * The max time between the keystrokes of the typeahead select / menu behavior\n   * before it clears the typeahead buffer.\n   */\n  @property({type: Number, attribute: 'typeahead-delay'})\n  typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n  /**\n   * Whether or not the text field has a leading icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-leading-icon'})\n  hasLeadingIcon = false;\n\n  /**\n   * Text to display in the field. Only set for SSR.\n   */\n  @property({attribute: 'display-text'}) displayText = '';\n\n  /**\n   * Whether the menu should be aligned to the start or the end of the select's\n   * textbox.\n   */\n  @property({attribute: 'menu-align'}) menuAlign: 'start' | 'end' = 'start';\n\n  /**\n   * The value of the currently selected option.\n   *\n   * Note: For SSR, set `[selected]` on the requested option and `displayText`\n   * rather than setting `value` setting `value` will incur a DOM query.\n   */\n  @property()\n  get value(): string {\n    return this[VALUE];\n  }\n\n  set value(value: string) {\n    if (isServer) return;\n    this.lastUserSetValue = value;\n    this.select(value);\n  }\n\n  [VALUE] = '';\n\n  get options() {\n    // NOTE: this does a DOM query.\n    return (this.menu?.items ?? []) as SelectOption[];\n  }\n\n  /**\n   * The index of the currently selected option.\n   *\n   * Note: For SSR, set `[selected]` on the requested option and `displayText`\n   * rather than setting `selectedIndex` setting `selectedIndex` will incur a\n   * DOM query.\n   */\n  @property({type: Number, attribute: 'selected-index'})\n  get selectedIndex(): number {\n    // tslint:disable-next-line:enforce-name-casing\n    const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];\n    return index ?? -1;\n  }\n\n  set selectedIndex(index: number) {\n    this.lastUserSetSelectedIndex = index;\n    this.selectIndex(index);\n  }\n\n  /**\n   * Returns an array of selected options.\n   *\n   * NOTE: md-select only supports single selection.\n   */\n  get selectedOptions() {\n    return (this.getSelectedOptions() ?? []).map(([option]) => option);\n  }\n\n  protected abstract readonly fieldTag: StaticValue;\n\n  /**\n   * Used for initializing select when the user sets the `value` directly.\n   */\n  private lastUserSetValue: string | null = null;\n\n  /**\n   * Used for initializing select when the user sets the `selectedIndex`\n   * directly.\n   */\n  private lastUserSetSelectedIndex: number | null = null;\n\n  /**\n   * Used for `input` and `change` event change detection.\n   */\n  private lastSelectedOption: SelectOption | null = null;\n\n  // tslint:disable-next-line:enforce-name-casing\n  private lastSelectedOptionRecords: SelectOptionRecord[] = [];\n\n  /**\n   * Whether or not a native error has been reported via `reportValidity()`.\n   */\n  @state() private nativeError = false;\n\n  /**\n   * The validation message displayed from a native error via\n   * `reportValidity()`.\n   */\n  @state() private nativeErrorText = '';\n  private get hasError() {\n    return this.error || this.nativeError;\n  }\n\n  @state() private focused = false;\n  @state() private open = false;\n  @state() private defaultFocus: FocusState = FocusState.NONE;\n  @query('.field') private readonly field!: Field | null;\n  @query('md-menu') private readonly menu!: Menu | null;\n  @query('#label') private readonly labelEl!: HTMLElement;\n  @queryAssignedElements({slot: 'leading-icon', flatten: true})\n  private readonly leadingIcons!: Element[];\n  // Have to keep track of previous open because it's state and private and thus\n  // cannot be tracked in PropertyValues<this> map.\n  private prevOpen = this.open;\n  private selectWidth = 0;\n\n  constructor() {\n    super();\n    if (isServer) {\n      return;\n    }\n\n    this.addEventListener('focus', this.handleFocus.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n  }\n\n  /**\n   * Selects an option given the value of the option, and updates MdSelect's\n   * value.\n   */\n  select(value: string) {\n    const optionToSelect = this.options.find(\n      (option) => option.value === value,\n    );\n    if (optionToSelect) {\n      this.selectItem(optionToSelect);\n    }\n  }\n\n  /**\n   * Selects an option given the index of the option, and updates MdSelect's\n   * value.\n   */\n  selectIndex(index: number) {\n    const optionToSelect = this.options[index];\n    if (optionToSelect) {\n      this.selectItem(optionToSelect);\n    }\n  }\n\n  /**\n   * Reset the select to its default value.\n   */\n  reset() {\n    for (const option of this.options) {\n      option.selected = option.hasAttribute('selected');\n    }\n\n    this.updateValueAndDisplayText();\n    this.nativeError = false;\n    this.nativeErrorText = '';\n  }\n\n  /** Shows the picker. If it's already open, this is a no-op. */\n  showPicker() {\n    this.open = true;\n  }\n\n  override [onReportValidity](invalidEvent: Event | null) {\n    // Prevent default pop-up behavior.\n    invalidEvent?.preventDefault();\n\n    const prevMessage = this.getErrorText();\n    this.nativeError = !!invalidEvent;\n    this.nativeErrorText = this.validationMessage;\n\n    if (prevMessage === this.getErrorText()) {\n      this.field?.reannounceError();\n    }\n  }\n\n  protected override update(changed: PropertyValues<Select>) {\n    // In SSR the options will be ready to query, so try to figure out what\n    // the value and display text should be.\n    if (!this.hasUpdated) {\n      this.initUserSelection();\n    }\n\n    // We have just opened the menu.\n    // We are only able to check for the select's rect in `update()` instead of\n    // having to wait for `updated()` because the menu can never be open on\n    // first render since it is not settable and Lit SSR does not support click\n    // events which would open the menu.\n    if (this.prevOpen !== this.open && this.open) {\n      const selectRect = this.getBoundingClientRect();\n      this.selectWidth = selectRect.width;\n    }\n\n    this.prevOpen = this.open;\n    super.update(changed);\n  }\n\n  protected override render() {\n    return html`\n      <span\n        class=\"select ${classMap(this.getRenderClasses())}\"\n        @focusout=${this.handleFocusout}>\n        ${this.renderField()} ${this.renderMenu()}\n      </span>\n    `;\n  }\n\n  protected override async firstUpdated(changed: PropertyValues<Select>) {\n    await this.menu?.updateComplete;\n    // If this has been handled on update already due to SSR, try again.\n    if (!this.lastSelectedOptionRecords.length) {\n      this.initUserSelection();\n    }\n\n    // Case for when the DOM is streaming, there are no children, and a child\n    // has [selected] set on it, we need to wait for DOM to render something.\n    if (\n      !this.lastSelectedOptionRecords.length &&\n      !isServer &&\n      !this.options.length\n    ) {\n      setTimeout(() => {\n        this.updateValueAndDisplayText();\n      });\n    }\n\n    super.firstUpdated(changed);\n  }\n\n  private getRenderClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n      'error': this.error,\n      'open': this.open,\n    };\n  }\n\n  private renderField() {\n    const ariaLabel = (this as ARIAMixinStrict).ariaLabel || this.label;\n    return staticHtml`\n      <${this.fieldTag}\n          aria-haspopup=\"listbox\"\n          role=\"combobox\"\n          part=\"field\"\n          id=\"field\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-label=${ariaLabel || nothing}\n          aria-describedby=\"description\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-controls=\"listbox\"\n          class=\"field\"\n          label=${this.label}\n          ?no-asterisk=${this.noAsterisk}\n          .focused=${this.focused || this.open}\n          .populated=${!!this.displayText}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          .error=${this.hasError}\n          ?has-start=${this.hasLeadingIcon}\n          has-end\n          supporting-text=${this.supportingText}\n          error-text=${this.getErrorText()}\n          @keydown=${this.handleKeydown}\n          @click=${this.handleClick}>\n         ${this.renderFieldContent()}\n         <div id=\"description\" slot=\"aria-describedby\"></div>\n      </${this.fieldTag}>`;\n  }\n\n  private renderFieldContent() {\n    return [\n      this.renderLeadingIcon(),\n      this.renderLabel(),\n      this.renderTrailingIcon(),\n    ];\n  }\n\n  private renderLeadingIcon() {\n    return html`\n      <span class=\"icon leading\" slot=\"start\">\n        <slot name=\"leading-icon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n    `;\n  }\n\n  private renderTrailingIcon() {\n    return html`\n      <span class=\"icon trailing\" slot=\"end\">\n        <slot name=\"trailing-icon\" @slotchange=${this.handleIconChange}>\n          <svg height=\"5\" viewBox=\"7 10 10 5\" focusable=\"false\">\n            <polygon\n              class=\"down\"\n              stroke=\"none\"\n              fill-rule=\"evenodd\"\n              points=\"7 10 12 15 17 10\"></polygon>\n            <polygon\n              class=\"up\"\n              stroke=\"none\"\n              fill-rule=\"evenodd\"\n              points=\"7 15 12 10 17 15\"></polygon>\n          </svg>\n        </slot>\n      </span>\n    `;\n  }\n\n  private renderLabel() {\n    // need to render &nbsp; so that line-height can apply and give it a\n    // non-zero height\n    return html`<div id=\"label\">${this.displayText || html`&nbsp;`}</div>`;\n  }\n\n  private renderMenu() {\n    const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n    return html`<div class=\"menu-wrapper\">\n      <md-menu\n        id=\"listbox\"\n        .defaultFocus=${this.defaultFocus}\n        role=\"listbox\"\n        tabindex=\"-1\"\n        aria-label=${ariaLabel || nothing}\n        stay-open-on-focusout\n        part=\"menu\"\n        exportparts=\"focus-ring: menu-focus-ring\"\n        anchor=\"field\"\n        style=${styleMap({\n          '--__menu-min-width': `${this.selectWidth}px`,\n          '--__menu-max-width': this.clampMenuWidth\n            ? `${this.selectWidth}px`\n            : undefined,\n        })}\n        no-navigation-wrap\n        .open=${this.open}\n        .quick=${this.quick}\n        .positioning=${this.menuPositioning}\n        .typeaheadDelay=${this.typeaheadDelay}\n        .anchorCorner=${this.menuAlign === 'start' ? 'end-start' : 'end-end'}\n        .menuCorner=${this.menuAlign === 'start' ? 'start-start' : 'start-end'}\n        @opening=${this.handleOpening}\n        @opened=${this.redispatchEvent}\n        @closing=${this.redispatchEvent}\n        @closed=${this.handleClosed}\n        @close-menu=${this.handleCloseMenu}\n        @request-selection=${this.handleRequestSelection}\n        @request-deselection=${this.handleRequestDeselection}>\n        ${this.renderMenuContent()}\n      </md-menu>\n    </div>`;\n  }\n\n  private renderMenuContent() {\n    return html`<slot></slot>`;\n  }\n\n  /**\n   * Handles opening the select on keydown and typahead selection when the menu\n   * is closed.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.open || this.disabled || !this.menu) {\n      return;\n    }\n\n    const typeaheadController = this.menu.typeaheadController;\n    const isOpenKey =\n      event.code === 'Space' ||\n      event.code === 'ArrowDown' ||\n      event.code === 'ArrowUp' ||\n      event.code === 'End' ||\n      event.code === 'Home' ||\n      event.code === 'Enter';\n\n    // Do not open if currently typing ahead because the user may be typing the\n    // spacebar to match a word with a space\n    if (!typeaheadController.isTypingAhead && isOpenKey) {\n      event.preventDefault();\n      this.open = true;\n\n      // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#kbd_label\n      switch (event.code) {\n        case 'Space':\n        case 'ArrowDown':\n        case 'Enter':\n          // We will handle focusing last selected item in this.handleOpening()\n          this.defaultFocus = FocusState.NONE;\n          break;\n        case 'End':\n          this.defaultFocus = FocusState.LAST_ITEM;\n          break;\n        case 'ArrowUp':\n        case 'Home':\n          this.defaultFocus = FocusState.FIRST_ITEM;\n          break;\n        default:\n          break;\n      }\n      return;\n    }\n\n    const isPrintableKey = event.key.length === 1;\n\n    // Handles typing ahead when the menu is closed by delegating the event to\n    // the underlying menu's typeaheadController\n    if (isPrintableKey) {\n      typeaheadController.onKeydown(event);\n      event.preventDefault();\n\n      const {lastActiveRecord} = typeaheadController;\n\n      if (!lastActiveRecord) {\n        return;\n      }\n\n      this.labelEl?.setAttribute?.('aria-live', 'polite');\n      const hasChanged = this.selectItem(\n        lastActiveRecord[TYPEAHEAD_RECORD.ITEM] as SelectOption,\n      );\n\n      if (hasChanged) {\n        this.dispatchInteractionEvents();\n      }\n    }\n  }\n\n  private handleClick() {\n    this.open = !this.open;\n  }\n\n  private handleFocus() {\n    this.focused = true;\n  }\n\n  private handleBlur() {\n    this.focused = false;\n  }\n\n  /**\n   * Handles closing the menu when the focus leaves the select's subtree.\n   */\n  private handleFocusout(event: FocusEvent) {\n    // Don't close the menu if we are switching focus between menu,\n    // select-option, and field\n    if (event.relatedTarget && isElementInSubtree(event.relatedTarget, this)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /**\n   * Gets a list of all selected select options as a list item record array.\n   *\n   * @return An array of selected list option records.\n   */\n  private getSelectedOptions() {\n    if (!this.menu) {\n      this.lastSelectedOptionRecords = [];\n      return null;\n    }\n\n    const items = this.menu.items as SelectOption[];\n    this.lastSelectedOptionRecords = getSelectedItems(items);\n    return this.lastSelectedOptionRecords;\n  }\n\n  override async getUpdateComplete() {\n    await this.menu?.updateComplete;\n    return super.getUpdateComplete();\n  }\n\n  /**\n   * Gets the selected options from the DOM, and updates the value and display\n   * text to the first selected option's value and headline respectively.\n   *\n   * @return Whether or not the selected option has changed since last update.\n   */\n  private updateValueAndDisplayText() {\n    const selectedOptions = this.getSelectedOptions() ?? [];\n    // Used to determine whether or not we need to fire an input / change event\n    // which fire whenever the option element changes (value or selectedIndex)\n    // on user interaction.\n    let hasSelectedOptionChanged = false;\n\n    if (selectedOptions.length) {\n      const [firstSelectedOption] = selectedOptions[0];\n      hasSelectedOptionChanged =\n        this.lastSelectedOption !== firstSelectedOption;\n      this.lastSelectedOption = firstSelectedOption;\n      this[VALUE] = firstSelectedOption.value;\n      this.displayText = firstSelectedOption.displayText;\n    } else {\n      hasSelectedOptionChanged = this.lastSelectedOption !== null;\n      this.lastSelectedOption = null;\n      this[VALUE] = '';\n      this.displayText = '';\n    }\n\n    return hasSelectedOptionChanged;\n  }\n\n  /**\n   * Focuses and activates the last selected item upon opening, and resets other\n   * active items.\n   */\n  private async handleOpening(e: Event) {\n    this.labelEl?.removeAttribute?.('aria-live');\n    this.redispatchEvent(e);\n\n    // FocusState.NONE means we want to handle focus ourselves and focus the\n    // last selected item.\n    if (this.defaultFocus !== FocusState.NONE) {\n      return;\n    }\n\n    const items = this.menu!.items as SelectOption[];\n    const activeItem = getActiveItem(items)?.item;\n    let [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];\n\n    // This is true if the user keys through the list but clicks out of the menu\n    // thus no close-menu event is fired by an item and we can't clean up in\n    // handleCloseMenu.\n    if (activeItem && activeItem !== selectedItem) {\n      activeItem.tabIndex = -1;\n    }\n\n    // in the case that nothing is selected, focus the first item\n    selectedItem = selectedItem ?? items[0];\n\n    if (selectedItem) {\n      selectedItem.tabIndex = 0;\n      selectedItem.focus();\n    }\n  }\n\n  private redispatchEvent(e: Event) {\n    redispatchEvent(this, e);\n  }\n\n  private handleClosed(e: Event) {\n    this.open = false;\n    this.redispatchEvent(e);\n  }\n\n  /**\n   * Determines the reason for closing, and updates the UI accordingly.\n   */\n  private handleCloseMenu(event: CloseMenuEvent) {\n    const reason = event.detail.reason;\n    const item = event.detail.itemPath[0] as SelectOption;\n    this.open = false;\n    let hasChanged = false;\n\n    if (reason.kind === 'click-selection') {\n      hasChanged = this.selectItem(item);\n    } else if (reason.kind === 'keydown' && isSelectableKey(reason.key)) {\n      hasChanged = this.selectItem(item);\n    } else {\n      // This can happen on ESC being pressed\n      item.tabIndex = -1;\n      item.blur();\n    }\n\n    // Dispatch interaction events since selection has been made via keyboard\n    // or mouse.\n    if (hasChanged) {\n      this.dispatchInteractionEvents();\n    }\n  }\n\n  /**\n   * Selects a given option, deselects other options, and updates the UI.\n   *\n   * @return Whether the last selected option has changed.\n   */\n  private selectItem(item: SelectOption) {\n    const selectedOptions = this.getSelectedOptions() ?? [];\n    selectedOptions.forEach(([option]) => {\n      if (item !== option) {\n        option.selected = false;\n        option.tabIndex = -1;\n      }\n    });\n    item.selected = true;\n    item.tabIndex = 0;\n\n    return this.updateValueAndDisplayText();\n  }\n\n  /**\n   * Handles updating selection when an option element requests selection via\n   * property / attribute change.\n   */\n  private handleRequestSelection(\n    event: ReturnType<typeof createRequestSelectionEvent>,\n  ) {\n    const requestingOptionEl = event.target as SelectOption & HTMLElement;\n\n    // No-op if this item is already selected.\n    if (\n      this.lastSelectedOptionRecords.some(\n        ([option]) => option === requestingOptionEl,\n      )\n    ) {\n      return;\n    }\n\n    this.selectItem(requestingOptionEl);\n  }\n\n  /**\n   * Handles updating selection when an option element requests deselection via\n   * property / attribute change.\n   */\n  private handleRequestDeselection(\n    event: ReturnType<typeof createRequestDeselectionEvent>,\n  ) {\n    const requestingOptionEl = event.target as SelectOption & HTMLElement;\n\n    // No-op if this item is not even in the list of tracked selected items.\n    if (\n      !this.lastSelectedOptionRecords.some(\n        ([option]) => option === requestingOptionEl,\n      )\n    ) {\n      return;\n    }\n\n    this.updateValueAndDisplayText();\n  }\n\n  /**\n   * Attempts to initialize the selected option from user-settable values like\n   * SSR, setting `value`, or `selectedIndex` at startup.\n   */\n  private initUserSelection() {\n    // User has set `.value` directly, but internals have not yet booted up.\n    if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {\n      this.select(this.lastUserSetValue);\n\n      // User has set `.selectedIndex` directly, but internals have not yet\n      // booted up.\n    } else if (\n      this.lastUserSetSelectedIndex !== null &&\n      !this.lastSelectedOptionRecords.length\n    ) {\n      this.selectIndex(this.lastUserSetSelectedIndex);\n\n      // Regular boot up!\n    } else {\n      this.updateValueAndDisplayText();\n    }\n  }\n\n  private handleIconChange() {\n    this.hasLeadingIcon = this.leadingIcons.length > 0;\n  }\n\n  /**\n   * Dispatches the `input` and `change` events.\n   */\n  private dispatchInteractionEvents() {\n    this.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  private getErrorText() {\n    return this.error ? this.errorText : this.nativeErrorText;\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.value;\n  }\n\n  override formResetCallback() {\n    this.reset();\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.value = state;\n  }\n\n  override click() {\n    this.field?.click();\n  }\n\n  override [createValidator]() {\n    return new SelectValidator(() => this);\n  }\n\n  override [getValidityAnchor]() {\n    return this.field;\n  }\n}\n"
  },
  {
    "path": "select/internal/selectoption/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItemHarness} from '../../../list/internal/listitem/harness.js';\n\n/**\n * Test harness for menu item.\n */\nexport class SelectOptionHarness extends ListItemHarness {}\n"
  },
  {
    "path": "select/internal/selectoption/select-option.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  queryAssignedNodes,\n} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {MenuItem} from '../../../menu/internal/controllers/menuItemController.js';\n\nimport {SelectOptionController} from './selectOptionController.js';\n\n/**\n * The interface specific to a Select Option\n */\ninterface SelectOptionSelf {\n  /**\n   * The form value associated with the Select Option. (Note: the visual portion\n   * of the SelectOption is the headline defined in ListItem)\n   */\n  value: string;\n  /**\n   * Whether or not the SelectOption is selected.\n   */\n  selected: boolean;\n  /**\n   * The text to display in the select when selected. Defaults to the\n   * textContent of the Element slotted into the headline.\n   */\n  displayText: string;\n}\n\n/**\n * The interface to implement for a select option. Additionally, the element\n * must have `md-list-item` and `md-menu-item` attributes on the host.\n */\nexport type SelectOption = SelectOptionSelf & MenuItem;\n\n// Separate variable needed for closure.\nconst selectOptionBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * @fires close-menu {CustomEvent<{initiator: SelectOption, reason: Reason, itemPath: SelectOption[]}>}\n * Closes the encapsulating menu on closable interaction. --bubbles --composed\n * @fires request-selection {Event} Requests the parent md-select to select this\n * element (and deselect others if single-selection) when `selected` changed to\n * `true`. --bubbles --composed\n * @fires request-deselection {Event} Requests the parent md-select to deselect\n * this element when `selected` changed to `false`. --bubbles --composed\n */\nexport class SelectOptionEl\n  extends selectOptionBaseClass\n  implements SelectOption\n{\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({type: Boolean, attribute: 'md-menu-item', reflect: true})\n  isMenuItem = true;\n\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean}) selected = false;\n  /**\n   * Form value of the option.\n   */\n  @property() value = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'headline'})\n  protected readonly headlineElements!: HTMLElement[];\n  @queryAssignedElements({slot: 'supporting-text'})\n  protected readonly supportingTextElements!: HTMLElement[];\n  @queryAssignedNodes({slot: ''})\n  protected readonly defaultElements!: Element[];\n\n  type = 'option' as const;\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.selectOptionController.typeaheadText;\n  }\n\n  @property({attribute: 'typeahead-text'})\n  set typeaheadText(text: string) {\n    this.selectOptionController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n   */\n  get displayText() {\n    return this.selectOptionController.displayText;\n  }\n\n  @property({attribute: 'display-text'})\n  set displayText(text: string) {\n    this.selectOptionController.setDisplayText(text);\n  }\n\n  private readonly selectOptionController = new SelectOptionController(this, {\n    getHeadlineElements: () => {\n      return this.headlineElements;\n    },\n    getSupportingTextElements: () => {\n      return this.supportingTextElements;\n    },\n    getDefaultElements: () => {\n      return this.defaultElements;\n    },\n    getInteractiveElement: () => this.listItemRoot,\n  });\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n        id=\"item\"\n        tabindex=${this.disabled ? -1 : 0}\n        role=${this.selectOptionController.role}\n        aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        @click=${this.selectOptionController.onClick}\n        @keydown=${this.selectOptionController.onKeydown}\n        >${content}</li\n      >\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple() {\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing() {\n    return html` <md-focus-ring\n      part=\"focus-ring\"\n      for=\"item\"\n      inward></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n      'selected': this.selected,\n    };\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"
  },
  {
    "path": "select/internal/selectoption/selectOptionController.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {\n  MenuItemController,\n  MenuItemControllerConfig,\n} from '../../../menu/internal/controllers/menuItemController.js';\nimport {SelectOption} from './select-option.js';\n\n/**\n * Creates an event fired by a SelectOption to request selection from md-select.\n * Typically fired after `selected` changes from `false` to `true`.\n */\nexport function createRequestSelectionEvent() {\n  return new Event('request-selection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * Creates an event fired by a SelectOption to request deselection from\n * md-select. Typically fired after `selected` changes from `true` to `false`.\n */\nexport function createRequestDeselectionEvent() {\n  return new Event('request-deselection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * The options used to inialize SelectOptionController.\n */\nexport type SelectOptionConfig = MenuItemControllerConfig;\n\n/**\n * A controller that provides most functionality and md-select compatibility for\n * an element that implements the SelectOption interface.\n */\nexport class SelectOptionController implements ReactiveController {\n  private readonly menuItemController: MenuItemController;\n  private internalDisplayText: string | null = null;\n  private lastSelected: boolean;\n  private firstUpdate = true;\n\n  /**\n   * The recommended role of the select option.\n   */\n  get role() {\n    return this.menuItemController.role;\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot, and if there are\n   * no slotted elements into headline, then it checks the _default_ slot, and\n   * then the `\"supporting-text\"` slot if nothing is in _default_.\n   */\n  get typeaheadText() {\n    return this.menuItemController.typeaheadText;\n  }\n\n  setTypeaheadText(text: string) {\n    this.menuItemController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot,\n   * and if there are no slotted elements into headline, then it checks the\n   * _default_ slot, and then the `\"supporting-text\"` slot if nothing is in\n   * _default_.\n   */\n  get displayText() {\n    if (this.internalDisplayText !== null) {\n      return this.internalDisplayText;\n    }\n\n    return this.menuItemController.typeaheadText;\n  }\n\n  setDisplayText(text: string) {\n    this.internalDisplayText = text;\n  }\n\n  /**\n   * @param host The SelectOption in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n    private readonly host: ReactiveControllerHost & SelectOption,\n    config: SelectOptionConfig,\n  ) {\n    this.lastSelected = this.host.selected;\n    this.menuItemController = new MenuItemController(host, config);\n    host.addController(this);\n  }\n\n  hostUpdate() {\n    if (this.lastSelected !== this.host.selected) {\n      this.host.ariaSelected = this.host.selected ? 'true' : 'false';\n    }\n  }\n\n  hostUpdated() {\n    // Do not dispatch event on first update / boot-up.\n    if (this.lastSelected !== this.host.selected && !this.firstUpdate) {\n      // This section is really useful for when the user sets selected on the\n      // option programmatically. Most other cases (click and keyboard) are\n      // handled by md-select because it needs to coordinate the\n      // single-selection behavior.\n      if (this.host.selected) {\n        this.host.dispatchEvent(createRequestSelectionEvent());\n      } else {\n        this.host.dispatchEvent(createRequestDeselectionEvent());\n      }\n    }\n\n    this.lastSelected = this.host.selected;\n    this.firstUpdate = false;\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    this.menuItemController.onClick();\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (e: KeyboardEvent) => {\n    this.menuItemController.onKeydown(e);\n  };\n}\n"
  },
  {
    "path": "select/internal/shared-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles();\n"
  },
  {
    "path": "select/internal/shared.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {SelectOption} from './selectoption/select-option.js';\n\n/**\n * A type that describes a SelectOption and its index.\n */\nexport type SelectOptionRecord = [SelectOption, number];\n\n/**\n * Given a list of select options, this function will return an array of\n * SelectOptionRecords that are selected.\n *\n * @return An array of SelectOptionRecords describing the options that are\n * selected.\n */\nexport function getSelectedItems(items: SelectOption[]) {\n  const selectedItemRecords: SelectOptionRecord[] = [];\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (item.selected) {\n      selectedItemRecords.push([item, i]);\n    }\n  }\n\n  return selectedItemRecords;\n}\n"
  },
  {
    "path": "select/outlined-select.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSelect} from './internal/outlined-select.js';\nimport {styles} from './internal/outlined-select-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-select': MdOutlinedSelect;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the \"outlined\"\n * variant.\n *\n * @example\n * ```html\n * <md-outlined-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-select')\nexport class MdOutlinedSelect extends OutlinedSelect {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles];\n}\n"
  },
  {
    "path": "select/select-option.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles} from '../menu/internal/menuitem/menu-item-styles.js';\n\nimport {SelectOptionEl} from './internal/selectoption/select-option.js';\n\nexport {type SelectOption} from './internal/selectoption/select-option.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-select-option': MdSelectOption;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the option that\n * can be placed inside of an md-select.\n *\n * This component is a subclass of `md-menu-item` and can accept the same slots,\n * properties, and events as `md-menu-item`.\n *\n * @example\n * ```html\n * <md-outlined-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-outlined-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-select-option')\nexport class MdSelectOption extends SelectOptionEl {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "select/select_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, render} from 'lit';\n\nimport {createFormTests} from '../testing/forms.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilledSelect} from './filled-select.js';\nimport {SelectHarness} from './harness.js';\nimport {MdOutlinedSelect} from './outlined-select.js';\nimport {MdSelectOption} from './select-option.js';\n\ndescribe('<md-outlined-select>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdOutlinedSelect.styles);\n  });\n\n  let root: HTMLDivElement;\n\n  beforeEach(() => {\n    root = document.createElement('div');\n    document.body.appendChild(root);\n  });\n\n  afterEach(() => {\n    root?.remove();\n  });\n\n  it('clicking on option triggers change', async () => {\n    let changed = false;\n    render(\n      html` <md-outlined-select\n        @change=${() => {\n          changed = true;\n        }}>\n        <md-select-option selected></md-select-option>\n        <md-select-option></md-select-option>\n      </md-outlined-select>`,\n      root,\n    );\n    const selectEl = root.querySelector('md-outlined-select')!;\n    await selectEl.updateComplete;\n\n    await new SelectHarness(selectEl).clickOption(1);\n\n    expect(changed).toBeTrue();\n  });\n\n  it('typeahead selects an option', async () => {\n    let changed = false;\n    render(\n      html` <md-outlined-select\n        @change=${() => {\n          changed = true;\n        }}>\n        <md-select-option\n          value=\"apple\"\n          typeahead-text=\"apple\"></md-select-option>\n        <md-select-option\n          value=\"banana\"\n          typeahead-text=\"banana\"></md-select-option>\n      </md-outlined-select>`,\n      root,\n    );\n    const selectEl = root.querySelector('md-outlined-select')!;\n    await selectEl.updateComplete;\n\n    const harness = new SelectHarness(selectEl);\n    await harness.focusWithKeyboard();\n    await harness.keypress('b');\n    await selectEl.updateComplete;\n\n    expect(selectEl.value).withContext('value after typeahead').toBe('banana');\n    expect(changed).withContext('option changed').toBeTrue();\n  });\n\n  it('typeahead with no matching option does not change selected option', async () => {\n    let changed = false;\n    render(\n      html` <md-outlined-select\n        @change=${() => {\n          changed = true;\n        }}>\n        <md-select-option\n          value=\"apple\"\n          typeahead-text=\"apple\"\n          selected></md-select-option>\n        <md-select-option\n          value=\"banana\"\n          typeahead-text=\"banana\"></md-select-option>\n      </md-outlined-select>`,\n      root,\n    );\n    const selectEl = root.querySelector('md-outlined-select')!;\n    await selectEl.updateComplete;\n\n    const harness = new SelectHarness(selectEl);\n    await harness.focusWithKeyboard();\n    await harness.keypress('z');\n    await selectEl.updateComplete;\n\n    expect(selectEl.value)\n      .withContext('value after non-matching typeahead keypress')\n      .toBe('apple');\n    expect(changed).withContext('did not change').toBeFalse();\n  });\n\n  it('clicking an option with mouse and then typeahead with no matching option does not change the selected option', async () => {\n    render(\n      html` <md-outlined-select>\n        <md-select-option\n          value=\"apple\"\n          typeahead-text=\"apple\"\n          selected></md-select-option>\n        <md-select-option\n          value=\"banana\"\n          typeahead-text=\"banana\"></md-select-option>\n      </md-outlined-select>`,\n      root,\n    );\n    const selectEl = root.querySelector('md-outlined-select')!;\n    await selectEl.updateComplete;\n\n    // Open menu to click an option\n    const harness = new SelectHarness(selectEl);\n    await harness.clickWithMouse();\n    await selectEl.updateComplete; // wait for menu to open\n\n    await harness.clickOption(1);\n    expect(selectEl.value)\n      .withContext('value after clicking option')\n      .toBe('banana');\n\n    await harness.keypress('z');\n    await selectEl.updateComplete;\n\n    expect(selectEl.value)\n      .withContext(\n        'value after non-matching typeahead keypress stays the same (banana)',\n      )\n      .toBe('banana');\n  });\n\n  describe('forms', () => {\n    createFormTests({\n      queryControl: (root) => root.querySelector('md-outlined-select'),\n      valueTests: [\n        {\n          name: 'unnamed',\n          render: () => html`\n            <md-outlined-select>\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\" selected></md-select-option>\n            </md-outlined-select>\n          `,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form without a name')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'unselected',\n          render: () => html`\n            <md-outlined-select name=\"select\">\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\"></md-select-option>\n            </md-outlined-select>\n          `,\n          assertValue(formData) {\n            expect(formData.get('select')).toBe('');\n          },\n        },\n        {\n          name: 'selected',\n          render: () => html`\n            <md-outlined-select name=\"select\">\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\" selected></md-select-option>\n            </md-outlined-select>\n          `,\n          assertValue(formData) {\n            expect(formData.get('select')).toBe('two');\n          },\n        },\n        {\n          name: 'disabled',\n          render: () => html`\n            <md-outlined-select name=\"select\" disabled>\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\" selected></md-select-option>\n            </md-outlined-select>\n          `,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when disabled')\n              .toHaveSize(0);\n          },\n        },\n      ],\n      resetTests: [\n        {\n          name: 'reset to unselected',\n          render: () => html`\n            <md-outlined-select name=\"select\">\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\"></md-select-option>\n            </md-outlined-select>\n          `,\n          change(select) {\n            select.value = 'one';\n          },\n          assertReset(select) {\n            expect(select.value)\n              .withContext('select.value after reset')\n              .toBe('');\n          },\n        },\n        {\n          name: 'reset to selected',\n          render: () => html`\n            <md-outlined-select name=\"select\">\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\" selected></md-select-option>\n            </md-outlined-select>\n          `,\n          change(select) {\n            select.value = 'one';\n          },\n          assertReset(select) {\n            expect(select.value)\n              .withContext('select.value after reset')\n              .toBe('two');\n          },\n        },\n      ],\n      restoreTests: [\n        {\n          name: 'restore unselected',\n          render: () => html`\n            <md-outlined-select name=\"select\">\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\"></md-select-option>\n            </md-outlined-select>\n          `,\n          assertRestored(select) {\n            expect(select.value)\n              .withContext('select.value after restore')\n              .toBe('');\n          },\n        },\n        {\n          name: 'restore selected',\n          render: () => html`\n            <md-outlined-select name=\"select\">\n              <md-select-option value=\"one\"></md-select-option>\n              <md-select-option value=\"two\" selected></md-select-option>\n            </md-outlined-select>\n          `,\n          assertRestored(select) {\n            expect(select.value)\n              .withContext('select.value after restore')\n              .toBe('two');\n          },\n        },\n      ],\n    });\n  });\n});\n\ndescribe('<md-filled-select>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledSelect.styles);\n  });\n});\n\ndescribe('<md-select-option>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdSelectOption.styles);\n  });\n});\n"
  },
  {
    "path": "select/test/assets.ts",
    "content": "/** @license Googler-authored internal-only code. */\n\n/**\n * User avatar as a dataurl.\n */\nexport const AVATAR_URL =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=';\n\n/**\n * Example image as a dataurl.\n */\nexport const IMAGE_URL =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAYAAADG4PRLAAAK4GlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUk8kWgOf/00NCgNClhN6RTgApoYciSAdRCUkgoYSYEBDEzuIKrgoiIqCu4EpTcHUpshbEggVRbNgXRBTUdbFgQ2V/4BF295333nn3nPnnO/e/c+fee2bOuQMA2Z8lFKbBcgCkCzJFYX6etJjYOBruKcABWUAFENBnscVCRmhoEEBkdv67vL+N2CFyw2LK17///6+iwOGK2QBA8QgncsTsdIQ7kfGcLRRlAoA6iOj1sjOFU3wNYUUREiDCT6Y4eYY/TnHiNKNJ0zYRYV4I0wDAk1gsUTIAJHNET8tiJyN+SFM5WAk4fAHCeQi7sXksDsLHETZPT8+Y4hGEjRF7IQBkpDqAnvgXn8l/858o9c9iJUt5Jq9pwXvzxcI0Vs7/WZr/Lelpktk9DJFB4on8w6ZqitTvTmpGoJQFiQtDZpnPman7FPMk/pGzzBZ7xc0yh+UdKF2btjBolpP4vkypn0xmxCxzxT7hsyzKCJPulSTyYswySzS3ryQ1UqrncZlS/7m8iOhZzuJHLZxlcWp44JyNl1QvkoRJ4+cK/Dzn9vWV5p4u/ku+fKZ0bSYvwl+aO2sufq6AMedTHCONjcP19pmziZTaCzM9pXsJ00Kl9tw0P6lenBUuXZuJHM65taHSGqawAkJnGQQBP0AD/sAbhCGzHUCyz+SuyJxKxCtDmCPiJ/MyaQzktnFpTAHb0pxmY2VjA8DU3Z05Dm/Dpu8kpHxyTpexHznG75H7UjynSywFoK0AANV7czr9PQBQ8gFo7WJLRFkzOvTUBwOIgAIUgRrQAnrAGFgAG+AAXIAH8AEBIAREgFiwFLABD6QDEcgGeWAdKABFYBvYASrAXlAD6sAhcAS0gePgNDgPLoNr4Ba4DwbAMHgBxsB7MAFBEA4iQ1RIDdKGDCAzyAaiQ26QDxQEhUGxUAKUDAkgCZQHbYCKoBKoAtoH1UM/Q8eg09BFqA+6Cw1Co9Ab6DOMgkmwIqwJG8LzYTrMgAPhCHgJnAwvh3PhfHgLXA5XwwfhVvg0fBm+BQ/AL+BxFEDJoJRROigLFB3lhQpBxaGSUCLUalQhqgxVjWpCdaC6UTdQA6iXqE9oLJqKpqEt0C5of3Qkmo1ejl6N3oyuQNehW9Fn0TfQg+gx9DcMGaOBMcM4Y5iYGEwyJhtTgCnDHMC0YM5hbmGGMe+xWKwy1gjriPXHxmJTsCuxm7G7sc3YTmwfdgg7jsPh1HBmOFdcCI6Fy8QV4HbhDuJO4a7jhnEf8TJ4bbwN3hcfhxfg1+PL8A34k/jr+Gf4CYIcwYDgTAghcAg5hK2E/YQOwlXCMGGCKE80IroSI4gpxHXEcmIT8RzxAfGtjIyMroyTzCIZvsxamXKZwzIXZAZlPpEUSKYkL1I8SULaQqoldZLukt6SyWRDsgc5jpxJ3kKuJ58hPyJ/lKXKWsoyZTmya2QrZVtlr8u+ohAoBhQGZSkll1JGOUq5SnkpR5AzlPOSY8mtlquUOybXLzcuT5W3lg+RT5ffLN8gf1F+RAGnYKjgo8BRyFeoUTijMERFUfWoXlQ2dQN1P/UcdVgRq2ikyFRMUSxSPKTYqzimpKBkpxSltEKpUumE0oAyStlQmamcprxV+YjybeXPKpoqDBWuyiaVJpXrKh9U56l6qHJVC1WbVW+pflajqfmopaoVq7WpPVRHq5uqL1LPVt+jfk795TzFeS7z2PMK5x2Zd08D1jDVCNNYqVGj0aMxrqml6acp1NyleUbzpZaylodWilap1kmtUW2qtps2X7tU+5T2c5oSjUFLo5XTztLGdDR0/HUkOvt0enUmdI10I3XX6zbrPtQj6tH1kvRK9br0xvS19YP18/Qb9e8ZEAzoBjyDnQbdBh8MjQyjDTcathmOGKkaMY1yjRqNHhiTjd2NlxtXG980wZrQTVJNdptcM4VN7U15ppWmV81gMwczvtlusz5zjLmTucC82rzfgmTBsMiyaLQYtFS2DLJcb9lm+Wq+/vy4+cXzu+d/s7K3SrPab3XfWsE6wHq9dYf1GxtTG7ZNpc1NW7Ktr+0a23bb13Zmdly7PXZ37Kn2wfYb7bvsvzo4OogcmhxGHfUdExyrHPvpivRQ+mb6BSeMk6fTGqfjTp+cHZwznY84/+Fi4ZLq0uAyssBoAXfB/gVDrrquLNd9rgNuNLcEtx/dBtx13Fnu1e6PPfQ8OB4HPJ4xTBgpjIOMV55WniLPFs8PXs5eq7w6vVHeft6F3r0+Cj6RPhU+j3x1fZN9G33H/Oz9Vvp1+mP8A/2L/fuZmkw2s545FuAYsCrgbCApMDywIvBxkGmQKKgjGA4OCN4e/GChwULBwrYQEMIM2R7yMNQodHnor4uwi0IXVS56GmYdlhfWHU4NXxbeEP4+wjNia8T9SONISWRXFCUqPqo+6kO0d3RJ9EDM/JhVMZdj1WP5se1xuLiouANx44t9Fu9YPBxvH18Qf3uJ0ZIVSy4uVV+atvTEMsoy1rKjCZiE6ISGhC+sEFY1azyRmViVOMb2Yu9kv+B4cEo5o1xXbgn3WZJrUknSSLJr8vbkUZ47r4z3ku/Fr+C/TvFP2ZvyITUktTZ1Mi06rTkdn56QfkygIEgVnM3QyliR0Sc0ExYIB5Y7L9+xfEwUKDoghsRLxO2ZikiT1CMxlnwnGcxyy6rM+pgdlX10hfwKwYqeHNOcTTnPcn1zf1qJXsle2ZWnk7cub3AVY9W+1dDqxNVda/TW5K8ZXuu3tm4dcV3quivrrdaXrH+3IXpDR75m/tr8oe/8vmsskC0QFfRvdNm493v09/zvezfZbtq16Vshp/BSkVVRWdGXzezNl36w/qH8h8ktSVt6tzps3bMNu02w7Xaxe3FdiXxJbsnQ9uDtraW00sLSdzuW7bhYZle2dydxp2TnQHlQefsu/V3bdn2p4FXcqvSsbK7SqNpU9WE3Z/f1PR57mvZq7i3a+/lH/o939vnta602rC6rwdZk1TzdH7W/+yf6T/UH1A8UHfhaK6gdqAurO1vvWF/foNGwtRFulDSOHow/eO2Q96H2Joumfc3KzUWHwWHJ4ec/J/x8+0jgka6j9KNNvxj8UtVCbSlshVpzWsfaeG0D7bHtfccCjnV1uHS0/Gr5a+1xneOVJ5RObD1JPJl/cvJU7qnxTmHny9PJp4e6lnXdPxNz5ubZRWd7zwWeu3De9/yZbkb3qQuuF45fdL547BL9Uttlh8utPfY9LVfsr7T0OvS2XnW82n7N6VpH34K+k9fdr5++4X3j/E3mzcu3Ft7qux15+05/fP/AHc6dkbtpd1/fy7o3cX/tA8yDwodyD8seaTyq/s3kt+YBh4ETg96DPY/DH98fYg+9eCJ+8mU4/yn5adkz7Wf1IzYjx0d9R689X/x8+IXwxcTLgt/lf696Zfzqlz88/ugZixkbfi16Pflm81u1t7Xv7N51jYeOP3qf/n7iQ+FHtY91n+ifuj9Hf342kf0F96X8q8nXjm+B3x5Mpk9OClki1nQrgEIGnJQEwJtapDeOBYCK9OXExTO99bRAM++BaQL/iWf672lxAKCmH4CIlQAEXQFgVwXSziL+KcibIJSC6F0AbGsrHf8ScZKtzYwvkjvSmjycnHxrDACuGICvxZOTEzWTk19rkGDvA9CZM9PTT4kW8r7IxgH8xif38ne/Av+QmX7/Lzn+cwZTEdiBf85/AsPlG21SePNzAAAAXGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAACoAIABAAAAAEAAABwoAMABAAAAAEAAABwAAAAAAzs/hgAAAK2aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTEyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjExMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqSz/U6AAAH10lEQVR4Ae2d+0/bSBDHJ0+SAAmEV4uOQum1V+lOp7v74f7/P+GkU6WWKyWEvENCQkLeCTdft0EgIDj22t61dyWUYK93x/PxrHd3Zjehk6+5W9JJVQ3MwqpKruX+rgENUPEnQQPUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiawvUABXXgOLiRxWX/0nxOzc9+nLyH4XDYfrz998oFAo9mc8PB33XhN7e3lK5UqHuzQ1ddzpUu7wkHPNr8h3Aq1abavXGHa98oUjD4ejuf7998RXA6XRKF8UiTSbjO0433JyWq1XfWqGvAJarNWq1O3fw5l9KlSq1rx8fn59X+dM3AEejERVLZba02SMe4/GYCnxuOn187lFmxQ74BmChVKL+YPCs+lttvBvrz55X9YQvAHa4t1mq1BYymEwmVK7VCNbop6Q8QDSL+UKJOy6TF7l0Ol0qlisv5lMpg/IA640GXTabpnSO8SB6qYuaWlMFSZRJaYAY3xWKpaWGCLDYs/M8zWb+6NAoDbBYLhszLssaRLN5RVfcqfFDUhZgr9c3hgZWIEx4wJ9jKzTz3rRSvpvXKAkQzR/eZXaawU73hqo+GFYoCbDVvubpscXDBjNWkDu/oMGCsaOZMrzOoxzAwWBIufyFEL2NeegBS1bZW6EUQCga7qFOtysEIAopV+vsdhJXnjDBTBakFMBef0DVWl2oxRjvU3Y5qTpPqhTAfKFAN72eyWfTfDZMBNTZslVMygBsXrWo0TA342IFBLwVKnZolACId18uz+M2Hr85lRCCUeJQjNlMrfALJQAiTMKNjobRoemq5fiVHiDcP99y504Z3oNyUVfJcAqrY4VSA/zuPShZmu98QGaJfy55nrQiYJJgiSptZZUaIGZcMO5zM2FYkefBPQKkVEjSAkRnAp0KzLy4nfo83qzweFOFDo20AOGohQV6lS6MeFL3H55l71dKgGjGihyk5GX8ymA45PCLsi2Px7IwrOSXEiAmq+Hu8TpVOAiqfe1dK2Dm/qUDCKuDq0gGD8FkMuWAqSK3BC8HTJlRthN5pAOICWuZPOUjhjedygtQuuVl6fU1+vXjL9JAjK/EaWVlxQnjEVKmdACxlm97Kyvk5oJQiHRNaBCULvIeNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqNUCR2vSgLA3QA6WLrFIDFKlND8rSAD1QusgqpZuJEXlzIsvC5PqQN1KAg3k8Ht0FAkeiEYrHYpTg6bZ4PO76rlAa4ALKgNbv96nO8agNjpXByt4Zh1rM+PjcWxIKhRkaUSQcoUQiTq/39mgjk6FkMuEKTGEA4XJxc9Y+EolSLCZM/AcYAQeWhoUvlwxvtGBjBGxrwtkNx++4O2Y/5jdKJZPGfO7+qz2GmnhQtuh/QicCfj8QPrx//v3kSNj7czecSqXo77/+eO605eOA0eBQ+5PTb4S9Z+wkyHh8eMAwt+wUs+haMb8fiIUhTqxZWCR5z4E1EnDgnuZy9OnzF9vwIDtk/PT5hE7Pco4FSDnTBi3SvKTnAA8BxAijmL/fRIiKsrC1CdxkR2/e8BaYYre+1MMIpgQl5y4uDHh2lm0/BxxlYvHMOdch8uFAfRogK+GSQxirHIfjBLw5VJRdYku8arXmh4R8Bh4g3t+nZ+eE5dZOJ9SBukQ+KIEGiB4nmjXEgLqV0NlDpJuopjTQAAfDgetrL/CgYHsTu0OU+QMXaIBYd+jV2ov2tZiNFQILEAtXMMviVWpdt4U0o4EFiH21vVwTj0G+iI5TYAEi4nrRHKfTltmHV2Nkf/PZwAKcztirwGMzrxLmj0UsIg0swFuG5yVA1D17YoP2ZR+owAJcVlGy5g8sQPyuEv68SrFolCKRiO3qvbsD26LbKyDGYRBRAQq0KkWEAYp4gIILMBrjZWNxq/q3fV0iwTE0Mfv1BxZglIOR1tfWbIOwWkCa64YMdlNgAUJxCHXw6rcFs5sbQuoONMBMep3W1lbtGsHS129ns8KsP9AA0Qs82N9fGoDdC37afy2kBwo5Ag0QCsBy7s0NMc0ZynspbWU3KZNJv5TN9PnAA0RX/t3RoSs9UgT7vj9+K+TdNycceIBQBN6DRwcH3Ct0LkgPY87jw0Phgb4a4I9H+dXeLn14d+zI4B7wPn54Tzvb4gN8nXvk5jbu0KcT3f/dnW2W9pbOeKsv7FgoIiVTSfr48zvKpMW99+7LJQRgJBKmvd0dV/cVy6yv378PYd93tncovZ6mk6+nxg9kWQ0+wrqN7MYmHXFofdLB9RFC1kYI055EBQEcYjhz+YLxe/RmRUPLkN3cpP1Xu8anEy3FPVlmQizwXoG++ToHgSEG9m9rXjWNjdcRFoiIMoTiI2E6LLGSoNXVFA/OV2k7u8UdFfe25tIAX3jkAHKV32Op5L7hAP7uiOX1gT+8+VgfiPUOYe6ohDmvwxb3SFoN8JFKnj4AMJi5EeHDe7oGa0f1MMKa3qS5SgOUBoU1QTRAa3qT5ioNUBoU1gTRAK3pTZqrNEBpUFgTRAO0pjdprtIApUFhTRAN0JrepLlKA5QGhTVBNEBrepPmKg1QGhTWBNEArelNmqs0QGlQWBNEA7SmN2mugj/Qu3XGzqhB7G5yzsgorNT/AQI1K7I2zvkPAAAAAElFTkSuQmCC';\n\n/**\n * One frame of the color blue in webm as a dataurl.\n *\n * Generated with\n * ffmpeg -f lavfi -i color=blue:s=1280x720 -vframes 1 ~/out.webm\n * cat ~/out.webm | base64 | tr -d '\\n'\n */\nexport const VIDEO_URL =\n  'data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAJrEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHYTbuMU6uEElTDZ1OsggEgTbuMU6uEHFO7a1OsggJV7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmsirXsYMPQkBNgI1MYXZmNTkuMjcuMTAwV0GNTGF2ZjU5LjI3LjEwMESJiEBEAAAAAAAAFlSua8OuAQAAAAAAADrXgQFzxYjFaDr5zFhASZyBACK1nIN1bmSIgQCGhVZfVlA5g4EBI+ODhAJiWgDgi7CCBQC6ggLQmoECElTDZ0CBc3OgY8CAZ8iaRaOHRU5DT0RFUkSHjUxhdmY1OS4yNy4xMDBzc9tjwItjxYjFaDr5zFhASWfIpUWjh0VOQ09ERVJEh5hMYXZjNTkuMzcuMTAwIGxpYnZweC12cDlnyKJFo4hEVVJBVElPTkSHlDAwOjAwOjAwLjA0MDAwMDAwMAAAH0O2dUCo54EAo0CigQAAgIJJg0IAT/As9gA4JBwYShgAQGIMw/o6+kdo6+kAuaP9KgAAAAAcZw5Vl/m2cRY6ymCqlMFVJYKqSwVSleqUBBBCAAAAABxnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAAAAAHGcOVZf5tnEWOspgqpTBVSWCqksFUpXqlAQQQgBnDlWX+bZxFjrKYKqUwVUlgqpLBVKV6pQEEEIAHFO7a5G7j7OBALeK94EB8YIBp/CBAw==';\n"
  },
  {
    "path": "select/test/window_size.json",
    "content": "{\n  \"capabilities\": {\n    \"goog:chromeOptions\": {\n      \"args\": [\"--window-position=0,0\", \"--window-size=3400,2215\"]\n    },\n    \"moz:firefoxOptions\": {\n      \"args\": [\"-width=3400\",\"-height=2215\"]\n    }\n  },\n  \"extension\": {\n    \"xvfbResolution\": \"3400x2215x24\"\n  }\n}\n"
  },
  {
    "path": "slider/_slider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/slider' show theme;\n"
  },
  {
    "path": "slider/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Slider',\n  [new Knob('disabled', {ui: boolInput(), defaultValue: false})],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "slider/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "slider/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/slider/slider.js';\n\nimport {\n  labelStyles,\n  MaterialStoryInit,\n} from './material-collection.js';\nimport {MdSlider} from '@material/web/slider/slider.js';\nimport {css, html} from 'lit';\n\n/** Knob types for slider stories. */\nexport interface StoryKnobs {\n  disabled: boolean;\n}\n\nconst sharedStyles = css`\n  label {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    place-items: flex-start;\n  }\n`;\n\nconst single: MaterialStoryInit<StoryKnobs> = {\n  name: 'Single point sliders',\n  styles: [labelStyles, sharedStyles],\n  render({disabled}) {\n    return html`\n      <label>\n        Continuous\n        <md-slider\n          ?disabled=${disabled ?? false}\n          aria-label=\"An example continuous slider\"></md-slider>\n      </label>\n\n      <label>\n        Labeled\n        <md-slider\n          labeled\n          ?disabled=${disabled ?? false}\n          aria-label=\"An example slider with a label\"></md-slider>\n      </label>\n\n      <label>\n        Tick marks\n        <md-slider\n          labeled\n          step=\"10\"\n          ticks\n          ?disabled=${disabled ?? false}\n          aria-label=\"An example slider with tick marks\"></md-slider>\n      </label>\n    `;\n  },\n};\n\nconst range: MaterialStoryInit<StoryKnobs> = {\n  name: 'Range sliders',\n  styles: [labelStyles, sharedStyles],\n  render({disabled}) {\n    return html`\n      <label>\n        Range\n        <md-slider\n          range\n          ?disabled=${disabled ?? false}\n          aria-label=\"An example range slider\"></md-slider>\n      </label>\n\n      <label>\n        Labeled\n        <md-slider\n          labeled\n          range\n          ?disabled=${disabled ?? false}\n          aria-label=\"An example range slider with labels\"></md-slider>\n      </label>\n\n      <label>\n        Tick marks\n        <md-slider\n          labeled\n          range\n          step=\"10\"\n          ticks\n          ?disabled=${disabled ?? false}\n          value-start=\"30\"\n          value-end=\"70\"\n          aria-label=\"An example range slider with tick marks\"></md-slider>\n      </label>\n    `;\n  },\n};\n\nconst customStyling: MaterialStoryInit<StoryKnobs> = {\n  name: 'Custom styling',\n  styles: [\n    labelStyles,\n    sharedStyles,\n    css`\n      md-slider {\n        --myColor: hsl(180, 15%, 25%);\n        --myInactiveColor: hsl(180, 15%, 75%);\n\n        /* handle */\n        --md-slider-handle-shape: 4px;\n        --md-slider-handle-height: 12px;\n        --md-slider-handle-width: 20px;\n        --md-slider-handle-color: var(--myColor);\n        --md-slider-focus-handle-color: yellow;\n        --md-slider-hover-handle-color: green;\n        --md-slider-pressed-handle-color: pink;\n\n        /* label */\n        --md-slider-label-container-height: 24px;\n        --md-slider-label-container-color: var(--myColor);\n        --md-slider-label-text-size: 20px;\n\n        /* track */\n        --md-slider-active-track-shape: 4px;\n        --md-slider-inactive-track-shape: 4px;\n\n        --md-slider-active-track-height: 16px;\n        --md-slider-inactive-track-height: 16px;\n\n        --md-slider-active-track-color: var(--myInactiveColor);\n        --md-slider-inactive-track-color: var(--myInactiveColor);\n\n        /* state layer */\n        --md-slider-state-layer-color: var(--myColor);\n        --md-slider-hover-state-layer-color: var(--myColor);\n        --md-slider-pressed-state-layer-color: var(--myColor);\n      }\n    `,\n  ],\n  render({disabled}) {\n    const labels = ['🤬', '😡', '😔', '😐', '😌', '😁', '🤪'];\n    function labelFor(value: number) {\n      return labels[Math.round(value * (labels.length - 1))];\n    }\n    function updateLabel(event: Event) {\n      const target = event.target as MdSlider;\n      const {min, max, valueStart, valueEnd} = target;\n      const range = max - min;\n      const fractionStart = valueStart! / range;\n      const fractionEnd = valueEnd! / range;\n      target.valueLabelStart = labelFor(fractionStart);\n      target.valueLabelEnd = labelFor(fractionEnd);\n    }\n    return html`\n      <label>\n        Custom styles\n        <md-slider\n          aria-label=\"An example slider with custom styles\"\n          range\n          value-start=\"2\"\n          value-end=\"5\"\n          value-label-start=\"😔\"\n          value-label-end=\"😌\"\n          ticks\n          labeled\n          min=\"0\"\n          max=\"7\"\n          step=\"1\"\n          .disabled=${disabled ?? false}\n          @pointerdown=${updateLabel}\n          @input=${updateLabel}></md-slider>\n      </label>\n    `;\n  },\n};\n\n/** slider stories. */\nexport const stories = [single, range, customStyling];\n"
  },
  {
    "path": "slider/harness.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Slider} from './internal/slider.js';\n\n/**\n * Test harness for slider.\n */\nexport class SliderHarness extends Harness<Slider> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLInputElement>(\n      'input.end',\n    )!;\n  }\n\n  getInputs() {\n    return [\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!,\n      this.element.renderRoot.querySelector<HTMLInputElement>('input.start')!,\n    ];\n  }\n  getHandles() {\n    return [\n      this.element.renderRoot.querySelector('.handle.end')!,\n      this.element.renderRoot.querySelector('.handle.start')!,\n    ];\n  }\n\n  getLabels() {\n    return Array.from(this.element.renderRoot.querySelectorAll('.label'));\n  }\n\n  isLabelShowing() {\n    const labels = this.getLabels();\n    return labels.some((l) => {\n      // remove transition to avoid the need to wait for it.\n      (l as HTMLElement).style.setProperty('transition', 'none');\n      const {width} = l.getBoundingClientRect();\n      (l as HTMLElement).style.removeProperty('transition');\n      return width > 0;\n    });\n  }\n\n  async simulateValueInteraction(value: number, el?: HTMLInputElement) {\n    if (!el) {\n      el = this.getInputs()[0];\n    }\n    el.focus();\n    el.dispatchEvent(new Event('pointerdown', {bubbles: true, composed: true}));\n    el.value = String(value);\n    el.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('pointerup', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('change', {bubbles: true}));\n    await this.element.updateComplete;\n  }\n\n  private positionEventAtHandle(init: PointerEventInit, startHandle = false) {\n    const handle = this.getHandles()[startHandle ? 1 : 0];\n    const {x, y} = handle.getBoundingClientRect();\n    return {...init, clientX: x, clientY: y, screenX: x, screenY: y};\n  }\n\n  protected override simulateStartHover(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n  ) {\n    const i = this.getInputs().indexOf(element as HTMLInputElement);\n    if (i >= 0 || element === this.element) {\n      init = this.positionEventAtHandle(init, i === 1);\n    }\n    super.simulateStartHover(element, init);\n  }\n\n  protected override simulateMousePress(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n  ) {\n    super.simulateMousePress(element, init);\n    // advance beyond RAF, which is used by the element's pointerDown handler.\n    jasmine.clock().tick(1);\n  }\n}\n"
  },
  {
    "path": "slider/internal/_slider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../elevation/elevation';\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n$_md-sys-shape: tokens.md-sys-shape-values();\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-slider-supported-tokens;\n\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-slider-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-slider-values();\n\n  // The max clip is reduced by 1 full tick display which is 2x the container\n  // size to account for always showing the active track on the outside\n  // edge of the last tick.\n  $_active-track-max-clip: calc(\n    100% - var(--_with-tick-marks-container-size) * 2\n  );\n  // When the start fraction is !0, add clipping by the tick container size\n  $_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);\n  $_active-track-start-offset: calc(\n    var(--_with-tick-marks-container-size) * $_start-fraction-not-zero\n  );\n  $_active-track-start-clip: calc(\n    $_active-track-start-offset + $_active-track-max-clip *\n      var(--_start-fraction)\n  );\n\n  // When the end fraction is !1, add clipping by the tick container size\n  $_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);\n  $_active-track-end-offset: calc(\n    var(--_with-tick-marks-container-size) * $_end-fraction-not-one\n  );\n  $_active-track-end-clip: calc(\n    $_active-track-end-offset + $_active-track-max-clip *\n      (1 - var(--_end-fraction))\n  );\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    // Set these to avoid token test failures\n    --_start-fraction: 0;\n    --_end-fraction: 0;\n    --_tick-count: 0;\n\n    display: inline-flex;\n    vertical-align: middle;\n    min-inline-size: 200px;\n\n    @include elevation.theme(\n      (\n        level: var(--_handle-elevation),\n        shadow-color: var(--_handle-shadow-color),\n      )\n    );\n  }\n\n  md-focus-ring {\n    height: 48px;\n    inset: unset;\n    width: 48px;\n  }\n\n  md-elevation {\n    transition-duration: map.get($_md-sys-motion, 'duration-medium1');\n    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');\n  }\n\n  @media (prefers-reduced-motion) {\n    .label {\n      transition-duration: 0;\n    }\n  }\n\n  // Note, opacity for active track and handle controlled via host.\n  // This avoids bleed through from the handle to the track since they overlap.\n  // It also means the inactive track opacity is calc'd to compensate.\n  :host([disabled]) {\n    opacity: var(--_disabled-active-track-opacity);\n\n    @include elevation.theme(\n      (\n        level: var(--_disabled-handle-elevation),\n      )\n    );\n  }\n\n  .container {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    position: relative;\n    block-size: var(--_state-layer-size);\n    // note, only the native inputs are interactive.\n    pointer-events: none;\n    // ensure scrolling is prevented on mobile.\n    touch-action: none;\n    user-select: none;\n  }\n\n  .track,\n  .tickmarks {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n  }\n\n  // inactive-track\n  .track::before,\n  .tickmarks::before,\n  // active-track\n  .track::after,\n  .tickmarks::after {\n    position: absolute;\n    content: '';\n    // pad the track inward by half the ripple size offset by the tick container size.\n    $_track-padding: calc(\n      (var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size)\n    );\n    inset-inline-start: $_track-padding;\n    inset-inline-end: $_track-padding;\n\n    // ticks size: set here since it does not change.\n    background-size: calc(\n        (100% - var(--_with-tick-marks-container-size) * 2) / var(--_tick-count)\n      )\n      100%;\n  }\n\n  // inactive-track\n  .track::before,\n  .tickmarks::before {\n    block-size: var(--_inactive-track-height);\n    border-radius: var(--_inactive-track-shape);\n  }\n\n  .track::before {\n    background: var(--_inactive-track-color);\n  }\n\n  .tickmarks::before {\n    background-image: _get-tick-image(\n      var(--_with-tick-marks-inactive-container-color)\n    );\n  }\n\n  :host([disabled]) .track::before {\n    // Note, the active track opacity is applied to the entire host,\n    // so the inactive track is calc'd to compensate.\n    opacity: calc(\n      (1 / var(--_disabled-active-track-opacity)) *\n        var(--_disabled-inactive-track-opacity)\n    );\n    background: var(--_disabled-inactive-track-color);\n  }\n\n  // active-track\n  .track::after,\n  .tickmarks::after {\n    block-size: var(--_active-track-height);\n    border-radius: var(--_active-track-shape);\n    clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);\n  }\n\n  .track::after {\n    background: var(--_active-track-color);\n  }\n\n  .tickmarks::after {\n    background-image: _get-tick-image(\n      var(--_with-tick-marks-active-container-color)\n    );\n  }\n\n  // rtl for active track clipping\n  .track:dir(rtl)::after {\n    clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);\n  }\n\n  .tickmarks:dir(rtl)::after {\n    clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);\n  }\n\n  :host([disabled]) .track::after {\n    background: var(--_disabled-active-track-color);\n  }\n\n  :host([disabled]) .tickmarks::before {\n    background-image: _get-tick-image(\n      var(--_with-tick-marks-disabled-container-color)\n    );\n  }\n\n  // container for the handle that is inset with padding to be\n  // track-sized so that the handle container can be positioned with % only\n  // and avoid a Safari issue with not being able to transition values that\n  // are calced from different units.\n  // TODO remove when https://bugs.webkit.org/show_bug.cgi?id=23775 is\n  // addressed.\n  .handleContainerPadded {\n    position: relative;\n    block-size: 100%;\n    inline-size: 100%;\n    padding-inline: calc(var(--_state-layer-size) / 2);\n  }\n\n  .handleContainerBlock {\n    position: relative;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .handleContainer {\n    position: absolute;\n    inset-block-start: 0;\n    inset-block-end: 0;\n    inset-inline-start: calc(100% * var(--_start-fraction));\n    inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)));\n  }\n\n  // handle\n  .handle {\n    position: absolute;\n    block-size: var(--_state-layer-size);\n    inline-size: var(--_state-layer-size);\n    border-radius: var(--_handle-shape);\n    display: flex;\n    place-content: center;\n    place-items: center;\n  }\n\n  .handleNub {\n    position: absolute;\n    height: var(--_handle-height);\n    width: var(--_handle-width);\n    border-radius: var(--_handle-shape);\n    background: var(--_handle-color);\n  }\n\n  :host([disabled]) .handleNub {\n    background: var(--_disabled-handle-color);\n  }\n\n  input.end:focus ~ .handleContainerPadded .handle.end > .handleNub,\n  input.start:focus ~ .handleContainerPadded .handle.start > .handleNub {\n    background: var(--_focus-handle-color);\n  }\n\n  // prefix classes exist to overcome specificity of focus styling.\n  .container > .handleContainerPadded .handle.hover > .handleNub {\n    background: var(--_hover-handle-color);\n  }\n\n  :host(:not([disabled])) {\n    input.end:active ~ .handleContainerPadded .handle.end > .handleNub,\n    input.start:active ~ .handleContainerPadded .handle.start > .handleNub {\n      background: var(--_pressed-handle-color);\n    }\n  }\n\n  .onTop.isOverlapping {\n    .label,\n    .label::before {\n      outline: var(--_with-overlap-handle-outline-color) solid\n        var(--_with-overlap-handle-outline-width);\n    }\n\n    .handleNub {\n      border: var(--_with-overlap-handle-outline-color) solid\n        var(--_with-overlap-handle-outline-width);\n    }\n  }\n\n  .handle.start {\n    inset-inline-start: calc(0px - var(--_state-layer-size) / 2);\n  }\n  .handle.end {\n    inset-inline-end: calc(0px - var(--_state-layer-size) / 2);\n  }\n\n  // label\n  .label {\n    position: absolute;\n    box-sizing: border-box;\n    display: flex;\n    padding: 4px;\n    place-content: center;\n    place-items: center;\n    border-radius: map.get($_md-sys-shape, 'corner-full');\n\n    color: var(--_label-text-color);\n    font-family: var(--_label-text-font);\n    font-size: var(--_label-text-size);\n    line-height: var(--_label-text-line-height);\n    font-weight: var(--_label-text-weight);\n\n    inset-block-end: 100%;\n    min-inline-size: var(--_label-container-height);\n    min-block-size: var(--_label-container-height);\n    background: var(--_label-container-color);\n    transition: transform map.get($_md-sys-motion, 'duration-short2')\n      map.get($_md-sys-motion, 'easing-emphasized');\n    transform-origin: center bottom;\n    transform: scale(0);\n  }\n\n  // note, `:has` needed only for Safari; it's wrapped in a \"forgiving\"\n  // `:where` since the syntax isn't supported yet in Firefox.\n  :host(:focus-within) .label,\n  .handleContainer.hover .label,\n  :where(:has(input:active)) .label {\n    transform: scale(1);\n  }\n\n  .label::before,\n  .label::after {\n    position: absolute;\n    display: block;\n    content: '';\n    background: inherit;\n  }\n\n  // triangle below label\n  .label::before {\n    // Note, sizing carefully estimated to create an ice cream cone shape.\n    $_triangleSize: calc(var(--_label-container-height) / 2);\n    inline-size: $_triangleSize;\n    block-size: $_triangleSize;\n    bottom: calc(var(--_label-container-height) / -10);\n    transform: rotate(45deg);\n  }\n\n  // fits inside label and occludes top half of triangle.\n  .label::after {\n    inset: 0px;\n    border-radius: inherit;\n  }\n\n  // must stack above the label's pseudo-elements.\n  .labelContent {\n    z-index: 1;\n  }\n\n  // native input styling\n  // note, the input is what the user interacts with so it must render and\n  // be clickable, but it is visually hidden via opacity: 0 and non-clickable\n  // styled ui is shown instead and positioned accordingly.\n  input[type='range'] {\n    opacity: 0;\n    -webkit-tap-highlight-color: transparent;\n    position: absolute;\n    box-sizing: border-box;\n    // needed for firefox\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    background: transparent;\n    cursor: pointer;\n    pointer-events: auto;\n    appearance: none;\n  }\n\n  input[type='range']:focus {\n    outline: none;\n  }\n\n  ::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n  }\n\n  ::-moz-range-track {\n    appearance: none;\n  }\n\n  ::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    // note, this is sized to align with thumb\n    block-size: var(--_handle-height);\n    inline-size: var(--_handle-width);\n    opacity: 0;\n    z-index: 2;\n  }\n\n  @include _get-safari-knob-translate('end');\n  @include _get-safari-knob-translate('start');\n\n  ::-moz-range-thumb {\n    appearance: none;\n    block-size: var(--_state-layer-size);\n    inline-size: var(--_state-layer-size);\n    transform: scaleX(0);\n    opacity: 0;\n    z-index: 2;\n  }\n\n  // Clip the inputs to the space left/right of the center point between the\n  // values so the right input gets pointer events.\n  $_clip-to-start: calc(\n    var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *\n      (\n        var(--_start-fraction) +\n          ((var(--_end-fraction) - var(--_start-fraction)) / 2)\n      )\n  );\n\n  $_clip-to-end: calc(100% - $_clip-to-start);\n\n  // clip left side of \"start\" input\n  .ranged input.start {\n    clip-path: inset(0 $_clip-to-end 0 0);\n  }\n\n  // in 'rtl', clip right side of \"lesser\" input\n  .ranged input.start:dir(rtl) {\n    clip-path: inset(0 0 0 $_clip-to-end);\n  }\n\n  // clip right side of \"end\" input\n  .ranged input.end {\n    clip-path: inset(0 0 0 $_clip-to-start);\n  }\n\n  // in 'rtl', clip left side of \"greater\" input\n  .ranged input.end:dir(rtl) {\n    clip-path: inset(0 $_clip-to-start 0 0);\n  }\n\n  .onTop {\n    z-index: 1;\n  }\n\n  // Ripple\n  .handle {\n    @include ripple.theme(\n      (\n        hover-color: var(--_hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  md-ripple {\n    border-radius: 50%;\n    height: var(--_state-layer-size);\n    width: var(--_state-layer-size);\n  }\n}\n\n// Returns a background-image with sized circular ticks of the given color.\n@function _get-tick-image($color) {\n  @return radial-gradient(\n    circle at var(--_with-tick-marks-container-size) center,\n    #{$color} 0,\n    #{$color} calc(var(--_with-tick-marks-container-size) / 2),\n    transparent calc(var(--_with-tick-marks-container-size) / 2)\n  );\n}\n\n// Webkit on iOS requires _some_ size on the thumb. We want to make this the\n// same as --_handle-size but also be centered on the handle.\n//\n// the layout is similar to this:\n// [()---[()===========]----]\n//\n// where - is the native input and the == is the material track.\n// at 0 we want to shift the native knob right (padding + knob-size / 2):\n// [----[(())===========]----]\n//\n// at the end we want to shift the native knob left by the same amount:\n// [----[===========(())]----]\n//\n// Therefore we can do `layout-shift - 2 * `percent-fraction` * `layout-shift`\n// and in RTL we want to do the the same * -1\n@mixin _get-safari-knob-translate($start-or-end) {\n  input.#{$start-or-end}::-webkit-slider-thumb {\n    // AKA `layout-shift` in the equations above\n    --_track-and-knob-padding: calc(\n      (var(--_state-layer-size) - var(--_handle-width)) / 2\n    );\n    --_x-translate: calc(\n      var(--_track-and-knob-padding) - 2 * var(--_#{$start-or-end}-fraction) *\n        var(--_track-and-knob-padding)\n    );\n    transform: translateX(var(--_x-translate));\n  }\n\n  input.#{$start-or-end}:dir(rtl)::-webkit-slider-thumb {\n    transform: translateX(calc(-1 * var(--_x-translate)));\n  }\n}\n"
  },
  {
    "path": "slider/internal/forced-colors-styles.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './slider';\n// go/keep-sorted end\n\n@media (forced-colors: active) {\n  :host {\n    $container-color: CanvasText; // white\n    $color: Canvas; // black\n    $disabled-color: GrayText;\n    @include slider.theme(\n      (\n        active-track-color: $container-color,\n        disabled-active-track-color: $disabled-color,\n        disabled-active-track-opacity: 1,\n        disabled-handle-color: $disabled-color,\n        disabled-inactive-track-color: $disabled-color,\n        disabled-inactive-track-opacity: 1,\n        focus-handle-color: $container-color,\n        handle-color: $container-color,\n        handle-shadow-color: $color,\n        hover-handle-color: $container-color,\n        hover-state-layer-color: $color,\n        hover-state-layer-opacity: 1,\n        inactive-track-color: $color,\n        label-container-color: $color,\n        label-text-color: $container-color,\n        pressed-handle-color: $container-color,\n        pressed-state-layer-color: $color,\n        pressed-state-layer-opacity: 1,\n        with-overlap-handle-outline-color: $container-color,\n      )\n    );\n  }\n\n  .label,\n  .label::before {\n    border: var(--_with-overlap-handle-outline-color) solid\n      var(--_with-overlap-handle-outline-width);\n  }\n\n  // inactive track\n  :host(:not([disabled])) .track::before {\n    border: 1px solid var(--_active-track-color);\n  }\n\n  // inactive-track\n  .tickmarks::before {\n    // A url must be used when forced-colors is active as it's the only value\n    // that is respected. The radial-gradient is not displayed. This is a\n    // stop-gap solution so ticks are displayed at all when forced-colors is\n    // active.\n    // Note:\n    // * The SVG has no viewBox which lets the svg take its dimensions from\n    //   background-size.\n    // * The fill is set directly. Using currentColor does not seem to work,\n    //   hence the duplication of background-image.\n    // * This approach does not respect tick sizes. Instead they will always be\n    //   1px wide. This is a limitation of using the url, as I'm not sure how\n    //   to pass in a custom property to change the `r` attribute.\n    // TODO(b/298051946): Tick marks cannot be resized in HCM\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    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E\");\n    // stylelint-enable function-url-quotes\n  }\n\n  // active-track\n  .tickmarks::after {\n    // See inactive-track documentation for background-image.\n    // stylelint-disable function-url-quotes -- SVG data URI\n    // TODO(b/298051946): Tick marks cannot be resized in HCM\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E\");\n    // stylelint-enable function-url-quotes\n  }\n\n  :host([disabled]) .tickmarks::before {\n    // TODO(b/298051946): Tick marks cannot be resized in HCM\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    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E\");\n    // stylelint-enable function-url-quotes\n  }\n}\n"
  },
  {
    "path": "slider/internal/slider-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use './slider';\n\n@include slider.styles;\n"
  },
  {
    "path": "slider/internal/slider.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n// Disable warning for classMap with destructuring\n// tslint:disable:no-implicit-dictionary-conversion\n\n// Separate variable needed for closure.\nconst sliderBaseClass = mixinDelegatesAria(\n  mixinFormAssociated(mixinElementInternals(LitElement)),\n);\n\n/**\n * Slider component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Slider extends sliderBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The slider minimum value\n   */\n  @property({type: Number}) min = 0;\n\n  /**\n   * The slider maximum value\n   */\n  @property({type: Number}) max = 100;\n\n  /**\n   * The slider value displayed when range is false.\n   */\n  @property({type: Number}) value?: number;\n\n  /**\n   * The slider start value displayed when range is true.\n   */\n  @property({type: Number, attribute: 'value-start'}) valueStart?: number;\n\n  /**\n   * The slider end value displayed when range is true.\n   */\n  @property({type: Number, attribute: 'value-end'}) valueEnd?: number;\n\n  /**\n   * An optional label for the slider's value displayed when range is\n   * false; if not set, the label is the value itself.\n   */\n  @property({attribute: 'value-label'}) valueLabel = '';\n\n  /**\n   * An optional label for the slider's start value displayed when\n   * range is true; if not set, the label is the valueStart itself.\n   */\n  @property({attribute: 'value-label-start'}) valueLabelStart = '';\n\n  /**\n   * An optional label for the slider's end value displayed when\n   * range is true; if not set, the label is the valueEnd itself.\n   */\n  @property({attribute: 'value-label-end'}) valueLabelEnd = '';\n\n  /**\n   * Aria label for the slider's start handle displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-label-start'}) ariaLabelStart = '';\n\n  /**\n   * Aria value text for the slider's start value displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-valuetext-start'}) ariaValueTextStart = '';\n\n  /**\n   * Aria label for the slider's end handle displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-label-end'}) ariaLabelEnd = '';\n\n  /**\n   * Aria value text for the slider's end value displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-valuetext-end'}) ariaValueTextEnd = '';\n\n  /**\n   * The step between values.\n   */\n  @property({type: Number}) step = 1;\n\n  /**\n   * Whether or not to show tick marks.\n   */\n  @property({type: Boolean}) ticks = false;\n\n  /**\n   * Whether or not to show a value label when activated.\n   */\n  @property({type: Boolean}) labeled = false;\n\n  /**\n   * Whether or not to show a value range. When false, the slider displays\n   * a slideable handle for the value property; when true, it displays\n   * slideable handles for the valueStart and valueEnd properties.\n   */\n  @property({type: Boolean}) range = false;\n\n  /**\n   * The HTML name to use in form submission for a range slider's starting\n   * value. Use `name` instead if both the start and end values should use the\n   * same name.\n   */\n  get nameStart() {\n    return this.getAttribute('name-start') ?? this.name;\n  }\n  set nameStart(name: string) {\n    this.setAttribute('name-start', name);\n  }\n\n  /**\n   * The HTML name to use in form submission for a range slider's ending value.\n   * Use `name` instead if both the start and end values should use the same\n   * name.\n   */\n  get nameEnd() {\n    return this.getAttribute('name-end') ?? this.nameStart;\n  }\n  set nameEnd(name: string) {\n    this.setAttribute('name-end', name);\n  }\n\n  @query('input.start') private readonly inputStart!: HTMLInputElement | null;\n  @query('.handle.start') private readonly handleStart!: HTMLDivElement | null;\n  @queryAsync('md-ripple.start')\n  private readonly rippleStart!: Promise<MdRipple | null>;\n\n  @query('input.end') private readonly inputEnd!: HTMLInputElement | null;\n  @query('.handle.end') private readonly handleEnd!: HTMLDivElement | null;\n  @queryAsync('md-ripple.end')\n  private readonly rippleEnd!: Promise<MdRipple | null>;\n\n  // handle hover/pressed states are set manually since the handle\n  // does not receive pointer events so that the native inputs are\n  // interaction targets.\n  @state() private handleStartHover = false;\n  @state() private handleEndHover = false;\n\n  @state() private startOnTop = false;\n  @state() private handlesOverlapping = false;\n\n  @state() private renderValueStart?: number;\n  @state() private renderValueEnd?: number;\n\n  // Note: start aria-* properties are only applied when range=true, which is\n  // why they do not need to handle both cases.\n  private get renderAriaLabelStart() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return (\n      this.ariaLabelStart ||\n      (ariaLabel && `${ariaLabel} start`) ||\n      this.valueLabelStart ||\n      String(this.valueStart)\n    );\n  }\n\n  private get renderAriaValueTextStart() {\n    return (\n      this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart)\n    );\n  }\n\n  // Note: end aria-* properties are applied for single and range sliders, which\n  // is why it needs to handle `this.range` (while start aria-* properties do\n  // not).\n  private get renderAriaLabelEnd() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.range) {\n      return (\n        this.ariaLabelEnd ||\n        (ariaLabel && `${ariaLabel} end`) ||\n        this.valueLabelEnd ||\n        String(this.valueEnd)\n      );\n    }\n\n    return ariaLabel || this.valueLabel || String(this.value);\n  }\n\n  private get renderAriaValueTextEnd() {\n    if (this.range) {\n      return (\n        this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd)\n      );\n    }\n\n    // Needed for conformance\n    const {ariaValueText} = this as ARIAMixinStrict;\n    return ariaValueText || this.valueLabel || String(this.value);\n  }\n\n  // used in synthetic events generated to control ripple hover state.\n  private ripplePointerId = 1;\n\n  // flag to prevent processing of re-dispatched input event.\n  private isRedispatchingEvent = false;\n\n  private action?: Action;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.inputEnd) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.inputEnd);\n      });\n    }\n  }\n\n  override focus() {\n    this.inputEnd?.focus();\n  }\n\n  protected override willUpdate(changed: PropertyValues) {\n    this.renderValueStart = changed.has('valueStart')\n      ? this.valueStart\n      : this.inputStart?.valueAsNumber;\n    const endValueChanged =\n      (changed.has('valueEnd') && this.range) || changed.has('value');\n    this.renderValueEnd = endValueChanged\n      ? this.range\n        ? this.valueEnd\n        : this.value\n      : this.inputEnd?.valueAsNumber;\n    // manually handle ripple hover state since the handle is pointer events\n    // none.\n    if (changed.get('handleStartHover') !== undefined) {\n      this.toggleRippleHover(this.rippleStart, this.handleStartHover);\n    } else if (changed.get('handleEndHover') !== undefined) {\n      this.toggleRippleHover(this.rippleEnd, this.handleEndHover);\n    }\n  }\n\n  protected override updated(changed: PropertyValues) {\n    // Validate input rendered value and re-render if necessary. This ensures\n    // the rendred handle stays in sync with the input thumb which is used for\n    // interaction. These can get out of sync if a supplied value does not\n    // map to an exactly stepped value between min and max.\n    if (this.range) {\n      this.renderValueStart = this.inputStart!.valueAsNumber;\n    }\n    this.renderValueEnd = this.inputEnd!.valueAsNumber;\n    // update values if they are unset\n    // when using a range, default to equi-distant between\n    // min - valueStart - valueEnd - max\n    if (this.range) {\n      const segment = (this.max - this.min) / 3;\n      if (this.valueStart === undefined) {\n        this.inputStart!.valueAsNumber = this.min + segment;\n        // read actual value from input\n        const v = this.inputStart!.valueAsNumber;\n        this.valueStart = this.renderValueStart = v;\n      }\n      if (this.valueEnd === undefined) {\n        this.inputEnd!.valueAsNumber = this.min + 2 * segment;\n        // read actual value from input\n        const v = this.inputEnd!.valueAsNumber;\n        this.valueEnd = this.renderValueEnd = v;\n      }\n    } else {\n      this.value ??= this.renderValueEnd;\n    }\n    if (\n      changed.has('range') ||\n      changed.has('renderValueStart') ||\n      changed.has('renderValueEnd') ||\n      this.isUpdatePending\n    ) {\n      // Only check if the handle nubs are overlapping, as the ripple touch\n      // target extends subtantially beyond the boundary of the handle nub.\n      const startNub = this.handleStart?.querySelector('.handleNub');\n      const endNub = this.handleEnd?.querySelector('.handleNub');\n      this.handlesOverlapping = isOverlapping(startNub, endNub);\n    }\n    // called to finish the update imediately;\n    // note, this is a no-op unless an update is scheduled\n    this.performUpdate();\n  }\n\n  protected override render() {\n    const step = this.step === 0 ? 1 : this.step;\n    const range = Math.max(this.max - this.min, step);\n    const startFraction = this.range\n      ? ((this.renderValueStart ?? this.min) - this.min) / range\n      : 0;\n    const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;\n    const containerStyles = {\n      // for clipping inputs and active track.\n      '--_start-fraction': String(startFraction),\n      '--_end-fraction': String(endFraction),\n      // for generating tick marks\n      '--_tick-count': String(range / step),\n    };\n    const containerClasses = {ranged: this.range};\n\n    // optional label values to show in place of the value.\n    const labelStart = this.valueLabelStart || String(this.renderValueStart);\n    const labelEnd =\n      (this.range ? this.valueLabelEnd : this.valueLabel) ||\n      String(this.renderValueEnd);\n\n    const inputStartProps = {\n      start: true,\n      value: this.renderValueStart,\n      ariaLabel: this.renderAriaLabelStart,\n      ariaValueText: this.renderAriaValueTextStart,\n      ariaMin: this.min,\n      ariaMax: this.valueEnd ?? this.max,\n    };\n\n    const inputEndProps = {\n      start: false,\n      value: this.renderValueEnd,\n      ariaLabel: this.renderAriaLabelEnd,\n      ariaValueText: this.renderAriaValueTextEnd,\n      ariaMin: this.range ? this.valueStart ?? this.min : this.min,\n      ariaMax: this.max,\n    };\n\n    const handleStartProps = {\n      start: true,\n      hover: this.handleStartHover,\n      label: labelStart,\n    };\n\n    const handleEndProps = {\n      start: false,\n      hover: this.handleEndHover,\n      label: labelEnd,\n    };\n\n    const handleContainerClasses = {\n      hover: this.handleStartHover || this.handleEndHover,\n    };\n\n    return html` <div\n      class=\"container ${classMap(containerClasses)}\"\n      style=${styleMap(containerStyles)}>\n      ${when(this.range, () => this.renderInput(inputStartProps))}\n      ${this.renderInput(inputEndProps)} ${this.renderTrack()}\n      <div class=\"handleContainerPadded\">\n        <div class=\"handleContainerBlock\">\n          <div class=\"handleContainer ${classMap(handleContainerClasses)}\">\n            ${when(this.range, () => this.renderHandle(handleStartProps))}\n            ${this.renderHandle(handleEndProps)}\n          </div>\n        </div>\n      </div>\n    </div>`;\n  }\n\n  private renderTrack() {\n    return html`\n      <div class=\"track\"></div>\n      ${this.ticks ? html`<div class=\"tickmarks\"></div>` : nothing}\n    `;\n  }\n\n  private renderLabel(value: string) {\n    return html`<div class=\"label\" aria-hidden=\"true\">\n      <span class=\"labelContent\" part=\"label\">${value}</span>\n    </div>`;\n  }\n\n  private renderHandle({\n    start,\n    hover,\n    label,\n  }: {\n    start: boolean;\n    hover: boolean;\n    label: string;\n  }) {\n    const onTop = !this.disabled && start === this.startOnTop;\n    const isOverlapping = !this.disabled && this.handlesOverlapping;\n    const name = start ? 'start' : 'end';\n    return html`<div\n      class=\"handle ${classMap({\n        [name]: true,\n        hover,\n        onTop,\n        isOverlapping,\n      })}\">\n      <md-focus-ring part=\"focus-ring\" for=${name}></md-focus-ring>\n      <md-ripple\n        for=${name}\n        class=${name}\n        ?disabled=${this.disabled}></md-ripple>\n      <div class=\"handleNub\">\n        <md-elevation part=\"elevation\"></md-elevation>\n      </div>\n      ${when(this.labeled, () => this.renderLabel(label))}\n    </div>`;\n  }\n\n  private renderInput({\n    start,\n    value,\n    ariaLabel,\n    ariaValueText,\n    ariaMin,\n    ariaMax,\n  }: {\n    start: boolean;\n    value?: number;\n    ariaLabel: string;\n    ariaValueText: string;\n    ariaMin: number;\n    ariaMax: number;\n  }) {\n    // Slider requires min/max set to the overall min/max for both inputs.\n    // This is reported to screen readers, which is why we need aria-valuemin\n    // and aria-valuemax.\n    const name = start ? `start` : `end`;\n    return html`<input\n      type=\"range\"\n      class=\"${classMap({\n        start,\n        end: !start,\n      })}\"\n      @focus=${this.handleFocus}\n      @pointerdown=${this.handleDown}\n      @pointerup=${this.handleUp}\n      @pointerenter=${this.handleEnter}\n      @pointermove=${this.handleMove}\n      @pointerleave=${this.handleLeave}\n      @keydown=${this.handleKeydown}\n      @keyup=${this.handleKeyup}\n      @input=${this.handleInput}\n      @change=${this.handleChange}\n      id=${name}\n      .disabled=${this.disabled}\n      .min=${String(this.min)}\n      aria-valuemin=${ariaMin}\n      .max=${String(this.max)}\n      aria-valuemax=${ariaMax}\n      .step=${String(this.step)}\n      .value=${String(value)}\n      .tabIndex=${start ? 1 : 0}\n      aria-label=${ariaLabel || nothing}\n      aria-valuetext=${ariaValueText} />`;\n  }\n\n  private async toggleRippleHover(\n    ripple: Promise<MdRipple | null>,\n    hovering: boolean,\n  ) {\n    const rippleEl = await ripple;\n    if (!rippleEl) {\n      return;\n    }\n    // TODO(b/269799771): improve slider ripple connection\n    if (hovering) {\n      rippleEl.handlePointerenter(\n        new PointerEvent('pointerenter', {\n          isPrimary: true,\n          pointerId: this.ripplePointerId,\n        }),\n      );\n    } else {\n      rippleEl.handlePointerleave(\n        new PointerEvent('pointerleave', {\n          isPrimary: true,\n          pointerId: this.ripplePointerId,\n        }),\n      );\n    }\n  }\n\n  private handleFocus(event: Event) {\n    this.updateOnTop(event.target as HTMLInputElement);\n  }\n\n  private startAction(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const fixed =\n      target === this.inputStart ? this.inputEnd! : this.inputStart!;\n    this.action = {\n      canFlip: event.type === 'pointerdown',\n      flipped: false,\n      target,\n      fixed,\n      values: new Map([\n        [target, target.valueAsNumber],\n        [fixed, fixed?.valueAsNumber],\n      ]),\n    };\n  }\n\n  private finishAction(event: Event) {\n    this.action = undefined;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    this.startAction(event);\n  }\n\n  private handleKeyup(event: KeyboardEvent) {\n    this.finishAction(event);\n  }\n\n  private handleDown(event: PointerEvent) {\n    this.startAction(event);\n    this.ripplePointerId = event.pointerId;\n    const isStart = (event.target as HTMLInputElement) === this.inputStart;\n    // Since handle moves to pointer on down and there may not be a move,\n    // it needs to be considered hovered..\n    this.handleStartHover =\n      !this.disabled && isStart && Boolean(this.handleStart);\n    this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd);\n  }\n\n  private async handleUp(event: PointerEvent) {\n    if (!this.action) {\n      return;\n    }\n\n    const {target, values, flipped} = this.action;\n    //  Async here for Firefox because input can be after pointerup\n    //  when value is calmped.\n    await new Promise(requestAnimationFrame);\n    if (target !== undefined) {\n      // Ensure Safari focuses input so label renders.\n      // Ensure any flipped input is focused so the tab order is right.\n      target.focus();\n      // When action is flipped, change must be fired manually since the\n      // real event target did not change.\n      if (flipped && target.valueAsNumber !== values.get(target)!) {\n        target.dispatchEvent(new Event('change', {bubbles: true}));\n      }\n    }\n    this.finishAction(event);\n  }\n\n  /**\n   * The move handler tracks handle hovering to facilitate proper ripple\n   * behavior on the slider handle. This is needed because user interaction with\n   * the native input is leveraged to position the handle. Because the separate\n   * displayed handle element has pointer events disabled (to allow interaction\n   * with the input) and the input's handle is a pseudo-element, neither can be\n   * the ripple's interactive element. Therefore the input is the ripple's\n   * interactive element and has a `ripple` directive; however the ripple\n   * is gated on the handle being hovered. In addition, because the ripple\n   * hover state is being specially handled, it must be triggered independent\n   * of the directive. This is done based on the hover state when the\n   * slider is updated.\n   */\n  private handleMove(event: PointerEvent) {\n    this.handleStartHover = !this.disabled && inBounds(event, this.handleStart);\n    this.handleEndHover = !this.disabled && inBounds(event, this.handleEnd);\n  }\n\n  private handleEnter(event: PointerEvent) {\n    this.handleMove(event);\n  }\n\n  private handleLeave() {\n    this.handleStartHover = false;\n    this.handleEndHover = false;\n  }\n\n  private updateOnTop(input: HTMLInputElement) {\n    this.startOnTop = input.classList.contains('start');\n  }\n\n  private needsClamping() {\n    if (!this.action) {\n      return false;\n    }\n\n    const {target, fixed} = this.action;\n    const isStart = target === this.inputStart;\n    return isStart\n      ? target.valueAsNumber > fixed.valueAsNumber\n      : target.valueAsNumber < fixed.valueAsNumber;\n  }\n\n  // if start/end start coincident and the first drag input would e.g. move\n  // start > end, avoid clamping and \"flip\" to use the other input\n  // as the action target.\n  private isActionFlipped() {\n    const {action} = this;\n    if (!action) {\n      return false;\n    }\n\n    const {target, fixed, values} = action;\n    if (action.canFlip) {\n      const coincident = values.get(target) === values.get(fixed);\n      if (coincident && this.needsClamping()) {\n        action.canFlip = false;\n        action.flipped = true;\n        action.target = fixed;\n        action.fixed = target;\n      }\n    }\n    return action.flipped;\n  }\n\n  // when flipped, apply the drag input to the flipped target and reset\n  // the actual target.\n  private flipAction() {\n    if (!this.action) {\n      return false;\n    }\n\n    const {target, fixed, values} = this.action;\n    const changed = target.valueAsNumber !== fixed.valueAsNumber;\n    target.valueAsNumber = fixed.valueAsNumber;\n    fixed.valueAsNumber = values.get(fixed)!;\n    return changed;\n  }\n\n  // clamp such that start does not move beyond end and visa versa.\n  private clampAction() {\n    if (!this.needsClamping() || !this.action) {\n      return false;\n    }\n    const {target, fixed} = this.action;\n    target.valueAsNumber = fixed.valueAsNumber;\n    return true;\n  }\n\n  private handleInput(event: InputEvent) {\n    // avoid processing a re-dispatched event\n    if (this.isRedispatchingEvent) {\n      return;\n    }\n    let stopPropagation = false;\n    let redispatch = false;\n    if (this.range) {\n      if (this.isActionFlipped()) {\n        stopPropagation = true;\n        redispatch = this.flipAction();\n      }\n      if (this.clampAction()) {\n        stopPropagation = true;\n        redispatch = false;\n      }\n    }\n    const target = event.target as HTMLInputElement;\n    this.updateOnTop(target);\n    // update value only on interaction\n    if (this.range) {\n      this.valueStart = this.inputStart!.valueAsNumber;\n      this.valueEnd = this.inputEnd!.valueAsNumber;\n    } else {\n      this.value = this.inputEnd!.valueAsNumber;\n    }\n    // control external visibility of input event\n    if (stopPropagation) {\n      event.stopPropagation();\n    }\n    // ensure event path is correct when flipped.\n    if (redispatch) {\n      this.isRedispatchingEvent = true;\n      redispatchEvent(target, event);\n      this.isRedispatchingEvent = false;\n    }\n  }\n\n  private handleChange(event: Event) {\n    // prevent keyboard triggered changes from dispatching for\n    // clamped values; note, this only occurs for keyboard\n    const changeTarget = event.target as HTMLInputElement;\n    const {target, values} = this.action ?? {};\n    const squelch =\n      target && target.valueAsNumber === values!.get(changeTarget)!;\n    if (!squelch) {\n      redispatchEvent(this, event);\n    }\n    // ensure keyboard triggered change clears action.\n    this.finishAction(event);\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    if (this.range) {\n      const data = new FormData();\n      data.append(this.nameStart, String(this.valueStart));\n      data.append(this.nameEnd, String(this.valueEnd));\n      return data;\n    }\n\n    return String(this.value);\n  }\n\n  override formResetCallback() {\n    if (this.range) {\n      const valueStart = this.getAttribute('value-start');\n      this.valueStart = valueStart !== null ? Number(valueStart) : undefined;\n      const valueEnd = this.getAttribute('value-end');\n      this.valueEnd = valueEnd !== null ? Number(valueEnd) : undefined;\n      return;\n    }\n    const value = this.getAttribute('value');\n    this.value = value !== null ? Number(value) : undefined;\n  }\n\n  override formStateRestoreCallback(\n    state: string | Array<[string, string]> | null,\n  ) {\n    if (Array.isArray(state)) {\n      const [[, valueStart], [, valueEnd]] = state;\n      this.valueStart = Number(valueStart);\n      this.valueEnd = Number(valueEnd);\n      this.range = true;\n      return;\n    }\n\n    this.value = Number(state);\n    this.range = false;\n  }\n}\n\nfunction inBounds({x, y}: PointerEvent, element?: HTMLElement | null) {\n  if (!element) {\n    return false;\n  }\n  const {top, left, bottom, right} = element.getBoundingClientRect();\n  return x >= left && x <= right && y >= top && y <= bottom;\n}\n\nfunction isOverlapping(\n  elA: Element | null | undefined,\n  elB: Element | null | undefined,\n) {\n  if (!(elA && elB)) {\n    return false;\n  }\n  const a = elA.getBoundingClientRect();\n  const b = elB.getBoundingClientRect();\n  return !(\n    a.top > b.bottom ||\n    a.right < b.left ||\n    a.bottom < b.top ||\n    a.left > b.right\n  );\n}\n\ninterface Action {\n  canFlip: boolean;\n  flipped: boolean;\n  target: HTMLInputElement;\n  fixed: HTMLInputElement;\n  values: Map<HTMLInputElement | undefined, number | undefined>;\n}\n"
  },
  {
    "path": "slider/slider.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './internal/forced-colors-styles.js';\nimport {Slider} from './internal/slider.js';\nimport {styles} from './internal/slider-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-slider': MdSlider;\n  }\n}\n\n/**\n * @summary Sliders allow users to view and select a value (or range) along\n * a track.\n *\n * @description\n * Changes made with sliders are immediate, allowing the user to make slider\n * adjustments while determining a selection. Sliders shouldn’t be used to\n * adjust settings with any delay in providing user feedback. Sliders reflect\n * the current state of the settings they control.\n *\n * __Example usages:__\n * - Sliders are ideal for adjusting settings such as volume and brightness, or\n * for applying image filters.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-slider')\nexport class MdSlider extends Slider {\n  static override styles: CSSResultOrNative[] = [styles, forcedColorsStyles];\n}\n"
  },
  {
    "path": "slider/slider_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createFormTests} from '../testing/forms.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {SliderHarness} from './harness.js';\nimport {MdSlider} from './slider.js';\n\ninterface SliderTestProps {\n  range?: boolean;\n  value?: number;\n  valueStart?: number;\n  valueEnd?: number;\n  step?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction getSliderTemplate(props?: SliderTestProps) {\n  return html` <md-slider\n    .range=${props?.range ?? false}\n    .value=${props?.value}\n    .valueStart=${props?.valueStart}\n    .valueEnd=${props?.valueEnd}\n    .step=${props?.step ?? 1}\n    .min=${props?.min ?? 0}\n    .max=${props?.max ?? 100}></md-slider>`;\n}\n\ndescribe('<md-slider>', () => {\n  const env = new Environment();\n\n  async function setupTest(\n    props?: SliderTestProps,\n    template = getSliderTemplate,\n  ) {\n    const root = env.render(template(props));\n    await env.waitForStability();\n    const slider = root.querySelector<MdSlider>('md-slider')!;\n    const harness = new SliderHarness(slider);\n    return {harness, root};\n  }\n\n  describe('.styles', () => {\n    createTokenTests(MdSlider.styles);\n  });\n\n  describe('rendering value', () => {\n    it('updates via interaction', async () => {\n      const {harness} = await setupTest();\n      await harness.simulateValueInteraction(1);\n      expect(harness.element.value).toEqual(1);\n      await harness.simulateValueInteraction(9);\n      expect(harness.element.value).toEqual(9);\n    });\n\n    it('not validated when set', async () => {\n      const {harness} = await setupTest();\n      harness.element.value = -1000;\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(-1000);\n    });\n\n    it('validated on interaction', async () => {\n      const {harness} = await setupTest();\n      harness.element.value = -1000;\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(-1000);\n      await harness.simulateValueInteraction(1);\n      expect(harness.element.value).toEqual(1);\n    });\n\n    it('setting min validates only after interaction', async () => {\n      const {harness} = await setupTest({value: 1});\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(1);\n      harness.element.min = 2;\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(1);\n      await harness.simulateValueInteraction(0);\n      expect(harness.element.value).toEqual(2);\n    });\n\n    it('setting max validates only after interaction', async () => {\n      const {harness} = await setupTest({value: 9});\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(9);\n      harness.element.max = 8;\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(9);\n      await harness.simulateValueInteraction(111);\n      expect(harness.element.value).toEqual(8);\n    });\n\n    it('setting step validates only after interaction', async () => {\n      const {harness} = await setupTest({value: 5});\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(5);\n      harness.element.step = 2;\n      await harness.element.updateComplete;\n      expect(harness.element.value).toEqual(5);\n      await harness.simulateValueInteraction(3);\n      expect(harness.element.value).toEqual(4);\n    });\n\n    it('step rounds values from min', async () => {\n      const props = {value: 2, min: 1, step: 5};\n      const {harness} = await setupTest(props);\n      expect(harness.element.value).toEqual(2);\n      await harness.simulateValueInteraction(3);\n      expect(harness.element.value).toEqual(1);\n      await harness.simulateValueInteraction(4);\n      expect(harness.element.value).toEqual(6);\n    });\n\n    it('step can be non-integer', async () => {\n      const props = {value: 2, step: 0.1};\n      const {harness} = await setupTest(props);\n      expect(harness.element.value).toEqual(2);\n      await harness.simulateValueInteraction(3.2);\n      expect(harness.element.value).toEqual(3.2);\n      await harness.simulateValueInteraction(70.55);\n      expect(harness.element.value).toEqual(70.6);\n    });\n  });\n\n  describe('rendering valueStart/valueEnd (range = true)', () => {\n    it('renders inputs and handles', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      await harness.element.updateComplete;\n      const inputs = harness.getInputs();\n      expect(inputs[0]).not.toBeNull();\n      expect(inputs[1]).not.toBeNull();\n      const handles = harness.getHandles();\n      expect(handles[0]).not.toBeNull();\n      expect(handles[1]).not.toBeNull();\n    });\n\n    it('update via interaction', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      const [endInput, startInput] = harness.getInputs();\n      await harness.simulateValueInteraction(7, endInput);\n      expect(harness.element.valueStart).toEqual(2);\n      expect(harness.element.valueEnd).toEqual(7);\n      await harness.simulateValueInteraction(1, startInput);\n      expect(harness.element.valueStart).toEqual(1);\n      expect(harness.element.valueEnd).toEqual(7);\n    });\n\n    it('not validated when set', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      const testValueStart = -1000;\n      const testValueEnd = -900;\n      harness.element.valueStart = testValueStart;\n      harness.element.valueEnd = testValueEnd;\n      await harness.element.updateComplete;\n      expect(harness.element.valueStart).toEqual(testValueStart);\n      expect(harness.element.valueEnd).toEqual(testValueEnd);\n    });\n\n    it('validated on interaction', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      const testValueStart = -1000;\n      const testValueEnd = -900;\n      harness.element.valueStart = testValueStart;\n      harness.element.valueEnd = testValueEnd;\n      await harness.element.updateComplete;\n      await harness.simulateValueInteraction(1000);\n      expect(harness.element.valueStart).toEqual(harness.element.min);\n      expect(harness.element.valueEnd).toEqual(harness.element.max);\n    });\n\n    it('setting min validates only after interaction', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      harness.element.min = 3;\n      await harness.element.updateComplete;\n      expect(harness.element.valueStart).toEqual(2);\n      expect(harness.element.valueEnd).toEqual(6);\n      const startInput = harness.getInputs()[1];\n      await harness.simulateValueInteraction(0, startInput);\n      expect(harness.element.valueStart).toEqual(3);\n      expect(harness.element.valueEnd).toEqual(6);\n    });\n\n    it('setting max validates only after interaction', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      harness.element.max = 5;\n      await harness.element.updateComplete;\n      expect(harness.element.valueStart).toEqual(2);\n      expect(harness.element.valueEnd).toEqual(6);\n      await harness.simulateValueInteraction(111);\n      expect(harness.element.valueStart).toEqual(2);\n      expect(harness.element.valueEnd).toEqual(5);\n    });\n\n    it('setting step validates only after interaction', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      harness.element.step = 2;\n      await harness.element.updateComplete;\n      const [endInput, startInput] = harness.getInputs();\n      await harness.simulateValueInteraction(7, endInput);\n      await harness.simulateValueInteraction(5, startInput);\n      expect(harness.element.valueStart).toEqual(6);\n      expect(harness.element.valueEnd).toEqual(8);\n    });\n\n    it('clamps moving start > end and end < start', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      await harness.element.updateComplete;\n      const [endInput, startInput] = harness.getInputs();\n      await harness.simulateValueInteraction(7, startInput);\n      expect(harness.element.valueStart).toEqual(6);\n      await harness.simulateValueInteraction(4, startInput);\n      expect(harness.element.valueStart).toEqual(4);\n      await harness.simulateValueInteraction(3, endInput);\n      expect(harness.element.valueEnd).toEqual(4);\n    });\n\n    it('when starting coincident, can move start > end and end < start', async () => {\n      const props = {range: true, valueStart: 2, valueEnd: 6};\n      const {harness} = await setupTest(props);\n      await harness.element.updateComplete;\n      const [endInput, startInput] = harness.getInputs();\n      await harness.simulateValueInteraction(6, startInput);\n      expect(harness.element.valueStart).toEqual(6);\n      await harness.simulateValueInteraction(8, startInput);\n      expect(harness.element.valueStart).toEqual(6);\n      expect(harness.element.valueEnd).toEqual(8);\n      await harness.simulateValueInteraction(8, startInput);\n      expect(harness.element.valueStart).toEqual(8);\n      expect(harness.element.valueEnd).toEqual(8);\n      await harness.simulateValueInteraction(4, endInput);\n      expect(harness.element.valueStart).toEqual(4);\n      expect(harness.element.valueEnd).toEqual(8);\n    });\n  });\n\n  describe('dispatches input and change events', () => {\n    it('when range = false', async () => {\n      const {harness} = await setupTest();\n      await harness.element.updateComplete;\n      const inputHandler = jasmine.createSpy('input');\n      const changeHandler = jasmine.createSpy('change');\n      harness.element.addEventListener('input', inputHandler);\n      harness.element.addEventListener('change', changeHandler);\n      await harness.simulateValueInteraction(8);\n      expect(inputHandler).toHaveBeenCalledTimes(1);\n      expect(changeHandler).toHaveBeenCalledTimes(1);\n      await harness.simulateValueInteraction(80);\n      expect(inputHandler).toHaveBeenCalledTimes(2);\n      expect(changeHandler).toHaveBeenCalledTimes(2);\n    });\n\n    it('when range = true', async () => {\n      const {harness} = await setupTest({range: true});\n      await harness.element.updateComplete;\n      const inputHandler = jasmine.createSpy('input');\n      const changeHandler = jasmine.createSpy('change');\n      harness.element.addEventListener('input', inputHandler);\n      harness.element.addEventListener('change', changeHandler);\n      const [endInput, startInput] = harness.getInputs();\n      await harness.simulateValueInteraction(8, startInput);\n      await harness.simulateValueInteraction(80, endInput);\n      expect(inputHandler).toHaveBeenCalledTimes(2);\n      expect(changeHandler).toHaveBeenCalledTimes(2);\n      // input of start > end should be prevented,\n      // but change to end value should occur\n      await harness.simulateValueInteraction(85, startInput);\n      expect(inputHandler).toHaveBeenCalledTimes(2);\n      expect(changeHandler).toHaveBeenCalledTimes(3);\n      // starting coincident, so input should now be ok.\n      await harness.simulateValueInteraction(85, startInput);\n      expect(inputHandler).toHaveBeenCalledTimes(3);\n      expect(changeHandler).toHaveBeenCalledTimes(4);\n      // validate same on end side\n      await harness.simulateValueInteraction(40, endInput);\n      expect(inputHandler).toHaveBeenCalledTimes(3);\n      expect(changeHandler).toHaveBeenCalledTimes(5);\n      await harness.simulateValueInteraction(40, endInput);\n      expect(inputHandler).toHaveBeenCalledTimes(4);\n      expect(changeHandler).toHaveBeenCalledTimes(6);\n    });\n  });\n\n  describe('value label', () => {\n    it('shows on focus when labeled is true', async () => {\n      const {harness} = await setupTest();\n      harness.element.labeled = true;\n      await harness.element.updateComplete;\n      harness.element.focus();\n      expect(harness.isLabelShowing()).toBeTrue();\n    });\n\n    it('does now show when labeled is false', async () => {\n      const {harness} = await setupTest();\n      await harness.element.updateComplete;\n      harness.element.focus();\n      expect(harness.isLabelShowing()).toBeFalse();\n    });\n\n    it('hides after blur', async () => {\n      const {harness} = await setupTest();\n      harness.element.labeled = true;\n      await harness.element.updateComplete;\n      harness.element.focus();\n      expect(harness.isLabelShowing()).toBeTrue();\n      harness.element.blur();\n      expect(harness.isLabelShowing()).toBeFalse();\n    });\n\n    it('shows value label on hover', async () => {\n      const {harness} = await setupTest();\n      harness.element.labeled = true;\n      await harness.element.updateComplete;\n      await harness.startHover();\n      expect(harness.isLabelShowing()).toBeTrue();\n      await harness.endHover();\n      expect(harness.isLabelShowing()).toBeFalse();\n    });\n  });\n\n  describe('focus', () => {\n    it('focuses on the end input by default', async () => {\n      const {harness} = await setupTest({value: 5});\n      await harness.element.updateComplete;\n      harness.element.focus();\n      const input = harness.getInputs()[0];\n      expect(input.matches(':focus')).toBe(true);\n    });\n  });\n\n  describe('default values', () => {\n    it('defaults value to midway between min/max', async () => {\n      const {harness} = await setupTest({min: -100, max: -40});\n      await harness.element.updateComplete;\n      expect(harness.element.value).toBe(-70);\n    });\n\n    it('defaults valueStart/End to equidistant between min/max', async () => {\n      const {harness} = await setupTest({range: true, min: 80, max: 100});\n      await harness.element.updateComplete;\n      expect(harness.element.valueStart).toBe(87);\n      expect(harness.element.valueEnd).toBe(93);\n    });\n  });\n\n  describe('forms', () => {\n    createFormTests({\n      queryControl: (root) => root.querySelector('md-slider'),\n      valueTests: [\n        {\n          name: 'unnamed',\n          render: () => html`<md-slider></md-slider>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form without a name')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'single value',\n          render: () => html`<md-slider name=\"slider\" value=\"10\"></md-slider>`,\n          assertValue(formData) {\n            expect(formData.get('slider')).toBe('10');\n          },\n        },\n        {\n          name: 'multiple values same name',\n          render: () =>\n            html`<md-slider\n              range\n              name=\"slider\"\n              value-start=\"0\"\n              value-end=\"10\"></md-slider>`,\n          assertValue(formData) {\n            expect(formData.getAll('slider')).toEqual(['0', '10']);\n          },\n        },\n        {\n          name: 'multiple values different names',\n          render: () =>\n            html`<md-slider\n              range\n              name-start=\"slider-start\"\n              name-end=\"slider-end\"\n              value-start=\"0\"\n              value-end=\"10\"></md-slider>`,\n          assertValue(formData) {\n            expect(formData.get('slider-start')).toBe('0');\n            expect(formData.get('slider-end')).toBe('10');\n          },\n        },\n        {\n          name: 'single default value',\n          render: () => html`<md-slider name=\"slider\"></md-slider>`,\n          assertValue(formData) {\n            expect(formData.get('slider')).toBe('50');\n          },\n        },\n        {\n          name: 'single default value with min/max',\n          render: () =>\n            html`<md-slider name=\"slider\" min=\"100\" max=\"300\"></md-slider>`,\n          assertValue(formData) {\n            expect(formData.get('slider')).toBe('200');\n          },\n        },\n        {\n          name: 'multiple default values',\n          render: () => html`<md-slider range name=\"slider\"></md-slider>`,\n          assertValue(formData) {\n            expect(formData.getAll('slider')).toEqual(['33', '67']);\n          },\n        },\n        {\n          name: 'multiple default values with min/max',\n          render: () =>\n            html`<md-slider\n              range\n              name=\"slider\"\n              min=\"100\"\n              max=\"300\"></md-slider>`,\n          assertValue(formData) {\n            expect(formData.getAll('slider')).toEqual(['167', '233']);\n          },\n        },\n        {\n          name: 'disabled',\n          render: () =>\n            html`<md-slider name=\"slider\" value=\"10\" disabled></md-slider>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when disabled')\n              .toHaveSize(0);\n          },\n        },\n      ],\n      resetTests: [\n        {\n          name: 'reset single value',\n          render: () => html`<md-slider name=\"slider\" value=\"10\"></md-slider>`,\n          change(slider) {\n            slider.value = 100;\n          },\n          assertReset(slider) {\n            expect(slider.value)\n              .withContext('slider.value after reset')\n              .toBe(10);\n          },\n        },\n        {\n          name: 'reset multiple values same name',\n          render: () =>\n            html`<md-slider\n              range\n              name=\"slider\"\n              value-start=\"0\"\n              value-end=\"10\"></md-slider>`,\n          change(slider) {\n            slider.valueStart = 5;\n            slider.valueEnd = 5;\n          },\n          assertReset(slider) {\n            expect(slider.valueStart)\n              .withContext('slider.valueStart after reset')\n              .toEqual(0);\n            expect(slider.valueEnd)\n              .withContext('slider.valueEnd after reset')\n              .toEqual(10);\n          },\n        },\n        {\n          name: 'reset multiple values different names',\n          render: () =>\n            html`<md-slider\n              range\n              name-start=\"slider-start\"\n              name-end=\"slider-end\"\n              value-start=\"0\"\n              value-end=\"10\"></md-slider>`,\n          change(slider) {\n            slider.valueStart = 5;\n            slider.valueEnd = 5;\n          },\n          assertReset(slider) {\n            expect(slider.valueStart)\n              .withContext('slider.valueStart after reset')\n              .toEqual(0);\n            expect(slider.valueEnd)\n              .withContext('slider.valueEnd after reset')\n              .toEqual(10);\n          },\n        },\n      ],\n      restoreTests: [\n        {\n          name: 'restore single value',\n          render: () => html`<md-slider name=\"checkbox\" value=\"1\"></md-slider>`,\n          assertRestored(slider) {\n            expect(slider.value)\n              .withContext('slider.value after restore')\n              .toBe(1);\n          },\n        },\n        {\n          name: 'restore multiple values same name',\n          render: () =>\n            html`<md-slider\n              range\n              name=\"slider\"\n              value-start=\"0\"\n              value-end=\"10\"></md-slider>`,\n          assertRestored(slider) {\n            expect(slider.valueStart)\n              .withContext('slider.valueStart after restore')\n              .toEqual(0);\n            expect(slider.valueEnd)\n              .withContext('slider.valueEnd after restore')\n              .toEqual(10);\n          },\n        },\n        {\n          name: 'restore multiple values different names',\n          render: () =>\n            html`<md-slider\n              range\n              name-start=\"slider-start\"\n              name-end=\"slider-end\"\n              value-start=\"0\"\n              value-end=\"10\"></md-slider>`,\n          assertRestored(slider) {\n            expect(slider.valueStart)\n              .withContext('slider.valueStart after restore')\n              .toEqual(0);\n            expect(slider.valueEnd)\n              .withContext('slider.valueEnd after restore')\n              .toEqual(10);\n          },\n        },\n      ],\n    });\n  });\n});\n"
  },
  {
    "path": "switch/_switch.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/switch' show theme;\n"
  },
  {
    "path": "switch/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Switch',\n  [\n    new Knob('disabled', {defaultValue: false, ui: boolInput()}),\n    new Knob('selected', {defaultValue: false, ui: boolInput()}),\n    new Knob('icons', {defaultValue: false, ui: boolInput()}),\n    new Knob('showOnlySelectedIcon', {defaultValue: false, ui: boolInput()}),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "switch/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "switch/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/switch/switch.js';\n\nimport {\n  labelStyles,\n  MaterialStoryInit,\n} from './material-collection.js';\nimport {css, html} from 'lit';\n\n/** Knob types for Switch stories. */\nexport interface StoryKnobs {\n  disabled: boolean;\n  selected: boolean;\n  icons: boolean;\n  showOnlySelectedIcon: boolean;\n}\n\nconst standard: MaterialStoryInit<StoryKnobs> = {\n  name: 'Switch',\n  render(knobs) {\n    return html` <md-switch\n      aria-label=\"An example switch\"\n      .disabled=${knobs.disabled}\n      .selected=${knobs.selected}\n      .icons=${knobs.icons}\n      .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}></md-switch>`;\n  },\n};\n\nconst labeled: MaterialStoryInit<StoryKnobs> = {\n  name: 'With labels',\n  styles: [\n    labelStyles,\n    css`\n      .column {\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n        width: 200px;\n      }\n\n      label {\n        justify-content: space-between;\n      }\n    `,\n  ],\n  render(knobs) {\n    return html`\n      <div class=\"column\" role=\"group\" aria-label=\"Settings\">\n        <label>\n          Wi-Fi\n          <md-switch\n            aria-label=\"Wi-Fi\"\n            .disabled=${knobs.disabled}\n            .icons=${knobs.icons}\n            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}></md-switch>\n        </label>\n        <label>\n          Bluetooth\n          <md-switch\n            aria-label=\"Bluetooth\"\n            selected\n            .disabled=${knobs.disabled}\n            .icons=${knobs.icons}\n            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}></md-switch>\n        </label>\n      </div>\n    `;\n  },\n};\n\n/** Switch stories. */\nexport const stories = [standard, labeled];\n"
  },
  {
    "path": "switch/harness.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Switch} from './internal/switch.js';\n\n/**\n * Test harness for switch elements.\n */\nexport class SwitchHarness extends Harness<Switch> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input')!;\n  }\n}\n"
  },
  {
    "path": "switch/internal/README.md",
    "content": "# Switch\n\n## DOM structure\n\n```html\n<button class=\"switch\">\n  <div class=\"track\">\n    ::before\n    <div class=\"handle\">\n      ::before\n      <div class=\"icons\">\n      </div>\n    </div>\n  </div>\n  <input type=\"checkbox\" aria-hidden=\"true\">\n</button>\n```\n\n### .switch\n\nThis is the outermost button. It holds the track and the input checkbox.\n\nNOTE: This is intentionally left without a border to make the focus-ring simpler\nto apply.\n\n### .track\n\nThis is the track. It contains the track selected styles.\n\n### .track::before\n\nThis element contains the track unselected styles. Its opacity is set to 0\nwhen the switch is selected.\n\n### .handle\n\nThis is the handle. It contains the styles of selected styles.\n\n### .handle::before\n\nThis element contains the handle unselected styles. Its opacity is set to 0\nwhen the switch is selected.\n\n\n## Animations\n\n*  opacity on .track::before\n   *  Why? setting opacity will change between selected and unselected track\n*  opacity on .handle::before\n   *  Why? setting opacity will change between selected and unselected handle\n*  transform (scale) on .handle\n   *  Why? This animates the growing & shrinking of the handle.\n*  margin-inline-start & margin-inline-end on .handle\n   *  Why? This animates the position of the handle.\n\n"
  },
  {
    "path": "switch/internal/_handle.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n$_easing-standard: map.get($_md-sys-motion, 'easing-standard');\n\n@mixin styles($tokens) {\n  @layer styles {\n    .handle-container {\n      display: flex;\n      place-content: center;\n      place-items: center;\n      position: relative;\n      // this easing is custom to perform the \"overshoot\" animation\n      transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n\n    $margin: calc(\n      map.get($tokens, 'track-width') - map.get($tokens, 'track-height')\n    );\n\n    .selected .handle-container {\n      margin-inline-start: $margin;\n    }\n\n    .unselected .handle-container {\n      margin-inline-end: $margin;\n    }\n\n    .disabled .handle-container {\n      transition: none;\n    }\n\n    .handle {\n      // Handle shape\n      border-start-start-radius: map.get($tokens, 'handle-shape-start-start');\n      border-start-end-radius: map.get($tokens, 'handle-shape-start-end');\n      border-end-end-radius: map.get($tokens, 'handle-shape-end-end');\n      border-end-start-radius: map.get($tokens, 'handle-shape-end-start');\n      height: map.get($tokens, 'handle-height');\n      width: map.get($tokens, 'handle-width');\n\n      transform-origin: center;\n      transition-property: height, width;\n      transition-duration: 250ms, 250ms;\n      transition-timing-function: $_easing-standard, $_easing-standard;\n      z-index: 0;\n    }\n\n    .handle::before {\n      content: '';\n      display: flex;\n      inset: 0;\n      position: absolute;\n      border-radius: inherit;\n      box-sizing: border-box;\n      transition: background-color 67ms linear;\n    }\n\n    .disabled .handle,\n    .disabled .handle::before {\n      transition: none;\n    }\n\n    .selected .handle {\n      height: map.get($tokens, 'selected-handle-height');\n      width: map.get($tokens, 'selected-handle-width');\n    }\n\n    .handle.with-icon {\n      height: map.get($tokens, 'with-icon-handle-height');\n      width: map.get($tokens, 'with-icon-handle-width');\n    }\n\n    .selected:not(.disabled):active .handle,\n    .unselected:not(.disabled):active .handle {\n      height: map.get($tokens, 'pressed-handle-height');\n      width: map.get($tokens, 'pressed-handle-width');\n      transition-timing-function: linear;\n      transition-duration: 100ms;\n    }\n\n    .selected .handle::before {\n      background-color: map.get($tokens, 'selected-handle-color');\n    }\n\n    .selected:hover .handle::before {\n      background-color: map.get($tokens, 'selected-hover-handle-color');\n    }\n\n    .selected:focus-within .handle::before {\n      background-color: map.get($tokens, 'selected-focus-handle-color');\n    }\n\n    .selected:active .handle::before {\n      background-color: map.get($tokens, 'selected-pressed-handle-color');\n    }\n\n    .selected.disabled .handle::before {\n      background-color: map.get($tokens, 'disabled-selected-handle-color');\n      opacity: map.get($tokens, 'disabled-selected-handle-opacity');\n    }\n\n    .unselected .handle::before {\n      background-color: map.get($tokens, 'handle-color');\n    }\n\n    .unselected:hover .handle::before {\n      background-color: map.get($tokens, 'hover-handle-color');\n    }\n\n    .unselected:focus-within .handle::before {\n      background-color: map.get($tokens, 'focus-handle-color');\n    }\n\n    .unselected:active .handle::before {\n      background-color: map.get($tokens, 'pressed-handle-color');\n    }\n\n    .unselected.disabled .handle::before {\n      background-color: map.get($tokens, 'disabled-handle-color');\n      opacity: map.get($tokens, 'disabled-handle-opacity');\n    }\n\n    md-ripple {\n      border-radius: map.get($tokens, 'state-layer-shape');\n      height: map.get($tokens, 'state-layer-size');\n      inset: unset;\n      width: map.get($tokens, 'state-layer-size');\n    }\n\n    .selected md-ripple {\n      @include ripple.theme(\n        (\n          'hover-color': map.get($tokens, 'selected-hover-state-layer-color'),\n          'pressed-color':\n            map.get($tokens, 'selected-pressed-state-layer-color'),\n          'hover-opacity':\n            map.get($tokens, 'selected-hover-state-layer-opacity'),\n          'pressed-opacity':\n            map.get($tokens, 'selected-pressed-state-layer-opacity'),\n        )\n      );\n    }\n\n    .unselected md-ripple {\n      @include ripple.theme(\n        (\n          'hover-color': map.get($tokens, 'hover-state-layer-color'),\n          'pressed-color': map.get($tokens, 'pressed-state-layer-color'),\n          'hover-opacity': map.get($tokens, 'hover-state-layer-opacity'),\n          'pressed-opacity': map.get($tokens, 'pressed-state-layer-opacity'),\n        )\n      );\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .unselected .handle::before {\n        background: ButtonText;\n      }\n\n      .disabled .handle::before {\n        opacity: 1;\n      }\n\n      .disabled.unselected .handle::before {\n        background: GrayText;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "switch/internal/_icon.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n$_md-sys-motion: tokens.md-sys-motion-values();\n$_easing-standard: map.get($_md-sys-motion, 'easing-standard');\n\n@mixin styles($tokens) {\n  @layer styles {\n    .icons {\n      position: relative;\n      height: 100%;\n      width: 100%;\n    }\n\n    .icon {\n      position: absolute;\n      inset: 0;\n      margin: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      fill: currentColor;\n\n      transition: fill 67ms linear, opacity 33ms linear,\n        transform 167ms $_easing-standard;\n      opacity: 0;\n    }\n\n    .disabled .icon {\n      transition: none;\n    }\n\n    .selected .icon--on,\n    .unselected .icon--off {\n      opacity: 1;\n    }\n\n    // rotate selected icon into view when there is no unselected icon\n    .unselected .handle:not(.with-icon) .icon--on {\n      transform: rotate(-45deg);\n    }\n\n    .icon--off {\n      width: map.get($tokens, 'icon-size');\n      height: map.get($tokens, 'icon-size');\n      color: map.get($tokens, 'icon-color');\n    }\n\n    .unselected:hover .icon--off {\n      color: map.get($tokens, 'hover-icon-color');\n    }\n\n    .unselected:focus-within .icon--off {\n      color: map.get($tokens, 'focus-icon-color');\n    }\n\n    .unselected:active .icon--off {\n      color: map.get($tokens, 'pressed-icon-color');\n    }\n\n    .unselected.disabled .icon--off {\n      color: map.get($tokens, 'disabled-icon-color');\n      opacity: map.get($tokens, 'disabled-icon-opacity');\n    }\n\n    .icon--on {\n      width: map.get($tokens, 'selected-icon-size');\n      height: map.get($tokens, 'selected-icon-size');\n      color: map.get($tokens, 'selected-icon-color');\n    }\n\n    .selected:hover .icon--on {\n      color: map.get($tokens, 'selected-hover-icon-color');\n    }\n\n    .selected:focus-within .icon--on {\n      color: map.get($tokens, 'selected-focus-icon-color');\n    }\n\n    .selected:active .icon--on {\n      color: map.get($tokens, 'selected-pressed-icon-color');\n    }\n\n    .selected.disabled .icon--on {\n      color: map.get($tokens, 'disabled-selected-icon-color');\n      opacity: map.get($tokens, 'disabled-selected-icon-opacity');\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .icon--off {\n        fill: Canvas;\n      }\n\n      .icon--on {\n        fill: ButtonText;\n      }\n\n      .disabled.unselected .icon--off,\n      .disabled.selected .icon--on {\n        opacity: 1;\n      }\n\n      .disabled .icon--on {\n        fill: GrayText;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "switch/internal/_switch.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../focus/focus-ring';\n@use '../../tokens';\n@use './handle';\n@use './icon';\n@use './track';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-switch-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-switch-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-switch-values();\n\n  @layer styles, hcm;\n  @layer styles {\n    :host {\n      display: inline-flex;\n      outline: none;\n      vertical-align: top;\n      -webkit-tap-highlight-color: transparent;\n      cursor: pointer;\n    }\n\n    :host([disabled]) {\n      cursor: default;\n    }\n\n    :host([touch-target='wrapper']) {\n      margin: max(0px, (48px - map.get($tokens, 'track-height')) / 2) 0px;\n    }\n\n    md-focus-ring {\n      @include focus-ring.theme(\n        (\n          'shape-start-start': map.get($tokens, 'track-shape-start-start'),\n          'shape-start-end': map.get($tokens, 'track-shape-start-end'),\n          'shape-end-end': map.get($tokens, 'track-shape-end-end'),\n          'shape-end-start': map.get($tokens, 'track-shape-end-start'),\n        )\n      );\n    }\n\n    .switch {\n      align-items: center;\n      display: inline-flex;\n      flex-shrink: 0; // Stop from collapsing in flex containers\n      position: relative;\n      width: map.get($tokens, 'track-width');\n      height: map.get($tokens, 'track-height');\n\n      // Track shape\n      border-start-start-radius: map.get($tokens, 'track-shape-start-start');\n      border-start-end-radius: map.get($tokens, 'track-shape-start-end');\n      border-end-end-radius: map.get($tokens, 'track-shape-end-end');\n      border-end-start-radius: map.get($tokens, 'track-shape-end-start');\n    }\n\n    // Input is also touch target\n    input {\n      appearance: none;\n      height: max(100%, map.get($tokens, 'touch-target-size'));\n      outline: none;\n      margin: 0;\n      position: absolute;\n      width: max(100%, map.get($tokens, 'touch-target-size'));\n      z-index: 1;\n      cursor: inherit;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    :host([touch-target='none']) input {\n      display: none;\n    }\n  }\n\n  @include track.styles($tokens);\n  @include handle.styles($tokens);\n  @include icon.styles($tokens);\n}\n"
  },
  {
    "path": "switch/internal/_track.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n\n@mixin styles($tokens) {\n  @layer styles {\n    .track {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n\n      border-radius: inherit;\n\n      // Center content\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    // Separate node for background/outline colors to support opacity changes.\n    .track::before {\n      content: '';\n      display: flex;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      border-radius: inherit;\n      box-sizing: border-box;\n      transition-property: opacity, background-color;\n      transition-timing-function: linear;\n      transition-duration: 67ms;\n    }\n\n    .disabled .track {\n      background-color: transparent;\n      border-color: transparent;\n    }\n\n    .disabled .track::before,\n    .disabled .track::after {\n      transition: none;\n      opacity: map.get($tokens, 'disabled-track-opacity');\n    }\n\n    .disabled .track::before {\n      background-clip: content-box;\n    }\n\n    .selected .track::before {\n      background-color: map.get($tokens, 'selected-track-color');\n    }\n\n    .selected:hover .track::before {\n      background-color: map.get($tokens, 'selected-hover-track-color');\n    }\n\n    .selected:focus-within .track::before {\n      background-color: map.get($tokens, 'selected-focus-track-color');\n    }\n\n    .selected:active .track::before {\n      background-color: map.get($tokens, 'selected-pressed-track-color');\n    }\n\n    .selected.disabled .track {\n      background-clip: border-box;\n    }\n\n    .selected.disabled .track::before {\n      background-color: map.get($tokens, 'disabled-selected-track-color');\n    }\n\n    .unselected .track::before {\n      background-color: map.get($tokens, 'track-color');\n      border-color: map.get($tokens, 'track-outline-color');\n      border-style: solid;\n      border-width: map.get($tokens, 'track-outline-width');\n    }\n\n    .unselected:hover .track::before {\n      background-color: map.get($tokens, 'hover-track-color');\n      border-color: map.get($tokens, 'hover-track-outline-color');\n    }\n\n    .unselected:focus-visible .track::before {\n      background-color: map.get($tokens, 'focus-track-color');\n      border-color: map.get($tokens, 'focus-track-outline-color');\n    }\n\n    .unselected:active .track::before {\n      background-color: map.get($tokens, 'pressed-track-color');\n      border-color: map.get($tokens, 'pressed-track-outline-color');\n    }\n\n    .unselected.disabled .track::before {\n      background-color: map.get($tokens, 'disabled-track-color');\n      border-color: map.get($tokens, 'disabled-track-outline-color');\n    }\n  }\n\n  @layer hcm {\n    @media (forced-colors: active) {\n      .selected .track::before {\n        background: ButtonText;\n        border-color: ButtonText;\n      }\n\n      .disabled .track::before {\n        border-color: GrayText;\n        opacity: 1;\n      }\n\n      .disabled.selected .track::before {\n        background: GrayText;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "switch/internal/switch-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './switch';\n// go/keep-sorted end\n\n@include switch.styles;\n"
  },
  {
    "path": "switch/internal/switch.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../internal/events/dispatch-hooks.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst switchBaseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * @fires input {InputEvent} Fired whenever `selected` changes due to user\n * interaction (bubbles and composed).\n * @fires change {Event} Fired whenever `selected` changes due to user\n * interaction (bubbles).\n */\nexport class Switch extends switchBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * Puts the switch in the selected state and sets the form submission value to\n   * the `value` property.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * Shows both the selected and deselected icons.\n   */\n  @property({type: Boolean}) icons = false;\n\n  /**\n   * Shows only the selected icon, and not the deselected icon. If `true`,\n   * overrides the behavior of the `icons` property.\n   */\n  @property({type: Boolean, attribute: 'show-only-selected-icon'})\n  showOnlySelectedIcon = false;\n\n  /**\n   * When true, require the switch to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value associated with this switch on form submission. `null` is\n   * submitted when `selected` is `false`.\n   */\n  @property() value = 'on';\n\n  @query('input') private readonly input!: HTMLInputElement | null;\n\n  constructor() {\n    super();\n    if (isServer) {\n      return;\n    }\n\n    // This click listener does not currently need dispatch hooks since it does\n    // not check `event.defaultPrevented`.\n    this.addEventListener('click', (event: MouseEvent) => {\n      if (!isActivationClick(event) || !this.input) {\n        return;\n      }\n      this.focus();\n      dispatchActivationClick(this.input);\n    });\n\n    // Add the aria keyboard interaction pattern for switch and the Enter key.\n    // See https://www.w3.org/WAI/ARIA/apg/patterns/switch/.\n    setupDispatchHooks(this, 'keydown');\n    this.addEventListener('keydown', (event: KeyboardEvent) => {\n      afterDispatch(event, () => {\n        const ignoreEvent = event.defaultPrevented || event.key !== 'Enter';\n        if (ignoreEvent || this.disabled || !this.input) {\n          return;\n        }\n\n        this.input.click();\n      });\n    });\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"switch ${classMap(this.getRenderClasses())}\">\n        <input\n          id=\"switch\"\n          class=\"touch\"\n          type=\"checkbox\"\n          role=\"switch\"\n          aria-label=${(this as ARIAMixin).ariaLabel || nothing}\n          ?checked=${this.selected}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @input=${this.handleInput}\n          @change=${this.handleChange} />\n\n        <md-focus-ring part=\"focus-ring\" for=\"switch\"></md-focus-ring>\n        <span class=\"track\"> ${this.renderHandle()} </span>\n      </div>\n    `;\n  }\n\n  private getRenderClasses(): ClassInfo {\n    return {\n      'selected': this.selected,\n      'unselected': !this.selected,\n      'disabled': this.disabled,\n    };\n  }\n\n  private renderHandle() {\n    const classes = {\n      'with-icon': this.showOnlySelectedIcon ? this.selected : this.icons,\n    };\n    return html`\n      ${this.renderTouchTarget()}\n      <span class=\"handle-container\">\n        <md-ripple for=\"switch\" ?disabled=\"${this.disabled}\"></md-ripple>\n        <span class=\"handle ${classMap(classes)}\">\n          ${this.shouldShowIcons() ? this.renderIcons() : html``}\n        </span>\n      </span>\n    `;\n  }\n\n  private renderIcons() {\n    return html`\n      <div class=\"icons\">\n        ${this.renderOnIcon()}\n        ${this.showOnlySelectedIcon ? html`` : this.renderOffIcon()}\n      </div>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOnIcon() {\n    return html`\n      <slot class=\"icon icon--on\" name=\"on-icon\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOffIcon() {\n    return html`\n      <slot class=\"icon icon--off\" name=\"off-icon\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"touch\"></span>`;\n  }\n\n  private shouldShowIcons(): boolean {\n    return this.icons || this.showOnlySelectedIcon;\n  }\n\n  private handleInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.selected = target.checked;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.selected ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.selected);\n  }\n\n  override formResetCallback() {\n    // The selected property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.selected = this.hasAttribute('selected');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.selected = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => ({\n      checked: this.selected,\n      required: this.required,\n    }));\n  }\n\n  override [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"
  },
  {
    "path": "switch/internal/switch_test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {Harness} from '../../testing/harness.js';\n\nimport {Switch} from './switch.js';\n\n@customElement('md-test-switch')\nclass TestSwitch extends Switch {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-test-switch': TestSwitch;\n  }\n}\n\nfunction renderSwitch(propsInit: Partial<TestSwitch> = {}) {\n  return html`\n    <md-test-switch\n      ?selected=${propsInit.selected === true}\n      ?disabled=${propsInit.disabled === true}\n      .name=${propsInit.name ?? ''}\n      value=${ifDefined(propsInit.value)}></md-test-switch>\n  `;\n}\n\nfunction renderSwitchInForm(propsInit: Partial<TestSwitch> = {}) {\n  return html` <form>${renderSwitch(propsInit)}</form> `;\n}\n\nfunction renderSwitchInLabel(propsInit: Partial<TestSwitch> = {}) {\n  return html` <label>${renderSwitch(propsInit)}</label> `;\n}\n\ndescribe('md-switch', () => {\n  const env = new Environment();\n\n  async function switchElement(\n    propsInit: Partial<TestSwitch> = {},\n    template = renderSwitch,\n  ) {\n    const root = env.render(html`<div>${template(propsInit)}</div>`);\n    await env.waitForStability();\n    const element = root.querySelector('md-test-switch');\n    if (!element) {\n      throw new Error('Could not query rendered <md-test-switch>.');\n    }\n    return element;\n  }\n\n  let toggle: TestSwitch;\n\n  beforeEach(async () => {\n    toggle = await switchElement();\n  });\n\n  describe('selected', () => {\n    let selected: TestSwitch;\n\n    beforeEach(async () => {\n      selected = await switchElement({selected: true});\n    });\n\n    it('is false by default', () => {\n      expect(toggle.selected).toBeFalse();\n    });\n\n    it('adds selected class when true', () => {\n      const toggleRoot = toggle.shadowRoot!.querySelector('.switch')!;\n      expect(Array.from(toggleRoot.classList)).not.toContain('selected');\n\n      const selectedRoot = selected.shadowRoot!.querySelector('.switch')!;\n      expect(Array.from(selectedRoot.classList)).toContain('selected');\n    });\n\n    it('adds unselected class when false', () => {\n      const toggleRoot = toggle.shadowRoot!.querySelector('.switch')!;\n      expect(Array.from(toggleRoot.classList)).toContain('unselected');\n\n      const selectedRoot = selected.shadowRoot!.querySelector('.switch')!;\n      expect(Array.from(selectedRoot.classList)).not.toContain('unselected');\n    });\n  });\n\n  describe('disabled', () => {\n    let disabled: TestSwitch;\n\n    beforeEach(async () => {\n      disabled = await switchElement({disabled: true});\n    });\n\n    it('is false by default', () => {\n      expect(toggle.disabled).toBeFalse();\n    });\n\n    it('sets disabled of input', () => {\n      const toggleInput = toggle.shadowRoot!.querySelector('input')!;\n      expect(toggleInput.disabled).toBeFalse();\n\n      const selectedInput = disabled.shadowRoot!.querySelector('input')!;\n      expect(selectedInput.disabled).toBeTrue();\n    });\n  });\n\n  describe('aria', () => {\n    it('delegates aria-label to the proper element', async () => {\n      const input = toggle.shadowRoot!.querySelector('input')!;\n      toggle.setAttribute('aria-label', 'foo');\n      await toggle.updateComplete;\n      expect(toggle.ariaLabel).toEqual('foo');\n      expect(toggle.getAttribute('aria-label')).toEqual('foo');\n      expect(input.getAttribute('aria-label')).toEqual('foo');\n    });\n\n    it('delegates .ariaLabel to the proper element', async () => {\n      const input = toggle.shadowRoot!.querySelector('input')!;\n      toggle.ariaLabel = 'foo';\n      await toggle.updateComplete;\n      expect(toggle.ariaLabel).toEqual('foo');\n      expect(toggle.getAttribute('aria-label')).toEqual('foo');\n      expect(input.getAttribute('aria-label')).toEqual('foo');\n    });\n  });\n\n  describe('name', () => {\n    it('is an empty string by default', () => {\n      expect(toggle.name).toEqual('');\n    });\n\n    it('reflects as an attribute', async () => {\n      toggle.name = 'foo';\n      await toggle.updateComplete;\n      expect(toggle.getAttribute('name')).toEqual('foo');\n    });\n  });\n\n  describe('value', () => {\n    it('is \"on\" by default', () => {\n      expect(toggle.value).toEqual('on');\n    });\n  });\n\n  describe('click()', () => {\n    it('toggles element', () => {\n      expect(toggle.selected).withContext('is false by default').toBeFalse();\n      toggle.click();\n      expect(toggle.selected).withContext('should toggle selected').toBeTrue();\n    });\n\n    it('does nothing if disabled', () => {\n      expect(toggle.selected).withContext('is false by default').toBeFalse();\n      toggle.disabled = true;\n      toggle.click();\n      expect(toggle.selected).withContext('should remain false').toBeFalse();\n    });\n\n    it('reflects `selected` state in input events', () => {\n      let state = false;\n      const inputHandler = jasmine\n        .createSpy('inputHandler')\n        .and.callFake(() => {\n          state = toggle.selected;\n        });\n\n      toggle.addEventListener('input', inputHandler);\n\n      toggle.click();\n      expect(inputHandler).withContext('input listener').toHaveBeenCalled();\n      expect(state)\n        .withContext('switch.selected during input listener')\n        .toBeTrue();\n    });\n  });\n\n  describe('form submission', () => {\n    async function switchInForm(\n      propsInit: Partial<TestSwitch> = {},\n      template = renderSwitchInForm,\n    ) {\n      const element = await switchElement(propsInit, template);\n      return new Harness(element);\n    }\n\n    it('does not submit if not selected', async () => {\n      const harness = await switchInForm({name: 'foo'});\n      const formData = await harness.submitForm();\n      expect(formData.get('foo')).toBeNull();\n    });\n\n    it('does not submit if disabled', async () => {\n      const harness = await switchInForm({\n        name: 'foo',\n        selected: true,\n        disabled: true,\n      });\n      const formData = await harness.submitForm();\n      expect(formData.get('foo')).toBeNull();\n    });\n\n    it('does not submit if name is not provided', async () => {\n      const harness = await switchInForm({selected: true});\n      const formData = await harness.submitForm();\n      const keys = Array.from(formData.keys());\n      expect(keys.length).toEqual(0);\n    });\n\n    it('submits under correct conditions', async () => {\n      const harness = await switchInForm({\n        name: 'foo',\n        selected: true,\n        value: 'bar',\n      });\n      const formData = await harness.submitForm();\n      expect(formData.get('foo')).toEqual('bar');\n    });\n\n    describe('label activation', () => {\n      let label: HTMLLabelElement;\n\n      it('toggles when label is clicked', async () => {\n        toggle = await switchElement({}, renderSwitchInLabel);\n        label = toggle.parentElement as HTMLLabelElement;\n        label.click();\n        await env.waitForStability();\n        expect(toggle.selected).toBeTrue();\n        label.click();\n        await env.waitForStability();\n        expect(toggle.selected).toBeFalse();\n      });\n    });\n  });\n\n  describe('validation', () => {\n    it('should set valueMissing when required and not selected', async () => {\n      toggle.required = true;\n\n      expect(toggle.validity.valueMissing)\n        .withContext('toggle.validity.valueMissing')\n        .toBeTrue();\n    });\n\n    it('should not set valueMissing when required and selected', async () => {\n      toggle.required = true;\n      toggle.selected = true;\n\n      expect(toggle.validity.valueMissing)\n        .withContext('toggle.validity.valueMissing')\n        .toBeFalse();\n    });\n  });\n});\n"
  },
  {
    "path": "switch/switch.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Switch} from './internal/switch.js';\nimport {styles} from './internal/switch-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-switch': MdSwitch;\n  }\n}\n\n/**\n * @summary Switches toggle the state of a single item on or off.\n *\n * @description\n * There's one type of switch in Material. Use this selection control when the\n * user needs to toggle a single item on or off.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-switch')\nexport class MdSwitch extends Switch {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "switch/switch_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createFormTests} from '../testing/forms.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {SwitchHarness} from './harness.js';\nimport {MdSwitch} from './switch.js';\n\ndescribe('<md-switch>', () => {\n  const env = new Environment();\n\n  describe('.styles', () => {\n    createTokenTests(MdSwitch.styles);\n  });\n\n  describe('forms', () => {\n    createFormTests({\n      queryControl: (root) => root.querySelector('md-switch'),\n      valueTests: [\n        {\n          name: 'unnamed',\n          render: () => html`<md-switch selected></md-switch>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form without a name')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'unselected',\n          render: () => html`<md-switch name=\"switch\"></md-switch>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when unselected')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'selected default value',\n          render: () => html`<md-switch name=\"switch\" selected></md-switch>`,\n          assertValue(formData) {\n            expect(formData.get('switch')).toBe('on');\n          },\n        },\n        {\n          name: 'selected custom value',\n          render: () =>\n            html`<md-switch\n              name=\"switch\"\n              selected\n              value=\"Custom value\"></md-switch>`,\n          assertValue(formData) {\n            expect(formData.get('switch')).toBe('Custom value');\n          },\n        },\n        {\n          name: 'disabled',\n          render: () =>\n            html`<md-switch name=\"switch\" selected disabled></md-switch>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when disabled')\n              .toHaveSize(0);\n          },\n        },\n      ],\n      resetTests: [\n        {\n          name: 'reset to unselected',\n          render: () => html`<md-switch name=\"switch\"></md-switch>`,\n          change(control) {\n            control.selected = true;\n          },\n          assertReset(control) {\n            expect(control.selected)\n              .withContext('control.selected after reset')\n              .toBeFalse();\n          },\n        },\n        {\n          name: 'reset to selected',\n          render: () => html`<md-switch name=\"switch\" selected></md-switch>`,\n          change(control) {\n            control.selected = false;\n          },\n          assertReset(control) {\n            expect(control.selected)\n              .withContext('control.selected after reset')\n              .toBeTrue();\n          },\n        },\n      ],\n      restoreTests: [\n        {\n          name: 'restore unselected',\n          render: () => html`<md-switch name=\"switch\"></md-switch>`,\n          assertRestored(control) {\n            expect(control.selected)\n              .withContext('control.selected after restore')\n              .toBeFalse();\n          },\n        },\n        {\n          name: 'restore selected',\n          render: () => html`<md-switch name=\"switch\" selected></md-switch>`,\n          assertRestored(control) {\n            expect(control.selected)\n              .withContext('control.selected after restore')\n              .toBeTrue();\n          },\n        },\n      ],\n    });\n  });\n\n  describe('enter key activation', () => {\n    // Don't use harness.clickWithKeyboard() since it simulates a click event.\n    // The underlying `<input type=\"checkbox\">` will not dispatch click events\n    // in response to the Enter key.\n\n    it('should toggle the switch on', async () => {\n      // Arrange\n      const root = env.render(html`<md-switch></md-switch>`);\n      const harness = new SwitchHarness(root.querySelector('md-switch')!);\n\n      // Act\n      await harness.keypress('Enter');\n      await harness.element.updateComplete;\n\n      // Assert\n      expect(harness.element.selected)\n        .withContext('switch is selected after Enter')\n        .toBeTrue();\n    });\n\n    it('should toggle the switch off', async () => {\n      // Arrange\n      const root = env.render(html`<md-switch selected></md-switch>`);\n      const harness = new SwitchHarness(root.querySelector('md-switch')!);\n\n      // Act\n      await harness.keypress('Enter');\n      await harness.element.updateComplete;\n\n      // Assert\n      expect(harness.element.selected)\n        .withContext('switch is unselected after Enter')\n        .toBeFalse();\n    });\n\n    it('should not toggle the switch when disabled', async () => {\n      // Arrange\n      const root = env.render(html`<md-switch disabled></md-switch>`);\n      const harness = new SwitchHarness(root.querySelector('md-switch')!);\n\n      // Act\n      await harness.keypress('Enter');\n      await harness.element.updateComplete;\n\n      // Assert\n      expect(harness.element.selected)\n        .withContext('disabled switch is not selected after Enter')\n        .toBeFalse();\n    });\n\n    it('should not toggle the switch when keydown event is canceled', async () => {\n      // Arrange\n      const root = env.render(html`<md-switch></md-switch>`);\n      const harness = new SwitchHarness(root.querySelector('md-switch')!);\n      harness.element.addEventListener('keydown', (event) => {\n        event.preventDefault();\n      });\n\n      // Act\n      await harness.keypress('Enter');\n      await harness.element.updateComplete;\n\n      // Assert\n      expect(harness.element.selected)\n        .withContext('switch is not selected when Enter is canceled')\n        .toBeFalse();\n    });\n  });\n});\n"
  },
  {
    "path": "tabs/_primary-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/primary-tab' show theme;\n"
  },
  {
    "path": "tabs/_secondary-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/secondary-tab' show theme;\n"
  },
  {
    "path": "tabs/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {MdTabs} from '@material/web/tabs/tabs.js';\nimport {\n  boolInput,\n  Knob,\n  numberInput,\n  radioSelector,\n} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Tabs',\n  [\n    new Knob('activeTabIndex', {\n      ui: numberInput(),\n      defaultValue: 0,\n      // fire a change event manually to sync tabbed content\n      wiring: async (knob, value, container) => {\n        await new Promise(requestAnimationFrame);\n        const tabs = Array.from(container.querySelectorAll<MdTabs>('md-tabs'));\n        for (const tab of tabs) {\n          const event = new Event('change', {bubbles: true, composed: true});\n          tab.dispatchEvent(event);\n        }\n      },\n    }),\n    new Knob('autoActivate', {ui: boolInput(), defaultValue: false}),\n    new Knob('inlineIcon', {ui: boolInput(), defaultValue: false}),\n    new Knob('content', {\n      defaultValue: 'icon/label',\n      ui: radioSelector({\n        name: 'contentRadioGroup',\n        options: [\n          {label: 'icon/label', value: 'icon/label'},\n          {label: 'icon', value: 'icon'},\n          {label: 'label', value: 'label'},\n        ],\n      }),\n    }),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection, {icons: 'material-symbols'});\n"
  },
  {
    "path": "tabs/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "tabs/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/tabs/primary-tab.js';\nimport '@material/web/tabs/secondary-tab.js';\nimport '@material/web/tabs/tabs.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {MdTabs} from '@material/web/tabs/tabs.js';\nimport {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';\nimport {css, html, nothing} from 'lit';\nimport {ref} from 'lit/directives/ref.js';\n\n/** Knob types for Tabs stories. */\nexport interface StoryKnobs {\n  activeTabIndex: number;\n  autoActivate: boolean;\n  inlineIcon: boolean;\n  content: string;\n}\n\nconst styles = [\n  typescaleStyles,\n  css`\n    [role='tabpanel']:not(.subtabs) {\n      padding: 16px;\n    }\n\n    md-tabs {\n      --inline-size: 50vw;\n      min-inline-size: var(--inline-size);\n    }\n\n    md-tabs.scrolling {\n      inline-size: var(--inline-size);\n    }\n\n    .controls {\n      height: 48px;\n    }\n  `,\n];\n\nconst primary: MaterialStoryInit<StoryKnobs> = {\n  name: 'Primary Tabs',\n  styles,\n  render(knobs) {\n    const tabContent = getTabContentGenerator(knobs);\n    const inlineIcon = knobs.inlineIcon;\n\n    return html`\n      <md-tabs\n        aria-label=\"Primary tabs\"\n        active-tab-index=${knobs.activeTabIndex}\n        .autoActivate=${knobs.autoActivate}\n        ${setupTabPanels()}>\n        <md-primary-tab\n          id=\"tab-one\"\n          aria-controls=\"panel-one\"\n          .inlineIcon=${inlineIcon}>\n          ${tabContent('piano', 'Keyboard')}\n        </md-primary-tab>\n        <md-primary-tab\n          id=\"tab-two\"\n          aria-controls=\"panel-two\"\n          .inlineIcon=${inlineIcon}>\n          ${tabContent('tune', 'Guitar')}\n        </md-primary-tab>\n        <md-primary-tab\n          id=\"tab-three\"\n          aria-controls=\"panel-three\"\n          .inlineIcon=${inlineIcon}>\n          ${tabContent('graphic_eq', 'Drums')}\n        </md-primary-tab>\n        <md-primary-tab\n          id=\"tab-four\"\n          aria-controls=\"panel-four\"\n          .inlineIcon=${inlineIcon}>\n          ${tabContent('speaker', 'Bass')}\n        </md-primary-tab>\n        <md-primary-tab\n          id=\"tab-five\"\n          aria-controls=\"panel-five\"\n          .inlineIcon=${inlineIcon}>\n          ${tabContent('nightlife', 'Saxophone')}\n        </md-primary-tab>\n      </md-tabs>\n\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-one\"\n        aria-labelledby=\"tab-one\">\n        Keyboard\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-two\"\n        aria-labelledby=\"tab-two\"\n        hidden>\n        Guitar\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-three\"\n        aria-labelledby=\"tab-three\"\n        hidden>\n        Drums\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-four\"\n        aria-labelledby=\"tab-four\"\n        hidden>\n        Bass\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-five\"\n        aria-labelledby=\"tab-five\"\n        hidden>\n        Saxophone\n      </div>\n    `;\n  },\n};\n\nconst secondary: MaterialStoryInit<StoryKnobs> = {\n  name: 'Secondary Tabs',\n  styles,\n  render(knobs) {\n    const tabContent = getTabContentGenerator(knobs);\n\n    return html`\n      <md-tabs\n        aria-label=\"Secondary tabs\"\n        active-tab-index=${knobs.activeTabIndex}\n        .autoActivate=${knobs.autoActivate}\n        ${setupTabPanels()}>\n        <md-secondary-tab id=\"tab-one\" aria-controls=\"panel-one\">\n          ${tabContent('flight', 'Travel')}\n        </md-secondary-tab>\n        <md-secondary-tab id=\"tab-two\" aria-controls=\"panel-two\">\n          ${tabContent('hotel', 'Hotel')}\n        </md-secondary-tab>\n        <md-secondary-tab id=\"tab-three\" aria-controls=\"panel-three\">\n          ${tabContent('hiking', 'Activities')}\n        </md-secondary-tab>\n        <md-secondary-tab id=\"tab-four\" aria-controls=\"panel-four\">\n          ${tabContent('restaurant', 'Food')}\n        </md-secondary-tab>\n      </md-tabs>\n\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-one\"\n        aria-labelledby=\"tab-one\">\n        Travel\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-two\"\n        aria-labelledby=\"tab-two\"\n        hidden>\n        Hotel\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-three\"\n        aria-labelledby=\"tab-three\"\n        hidden>\n        Activities\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-four\"\n        aria-labelledby=\"tab-four\"\n        hidden>\n        Food\n      </div>\n    `;\n  },\n};\n\nconst scrolling: MaterialStoryInit<StoryKnobs> = {\n  name: 'Scrolling Tabs',\n  styles,\n  render(knobs) {\n    const tabContent = getTabContentGenerator(knobs);\n    const inlineIcon = knobs.inlineIcon;\n\n    return html` <md-tabs\n      aria-label=\"A tab bar that scrolls\"\n      class=\"scrolling\"\n      active-tab-index=${knobs.activeTabIndex}\n      .autoActivate=${knobs.autoActivate}>\n      ${new Array(10).fill(html`\n        <md-primary-tab .inlineIcon=${inlineIcon}>\n          ${tabContent('piano', 'Keyboard')}\n        </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon}>\n          ${tabContent('tune', 'Guitar')}\n        </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon}>\n          ${tabContent('graphic_eq', 'Drums')}\n        </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon}>\n          ${tabContent('speaker', 'Bass')}\n        </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon}>\n          ${tabContent('nightlife', 'Saxophone')}\n        </md-primary-tab>\n      `)}\n    </md-tabs>`;\n  },\n};\n\nconst custom: MaterialStoryInit<StoryKnobs> = {\n  name: 'Custom Tabs',\n  styles: [\n    ...styles,\n    css`\n      .custom {\n        /* colors */\n        --md-sys-color-primary: var(--md-sys-color-tertiary);\n        /* text */\n        --md-primary-tab-label-text-font: cursive, system-ui;\n        --md-primary-tab-label-text-size: 0.8em;\n        /* indicator */\n        --md-primary-tab-active-indicator-height: 8px;\n        --md-primary-tab-active-indicator-shape: 9999px 0;\n      }\n\n      .custom::part(divider) {\n        --md-divider-color: var(--md-sys-color-tertiary);\n        --md-divider-thickness: 4px;\n      }\n    `,\n  ],\n  render(knobs) {\n    const tabContent = getTabContentGenerator(knobs);\n\n    return html`\n      <md-tabs\n        aria-label=\"A custom themed tab bar\"\n        class=\"custom\"\n        active-tab-index=${knobs.activeTabIndex}\n        .autoActivate=${knobs.autoActivate}\n        ${setupTabPanels()}>\n        <md-primary-tab id=\"tab-one\" aria-controls=\"panel-one\">\n          ${tabContent('flight', 'Travel')}\n        </md-primary-tab>\n        <md-primary-tab id=\"tab-two\" aria-controls=\"panel-two\">\n          ${tabContent('hotel', 'Hotel')}\n        </md-primary-tab>\n        <md-primary-tab id=\"tab-three\" aria-controls=\"panel-three\">\n          ${tabContent('hiking', 'Activities')}\n        </md-primary-tab>\n        <md-primary-tab id=\"tab-four\" aria-controls=\"panel-four\">\n          ${tabContent('restaurant', 'Food')}\n        </md-primary-tab>\n      </md-tabs>\n\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-one\"\n        aria-labelledby=\"tab-one\">\n        Travel\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-two\"\n        aria-labelledby=\"tab-two\"\n        hidden>\n        Hotel\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-three\"\n        aria-labelledby=\"tab-three\"\n        hidden>\n        Activities\n      </div>\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"panel-four\"\n        aria-labelledby=\"tab-four\"\n        hidden>\n        Food\n      </div>\n    `;\n  },\n};\n\nconst primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {\n  name: 'Primary and Secondary Tabs',\n  styles,\n  render(knobs) {\n    const tabContent = getTabContentGenerator(knobs);\n    const inlineIcon = knobs.inlineIcon;\n\n    return html`\n      <md-tabs\n        aria-label=\"Primary tabs\"\n        active-tab-index=${knobs.activeTabIndex}\n        .autoActivate=${knobs.autoActivate}\n        ${setupTabPanels()}>\n        <md-primary-tab .inlineIcon=${inlineIcon} aria-controls=\"movies\">\n          ${tabContent('videocam', 'Movies')}\n        </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon} aria-controls=\"photos\">\n          ${tabContent('photo', 'Photos')}\n        </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon} aria-controls=\"music\">\n          ${tabContent('audiotrack', 'Music')}\n        </md-primary-tab>\n      </md-tabs>\n\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"movies\"\n        class=\"subtabs\"\n        aria-label=\"Movies\">\n        <md-tabs\n          aria-label=\"Secondary tabs for movies\"\n          active-tab-index=${knobs.activeTabIndex}\n          .autoActivate=${knobs.autoActivate}\n          ${setupTabPanels()}>\n          <md-secondary-tab aria-controls=\"star-wars\">\n            Star Wars\n          </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"avengers\">\n            Avengers\n          </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"jaws\">Jaws </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"forzen\">Frozen </md-secondary-tab>\n        </md-tabs>\n\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"star-wars\"\n          aria-label=\"Star Wars\">\n          Star Wars\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"avengers\"\n          aria-label=\"Avengers\"\n          hidden>\n          Avengers\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"jaws\"\n          aria-label=\"Jaws\"\n          hidden>\n          Jaws\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"frozen\"\n          aria-label=\"Frozen\"\n          hidden>\n          Frozen\n        </div>\n      </div>\n\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"photos\"\n        class=\"subtabs\"\n        aria-label=\"Photos\"\n        hidden>\n        <md-tabs\n          aria-label=\"Secondary tabs for photos\"\n          active-tab-index=${knobs.activeTabIndex}\n          .autoActivate=${knobs.autoActivate}>\n          <md-secondary-tab aria-controls=\"yosemite\">\n            Yosemite\n          </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"mona-lisa\">\n            Mona Lisa\n          </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"swiss-alps\">\n            Swiss Alps\n          </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"niagra-falls\">\n            Niagra Falls\n          </md-secondary-tab>\n        </md-tabs>\n\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"yosemite\"\n          aria-label=\"Yosemite\">\n          Yosemite\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"mona-lisa\"\n          aria-label=\"Mona Lisa\"\n          hidden>\n          Mona Lisa\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"swiss-alps\"\n          aria-label=\"Swiss Alps\"\n          hidden>\n          Swiss Alps\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"niagra-falls\"\n          aria-label=\"Niagra Falls\"\n          hidden>\n          Niagra Falls\n        </div>\n      </div>\n\n      <div\n        role=\"tabpanel\"\n        class=\"md-typescale-body-medium\"\n        id=\"music\"\n        class=\"subtabs\"\n        aria-label=\"Music\"\n        hidden>\n        <md-tabs\n          aria-label=\"Secondary tabs for music\"\n          active-tab-index=${knobs.activeTabIndex}\n          .autoActivate=${knobs.autoActivate}\n          ${setupTabPanels()}>\n          <md-secondary-tab aria-controls=\"rock\">Rock </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"ambient\">Ambient </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"sounds\">\n            Soundscapes\n          </md-secondary-tab>\n          <md-secondary-tab aria-controls=\"noise\">\n            White Noise\n          </md-secondary-tab>\n        </md-tabs>\n\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"rock\"\n          aria-label=\"Rock\">\n          Rock\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"ambient\"\n          aria-label=\"Ambient\"\n          hidden>\n          Ambient\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"sounds\"\n          aria-label=\"Soundscapes\"\n          hidden>\n          Soundscapes\n        </div>\n        <div\n          role=\"tabpanel\"\n          class=\"md-typescale-body-medium\"\n          id=\"noise\"\n          aria-label=\"White noise\"\n          hidden>\n          White Noise\n        </div>\n      </div>\n    `;\n  },\n};\n\nconst dynamic: MaterialStoryInit<StoryKnobs> = {\n  name: 'Dynamic Tabs',\n  styles,\n  render(knobs) {\n    const inlineIcon = knobs.inlineIcon;\n\n    function getTabs(event: Event) {\n      return (\n        (event.target! as Element).getRootNode() as ShadowRoot\n      ).querySelector('md-tabs')!;\n    }\n\n    function addTab(event: Event) {\n      const tabs = getTabs(event);\n      const count = tabs.childElementCount;\n      const tab = document.createElement('md-primary-tab');\n      tab.textContent = `Tab ${count + 1}`;\n      tabs.append(tab);\n    }\n    function removeTab(event: Event) {\n      const tabs = getTabs(event);\n      tabs.tabs[tabs.tabs.length - 1]?.remove();\n    }\n\n    function moveTabTowardsEnd(event: Event) {\n      const tabs = getTabs(event);\n      if (!tabs.activeTab) {\n        return;\n      }\n      const next = tabs.activeTab.nextElementSibling;\n      if (next) {\n        next.after(tabs.activeTab);\n      }\n    }\n\n    function moveTabTowardsStart(event: Event) {\n      const tabs = getTabs(event);\n      if (!tabs.activeTab) {\n        return;\n      }\n      const previous = tabs.activeTab.previousElementSibling;\n      if (previous) {\n        previous.before(tabs.activeTab);\n      }\n    }\n\n    return html` <div class=\"controls\">\n        <md-icon-button @click=${addTab}>\n          <md-icon>add</md-icon>\n        </md-icon-button>\n        <md-icon-button @click=${removeTab}>\n          <md-icon>remove</md-icon>\n        </md-icon-button>\n        <md-icon-button @click=${moveTabTowardsStart}>\n          <md-icon>chevron_left</md-icon>\n        </md-icon-button>\n        <md-icon-button @click=${moveTabTowardsEnd}>\n          <md-icon>chevron_right</md-icon>\n        </md-icon-button>\n      </div>\n      <md-tabs\n        class=\"scrolling\"\n        active-tab-index=${knobs.activeTabIndex}\n        .autoActivate=${knobs.autoActivate}>\n        <md-primary-tab .inlineIcon=${inlineIcon}> Tab 1 </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon}> Tab 2 </md-primary-tab>\n        <md-primary-tab .inlineIcon=${inlineIcon}> Tab 3 </md-primary-tab>\n      </md-tabs>`;\n  },\n};\n\nfunction getTabContentGenerator(knobs: StoryKnobs) {\n  const contentKnob = knobs.content;\n  const useIcon = contentKnob !== 'label';\n  const useLabel = contentKnob !== 'icon';\n  return (icon: string, label: string) => {\n    const iconTemplate = html`<md-icon slot=\"icon\">${icon}</md-icon>`;\n    return html`\n      ${useIcon ? iconTemplate : nothing} ${useLabel ? html`${label}` : nothing}\n    `;\n  };\n}\n\nfunction setupTabPanels() {\n  return ref((instance) => {\n    if (!instance) {\n      return;\n    }\n\n    const tabs = instance as MdTabs;\n    let currentPanel: HTMLElement | null = null;\n    tabs.addEventListener('change', () => {\n      if (currentPanel) {\n        currentPanel.hidden = true;\n      }\n\n      const panelId = tabs.activeTab?.getAttribute('aria-controls');\n      const root = tabs.getRootNode() as Document | ShadowRoot;\n      currentPanel = root.querySelector<HTMLElement>(`#${panelId}`);\n      if (currentPanel) {\n        currentPanel.hidden = false;\n      }\n    });\n  });\n}\n\n/** Tabs stories. */\nexport const stories = [\n  primary,\n  secondary,\n  scrolling,\n  custom,\n  primaryAndSecondary,\n  dynamic,\n];\n"
  },
  {
    "path": "tabs/harness.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ElementWithHarness, Harness} from '../testing/harness.js';\n\nimport {Tab} from './internal/tab.js';\nimport {Tabs} from './internal/tabs.js';\n\n/**\n * Test harness for Tab.\n */\nexport class TabHarness extends Harness<Tab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element as HTMLElement;\n  }\n\n  private async completeIndicatorAnimation() {\n    await this.element.updateComplete;\n    const indicator = this.element.renderRoot.querySelector('.indicator')!;\n    const animations = indicator.getAnimations();\n    for (const animation of animations) {\n      animation.finish();\n    }\n  }\n\n  async isIndicatorShowing() {\n    await this.completeIndicatorAnimation();\n    const indicator = this.element.renderRoot.querySelector('.indicator')!;\n    const opacity = getComputedStyle(indicator)['opacity'];\n    return opacity === '1';\n  }\n}\n\n/**\n * Test harness for Tabs.\n */\nexport class TabsHarness extends Harness<Tabs> {\n  // Note, Tabs interactive element is the interactive element of the\n  // selected tab.\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    if (!this.element.activeTab) {\n      return this.element as HTMLElement;\n    }\n\n    const selectedItemHarness =\n      ((this.element.activeTab as ElementWithHarness<Tab>)\n        .harness as TabHarness) ?? new TabHarness(this.element.activeTab);\n    return await selectedItemHarness.getInteractiveElement();\n  }\n\n  get harnessedItems() {\n    return (this.element.tabs as Array<ElementWithHarness<Tab>>).map((item) => {\n      return (item.harness ?? new TabHarness(item)) as TabHarness;\n    });\n  }\n}\n"
  },
  {
    "path": "tabs/internal/_primary-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-primary-tab-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-primary-tab-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-primary-tab-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n\n  .content.stacked {\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  .content.stacked.has-icon.has-label {\n    height: var(--_with-icon-and-label-text-container-height);\n  }\n}\n"
  },
  {
    "path": "tabs/internal/_secondary-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-secondary-tab-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-secondary-tab-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-secondary-tab-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "tabs/internal/_tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../elevation/elevation';\n@use '../../focus/focus-ring';\n@use '../../ripple/ripple';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    padding: 0 16px;\n    position: relative;\n    -webkit-tap-highlight-color: transparent;\n    vertical-align: middle;\n    user-select: none;\n    font-family: var(--_label-text-font);\n    font-size: var(--_label-text-size);\n    line-height: var(--_label-text-line-height);\n    font-weight: var(--_label-text-weight);\n    color: var(--_label-text-color);\n    z-index: 0; // Ensure this is a stacking context so the indicator displays\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_hover-state-layer-color),\n        hover-opacity: var(--_hover-state-layer-opacity),\n        pressed-color: var(--_pressed-state-layer-color),\n        pressed-opacity: var(--_pressed-state-layer-opacity),\n      )\n    );\n\n    // b/316459034 - elevation should be removed\n    @include elevation.theme(\n      (\n        level: var(--_container-elevation),\n      )\n    );\n  }\n\n  md-focus-ring {\n    @include focus-ring.theme(\n      (\n        'shape': 8px,\n      )\n    );\n  }\n\n  :host([active]) md-focus-ring {\n    margin-bottom: calc(var(--_active-indicator-height) + 1px);\n  }\n\n  .button::before {\n    background: var(--_container-color);\n    content: '';\n    inset: 0;\n    position: absolute;\n    z-index: -1;\n  }\n\n  .button::before,\n  md-ripple,\n  md-elevation {\n    border-start-start-radius: var(--_container-shape-start-start);\n    border-start-end-radius: var(--_container-shape-start-end);\n    border-end-end-radius: var(--_container-shape-end-end);\n    border-end-start-radius: var(--_container-shape-end-start);\n  }\n\n  .content {\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    height: var(--_container-height);\n    gap: 8px;\n  }\n\n  .indicator {\n    position: absolute;\n    box-sizing: border-box;\n    z-index: -1;\n    transform-origin: bottom left;\n    background: var(--_active-indicator-color);\n    border-radius: var(--_active-indicator-shape);\n    height: var(--_active-indicator-height);\n    inset: auto 0 0 0;\n    // hidden unless the tab is selected\n    opacity: 0;\n  }\n\n  // unselected states\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    position: relative;\n    writing-mode: horizontal-tb;\n    fill: currentColor;\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n  }\n\n  :host(:hover) {\n    color: var(--_hover-label-text-color);\n    cursor: pointer;\n  }\n\n  :host(:hover) ::slotted([slot='icon']) {\n    color: var(--_hover-icon-color);\n  }\n\n  :host(:focus) {\n    color: var(--_focus-label-text-color);\n  }\n\n  :host(:focus) ::slotted([slot='icon']) {\n    color: var(--_focus-icon-color);\n  }\n\n  :host(:active) {\n    color: var(--_pressed-label-text-color);\n  }\n\n  :host(:active) ::slotted([slot='icon']) {\n    color: var(--_pressed-icon-color);\n  }\n\n  // selected styling\n  :host([active]) .indicator {\n    opacity: 1;\n  }\n  :host([active]) {\n    color: var(--_active-label-text-color);\n\n    @include ripple.theme(\n      (\n        hover-color: var(--_active-hover-state-layer-color),\n        hover-opacity: var(--_active-hover-state-layer-opacity),\n        pressed-color: var(--_active-pressed-state-layer-color),\n        pressed-opacity: var(--_active-pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  :host([active]) ::slotted([slot='icon']) {\n    color: var(--_active-icon-color);\n  }\n\n  // selected states\n  :host([active]:hover) {\n    color: var(--_active-hover-label-text-color);\n  }\n\n  :host([active]:hover) ::slotted([slot='icon']) {\n    color: var(--_active-hover-icon-color);\n  }\n\n  :host([active]:focus) {\n    color: var(--_active-focus-label-text-color);\n  }\n\n  :host([active]:focus) ::slotted([slot='icon']) {\n    color: var(--_active-focus-icon-color);\n  }\n\n  :host([active]:active) {\n    color: var(--_active-pressed-label-text-color);\n  }\n\n  :host([active]:active) ::slotted([slot='icon']) {\n    color: var(--_active-pressed-icon-color);\n  }\n\n  :host,\n  ::slotted(*) {\n    white-space: nowrap;\n  }\n\n  @media (forced-colors: active) {\n    .indicator {\n      background: CanvasText;\n    }\n  }\n}\n"
  },
  {
    "path": "tabs/internal/_tabs.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// Note, there are currently no tokens for tabs. Instead, tabs are entirely\n// themed via primary/secondary tab.\n@mixin styles() {\n  :host {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    position: relative;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tabs {\n    align-items: end;\n    display: flex;\n    height: 100%;\n    overflow: inherit;\n    scroll-behavior: inherit;\n    scrollbar-width: inherit;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  ::slotted(*) {\n    flex: 1;\n  }\n\n  // draw selected on top so its indicator can be transitioned from the\n  // previously selected tab, on top of it\n  ::slotted([active]) {\n    z-index: 1;\n  }\n}\n"
  },
  {
    "path": "tabs/internal/primary-tab-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './primary-tab';\n// go/keep-sorted end\n\n@include primary-tab.styles;\n"
  },
  {
    "path": "tabs/internal/primary-tab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property} from 'lit/decorators.js';\n\nimport {Tab} from './tab.js';\n\n/**\n * A primary tab component.\n */\nexport class PrimaryTab extends Tab {\n  /**\n   * Whether or not the icon renders inline with label or stacked vertically.\n   */\n  @property({type: Boolean, attribute: 'inline-icon'}) inlineIcon = false;\n\n  protected override getContentClasses() {\n    return {\n      ...super.getContentClasses(),\n      'stacked': !this.inlineIcon,\n    };\n  }\n}\n"
  },
  {
    "path": "tabs/internal/secondary-tab-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './secondary-tab';\n// go/keep-sorted end\n\n@include secondary-tab.styles;\n"
  },
  {
    "path": "tabs/internal/secondary-tab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Tab} from './tab.js';\n\n/**\n * A secondary tab component.\n */\nexport class SecondaryTab extends Tab {\n  protected override fullWidthIndicator = true;\n}\n"
  },
  {
    "path": "tabs/internal/tab-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './tab';\n// go/keep-sorted end\n\n@include tab.styles;\n"
  },
  {
    "path": "tabs/internal/tab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\n\n/**\n * Symbol used by the tab bar to request a tab to animate its indicator from a\n * previously selected tab.\n */\nexport const ANIMATE_INDICATOR = Symbol('animateIndicator');\n\n// Separate variable needed for closure.\nconst tabBaseClass = mixinFocusable(LitElement);\n\n/**\n * Tab component.\n */\nexport class Tab extends tabBaseClass {\n  /**\n   * The attribute `md-tab` indicates that the element is a tab for the parent\n   * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`\n   * component that you have an `md-tab` attribute set.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'md-tab'})\n  readonly isTab = true;\n\n  /**\n   * Whether or not the tab is selected.\n   **/\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * @deprecated use `active`\n   */\n  @property({type: Boolean})\n  get selected() {\n    return this.active;\n  }\n  set selected(active: boolean) {\n    this.active = active;\n  }\n\n  /**\n   * In SSR, set this to true when an icon is present.\n   */\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  /**\n   * In SSR, set this to true when there is no label and only an icon.\n   */\n  @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;\n\n  @query('.indicator') private readonly indicator!: HTMLElement | null;\n  @state() protected fullWidthIndicator = false;\n  @queryAssignedNodes({flatten: true})\n  private readonly assignedDefaultNodes!: Node[];\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n  private readonly internals =\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tab';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const indicator = html`<div class=\"indicator\"></div>`;\n    return html`<div\n      class=\"button\"\n      role=\"presentation\"\n      @click=${this.handleContentClick}>\n      <md-focus-ring part=\"focus-ring\" inward .control=${this}></md-focus-ring>\n      <md-elevation part=\"elevation\"></md-elevation>\n      <md-ripple .control=${this}></md-ripple>\n      <div\n        class=\"content ${classMap(this.getContentClasses())}\"\n        role=\"presentation\">\n        <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        ${this.fullWidthIndicator ? nothing : indicator}\n      </div>\n      ${this.fullWidthIndicator ? indicator : nothing}\n    </div>`;\n  }\n\n  protected getContentClasses(): ClassInfo {\n    return {\n      'has-icon': this.hasIcon,\n      'has-label': !this.iconOnly,\n    };\n  }\n\n  protected override updated() {\n    this.internals.ariaSelected = String(this.active);\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      // Prevent default behavior such as scrolling when pressing spacebar.\n      event.preventDefault();\n      this.click();\n    }\n  }\n\n  private handleContentClick(event: Event) {\n    // Ensure the \"click\" target is always the tab, and not content, by stopping\n    // propagation of content clicks and re-clicking the host.\n    event.stopPropagation();\n    this.click();\n  }\n\n  [ANIMATE_INDICATOR](previousTab: Tab) {\n    if (!this.indicator) {\n      return;\n    }\n\n    this.indicator.getAnimations().forEach((a) => {\n      a.cancel();\n    });\n    const frames = this.getKeyframes(previousTab);\n    if (frames !== null) {\n      this.indicator.animate(frames, {\n        duration: 250,\n        easing: EASING.EMPHASIZED,\n      });\n    }\n  }\n\n  private getKeyframes(previousTab: Tab) {\n    const reduceMotion = shouldReduceMotion();\n    if (!this.active) {\n      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;\n    }\n\n    const from: Keyframe = {};\n    const fromRect =\n      previousTab.indicator?.getBoundingClientRect() ?? ({} as DOMRect);\n    const fromPos = fromRect.left;\n    const fromExtent = fromRect.width;\n    const toRect = this.indicator!.getBoundingClientRect();\n    const toPos = toRect.left;\n    const toExtent = toRect.width;\n    const scale = fromExtent / toExtent;\n    if (\n      !reduceMotion &&\n      fromPos !== undefined &&\n      toPos !== undefined &&\n      !isNaN(scale)\n    ) {\n      from['transform'] = `translateX(${(fromPos - toPos).toFixed(\n        4,\n      )}px) scaleX(${scale.toFixed(4)})`;\n    } else {\n      from['opacity'] = 0;\n    }\n    // note, including `transform: none` avoids quirky Safari behavior\n    // that can hide the animation.\n    return [from, {'transform': 'none'}];\n  }\n\n  private handleSlotChange() {\n    this.iconOnly = false;\n    // Check if there's any label text or elements. If not, then there is only\n    // an icon.\n    for (const node of this.assignedDefaultNodes) {\n      const hasTextContent =\n        node.nodeType === Node.TEXT_NODE &&\n        !!(node as Text).wholeText.match(/\\S/);\n      if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n        return;\n      }\n    }\n\n    this.iconOnly = true;\n  }\n\n  private handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\nfunction shouldReduceMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"
  },
  {
    "path": "tabs/internal/tabs-styles.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './tabs';\n// go/keep-sorted end\n\n@include tabs.styles;\n"
  },
  {
    "path": "tabs/internal/tabs.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ANIMATE_INDICATOR, Tab} from './tab.js';\n\n/**\n * @fires change {Event} Fired when the selected tab changes. The target's\n * `activeTabIndex` or `activeTab` provide information about the selection\n * change. The change event is fired when a user interaction like a space/enter\n * key or click cause a selection change. The tab selection based on these\n * actions can be cancelled by calling preventDefault on the triggering\n * `keydown` or `click` event. --bubbles\n *\n * @example\n * // perform an action if a tab is clicked\n * tabs.addEventListener('change', (event: Event) => {\n *   if (event.target.activeTabIndex === 2)\n *     takeAction();\n *   }\n * });\n *\n * // prevent a click from triggering tab selection under some condition\n * tabs.addEventListener('click', (event: Event) => {\n *   if (notReady)\n *     event.preventDefault();\n *   }\n * });\n *\n */\nexport class Tabs extends LitElement {\n  /**\n   * The tabs of this tab bar.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-tab]'})\n  readonly tabs!: Tab[];\n\n  /**\n   * The currently selected tab, `null` only when there are no tab children.\n   *\n   * @export\n   */\n  get activeTab() {\n    return this.tabs.find((tab) => tab.active) ?? null;\n  }\n  set activeTab(tab: Tab | null) {\n    // Ignore setting activeTab to null. As long as there are children, one tab\n    // must be selected.\n    if (tab) {\n      this.activateTab(tab);\n    }\n  }\n\n  /**\n   * The index of the currently selected tab.\n   *\n   * @export\n   */\n  @property({type: Number, attribute: 'active-tab-index'})\n  get activeTabIndex() {\n    return this.tabs.findIndex((tab) => tab.active);\n  }\n  set activeTabIndex(index: number) {\n    const activateTabAtIndex = () => {\n      const tab = this.tabs[index];\n      // Ignore out-of-bound indices.\n      if (tab) {\n        this.activateTab(tab);\n      }\n    };\n\n    if (!this.slotElement) {\n      // This is needed to support setting the activeTabIndex via a lit property\n      // binding.\n      //\n      // ```ts\n      // html`\n      //   <md-tabs .activeTabIndex=${1}>\n      //     <md-tab>First</md-tab>\n      //     <md-tab>Second</md-tab>\n      //   </md-tabs>\n      // `;\n      // ```\n      //\n      // It's needed since lit's rendering lifecycle is asynchronous, and the\n      // `<slot>` element hasn't rendered, so `tabs` is empty.\n      this.updateComplete.then(activateTabAtIndex);\n      return;\n    }\n\n    activateTabAtIndex();\n  }\n\n  /**\n   * Whether or not to automatically select a tab when it is focused.\n   */\n  @property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;\n\n  @query('.tabs') private readonly tabsScrollerElement!: HTMLElement | null;\n  @query('slot') private readonly slotElement!: HTMLSlotElement | null;\n\n  private get focusedTab() {\n    return this.tabs.find((tab) => tab.matches(':focus-within'));\n  }\n\n  private readonly internals =\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tablist';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n      this.addEventListener('keyup', this.handleKeyup.bind(this));\n      this.addEventListener('focusout', this.handleFocusout.bind(this));\n    }\n  }\n\n  /**\n   * Scrolls the toolbar, if overflowing, to the active tab, or the provided\n   * tab.\n   *\n   * @param tabToScrollTo The tab that should be scrolled to. Defaults to the\n   *     active tab.\n   * @return A Promise that resolves after the tab has been scrolled to.\n   */\n  async scrollToTab(tabToScrollTo?: Tab | null) {\n    await this.updateComplete;\n    const {tabs} = this;\n    tabToScrollTo ??= this.activeTab;\n    if (\n      !tabToScrollTo ||\n      !tabs.includes(tabToScrollTo) ||\n      !this.tabsScrollerElement\n    ) {\n      return;\n    }\n\n    // wait for tabs to render.\n    for (const tab of this.tabs) {\n      await tab.updateComplete;\n    }\n\n    const offset = tabToScrollTo.offsetLeft;\n    const extent = tabToScrollTo.offsetWidth;\n    const scroll = this.scrollLeft;\n    const hostExtent = this.offsetWidth;\n    const scrollMargin = 48;\n    const min = offset - scrollMargin;\n    const max = offset + extent - hostExtent + scrollMargin;\n    const to = Math.min(min, Math.max(max, scroll));\n    // When a tab is focused, use 'auto' to use the CSS `scroll-behavior`. The\n    // default behavior is smooth scrolling. However, when there is not a tab\n    // focused on initialization, use 'instant' to immediately bring the focused\n    // tab into view.\n    const behavior: ScrollBehavior = !this.focusedTab ? 'instant' : 'auto';\n    this.tabsScrollerElement.scrollTo({behavior, top: 0, left: to});\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"tabs\">\n        <slot\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleTabClick}></slot>\n      </div>\n      <md-divider part=\"divider\"></md-divider>\n    `;\n  }\n\n  private async handleTabClick(event: Event) {\n    const tab = event.target;\n    // Allow event to bubble\n    await 0;\n    if (event.defaultPrevented || !isTab(tab) || tab.active) {\n      return;\n    }\n\n    this.activateTab(tab);\n  }\n\n  private activateTab(activeTab: Tab) {\n    const {tabs} = this;\n    const previousTab = this.activeTab;\n    if (!tabs.includes(activeTab) || previousTab === activeTab) {\n      // Ignore setting activeTab to a tab element that is not a child.\n      return;\n    }\n\n    for (const tab of tabs) {\n      tab.active = tab === activeTab;\n    }\n\n    if (previousTab) {\n      // Don't dispatch a change event if activating a tab when no previous tabs\n      // were selected, such as when md-tabs auto-selects the first tab.\n      const defaultPrevented = !this.dispatchEvent(\n        new Event('change', {bubbles: true, cancelable: true}),\n      );\n      if (defaultPrevented) {\n        for (const tab of tabs) {\n          tab.active = tab === previousTab;\n        }\n        return;\n      }\n\n      activeTab[ANIMATE_INDICATOR](previousTab);\n    }\n\n    this.updateFocusableTab(activeTab);\n    this.scrollToTab(activeTab);\n  }\n\n  private updateFocusableTab(focusableTab: Tab) {\n    for (const tab of this.tabs) {\n      tab.tabIndex = tab === focusableTab ? 0 : -1;\n    }\n  }\n\n  // focus item on keydown and optionally select it\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    const isHome = event.key === 'Home';\n    const isEnd = event.key === 'End';\n    // Ignore non-navigation keys\n    if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {\n      return;\n    }\n\n    const {tabs} = this;\n    // Don't try to select another tab if there aren't any.\n    if (tabs.length < 2) {\n      return;\n    }\n\n    // Prevent default interactions, such as scrolling.\n    event.preventDefault();\n\n    let indexToFocus: number;\n    if (isHome || isEnd) {\n      indexToFocus = isHome ? 0 : tabs.length - 1;\n    } else {\n      // Check if moving forwards or backwards\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      const forwards = isRtl ? isLeft : isRight;\n      const {focusedTab} = this;\n      if (!focusedTab) {\n        // If there is not already a tab focused, select the first or last tab\n        // based on the direction we're traveling.\n        indexToFocus = forwards ? 0 : tabs.length - 1;\n      } else {\n        const focusedIndex = this.tabs.indexOf(focusedTab);\n        indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;\n        if (indexToFocus >= tabs.length) {\n          // Return to start if moving past the last item.\n          indexToFocus = 0;\n        } else if (indexToFocus < 0) {\n          // Go to end if moving before the first item.\n          indexToFocus = tabs.length - 1;\n        }\n      }\n    }\n\n    const tabToFocus = tabs[indexToFocus];\n    tabToFocus.focus();\n    if (this.autoActivate) {\n      this.activateTab(tabToFocus);\n    } else {\n      this.updateFocusableTab(tabToFocus);\n    }\n  }\n\n  // scroll to item on keyup.\n  private handleKeyup() {\n    this.scrollToTab(this.focusedTab ?? this.activeTab);\n  }\n\n  private handleFocusout() {\n    // restore focus to selected item when blurring the tab bar.\n    if (this.matches(':focus-within')) {\n      return;\n    }\n\n    const {activeTab} = this;\n    if (activeTab) {\n      this.updateFocusableTab(activeTab);\n    }\n  }\n\n  private handleSlotChange() {\n    const firstTab = this.tabs[0];\n    if (!this.activeTab && firstTab) {\n      // If the active tab was removed, auto-select the first one. There should\n      // always be a selected tab while the bar has children.\n      this.activateTab(firstTab);\n    }\n\n    // When children shift, ensure the active tab is visible. For example, if\n    // many children are added before the active tab, it'd be pushed off screen.\n    // This ensures it stays visible.\n    this.scrollToTab(this.activeTab);\n  }\n}\n\nfunction isTab(element: unknown): element is Tab {\n  return element instanceof HTMLElement && element.hasAttribute('md-tab');\n}\n"
  },
  {
    "path": "tabs/primary-tab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {PrimaryTab} from './internal/primary-tab.js';\nimport {styles as primaryStyles} from './internal/primary-tab-styles.js';\nimport {styles as sharedStyles} from './internal/tab-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-primary-tab': MdPrimaryTab;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tab allow users to display a tab within a Tabs.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-primary-tab')\nexport class MdPrimaryTab extends PrimaryTab {\n  static override styles: CSSResultOrNative[] = [sharedStyles, primaryStyles];\n}\n"
  },
  {
    "path": "tabs/secondary-tab.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {SecondaryTab} from './internal/secondary-tab.js';\nimport {styles as secondaryStyles} from './internal/secondary-tab-styles.js';\nimport {styles as sharedStyles} from './internal/tab-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-secondary-tab': MdSecondaryTab;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tab allow users to display a tab within a Tabs.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-secondary-tab')\nexport class MdSecondaryTab extends SecondaryTab {\n  static override styles: CSSResultOrNative[] = [sharedStyles, secondaryStyles];\n}\n"
  },
  {
    "path": "tabs/tabs.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Tabs} from './internal/tabs.js';\nimport {styles} from './internal/tabs-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tabs': MdTabs;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tabs displays a list of selectable tabs.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-tabs')\nexport class MdTabs extends Tabs {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"
  },
  {
    "path": "tabs/tabs_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {TabsHarness} from './harness.js';\nimport {MdPrimaryTab} from './primary-tab.js';\nimport {MdSecondaryTab} from './secondary-tab.js';\nimport {MdTabs} from './tabs.js';\n\ninterface TabsTestProps {\n  activeTabIndex?: number;\n}\n\nfunction getTabsTemplate(props?: TabsTestProps) {\n  return html` <md-tabs .activeTabIndex=${props?.activeTabIndex ?? 0}>\n    <md-primary-tab>A</md-primary-tab>\n    <md-primary-tab>B</md-primary-tab>\n    <md-primary-tab>C</md-primary-tab>\n  </md-tabs>`;\n}\n\ndescribe('<md-tabs>', () => {\n  const env = new Environment();\n\n  async function setupTest(props?: TabsTestProps, template = getTabsTemplate) {\n    const root = env.render(template(props));\n    await env.waitForStability();\n    const tab = root.querySelector<MdTabs>('md-tabs')!;\n    const harness = new TabsHarness(tab);\n    return {harness, root};\n  }\n\n  describe('.styles', () => {\n    createTokenTests(MdTabs.styles);\n    createTokenTests(MdPrimaryTab.styles);\n    createTokenTests(MdSecondaryTab.styles);\n  });\n\n  describe('properties', () => {\n    it('renders selected with indicator', async () => {\n      const {harness} = await setupTest({activeTabIndex: 1});\n      expect(harness.element.activeTabIndex).toBe(1);\n      expect(harness.element.activeTab).toBe(harness.harnessedItems[1].element);\n      harness.harnessedItems.forEach(async (tabHarness, i) => {\n        const shouldBeSelected = i === harness.element.activeTabIndex;\n        await tabHarness.element.updateComplete;\n        expect(tabHarness.element.active).toBe(shouldBeSelected);\n        expect(await tabHarness.isIndicatorShowing()).toBe(shouldBeSelected);\n      });\n      await env.waitForStability();\n      harness.element.activeTabIndex = 0;\n      await harness.element.updateComplete;\n      expect(harness.element.activeTabIndex).toBe(0);\n      harness.harnessedItems.forEach(async (tabHarness, i) => {\n        const shouldBeSelected = i === harness.element.activeTabIndex;\n        await tabHarness.element.updateComplete;\n        expect(tabHarness.element.active).toBe(shouldBeSelected);\n        expect(await tabHarness.isIndicatorShowing()).toBe(shouldBeSelected);\n      });\n    });\n\n    it('updates activeTab', async () => {\n      const {harness} = await setupTest({activeTabIndex: 1});\n      expect(harness.element.activeTab).toBe(harness.harnessedItems[1].element);\n      harness.element.activeTabIndex = 0;\n      await harness.element.updateComplete;\n      expect(harness.element.activeTab).toBe(harness.harnessedItems[0].element);\n    });\n\n    it('maintains selection when tabs are mutated', async () => {\n      // Note: adding and moving tabs does not change selection\n      const {harness} = await setupTest({activeTabIndex: 1});\n      const [, second] = harness.element.tabs;\n      expect(harness.element.activeTab).toBe(second);\n      const tab = document.createElement('md-primary-tab');\n      tab.textContent = 'tab';\n      // add before selected\n      harness.element.prepend(tab);\n      await env.waitForStability();\n      expect(harness.element.activeTab).toBe(second);\n      // move after selected\n      harness.element.activeTab?.after(tab);\n      await env.waitForStability();\n      expect(harness.element.activeTab).toBe(second);\n      // move before selected\n      harness.element.prepend(tab);\n      await env.waitForStability();\n      expect(harness.element.activeTab).toBe(second);\n      // remove\n      tab.remove();\n      await env.waitForStability();\n      expect(harness.element.activeTab).toBe(second);\n    });\n\n    it('selects first item when selected tab is removed', async () => {\n      const {harness} = await setupTest({activeTabIndex: 1});\n      const [first, second] = harness.element.tabs;\n      expect(harness.element.activeTab).toBe(second);\n      second.remove();\n      await env.waitForStability();\n      expect(harness.element.activeTab).toBe(first);\n    });\n\n    it('should ignore setting activeTab when tab is not a child', async () => {\n      const {harness} = await setupTest();\n      const [firstTab] = harness.element.tabs;\n      expect(harness.element.activeTab).toBe(firstTab);\n      const unrelatedTab = document.createElement('md-primary-tab');\n      harness.element.activeTab = unrelatedTab;\n      await env.waitForStability();\n      expect(harness.element.activeTab).toBe(firstTab);\n    });\n\n    it('should allow setting activeTabIndex in a lit property binding', async () => {\n      const root = env.render(html`\n        <md-tabs .activeTabIndex=${1}>\n          <md-primary-tab>A</md-primary-tab>\n          <md-primary-tab>B</md-primary-tab>\n        </md-tabs>\n      `);\n\n      await env.waitForStability();\n      const tabs = root.querySelector('md-tabs')!;\n      expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);\n      expect(tabs.activeTab?.textContent)\n        .withContext('activeTab')\n        .toBe('B');\n    });\n\n    it('should allow setting active-tab-index as an attribute', async () => {\n      const root = env.render(html`\n        <md-tabs active-tab-index=${1}>\n          <md-primary-tab>A</md-primary-tab>\n          <md-primary-tab>B</md-primary-tab>\n        </md-tabs>\n      `);\n\n      await env.waitForStability();\n      const tabs = root.querySelector('md-tabs')!;\n      expect(tabs.activeTabIndex).withContext('activeTabIndex').toBe(1);\n      expect(tabs.activeTab?.textContent)\n        .withContext('activeTab')\n        .toBe('B');\n    });\n  });\n\n  it('should dispatch \"change\" when tab changes', async () => {\n    const {harness} = await setupTest();\n    const changeListener = jasmine.createSpy('changeListener');\n    harness.element.addEventListener('change', changeListener);\n\n    await harness.harnessedItems[1].clickWithMouse();\n    expect(changeListener).toHaveBeenCalledTimes(1);\n  });\n\n  it('should not dispatch \"change\" when changing to unrelated tab', async () => {\n    const {harness} = await setupTest();\n    const changeListener = jasmine.createSpy('changeListener');\n    harness.element.addEventListener('change', changeListener);\n\n    harness.element.activeTab = document.createElement('md-primary-tab');\n    await env.waitForStability();\n    expect(changeListener).not.toHaveBeenCalled();\n  });\n\n  it('should not dispatch \"change\" when setting activeTab to itself', async () => {\n    const {harness} = await setupTest();\n    const changeListener = jasmine.createSpy('changeListener');\n    harness.element.addEventListener('change', changeListener);\n\n    harness.element.activeTab = harness.element.activeTab;\n    await env.waitForStability();\n    expect(changeListener).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "tabs/test/window_size.json",
    "content": "{\n  \"capabilities\": {\n    \"goog:chromeOptions\": {\n      \"args\": [\"--window-position=0,0\", \"--window-size=3400,2215\"]\n    },\n    \"moz:firefoxOptions\": {\n      \"args\": [\"-width=3400\",\"-height=2215\"]\n    }\n  },\n  \"extension\": {\n    \"xvfbResolution\": \"3400x2215x24\"\n  }\n}\n"
  },
  {
    "path": "testing/environment.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {ReactiveElement, TemplateResult, render as litRender} from 'lit';\n\nimport {installSkipWebAnimations} from './skip-animations.js';\n\n/**\n * Test environment setup for screenshot tests.\n */\nexport class Environment {\n  /**\n   * An array of root containers for rendering screenshot test elements.\n   */\n  private readonly roots: HTMLElement[] = [];\n\n  constructor() {\n    // Replace RAF with setTimeout, since setTimeout is overridden to be\n    // synchronous in Jasmine clock installation.\n    window.requestAnimationFrame = (callback: FrameRequestCallback) => {\n      return setTimeout(callback, 1);\n    };\n    window.cancelAnimationFrame = (id: number) => {\n      clearTimeout(id);\n    };\n\n    beforeAll(() => {\n      jasmine.clock().install();\n    });\n\n    afterAll(() => {\n      jasmine.clock().uninstall();\n      for (const root of this.roots) {\n        document.body.appendChild(root);\n      }\n    });\n  }\n\n  /**\n   * This marks the environment to run without web animations. This is useful\n   * when the tested code calls `.animate`.\n   */\n  withoutWebAnimations() {\n    installSkipWebAnimations();\n    return this;\n  }\n\n  /**\n   * Waits for stability on the page to prevent flaky-ness tests. Use this if\n   * waiting for an API that uses `requestAnimationFrame()` or when waiting for\n   * a Lit element to render.\n   */\n  async waitForStability() {\n    // Move forward any `requestAnimationFrame()`s since they are replaced with\n    // setTimeout(callback, 1) for jasmine clock support.\n    jasmine.clock().tick(1);\n\n    const currentRoot = this.getCurrentRoot();\n    if (currentRoot) {\n      await this.waitForLitRender(currentRoot);\n    }\n  }\n\n  /**\n   * Waits for all Lit `ReactiveElement` children of the given parent node to\n   * finish rendering.\n   *\n   * @param root a parent node to wait for rendering on.\n   */\n  private async waitForLitRender(root: ParentNode) {\n    for (const element of root.querySelectorAll('*')) {\n      if (this.isReactiveElement(element)) {\n        await element.updateComplete;\n        await this.waitForLitRender(element.renderRoot);\n      }\n    }\n  }\n\n  /**\n   * Tests if an element is a Lit `ReactiveElement`.\n   *\n   * @param element the element to test.\n   * @return true if the element is a `ReactiveElement`.\n   */\n  private isReactiveElement(element: Element): element is ReactiveElement {\n    return Boolean((element as ReactiveElement).updateComplete);\n  }\n\n  /**\n   * Render a Lit template in the environment's root container.\n   *\n   * @param template a Lit `TemplateResult` to render.\n   * @return The root container the template was rendered to.\n   */\n  render(template: TemplateResult) {\n    const root = this.createNewRoot();\n    litRender(template, root);\n    return root;\n  }\n\n  /**\n   * Creates a new root container for screenshot rendering and adds it to the\n   * body.\n   *\n   * Previous root containers will be hidden and displayed at the end of\n   * testing for easier debugging.\n   *\n   * @return A new root container.\n   */\n  private createNewRoot() {\n    const currentRoot = this.getCurrentRoot();\n    if (currentRoot) {\n      currentRoot.remove();\n    }\n\n    const root = document.createElement('div');\n    root.id = 'root';\n    root.style.display = 'inline-flex';\n    document.body.appendChild(root);\n    this.roots.push(root);\n    return root;\n  }\n\n  /**\n   * Get the current root container.\n   *\n   * @return The current root container or undefined is nothing as been rendered\n   *     yet.\n   */\n  protected getCurrentRoot(): HTMLElement | undefined {\n    return this.roots[this.roots.length - 1];\n  }\n}\n"
  },
  {
    "path": "testing/forms.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {html, render, TemplateResult} from 'lit';\n\n/**\n * Options for creating form tests.\n */\nexport interface FormTestsOptions<T extends HTMLElement> {\n  /**\n   * A `querySelector` result that returns the tested element.\n   *\n   * @param root The root element to query from.\n   * @return `root.querySelector('md-component')`\n   */\n  queryControl(root: Element): T | null;\n  /**\n   * Tests for `setFormValue`. Tests should render a form element, then\n   * assert that the form's `FormData` matches the expected value (or lack of\n   * one).\n   *\n   * There must be at least one value test.\n   */\n  valueTests: [ValueTest, ...ValueTest[]];\n  /**\n   * Tests for `formResetCallback`. Tests should render a form element with an\n   * initial state, change the value of the element, then assert that the\n   * control was reset to its initial value.\n   *\n   * There must be at least one reset test.\n   */\n  resetTests: [ResetTest<T>, ...Array<ResetTest<T>>];\n  /**\n   * Tests for `formStateRestoreCallback`. Tests should render a form element\n   * with an initial state, then assert that a new control was restored with the\n   * same state.\n   *\n   * There must be at least one restore test.\n   */\n  restoreTests: [RestoreTest<T>, ...Array<RestoreTest<T>>];\n}\n\n/**\n * Creates a series of tests that ensure an element works with forms as a form\n * associated custom element.\n *\n * @param options Options for creating tests, including use cases.\n */\nexport function createFormTests<T extends HTMLElement>(\n  options: FormTestsOptions<T>,\n) {\n  // Patch attachInternals in order to spy on `setFormValue()` for simulating\n  // form state restoration.\n  const originalAttachInternals = HTMLElement.prototype.attachInternals;\n  const INTERNALS = Symbol('internals');\n\n  interface HTMLElementWithInternals {\n    [INTERNALS]: SpiedElementInternals;\n  }\n\n  interface SpiedElementInternals extends ElementInternals {\n    setFormValue: jasmine.Spy<ElementInternals['setFormValue']>;\n  }\n\n  function getInternals(element: HTMLElement) {\n    return (element as unknown as HTMLElementWithInternals)[INTERNALS];\n  }\n\n  beforeAll(() => {\n    HTMLElement.prototype.attachInternals = function (this: HTMLElement) {\n      const internals = originalAttachInternals.call(this);\n      spyOn(internals, 'setFormValue').and.callThrough();\n      (this as unknown as HTMLElementWithInternals)[INTERNALS] =\n        internals as SpiedElementInternals;\n      return internals;\n    };\n  });\n\n  afterAll(() => {\n    HTMLElement.prototype.attachInternals = originalAttachInternals;\n  });\n\n  let root: HTMLElement | undefined;\n\n  beforeEach(() => {\n    root = document.createElement('div');\n    document.body.appendChild(root);\n  });\n\n  afterEach(() => {\n    root?.remove();\n  });\n\n  async function setupTest(content = options.valueTests[0].render()) {\n    if (!root) {\n      throw new Error('root was not set up correctly.');\n    }\n\n    render(html`<form>${content}</form>`, root);\n    const form = root.querySelector('form');\n    if (!form) {\n      throw new Error('Could not query rendered <form>');\n    }\n\n    const control = options.queryControl(root) as\n      | (T & ExpectedFormAssociatedElement)\n      | null;\n    if (!control) {\n      throw new Error('`queryControl` must return an element.');\n    }\n\n    await control?.updateComplete;\n    return {form, control};\n  }\n\n  it('should have `static formAssociated = true;`', async () => {\n    const {control} = await setupTest();\n\n    expect(control.constructor.formAssociated)\n      .withContext('control.constructor.formAssociated')\n      .toBeTrue();\n  });\n\n  it('should return associated form for `form` property', async () => {\n    const {form, control} = await setupTest();\n    expect(control.form).withContext('control.form').toBe(form);\n  });\n\n  it('should return null for `form` when not part of a <form>', async () => {\n    const {form, control} = await setupTest();\n    form.parentElement?.append(control);\n    expect(control.form).withContext('control.form').toBeNull();\n  });\n\n  it('should return associated labels for `labels` property', async () => {\n    const {form, control} = await setupTest();\n    const labelFor = document.createElement('label');\n    const labelParent = document.createElement('label');\n    labelFor.htmlFor = 'control';\n    control.id = 'control';\n    form.append(labelFor);\n    labelParent.appendChild(control);\n    form.appendChild(labelParent);\n\n    expect(control.labels)\n      .withContext('control.labels')\n      .toBeInstanceOf(NodeList);\n    const labels = Array.from(control.labels);\n    expect(labels)\n      .withContext('should contain parent label element')\n      .toContain(labelParent);\n    expect(labels)\n      .withContext('should contain label element with for attribute')\n      .toContain(labelFor);\n  });\n\n  it('should return empty NodeList for `labels` when not part of a <form>', async () => {\n    const {form, control} = await setupTest();\n    form.parentElement?.append(control);\n    expect(control.labels)\n      .withContext('control.labels')\n      .toBeInstanceOf(NodeList);\n    expect(control.labels.length).withContext('control.labels.length').toBe(0);\n  });\n\n  it('should have a name property that reflects to the name attribute', async () => {\n    const {control} = await setupTest();\n    control.name = 'control';\n    await control?.updateComplete;\n    expect(control.getAttribute('name'))\n      .withContext('\"name\" reflected attribute')\n      .toBe('control');\n  });\n\n  it('should not add a form value without a name', async () => {\n    const {form, control} = await setupTest();\n    control.name = '';\n    await control?.updateComplete;\n    const data = new FormData(form);\n    expect(data).withContext('data should be empty').toHaveSize(0);\n  });\n\n  for (const valueTest of options.valueTests) {\n    it(`should pass the \"${valueTest.name}\" value test`, async () => {\n      const {form} = await setupTest(valueTest.render());\n      valueTest.assertValue(new FormData(form));\n    });\n  }\n\n  for (const resetTest of options.resetTests) {\n    it(`it should pass the \"${resetTest.name}\" reset test`, async () => {\n      const {form, control} = await setupTest(resetTest.render());\n      resetTest.change(control);\n      await control?.updateComplete;\n      form.reset();\n      resetTest.assertReset(control);\n    });\n  }\n\n  for (const restoreTest of options.restoreTests) {\n    it(`it should pass the \"${restoreTest.name}\" restore test`, async () => {\n      const {form} = await setupTest(restoreTest.render());\n      const controls = Array.from(\n        form.elements,\n      ) as ExpectedFormAssociatedElement[];\n      for (const control of controls) {\n        // Simulate restoring a new set of controls. For each control, we\n        // grab its value and state from its internals. Then, we remove it from\n        // the form, add a new control, and simulate restoring the state and\n        // value for that control.\n        const [value, state] = getInternals(\n          control,\n        ).setFormValue.calls.mostRecent()?.args ?? [null, null];\n\n        const newControl = document.createElement(\n          control.tagName,\n        ) as ExpectedFormAssociatedElement;\n        // Include any children for controls like `<select>`\n        newControl.append(...control.children);\n        control.remove();\n        form.appendChild(newControl);\n        let restoreState: FormState | null | FormData = state ?? value;\n        if (restoreState instanceof FormData) {\n          restoreState = Array.from(restoreState.entries());\n        }\n\n        newControl?.formStateRestoreCallback(restoreState, 'restore');\n        await newControl?.updateComplete;\n      }\n\n      const control = options.queryControl(form);\n      if (!control) {\n        throw new Error('`queryControl` must return an element.');\n      }\n\n      restoreTest.assertRestored(control);\n    });\n  }\n}\n\n/**\n * The expected interface of a Form Associated Custom Element. Used for type\n * checking in this file only.\n */\ninterface ExpectedFormAssociatedElement extends HTMLElement {\n  new (): ExpectedFormAssociatedElement;\n  constructor: (new () => ExpectedFormAssociatedElement) & {\n    readonly formAssociated: true;\n  };\n  prototype: ExpectedFormAssociatedElement;\n  form: HTMLFormElement | null;\n  labels: NodeList;\n  name: string;\n  formStateRestoreCallback(\n    state: FormState | null,\n    reason: 'restore' | 'autocomplete',\n  ): void;\n  updateComplete?: Promise<void>;\n}\n\n/**\n * `formStateRestoreCallback` type for `state`. May be a string, `File`,\n * `FormData` entries, or null.\n */\ntype FormState = FormDataEntryValue | Array<[string, FormDataEntryValue]>;\n\n/**\n * A test for `FormData` values.\n */\ninterface ValueTest {\n  /**\n   * The name of the test.\n   */\n  name: string;\n  /**\n   * Renders a form element with or without a value for form submission.\n   */\n  render(): TemplateResult;\n  /**\n   * Asserts that the form's `FormData` contains or does not contain the form\n   * element's value.\n   */\n  assertValue(formData: FormData): void;\n}\n\n/**\n * A test for `formResetCallback`.\n */\ninterface ResetTest<T extends HTMLElement> {\n  /**\n   * The name of the test.\n   */\n  name: string;\n  /**\n   * Renders a form element with some initial state.\n   */\n  render(): TemplateResult;\n  /**\n   * Changes the state of a form element.\n   */\n  change(control: T): void;\n  /**\n   * Asserts that the control was reset to its initial state.\n   */\n  assertReset(control: T): void;\n}\n\n/**\n * A test form `formStateRestoreCallback`.\n */\ninterface RestoreTest<T extends HTMLElement> {\n  /**\n   * The name of the test.\n   */\n  name: string;\n  /**\n   * Renders a form element with some initial state.\n   */\n  render(): TemplateResult;\n  /**\n   * Asserts that the newly created control was restored to the original\n   * control's state.\n   */\n  assertRestored(control: T): void;\n}\n"
  },
  {
    "path": "testing/harness.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  defaultTransformPseudoClasses,\n  getTransformedPseudoClass,\n  transformPseudoClasses,\n} from './transform-pseudo-classes.js';\n\n/**\n * Retrieves the element type from a `Harness` type.\n *\n * @template H The harness type.\n */\nexport type HarnessElement<H extends Harness> = H extends Harness<infer E>\n  ? ElementWithHarness<E, H>\n  : never;\n\n/**\n * Harnesses will attach themselves to their element for convenience.\n *\n * @template E The element type.\n * @template H The harness type.\n */\nexport type ElementWithHarness<\n  E extends HTMLElement = HTMLElement,\n  H extends Harness<E> = Harness<E>,\n> = E & {\n  /**\n   * The harness for this element.\n   */\n  harness: H;\n\n  /**\n   * Associated form element.\n   */\n  form?: HTMLFormElement | null;\n};\n\n/**\n * Checks whether or not an element has a Harness attached to it on the\n * `element.harness` property.\n *\n * @param element The element to check.\n * @return True if the element has a harness property.\n */\nexport function isElementWithHarness(\n  element: Element,\n): element is ElementWithHarness {\n  return (element as unknown as ElementWithHarness).harness instanceof Harness;\n}\n\n/**\n * A test harness class that can be used to simulate interaction with an\n * element.\n *\n * @template E The harness's element type.\n */\nexport class Harness<E extends HTMLElement = HTMLElement> {\n  /**\n   * The pseudo classes that should be transformed for simulation. Component\n   * subclasses may override this to add additional pseudo classes.\n   */\n  protected transformPseudoClasses = defaultTransformPseudoClasses;\n\n  /**\n   * The element that this harness controls.\n   */\n  readonly element: E & ElementWithHarness<E, this>;\n\n  /**\n   * A set of elements that have already been patched to support transformed\n   * pseudo classes.\n   */\n  private readonly patchedElements = new WeakSet<HTMLElement>();\n\n  /**\n   * Creates a new harness for the given element.\n   *\n   * @param element The element that this harness controls.\n   */\n  constructor(element: E) {\n    this.element = element as ElementWithHarness<E, this>;\n    this.element.harness = this;\n  }\n\n  /**\n   * Resets the element's simulated classes to the default state.\n   */\n  async reset() {\n    const element = await this.getInteractiveElement();\n    for (const pseudoClass of this.transformPseudoClasses) {\n      this.forEachNodeFrom(element, (el) => {\n        this.removePseudoClass(el, pseudoClass);\n      });\n    }\n  }\n\n  /**\n   * Hovers and clicks on an element. This will generate a `click` event.\n   *\n   * @param init Additional event options.\n   */\n  async clickWithMouse(init: PointerEventInit = {}) {\n    await this.startClickWithMouse(init);\n    await this.endClickWithMouse(init);\n  }\n\n  /**\n   * Begins a click with a mouse. Use this along with `endClickWithMouse()` to\n   * customize the length of the click.\n   *\n   * @param init Additional event options.\n   */\n  async startClickWithMouse(init: PointerEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    await this.startHover();\n    this.simulateMousePress(element, init);\n  }\n\n  /**\n   * Finishes a click with a mouse. Use this along with `startClickWithMouse()`\n   * to customize the length of the click. This will generate a `click` event.\n   *\n   * @param init Additional event options.\n   */\n  async endClickWithMouse(init: PointerEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateMouseRelease(element, init);\n    if ((init?.button ?? 0) === 0) {\n      // Dispatch a click for left-click only (default).\n      this.simulateClick(element, init);\n    }\n  }\n\n  /**\n   * Clicks an element with the keyboard (defaults to spacebar). This will\n   * generate a `click` event.\n   *\n   * @param init Additional event options.\n   */\n  async clickWithKeyboard(init: KeyboardEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    await this.startClickWithKeyboard(init);\n    await this.endClickWithKeyboard(init);\n    this.simulateClick(element, init);\n  }\n\n  /**\n   * Begins a click with the keyboard (defaults to spacebar). Use this along\n   * with `endClickWithKeyboard()` to customize the length of the click.\n   *\n   * @param init Additional event options.\n   */\n  async startClickWithKeyboard(init: KeyboardEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    await this.focusWithKeyboard(init);\n    this.simulateKeydown(element, init.key ?? ' ', init);\n    this.simulateClick(element, init);\n  }\n\n  /**\n   * Finishes a click with the keyboard (defaults to spacebar). Use this along\n   * with `startClickWithKeyboard()` to customize the length of the click.\n   *\n   * @param init Additional event options.\n   */\n  async endClickWithKeyboard(init: KeyboardEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateKeyup(element, init.key ?? ' ', init);\n    this.simulateClick(element, init);\n  }\n\n  /**\n   * Right-clicks and opens a context menu. This will generate a `contextmenu`\n   * event.\n   */\n  async rightClickWithMouse() {\n    const element = await this.getInteractiveElement();\n    const rightMouseButton = {button: 2, buttons: 2};\n    await this.startClickWithMouse(rightMouseButton);\n    // Note: contextmenu right clicks do not generate the up events\n    this.simulateContextmenu(element, rightMouseButton);\n  }\n\n  /**\n   * Taps once on the element with a simulated touch. This will generate a\n   * `click` event.\n   *\n   * @param init Additional event options.\n   * @param touchInit Additional touch event options.\n   */\n  async tap(init: PointerEventInit = {}, touchInit: TouchEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateTouchPress(element, init, touchInit);\n    this.simulateTouchRelease(element, init, touchInit);\n    if ((init?.isPrimary ?? true) === true) {\n      // Dispatch a click for primary touches only (default).\n      await this.endTapClick(init);\n    }\n  }\n\n  /**\n   * Begins a touch tap. Use this along with `endTap()` to customize the length\n   * or number of taps.\n   *\n   * @param init Additional event options.\n   * @param touchInit Additional touch event options.\n   */\n  async startTap(init: PointerEventInit = {}, touchInit: TouchEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateTouchPress(element, init, touchInit);\n  }\n\n  /**\n   * Simulates a `contextmenu` event for touch. Use this along with `startTap()`\n   * to generate a tap-and-hold context menu interaction.\n   *\n   * @param init Additional event options.\n   */\n  async startTapContextMenu(init: MouseEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateContextmenu(element, init);\n  }\n\n  /**\n   * Finished a touch tap. Use this along with `startTap()` to customize the\n   * length or number of taps.\n   *\n   * This will NOT generate a `click` event.\n   *\n   * @param init Additional event options.\n   * @param touchInit Additional touch event options.\n   */\n  async endTap(init: PointerEventInit = {}, touchInit: TouchEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateTouchRelease(element, init, touchInit);\n  }\n\n  /**\n   * Simulates a `click` event for touch. Use this along with `endTap()` to\n   * control the timing of tap and click events.\n   *\n   * @param init Additional event options.\n   */\n  async endTapClick(init: PointerEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateClick(element, {\n      pointerType: 'touch',\n      ...init,\n    });\n  }\n\n  /**\n   * Cancels a touch tap.\n   *\n   * @param init Additional event options.\n   * @param touchInit Additional touch event options.\n   */\n  async cancelTap(init: PointerEventInit = {}, touchInit: TouchEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateTouchCancel(element, init, touchInit);\n  }\n\n  /**\n   * Hovers over the element with a simulated mouse.\n   */\n  async startHover() {\n    const element = await this.getInteractiveElement();\n    this.simulateStartHover(element);\n  }\n\n  /**\n   * Moves the simulated mouse cursor off of the element.\n   */\n  async endHover() {\n    const element = await this.getInteractiveElement();\n    this.simulateEndHover(element);\n  }\n\n  /**\n   * Simulates focusing an element with the keyboard.\n   *\n   * @param init Additional event options.\n   */\n  async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateKeyboardFocus(element);\n  }\n\n  /**\n   * Simulates focusing an element with a pointer.\n   */\n  async focusWithPointer() {\n    const element = await this.getInteractiveElement();\n    await this.startHover();\n    this.simulatePointerFocus(element);\n  }\n\n  /**\n   * Simulates unfocusing an element.\n   */\n  async blur() {\n    const element = await this.getInteractiveElement();\n    await this.endHover();\n    this.simulateBlur(element);\n  }\n\n  /**\n   * Simulates a keypress on an element.\n   *\n   * @param key The key to press.\n   * @param init Additional event options.\n   */\n  async keypress(key: string, init: KeyboardEventInit = {}) {\n    const element = await this.getInteractiveElement();\n    this.simulateKeypress(element, key, init);\n  }\n\n  /**\n   * Simulates submitting the element's associated form element.\n   *\n   * @param form (Optional) form to submit, defaults to the elemnt's form.\n   * @return The submitted form data or null if the element has no associated\n   * form.\n   */\n  submitForm(form = this.element.form) {\n    if (!form) {\n      return new FormData();\n    }\n    return new Promise<FormData>((resolve) => {\n      const submitListener = (event: SubmitEvent) => {\n        event.preventDefault();\n        const data = new FormData(form);\n        resolve(data);\n        return false;\n      };\n\n      form.addEventListener('submit', submitListener, {once: true});\n      form.requestSubmit();\n    });\n  }\n\n  /**\n   * Returns the element that should be used for interaction simulation.\n   * Defaults to the host element itself.\n   *\n   * Subclasses should override this if the interactive element is not the host.\n   *\n   * @return The element to use in simulation.\n   */\n  protected async getInteractiveElement(): Promise<HTMLElement> {\n    return this.element;\n  }\n\n  /**\n   * Adds a pseudo class to an element. The element's shadow root styles (or\n   * document if not in a shadow root) will be transformed to support\n   * simulated pseudo classes.\n   *\n   * @param element The element to add a pseudo class to.\n   * @param pseudoClass The pseudo class to add.\n   */\n  protected addPseudoClass(element: HTMLElement, pseudoClass: string) {\n    if (!this.transformPseudoClasses.includes(pseudoClass)) {\n      return;\n    }\n\n    const root = element.getRootNode() as Document | ShadowRoot;\n    if (element.shadowRoot) {\n      transformPseudoClasses(\n        element.shadowRoot.adoptedStyleSheets || [],\n        this.transformPseudoClasses,\n      );\n    }\n\n    transformPseudoClasses(root.styleSheets, this.transformPseudoClasses);\n    transformPseudoClasses(\n      root.adoptedStyleSheets || [],\n      this.transformPseudoClasses,\n    );\n    element.classList.add(getTransformedPseudoClass(pseudoClass));\n    this.patchForTransformedPseudoClasses(element);\n  }\n\n  /**\n   * Removes a pseudo class from an element.\n   *\n   * @param element The element to remove a pseudo class from.\n   * @param pseudoClass The pseudo class to remove.\n   */\n  protected removePseudoClass(element: HTMLElement, pseudoClass: string) {\n    element.classList.remove(getTransformedPseudoClass(pseudoClass));\n  }\n\n  /**\n   * Simulates a click event.\n   *\n   * @param element The element to click.\n   * @param init Additional event options.\n   */\n  protected simulateClick(element: HTMLElement, init: MouseEventInit = {}) {\n    // Firefox does not support some simulations with PointerEvents, such as\n    // selecting an <input type=\"checkbox\">. Use MouseEvent for browser support.\n    element.dispatchEvent(\n      new MouseEvent('click', {\n        ...this.createMouseEventInit(element),\n        ...init,\n      }),\n    );\n  }\n\n  /**\n   * Simulates a contextmenu event.\n   *\n   * @param element The element to generate an event for.\n   * @param init Additional event options.\n   */\n  protected simulateContextmenu(\n    element: HTMLElement,\n    init: MouseEventInit = {},\n  ) {\n    element.dispatchEvent(\n      new MouseEvent('contextmenu', {\n        ...this.createMouseEventInit(element),\n        button: 2,\n        buttons: 2,\n        ...init,\n      }),\n    );\n  }\n\n  /**\n   * Simulates focusing with a keyboard. The difference between this and\n   * `simulatePointerFocus` is that keyboard focus will include the\n   * `:focus-visible` pseudo class.\n   *\n   * @param element The element to focus with a keyboard.\n   */\n  protected simulateKeyboardFocus(element: HTMLElement) {\n    this.simulateKeydown(element.ownerDocument, 'Tab');\n    this.addPseudoClass(element, ':focus-visible');\n    this.simulatePointerFocus(element);\n    this.simulateKeyup(element, 'Tab');\n  }\n\n  /**\n   * Simulates focusing with a pointer.\n   *\n   * @param element The element to focus with a pointer.\n   */\n  protected simulatePointerFocus(element: HTMLElement) {\n    this.addPseudoClass(element, ':focus');\n    this.forEachNodeFrom(element, (el) => {\n      this.addPseudoClass(el, ':focus-within');\n    });\n    element.dispatchEvent(new FocusEvent('focus', {composed: true}));\n    element.dispatchEvent(\n      new FocusEvent('focusin', {bubbles: true, composed: true}),\n    );\n  }\n\n  /**\n   * Simulates unfocusing an element.\n   *\n   * @param element The element to blur.\n   */\n  protected simulateBlur(element: HTMLElement) {\n    this.removePseudoClass(element, ':focus');\n    this.removePseudoClass(element, ':focus-visible');\n    this.forEachNodeFrom(element, (el) => {\n      this.removePseudoClass(el, ':focus-within');\n    });\n    element.dispatchEvent(new FocusEvent('blur', {composed: true}));\n    element.dispatchEvent(\n      new FocusEvent('focusout', {bubbles: true, composed: true}),\n    );\n  }\n\n  /**\n   * Simulates a mouse pointer hovering over an element.\n   *\n   * @param element The element to hover over.\n   * @param init Additional event options.\n   */\n  protected simulateStartHover(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n  ) {\n    this.forEachNodeFrom(element, (el) => {\n      this.addPseudoClass(el, ':hover');\n    });\n    const rect = element.getBoundingClientRect();\n    const mouseInit = this.createMouseEventInit(element);\n    const mouseEnterInit = {\n      ...mouseInit,\n      bubbles: false,\n      clientX: rect.left,\n      clientY: rect.top,\n      screenX: rect.left,\n      screenY: rect.top,\n    };\n\n    const pointerInit = {\n      ...mouseInit,\n      isPrimary: true,\n      pointerType: 'mouse',\n    };\n\n    const pointerEnterInit: PointerEventInit = {\n      ...pointerInit,\n      ...mouseEnterInit,\n      ...init,\n    };\n\n    element.dispatchEvent(new PointerEvent('pointerover', pointerInit));\n    element.dispatchEvent(new PointerEvent('pointerenter', pointerEnterInit));\n    element.dispatchEvent(new MouseEvent('mouseover', mouseInit));\n    element.dispatchEvent(new MouseEvent('mouseenter', mouseEnterInit));\n  }\n\n  /**\n   * Simulates a mouse pointer leaving the element.\n   *\n   * @param element The element to stop hovering over.\n   * @param init Additional event options.\n   */\n  protected simulateEndHover(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n  ) {\n    this.forEachNodeFrom(element, (el) => {\n      this.removePseudoClass(el, ':hover');\n    });\n    const rect = element.getBoundingClientRect();\n    const mouseInit = this.createMouseEventInit(element);\n    const mouseLeaveInit = {\n      ...mouseInit,\n      bubbles: false,\n      clientX: rect.left - 1,\n      clientY: rect.top - 1,\n      screenX: rect.left - 1,\n      screenY: rect.top - 1,\n    };\n\n    const pointerInit: PointerEventInit = {\n      ...mouseInit,\n      isPrimary: true,\n      pointerType: 'mouse',\n      ...init,\n    };\n\n    const pointerLeaveInit: PointerEventInit = {\n      ...pointerInit,\n      ...mouseLeaveInit,\n    };\n\n    element.dispatchEvent(new PointerEvent('pointerout', pointerInit));\n    element.dispatchEvent(new PointerEvent('pointerleave', pointerLeaveInit));\n    element.dispatchEvent(new MouseEvent('pointerout', mouseInit));\n    element.dispatchEvent(new MouseEvent('mouseleave', mouseLeaveInit));\n  }\n\n  /**\n   * Simulates a mouse press and hold on an element.\n   *\n   * @param element The element to press with a mouse.\n   * @param init Additional event options.\n   */\n  protected simulateMousePress(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n  ) {\n    this.addPseudoClass(element, ':active');\n    this.forEachNodeFrom(element, (el) => {\n      this.addPseudoClass(el, ':active');\n    });\n    const mouseInit = this.createMouseEventInit(element);\n    const pointerInit: PointerEventInit = {\n      ...mouseInit,\n      isPrimary: true,\n      pointerType: 'mouse',\n      ...init,\n    };\n\n    element.dispatchEvent(new PointerEvent('pointerdown', pointerInit));\n    element.dispatchEvent(new MouseEvent('mousedown', mouseInit));\n    this.simulatePointerFocus(element);\n  }\n\n  /**\n   * Simulates a mouse press release from an element.\n   *\n   * @param element The element to release pressing from.\n   * @param init Additional event options.\n   */\n  protected simulateMouseRelease(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n  ) {\n    this.removePseudoClass(element, ':active');\n    this.forEachNodeFrom(element, (el) => {\n      this.removePseudoClass(el, ':active');\n    });\n    const mouseInit = this.createMouseEventInit(element);\n    const pointerInit: PointerEventInit = {\n      ...mouseInit,\n      isPrimary: true,\n      pointerType: 'mouse',\n      ...init,\n    };\n\n    element.dispatchEvent(new PointerEvent('pointerup', pointerInit));\n    element.dispatchEvent(new MouseEvent('mouseup', mouseInit));\n  }\n\n  /**\n   * Simulates a touch press and hold on an element.\n   *\n   * @param element The element to press with a touch pointer.\n   * @param init Additional event options.\n   */\n  protected simulateTouchPress(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n    touchInit: TouchEventInit = {},\n  ) {\n    this.addPseudoClass(element, ':active');\n    this.forEachNodeFrom(element, (el) => {\n      this.addPseudoClass(el, ':active');\n    });\n    const mouseInit = this.createMouseEventInit(element);\n    const pointerInit: PointerEventInit = {\n      ...mouseInit,\n      isPrimary: true,\n      pointerType: 'touch',\n      ...init,\n    };\n\n    element.dispatchEvent(new PointerEvent('pointerdown', pointerInit));\n    // Firefox does not support TouchEvent constructor\n    if (window.TouchEvent) {\n      const touch = this.createTouch(element);\n      element.dispatchEvent(\n        new TouchEvent('touchstart', {\n          touches: [touch],\n          targetTouches: [touch],\n          changedTouches: [touch],\n          ...touchInit,\n        }),\n      );\n    }\n    this.simulatePointerFocus(element);\n  }\n\n  /**\n   * Simulates a touch press release from an element.\n   *\n   * @param element The element to release pressing from.\n   * @param init Additional event options.\n   */\n  protected simulateTouchRelease(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n    touchInit: TouchEventInit = {},\n  ) {\n    this.removePseudoClass(element, ':active');\n    this.forEachNodeFrom(element, (el) => {\n      this.removePseudoClass(el, ':active');\n    });\n    const mouseInit = this.createMouseEventInit(element);\n    const pointerInit: PointerEventInit = {\n      ...mouseInit,\n      isPrimary: true,\n      pointerType: 'touch',\n      ...init,\n    };\n\n    element.dispatchEvent(new PointerEvent('pointerup', pointerInit));\n    // Firefox does not support TouchEvent constructor\n    if (window.TouchEvent) {\n      const touch = this.createTouch(element);\n      element.dispatchEvent(\n        new TouchEvent('touchend', {changedTouches: [touch], ...touchInit}),\n      );\n    }\n  }\n\n  /**\n   * Simulates a touch cancel from an element.\n   *\n   * @param element The element to cancel a touch for.\n   * @param init Additional event options.\n   */\n  protected simulateTouchCancel(\n    element: HTMLElement,\n    init: PointerEventInit = {},\n    touchInit: TouchEventInit = {},\n  ) {\n    this.removePseudoClass(element, ':active');\n    this.forEachNodeFrom(element, (el) => {\n      this.removePseudoClass(el, ':active');\n    });\n    const mouseInit = this.createMouseEventInit(element);\n    const pointerInit: PointerEventInit = {\n      ...mouseInit,\n      isPrimary: true,\n      pointerType: 'touch',\n      ...init,\n    };\n\n    element.dispatchEvent(new PointerEvent('pointercancel', pointerInit));\n    // Firefox does not support TouchEvent constructor\n    if (window.TouchEvent) {\n      const touch = this.createTouch(element);\n      element.dispatchEvent(\n        new TouchEvent('touchcancel', {changedTouches: [touch], ...touchInit}),\n      );\n    }\n  }\n\n  /**\n   * Simulates a keypress on an element.\n   *\n   * @param element The element to press a key on.\n   * @param key The key to press.\n   * @param init Additional event options.\n   */\n  protected simulateKeypress(\n    element: EventTarget,\n    key: string,\n    init: KeyboardEventInit = {},\n  ) {\n    this.simulateKeydown(element, key, init);\n    this.simulateKeyup(element, key, init);\n  }\n\n  /**\n   * Simulates a keydown press on an element.\n   *\n   * @param element The element to press a key on.\n   * @param key The key to press.\n   * @param init Additional event options.\n   */\n  protected simulateKeydown(\n    element: EventTarget,\n    key: string,\n    init: KeyboardEventInit = {},\n  ) {\n    element.dispatchEvent(\n      new KeyboardEvent('keydown', {\n        ...init,\n        key,\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n      }),\n    );\n  }\n\n  /**\n   * Simulates a keyup release from an element.\n   *\n   * @param element The element to release a key from.\n   * @param key The key to release.\n   * @param init Additional keyboard options.\n   */\n  protected simulateKeyup(\n    element: EventTarget,\n    key: string,\n    init: KeyboardEventInit = {},\n  ) {\n    element.dispatchEvent(\n      new KeyboardEvent('keyup', {\n        ...init,\n        key,\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n      }),\n    );\n  }\n\n  /**\n   * Creates a MouseEventInit for an element. The default x/y coordinates of the\n   * event init will be in the center of the element.\n   *\n   * @param element The element to create a `MouseEventInit` for.\n   * @return The init object for a `MouseEvent`.\n   */\n  protected createMouseEventInit(element: HTMLElement): MouseEventInit {\n    const rect = element.getBoundingClientRect();\n    return {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      clientX: (rect.left + rect.right) / 2,\n      clientY: (rect.top + rect.bottom) / 2,\n      screenX: (rect.left + rect.right) / 2,\n      screenY: (rect.top + rect.bottom) / 2,\n      // Primary button (usually the left button)\n      button: 0,\n      buttons: 1,\n    };\n  }\n\n  /**\n   * Creates a Touch instance for an element. The default x/y coordinates of the\n   * touch will be in the center of the element. This can be used in the\n   * `TouchEvent` constructor.\n   *\n   * @param element The element to create a touch for.\n   * @param identifier Optional identifier for the touch. Defaults to 0 for\n   *     every touch instance.\n   * @return The `Touch` instance.\n   */\n  protected createTouch(element: HTMLElement, identifier = 0): Touch {\n    const rect = element.getBoundingClientRect();\n    return new Touch({\n      identifier,\n      target: element,\n      clientX: (rect.left + rect.right) / 2,\n      clientY: (rect.top + rect.bottom) / 2,\n      screenX: (rect.left + rect.right) / 2,\n      screenY: (rect.top + rect.bottom) / 2,\n      pageX: (rect.left + rect.right) / 2,\n      pageY: (rect.top + rect.bottom) / 2,\n      touchType: 'direct',\n    });\n  }\n\n  /**\n   * Visit each node up the parent tree from the given child until reaching the\n   * given parent.\n   *\n   * This is used to perform logic such as adding/removing recursive pseudo\n   * classes like `:hover`.\n   *\n   * @param child The first child element to start from.\n   * @param callback A callback that is invoked with each `HTMLElement` node\n   *     from the child to the parent.\n   * @param parent The last parent element to visit.\n   */\n  protected forEachNodeFrom(\n    child: HTMLElement,\n    callback: (node: HTMLElement) => void,\n    parent: HTMLElement = this.element,\n  ) {\n    let nextNode: Node | null = child;\n    while (nextNode && nextNode !== this.element) {\n      const currentNode: Node = nextNode;\n      nextNode = currentNode.parentNode || (currentNode as ShadowRoot).host;\n\n      if (!(currentNode instanceof HTMLElement)) {\n        continue;\n      }\n\n      callback(currentNode);\n\n      if (nextNode instanceof HTMLElement && nextNode.shadowRoot) {\n        const slot = currentNode.getAttribute('slot');\n        const slotSelector = slot ? `slot[name=${slot}]` : 'slot:not([name])';\n        const slotElement =\n          nextNode.shadowRoot.querySelector<HTMLSlotElement>(slotSelector);\n        if (slotElement) {\n          this.forEachNodeFrom(slotElement, callback, nextNode);\n        }\n      }\n    }\n\n    callback(parent);\n  }\n\n  /**\n   * Patch an element's methods, such as `querySelector` and `matches` to\n   * handle transformed pseudo classes.\n   *\n   * For example, `element.matches(':focus')` will return true when the\n   * `._focus` class is applied.\n   *\n   * @param element The element to patch.\n   */\n  protected patchForTransformedPseudoClasses(element: HTMLElement) {\n    if (this.patchedElements.has(element)) {\n      return;\n    }\n\n    // Patch functions to handle pseudo selectors.\n    const getSelector = (selector: string) => {\n      if (this.transformPseudoClasses.includes(selector)) {\n        return `.${getTransformedPseudoClass(selector)}`;\n      }\n\n      return selector;\n    };\n\n    const superMatches = this.element.matches;\n    element.matches = (selector: string) => {\n      return superMatches.call(element, getSelector(selector));\n    };\n\n    const superQuerySelector = this.element.querySelector;\n    element.querySelector = (selector: string) => {\n      return superQuerySelector.call(element, getSelector(selector));\n    };\n\n    const superQuerySelectorAll = this.element.querySelectorAll;\n    element.querySelectorAll = (selector: string) => {\n      return superQuerySelectorAll.call(element, getSelector(selector));\n    };\n\n    this.patchedElements.add(element);\n  }\n}\n"
  },
  {
    "path": "testing/skip-animations.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/** Overrides the browsers native animate to make them run in 1ms */\nexport function installSkipWebAnimations() {\n  const nativeAnimate = Element.prototype.animate;\n  function patchedAnimate(\n    this: Element,\n    ...args: Parameters<typeof nativeAnimate>\n  ) {\n    const animation = nativeAnimate.apply(this, args);\n    if (animation.effect) {\n      animation.effect.updateTiming({\n        delay: 0,\n        duration: 1,\n        easing: 'step-start',\n        iterations: 1,\n      });\n    }\n\n    return animation;\n  }\n\n  Object.defineProperty(Element.prototype, 'animate', {\n    configurable: true,\n    enumerable: true,\n    writable: true,\n    value: patchedAnimate,\n  });\n\n  // return uninstall function.\n  return () => {\n    Object.defineProperty(Element.prototype, 'animate', {\n      configurable: true,\n      enumerable: true,\n      writable: true,\n      value: nativeAnimate,\n    });\n  };\n}\n"
  },
  {
    "path": "testing/skip-animations_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {installSkipWebAnimations} from './skip-animations.js';\n\ndescribe('skip-animations test', () => {\n  let element: HTMLElement;\n  let uninstallFunction = () => {};\n\n  beforeEach(() => {\n    element = document.createElement('div');\n    document.body.appendChild(element);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(element);\n    uninstallFunction();\n  });\n\n  it('does not skip animations before installing', () => {\n    // Act\n    element.animate([{color: 'rgb(255, 255, 255'}, {color: 'rgb(0, 0, 0)'}], {\n      duration: 1000,\n    });\n\n    // Assert\n    expect(getComputedStyle(element).color).toEqual('rgb(255, 255, 255)');\n  });\n\n  it('computes a thing when asked', () => {\n    // Arrange\n    uninstallFunction = installSkipWebAnimations();\n\n    // Act\n    element.animate([{color: 'rgb(255, 255, 255'}, {color: 'rgb(0, 0, 0)'}], {\n      duration: 1000,\n    });\n\n    // Assert\n    expect(getComputedStyle(element).color).toEqual('rgb(0, 0, 0)');\n  });\n});\n"
  },
  {
    "path": "testing/table/_test-table.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/test-table' show theme;\n"
  },
  {
    "path": "testing/table/internal/_test-table.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.md3-*' should only be used in this project.\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../../color/color';\n@use '../../../tokens';\n// go/keep-sorted end\n\n$light-theme: tokens.md-comp-test-table-values();\n$dark-theme: tokens.md-comp-test-table-values(\n  (\n    'md-sys-color': tokens.md-sys-color-values-dark(),\n  )\n);\n\n@mixin theme($tokens) {\n  // $supported-tokens: tokens.$md-comp-test-table-supported-tokens;\n\n  @each $token, $value in $tokens {\n    // @if list.index($supported-tokens, $token) == null {\n    //   @error 'Token `#{$token}` is not a supported token.';\n    // }\n\n    @if $value {\n      --md-test-table-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-test-table-values();\n\n  :host {\n    @each $token, $value in $tokens {\n      --_#{$token}: var(--md-test-table-#{$token}, #{$value});\n    }\n\n    display: flex;\n  }\n\n  .md3-test-table {\n    border: 1px solid;\n    border-collapse: collapse;\n  }\n\n  .md3-test-table__cell {\n    border: 1px solid;\n    padding: 16px;\n    position: var(--_cell-position);\n\n    &::before {\n      background-color: var(--_cell-color);\n      background-image: linear-gradient(\n          to right,\n          var(--_cell-grid-color) 1px,\n          transparent 1px\n        ),\n        linear-gradient(to bottom, var(--_cell-grid-color) 1px, transparent 1px);\n      background-size: 16px 16px;\n      inset: -1px 0 0 -1px;\n      content: '';\n      position: absolute;\n      z-index: -1;\n    }\n  }\n\n  .md3-test-table__header {\n    background: var(--_header-cell-color);\n    border: 1px solid;\n    border-top: none;\n    caption-side: bottom;\n    color: var(--_header-cell-text-color);\n    font-family: var(--_header-cell-text-font);\n    font-size: var(--_header-cell-text-size);\n    line-height: var(--_header-cell-text-line-height);\n    font-weight: var(--_header-cell-text-weight);\n    padding: 8px;\n  }\n\n  .md3-test-table__text {\n    align-items: center;\n    color: var(--_cell-text-color);\n    display: flex;\n    font-family: var(--_cell-text-font);\n    font-size: var(--_cell-text-size);\n    line-height: var(--_cell-text-line-height);\n    font-weight: var(--_cell-text-weight);\n    justify-content: center;\n  }\n\n  .md3-test-table,\n  .md3-test-table__cell,\n  .md3-test-table__header {\n    border-color: var(--_outline-color);\n  }\n\n  :host([dark]) {\n    @include color.dark-theme;\n  }\n}\n"
  },
  {
    "path": "testing/table/internal/test-table-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './test-table';\n// go/keep-sorted end\n\n@include test-table.styles;\n"
  },
  {
    "path": "testing/table/internal/test-table.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, render, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {guard} from 'lit/directives/guard.js';\nimport {html, literal} from 'lit/static-html.js';\n\n/** Test table interface. */\nexport interface TestTableTemplate<S extends string = string> {\n  /** The row display name. May be a Lit static value for rich HTML. */\n  display: string | ReturnType<typeof literal>;\n  /**\n   * A template's render function. It accepts a state string (the column) and\n   * returns a Lit `TemplateResult`.\n   *\n   * @param state The current state to render in.\n   * @return A `TemplateResult` for the given state.\n   */\n  render(state: S): TemplateResult | null;\n}\n\n/**\n * A test table component.\n */\nexport class TestTable<S extends string = string> extends LitElement {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {mode: 'open'};\n\n  @property() override title = 'Title';\n  @property({type: Array}) states: S[] = [];\n  @property({type: Array}) templates: Array<TestTableTemplate<S>> = [];\n  @property({type: Boolean, reflect: true}) dark = false;\n\n  protected override render() {\n    return html`\n      <table class=\"md3-test-table\">\n        <thead>\n          <tr>\n            <th class=\"md3-test-table__header\"></th>\n            ${this.states.map(\n              (state) => html`\n                <th class=\"md3-test-table__header\">${state}</th>\n              `,\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${guard([this.templates, this.states], () => this.renderTemplates())}\n        </tbody>\n        <caption class=\"md3-test-table__header\">${this.title}</caption>\n      </table>\n    `;\n  }\n\n  protected renderTemplates() {\n    // Render templates in the light DOM for easier styling access\n    render(\n      this.templates.map((template, rowIndex) =>\n        this.states.map((state, colIndex) => {\n          const renderResult = template.render(state);\n          const isEmptyTemplate = renderResult === null;\n          return isEmptyTemplate\n            ? html``\n            : html` <div slot=\"${`${rowIndex}-${colIndex}`}\">\n                ${renderResult}\n              </div>`;\n        }),\n      ),\n      this,\n    );\n\n    return html`\n      ${this.templates.map(\n        (template, rowIndex) => html`\n          <tr>\n            <th class=\"md3-test-table__header\">\n              ${this.getVariantName(template.display)}\n            </th>\n            ${this.states.map(\n              (state, colIndex) => html`\n                <td class=\"md3-test-table__cell\">\n                  <slot name=\"${`${rowIndex}-${colIndex}`}\">\n                    <div class=\"md3-test-table__text\">N/A</div>\n                  </slot>\n                </td>\n              `,\n            )}\n          </tr>\n        `,\n      )}\n    `;\n  }\n\n  /** Convert the name from camel case to sentence case. */\n  private getVariantName(display: TestTableTemplate['display']) {\n    if (typeof display !== 'string') {\n      return display;\n    }\n\n    const withSpaces = display.replace(/([A-Z])/g, ' $1');\n    return withSpaces[0].toUpperCase() + withSpaces.slice(1);\n  }\n}\n"
  },
  {
    "path": "testing/table/internal/test-table_test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './test-table.js';\n\nimport {html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Environment} from '../../environment.js';\n\nimport {TestTable, TestTableTemplate} from './test-table.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-test-table': TestTestTable;\n  }\n}\n\n@customElement('test-test-table')\nclass TestTestTable<S extends string = string> extends TestTable<S> {}\n\ndescribe('<test-test-table>', () => {\n  const env = new Environment();\n\n  it('should call template functions with each state', async () => {\n    const template1 = {\n      display: 'template1',\n      render: jasmine.createSpy('template1').and.callFake(() => html``),\n    };\n    const template2 = {\n      display: 'template2',\n      render: jasmine.createSpy('template2').and.callFake(() => html``),\n    };\n    const templates = [template1, template2] as TestTableTemplate[];\n    env.render(html`\n      <test-test-table\n        .states=${['A', 'B']}\n        .templates=${templates}></test-test-table>\n    `);\n\n    await env.waitForStability();\n    expect(template1.render).toHaveBeenCalledTimes(2);\n    expect(template1.render.calls.argsFor(0)).toEqual(['A']);\n    expect(template1.render.calls.argsFor(1)).toEqual(['B']);\n    expect(template2.render).toHaveBeenCalledTimes(2);\n    expect(template2.render.calls.argsFor(0)).toEqual(['A']);\n    expect(template2.render.calls.argsFor(1)).toEqual(['B']);\n  });\n});\n"
  },
  {
    "path": "testing/table/test-table.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {TestTable} from './internal/test-table.js';\nimport {styles as testTableStyles} from './internal/test-table-styles.js';\n\nexport {type TestTableTemplate} from './internal/test-table.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-test-table': MdTestTable;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-test-table')\nexport class MdTestTable<S extends string = string> extends TestTable<S> {\n  static override styles: CSSResultOrNative[] = [testTableStyles];\n}\n"
  },
  {
    "path": "testing/templates.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {TemplateResult} from 'lit';\nimport {DirectiveResult} from 'lit/directive.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {ref} from 'lit/directives/ref.js';\nimport {literal, StaticValue} from 'lit/static-html.js';\n\nimport {Harness, HarnessElement, isElementWithHarness} from './harness.js';\nimport {TestTableTemplate} from './table/test-table.js';\n\n/**\n * Pre-defined test table template states commonly shared between components.\n */\nexport enum State {\n  DEFAULT = 'Default',\n  DISABLED = 'Disabled',\n  ERROR = 'Error',\n  FOCUS = 'Focus',\n  HOVER = 'Hover',\n  PRESSED = 'Pressed',\n  SELECTED = 'Selected',\n  SOFT_DISABLED = 'Soft disabled',\n}\n\n/**\n * A template builder class that can be used to easily build test table template\n * render functions for multiple variants.\n *\n * If a harness is used, invoke `.withHarness()` before `.withVariants()` for\n * accurate types.\n *\n * @example\n *   const templates = new TemplateBuilder()\n *      .withHarness(MyHarness)\n *      .withVariants({\n *        filled(directive, props) {\n *          return html`\n *            <my-filled-element .label=${props.label} ${directive}>\n *              ${props.content}\n *            </my-filled-element>\n *          `;\n *        },\n *        outlined(directive, props) {\n *          return html`\n *            <my-outlined-element .label=${props.label} ${directive}>\n *              ${props.content}\n *            </my-outlined-element>\n *          `;\n *        },\n *      });\n *\n *   // Create an array of templates for every variant and provided property\n *   // object. This example creates both variants with and without a label.\n *   const testTemplates = templates.all({label: 'Foo'}, {});\n *\n *   // Create specific variant templates. Useful for when the properties are\n *   // not the same for each rendered variant.\n *   const variantTemplates = [\n *     templates.variant('filled', {label: 'Filled'}),\n *     templates.variant('filled', {label: ''}),\n *     templates.variant('outlined', {label: 'outlined'}, {}),\n *     templates.variant('outlined', {label: ''}, {}),\n *   ];\n *\n * @template H Optional element harness type.\n * @template V Variant name types.\n */\nexport class TemplateBuilder<\n  H extends Harness = Harness,\n  V extends string = never,\n> {\n  /**\n   * A map of variant names and their template factories.\n   */\n  private readonly variants = new Map<V, TemplateVariant<H>>();\n  /**\n   * The current harness constructor to use when rendering.\n   */\n  private harnessCtor?: new (element: HarnessElement<H>) => H;\n  /**\n   * The current state callback to invoke after rendering.\n   */\n  private stateCallback?: TemplateStateCallback<H>;\n\n  /**\n   * Creates and return an array of test table templates that will render every\n   * variant once for each test case element properties object provided.\n   *\n   * @param testCaseProps Element properties to render for every variant.\n   * @return An array of test table templates for every variant and test case.\n   */\n  all(...testCaseProps: Array<TemplateProps<H>>): TestTableTemplate[] {\n    if (!testCaseProps.length) {\n      // Allow calling templates.all() and assume default props.\n      testCaseProps.push({});\n    }\n\n    return Array.from(this.variants.values()).flatMap(({display, factory}) => {\n      return testCaseProps.map((props) => ({display, render: factory(props)}));\n    });\n  }\n\n  /**\n   * Creates and returns the test table template for a specific variant and\n   * test case.\n   *\n   * @param variant The variant to render.\n   * @param testCaseProps Element properties to render for this variant.\n   * @return A test table template for the given variant and test case.\n   */\n  variant(variant: V, testCaseProps?: TemplateProps<H>): TestTableTemplate {\n    const displayAndRender = this.variants.get(variant);\n    if (!displayAndRender) {\n      throw new Error(`Missing variant '${variant}' in TemplateBuilder.`);\n    }\n\n    const {display, factory} = displayAndRender;\n    const render = factory(testCaseProps);\n    return {display, render};\n  }\n\n  /**\n   * Sets the harness constructor to use for the template builder.\n   *\n   * @template NewHarness The new harness type.\n   * @param harnessCtor The constructor for the harness.\n   * @return The template builder, now using the provided harness type.\n   */\n  withHarness<NewHarness extends Harness>(\n    harnessCtor: new (element: HarnessElement<NewHarness>) => NewHarness,\n  ) {\n    const typedThis = this as unknown as TemplateBuilder<NewHarness, V>;\n    typedThis.harnessCtor = harnessCtor;\n    return typedThis;\n  }\n\n  /**\n   * Sets the state callback to use for the template builder. It is invoked\n   * after the template's element has rendered and provides the current state\n   * and harness.\n   *\n   * This callback is typically used when additional behavior needs to be\n   * simulated with the harness according to the current state.\n   *\n   * @example\n   *   // Element-specific state that does not belong in the shared `State`\n   *   // enum.\n   *   enum MyState {\n   *     FOCUS_MOUSE = 'Focus (Mouse)', // A unique state\n   *   }\n   *\n   *   const templates = new TemplateBuilder()\n   *       .withHarness(MyHarness)\n   *       .withStateCallback(async (state, harness) => {\n   *         // Use the harness to perform additional behavior not handled\n   *         // by default.\n   *         if (state === MyState.FOCUS_MOUSE) {\n   *           await harness.focusWithMouse();\n   *         }\n   *       })\n   *       .withVariants({/* ... *\\/})\n   *\n   * @template NewHarness The new harness type.\n   * @param callback The callback to be called.\n   * @return The template builder, now using the provided harness type.\n   */\n  withStateCallback(callback: TemplateStateCallback<H>) {\n    this.stateCallback = callback;\n    return this;\n  }\n\n  /**\n   * Adds multiple variant render functions to the template builder.\n   *\n   * @param variants An object whose keys are variant names and values are\n   *     either variant render functions or an object of variant options. The\n   *     options specify a `display` name and the variant `render` function.\n   * @return The template builder, now using the provided variants.\n   */\n  withVariants(\n    variants: Record<string, TemplateRender<H> | TemplateVariantOptions<H>>,\n  ) {\n    // TODO: clean this up by only allowing TemplateVariantOptions and force\n    // users to specify the display name.\n    for (const variant of Object.keys(variants)) {\n      this.withVariant(variant, variants[variant]);\n    }\n\n    return this as unknown as TemplateBuilder<\n      H,\n      V | Extract<keyof typeof variants, string>\n    >;\n  }\n\n  /**\n   * Adds a variant render function to the template builder.\n   *\n   * @param variant The new variant name to add.\n   * @param renderOrOptions The variant's render function, or an object with the\n   *     `render` function and a `display` name. The default display name is the\n   *     `variant` name when a render function is provided instead.\n   * @return The template builder, now using the provided variant.\n   */\n  withVariant<NewVariant extends string>(\n    variant: NewVariant,\n    renderOrOptions: TemplateRender<H> | TemplateVariantOptions<H>,\n  ) {\n    // TODO: clean this up by only allowing TemplateVariantOptions and force\n    // users to specify the display name.\n    const typedThis = this as unknown as TemplateBuilder<H, V | NewVariant>;\n    const {display, render} =\n      typeof renderOrOptions === 'function'\n        ? {display: variant, render: renderOrOptions}\n        : renderOrOptions;\n\n    typedThis.variants.set(variant, {\n      display: display ?? variant,\n      factory: (props) => {\n        return (state) => {\n          const directive = ref(async (element) => {\n            if (!element) {\n              return;\n            }\n\n            const harness = await this.createHarnessAndApplyState(\n              element as HarnessElement<H>,\n              state,\n            );\n\n            // Allow the component to apply additional state or perform custom\n            // state logic.\n            this.stateCallback?.(state, harness);\n          });\n\n          return render(directive, props || {}, state);\n        };\n      },\n    });\n\n    return typedThis;\n  }\n\n  /**\n   * Creates a harness for the given element (if a harness constructor is\n   * being used). This function will also apply default shared state, including\n   * focusing, hovering, and pressing the element.\n   *\n   * @param element The element to create a harness for.\n   * @param state The current state of the element.\n   * @return The created harness, or undefined if a harness constructor is not\n   *     being used.\n   */\n  private async createHarnessAndApplyState(\n    element: HarnessElement<H>,\n    state: string,\n  ): Promise<H | never> {\n    if (!this.harnessCtor) {\n      return undefined as never;\n    }\n\n    const harness = isElementWithHarness(element)\n      ? (element.harness as H)\n      : new this.harnessCtor(element);\n    // Common shared component state harness actions\n    await harness.reset();\n    switch (state) {\n      case State.FOCUS:\n        await harness.focusWithKeyboard();\n        break;\n      case State.HOVER:\n        await harness.startHover();\n        break;\n      case State.PRESSED:\n        await harness.startClickWithMouse();\n        break;\n      default:\n        break;\n    }\n\n    return harness;\n  }\n}\n\n/**\n * A template variant, which includes the display name of the variant and a\n * factory to create `TestTableTemplate` objects.\n *\n * @template H The harness type.\n */\nexport interface TemplateVariant<H extends Harness> {\n  /** The variant's display name. */\n  display: string | StaticValue;\n  /**\n   * A factory function that takes an object of element properties and returns\n   * another a test table template that renders the variant's element for a\n   * given state.\n   *\n   * @template H The harness type.\n   * @param props Optional properties for the element.\n   * @return A function that renders the element for a given state.\n   */\n  factory: (props?: TemplateProps<H>) => TestTableTemplate['render'];\n}\n\n/** Options for rendering a template variant. */\nexport interface TemplateVariantOptions<H extends Harness> {\n  /** A function to render this variant. */\n  render: TemplateRender<H>;\n  /** Custom variant display name. Defaults to the name of the variant. */\n  display?: string | ReturnType<typeof literal>;\n}\n\n// TODO: clean this devx up a bit by swapping props/state args\n/**\n * A function that renders a variant to display. The function receives a test\n * directive that should be added to the element.\n *\n * If a harness for the element is used, optional properties for the harness's\n * element are provided to bind to the template.\n *\n * The render function may also use a third parameter, which is the current\n * state the element should be rendered in.\n *\n * @template H The harness type.\n * @param directive A test directive that should be placed on the element.\n * @param props Properties for the element.\n * @param state The current state to render the element in.\n * @return A `TemplateResult` rendering the element.\n */\nexport type TemplateRender<H extends Harness> = (\n  directive: DirectiveResult,\n  props: TemplateProps<H>,\n  state: string,\n) => TemplateResult | null;\n\n/**\n * A callback that is invoked after the template's element has rendered. It\n * provides the current state and harness (if used).\n *\n * This callback is typically used when additional behavior needs to be\n * simulated with the harness according to the current state.\n *\n * @template H The harness type.\n * @param state The current test table state.\n * @param harness The rendered element's harness.\n */\nexport type TemplateStateCallback<H extends Harness> = (\n  state: string,\n  harness: H,\n) => void;\n\n/**\n * Element properties for a harness constructor. Returns a partial object with\n * shared template properties and optional properties that are unique to the\n * element itself (excludes `HTMLElement` properties).\n *\n * @template H The harness type.\n */\nexport type TemplateProps<H extends Harness = Harness> = Partial<\n  Pick<HarnessElement<H>, Exclude<keyof HarnessElement<H>, keyof HTMLElement>>\n> &\n  SharedTemplateProps;\n\n/**\n * Shared element properties for all harnesses.\n */\nexport interface SharedTemplateProps {\n  /**\n   * The light DOM content of the element.\n   */\n  content?: unknown;\n  /**\n   * Classes to add to the element.\n   */\n  classes?: ClassInfo;\n}\n"
  },
  {
    "path": "testing/tokens.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {CSSResultOrNative} from 'lit';\n\n/**\n * Create tests for `MdComponent.styles` that checks for undefined or unused\n * tokens.\n *\n * @param styles Styles to run tests on.\n */\nexport function createTokenTests(styles: CSSResultOrNative[]) {\n  it('should not have any undefined tokens', () => {\n    const undefinedTokens = getUndefinedTokens(styles);\n    expect(undefinedTokens).withContext('undefined tokens').toHaveSize(0);\n  });\n\n  it('should not have any unused tokens', () => {\n    const unusedTokens = getUnusedTokens(styles);\n    expect(unusedTokens).withContext('unused tokens').toHaveSize(0);\n  });\n}\n\n/**\n * Retrieves all undefined tokens. This method checks for any\n * `--_local-custom-property` that is used, but does not have a CSS style\n * declaration giving it a value.\n *\n * @example\n * :host {\n *   --_defined-token: 8px;\n *   border-radius: var(--_undefined-token);\n * }\n *\n * // returns ['--_undefined-token']\n *\n * @param styles Styles to get undefined tokens for.\n * @return An array of all token names that are undefined.\n */\nexport function getUndefinedTokens(styles: CSSResultOrNative[]) {\n  let defined = new Set<string>();\n  let used = new Set<string>();\n  for (const styleSheet of cssResultsToStyleSheets(styles)) {\n    defined = new Set([...defined, ...getDefinedTokensFromRule(styleSheet)]);\n    used = new Set([...used, ...getUsedTokensFromRule(styleSheet)]);\n  }\n\n  const undefinedTokens: string[] = [];\n  for (const usedToken of used) {\n    if (!defined.has(usedToken)) {\n      undefinedTokens.push(usedToken);\n    }\n  }\n\n  return undefinedTokens;\n}\n\n/**\n * Retrieves all unused tokens. This method checks for any\n * `--_local-custom-property` that has a CSS declaration value, but it otherwise\n * unused.\n *\n * @example\n * :host {\n *   --_used-token: 8px;\n *   --_unused-token: 8px;\n *   border-radius: var(--_used-token);\n * }\n *\n * // returns ['--_unused-token']\n *\n * @param styles Styles to get unused tokens for.\n * @return An array of all token names that are unused.\n */\nexport function getUnusedTokens(styles: CSSResultOrNative[]) {\n  let defined = new Set<string>();\n  let used = new Set<string>();\n  for (const styleSheet of cssResultsToStyleSheets(styles)) {\n    defined = new Set([...defined, ...getDefinedTokensFromRule(styleSheet)]);\n    used = new Set([...used, ...getUsedTokensFromRule(styleSheet)]);\n  }\n\n  const unusedTokens: string[] = [];\n  for (const definedToken of defined) {\n    if (!used.has(definedToken)) {\n      unusedTokens.push(definedToken);\n    }\n  }\n\n  return unusedTokens;\n}\n\nfunction getDefinedTokensFromRule(\n  rule: CSSRule | CSSStyleSheet | CSSStyleRule,\n): Set<string> {\n  let defined = new Set<string>();\n  if ('cssRules' in rule) {\n    // Rule is either a CSSStyleSheet, CSSKeyframesRule, or one of the\n    // CSSGroupingRules.\n    for (const childRule of rule.cssRules) {\n      defined = new Set([...defined, ...getDefinedTokensFromRule(childRule)]);\n    }\n  }\n\n  if ('style' in rule) {\n    for (const property of rule.style) {\n      if (property.startsWith('--_')) {\n        defined.add(property);\n      }\n    }\n  }\n\n  return defined;\n}\n\nfunction getUsedTokensFromRule(\n  rule: CSSRule | CSSStyleSheet | CSSStyleRule,\n): Set<string> {\n  let used = new Set<string>();\n  if ('cssRules' in rule) {\n    // Rule is either a CSSStyleSheet, CSSKeyframesRule, or one of the\n    // CSSGroupingRules.\n    for (const childRule of rule.cssRules) {\n      used = new Set([...used, ...getUsedTokensFromRule(childRule)]);\n    }\n  }\n\n  if ('style' in rule) {\n    // Shorthand properties are not included in CSSStyleDeclaration's iterator.\n    // Check them explicitly as well for properties like border-radius.\n    for (const property of [...rule.style, ...CSS_SHORTHAND_PROPERTIES]) {\n      const value = rule.style.getPropertyValue(property);\n      // match css custom properties of --_ but not --__ as --_ are tokens and\n      // --__ are private custom properties used for our convenience not to be\n      // exposed to users.\n      for (const match of value.matchAll(/--_(?!_)[\\w-]+/g)) {\n        used.add(match[0]);\n      }\n    }\n  }\n\n  return used;\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#see_also\nconst CSS_SHORTHAND_PROPERTIES = [\n  'all',\n  'animation',\n  'background',\n  'border',\n  'border-block-end',\n  'border-block-start',\n  'border-bottom',\n  'border-color',\n  'border-image',\n  'border-inline-end',\n  'border-inline-start',\n  'border-left',\n  'border-radius',\n  'border-right',\n  'border-style',\n  'border-top',\n  'border-width',\n  'column-rule',\n  'columns',\n  'contain-intrinsic-size',\n  'flex',\n  'flex-flow',\n  'font',\n  'gap',\n  'grid',\n  'grid-area',\n  'grid-column',\n  'grid-row',\n  'grid-template',\n  'list-style',\n  'margin',\n  'margin-block',\n  'margin-inline',\n  'mask',\n  'offset',\n  'outline',\n  'overflow',\n  'padding',\n  'padding-block',\n  'padding-inline',\n  'place-content',\n  'place-items',\n  'place-self',\n  'scroll-margin',\n  'scroll-padding',\n  'scroll-timeline',\n  'text-decoration',\n  'text-emphasis',\n  'transition',\n];\n\nfunction cssResultsToStyleSheets(styles: CSSResultOrNative[]): CSSStyleSheet[] {\n  return styles.map((style) => {\n    if (style instanceof CSSStyleSheet) {\n      return style;\n    }\n\n    if (!style.styleSheet) {\n      throw new Error('CSSResult.styleSheet is not supported.');\n    }\n\n    return style.styleSheet;\n  });\n}\n"
  },
  {
    "path": "testing/tokens_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {css} from 'lit';\n\nimport {getUndefinedTokens, getUnusedTokens} from './tokens.js';\n\ndescribe('testing', () => {\n  describe('tokens', () => {\n    describe('getUnusedTokens()', () => {\n      it('should return empty when all tokens are used', () => {\n        const styles = css`\n          :host {\n            --_color: var(--md-comp-foo-color);\n          }\n\n          .foo {\n            color: var(--_color);\n          }\n        `;\n\n        const unusedTokens = getUnusedTokens([styles]);\n        expect(unusedTokens).withContext('unused tokens').toHaveSize(0);\n      });\n\n      it('should return tokens that are defined, but not used', () => {\n        const styles = css`\n          :host {\n            --_color: var(--md-comp-foo-color);\n            --_unused: var(--md-comp-foo-unused);\n          }\n\n          .foo {\n            color: var(--_color);\n          }\n        `;\n\n        const unusedTokens = getUnusedTokens([styles]);\n        expect(unusedTokens)\n          .withContext('unused tokens')\n          .toEqual(['--_unused']);\n      });\n    });\n\n    describe('getUndefinedTokens()', () => {\n      it('should return empty when all tokens are defined', () => {\n        const styles = css`\n          :host {\n            --_color: var(--md-comp-foo-color);\n          }\n\n          .foo {\n            color: var(--_color);\n          }\n        `;\n\n        const undefinedTokens = getUndefinedTokens([styles]);\n        expect(undefinedTokens).withContext('undefined tokens').toHaveSize(0);\n      });\n\n      it('should return tokens that are used and not defined', () => {\n        const styles = css`\n          :host {\n            --_color: var(--md-comp-foo-color);\n          }\n\n          .foo {\n            color: var(--_color);\n            border-radius: var(--_undefined);\n          }\n        `;\n\n        const undefinedTokens = getUndefinedTokens([styles]);\n        expect(undefinedTokens)\n          .withContext('undefined tokens')\n          .toEqual(['--_undefined']);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "testing/transform-pseudo-classes.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Array of pseudo classes to transform by default. These pseudo classes\n * represent state interactions from the user (such as :hover) or the browser\n * (such as :autofill) that cannot be reproduced with HTML markup.\n */\nexport const defaultTransformPseudoClasses = [\n  ':active',\n  ':autofill',\n  ':focus',\n  ':focus-visible',\n  ':focus-within',\n  ':hover',\n  ':invalid',\n  ':link',\n  ':paused',\n  ':playing',\n  ':user-invalid',\n  ':valid',\n  ':visited',\n];\n\n/**\n * Retrieves the transformed class name for a given pseudo class.\n *\n * @param pseudoClass The pseudo class to transform.\n * @return The transform pseudo class string.\n */\nexport function getTransformedPseudoClass(pseudoClass: string) {\n  return `_${pseudoClass.substring(1)}`;\n}\n\n/**\n * A weak set of stylesheets to use as reference for whether or not a stylesheet\n * has been transformed.\n */\nconst transformedStyleSheets = new WeakSet<CSSStyleSheet>();\n\n/**\n * Transforms a document's stylesheets' pseudo classes into normal classes with\n * a new stylesheet.\n *\n * Pseudo classes are given an underscore in their transformation. For example,\n * `:hover` transforms to `._hover`.\n *\n * ```css\n * .mdc-foo:hover {\n *   color: teal;\n * }\n * ```\n * ```css\n * .mdc-foo._hover {\n *   color: teal;\n * }\n * ```\n *\n * @param pseudoClasses An optional array of pseudo class names to transform.\n */\nexport function transformPseudoClasses(\n  stylesheets: Iterable<CSSStyleSheet>,\n  pseudoClasses = defaultTransformPseudoClasses,\n) {\n  for (const stylesheet of stylesheets) {\n    if (transformedStyleSheets.has(stylesheet)) {\n      continue;\n    }\n\n    let rules: CSSRuleList;\n    try {\n      rules = stylesheet.cssRules;\n    } catch {\n      continue;\n    }\n\n    for (let j = rules.length - 1; j >= 0; j--) {\n      visitRule(rules[j], stylesheet, j, pseudoClasses);\n    }\n\n    transformedStyleSheets.add(stylesheet);\n  }\n}\n\n/**\n * Determines whether or not the CSSRule is a CSSGroupingRule.\n *\n * Cannot check instanceof because FF treats a CSSStyleRule as a subclass of\n * CSSGroupingRule unlike Chrome and Safari\n */\nfunction isCSSGroupingRule(rule: CSSRule): rule is CSSGroupingRule {\n  return (\n    !!(rule as CSSGroupingRule)?.cssRules &&\n    !(rule as CSSStyleRule).selectorText\n  );\n}\n\n/**\n * Visits a rule for the given stylesheet and adds a rule that replaces any\n * pseudo classes with a regular transformed class for simulation styling.\n *\n * @param rule The CSS rule to transform.\n * @param stylesheet The rule's parent stylesheet to update.\n * @param index The index of the rule in the parent stylesheet.\n * @param pseudoClasses An array of pseudo classes to search for and replace.\n */\nfunction visitRule(\n  rule: CSSRule,\n  stylesheet: CSSStyleSheet | CSSGroupingRule,\n  index: number,\n  pseudoClasses: string[],\n) {\n  if (isCSSGroupingRule(rule)) {\n    for (let i = rule.cssRules.length - 1; i >= 0; i--) {\n      visitRule(rule.cssRules[i], rule, i, pseudoClasses);\n    }\n    return;\n  }\n\n  if (!(rule instanceof CSSStyleRule)) {\n    return;\n  }\n\n  try {\n    let {selectorText} = rule;\n    // match :foo, ensuring that it does not have a paren at the end\n    // (no pseudo class functions like :foo())\n    const regex = /(:(?![\\w-]+\\()[\\w-]+)/g;\n    const matches = Array.from(selectorText.matchAll(regex)).filter((match) => {\n      // don't match pseudo elements like ::foo\n      if (match.index != null && selectorText[match.index - 1] === ':') {\n        return false;\n      }\n      return pseudoClasses.includes(match[1]);\n    });\n\n    if (!matches.length) {\n      return;\n    }\n\n    matches.reverse();\n    selectorText = rearrangePseudoElements(selectorText);\n    for (const match of matches) {\n      selectorText =\n        selectorText.substring(0, match.index!) +\n        `.${getTransformedPseudoClass(match[1])}` +\n        selectorText.substring(match.index! + match[1].length);\n    }\n\n    const css = `${selectorText} {${rule.style.cssText}}`;\n    stylesheet.insertRule(css, index + 1);\n  } catch (error: unknown) {\n    // Catch exception to skip the rule that cannot be parsed.\n    console.error(error);\n  }\n}\n\n/**\n * Re-arranges a selector's pseudo elements to appear at the end of the\n * selector. This prevents invalid CSS when replacing pseudo classes that\n * appear after a pseudo element.\n *\n * @example\n * // '.foo::before:hover' -> '.foo::before._hover' is invalid\n *\n * rearrangePseudoElements('.foo::before:hover'); // '.foo:hover::before'\n * // '.foo:hover::before' -> '.foo._hover::before' is valid\n *\n * @param selectorText The selector text string to re-arrange.\n * @return The re-arranged selector text.\n */\nfunction rearrangePseudoElements(selectorText: string) {\n  const pseudoElementsBeforeClasses = Array.from(\n    selectorText.matchAll(/(?:::[\\w-]+)+(?=:[\\w-])/g),\n  );\n  pseudoElementsBeforeClasses.reverse();\n  for (const match of pseudoElementsBeforeClasses) {\n    const pseudoElement = match[0];\n    const pseudoElementIndex = match.index!;\n    const endOfCompoundSelector = selectorText\n      .substring(pseudoElementIndex)\n      .match(/(\\s(?!([^\\s].)*\\))|,|$)/)!;\n    const index = endOfCompoundSelector.index! + pseudoElementIndex;\n    selectorText =\n      selectorText.substring(0, index) +\n      pseudoElement +\n      selectorText.substring(index);\n    selectorText =\n      selectorText.substring(0, pseudoElementIndex) +\n      selectorText.substring(pseudoElementIndex + pseudoElement.length);\n  }\n\n  return selectorText;\n}\n"
  },
  {
    "path": "textfield/_filled-text-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/filled-text-field' show theme;\n"
  },
  {
    "path": "textfield/_outlined-text-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward './internal/outlined-text-field' show theme;\n"
  },
  {
    "path": "textfield/demo/demo.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './material-collection.js';\nimport './index.js';\n\nimport {\n  KnobTypesToKnobs,\n  MaterialCollection,\n  materialInitsToStoryInits,\n  setUpDemo,\n} from './material-collection.js';\nimport {boolInput, Knob, textInput} from './index.js';\n\nimport {stories, StoryKnobs} from './stories.js';\n\nconst collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(\n  'Textfield',\n  [\n    new Knob('label', {ui: textInput(), defaultValue: 'Label'}),\n    new Knob('placeholder', {ui: textInput(), defaultValue: ''}),\n    new Knob('disabled', {ui: boolInput(), defaultValue: false}),\n    new Knob('prefixText', {ui: textInput(), defaultValue: ''}),\n    new Knob('suffixText', {ui: textInput(), defaultValue: ''}),\n    new Knob('supportingText', {\n      ui: textInput(),\n      defaultValue: 'Supporting text',\n    }),\n  ],\n);\n\ncollection.addStories(...materialInitsToStoryInits(stories));\n\nsetUpDemo(collection);\n"
  },
  {
    "path": "textfield/demo/project.json",
    "content": "{\n  \"extends\": \"/assets/stories/base.json\",\n  \"files\": {\n    \"demo.ts\": {\n      \"hidden\": true\n    },\n    \"stories.ts\": {}\n  }\n}\n"
  },
  {
    "path": "textfield/demo/stories.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/icon/icon.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/textfield/filled-text-field.js';\nimport '@material/web/textfield/outlined-text-field.js';\n\nimport {MaterialStoryInit} from './material-collection.js';\nimport {MdFilledTextField} from '@material/web/textfield/filled-text-field.js';\nimport {css, html, nothing} from 'lit';\n\n/** Knob types for Textfield stories. */\nexport interface StoryKnobs {\n  label: string;\n  placeholder: string;\n  disabled: boolean;\n  prefixText: string;\n  suffixText: string;\n  supportingText: string;\n}\n\n// Set min-height for resizable textareas\nconst styles = css`\n  .row {\n    align-items: flex-start;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n\n  md-filled-text-field,\n  md-outlined-text-field {\n    width: 200px;\n  }\n\n  [type='textarea'] {\n    min-height: 56px;\n  }\n\n  [type='textarea'][supporting-text] {\n    min-height: 76px;\n  }\n`;\n\nconst textfields: MaterialStoryInit<StoryKnobs> = {\n  name: 'Text fields',\n  styles,\n  render(knobs) {\n    return html`\n      <div class=\"row\">\n        <md-filled-text-field\n          ?disabled=${knobs.disabled}\n          label=${knobs.label || nothing}\n          placeholder=${knobs.placeholder || nothing}\n          prefix-text=${knobs.prefixText || nothing}\n          suffix-text=${knobs.suffixText || nothing}\n          supporting-text=${knobs.supportingText ||\n          nothing}></md-filled-text-field>\n\n        <md-outlined-text-field\n          ?disabled=${knobs.disabled}\n          label=${knobs.label || nothing}\n          placeholder=${knobs.placeholder || nothing}\n          prefix-text=${knobs.prefixText || nothing}\n          suffix-text=${knobs.suffixText || nothing}\n          supporting-text=${knobs.supportingText ||\n          nothing}></md-outlined-text-field>\n      </div>\n    `;\n  },\n};\n\nconst textareas: MaterialStoryInit<StoryKnobs> = {\n  name: 'Text areas',\n  styles,\n  render(knobs) {\n    return html`\n      <div class=\"row\">\n        <md-filled-text-field\n          type=\"textarea\"\n          ?disabled=${knobs.disabled}\n          label=${knobs.label || nothing}\n          placeholder=${knobs.placeholder || nothing}\n          supporting-text=${knobs.supportingText ||\n          nothing}></md-filled-text-field>\n\n        <md-outlined-text-field\n          type=\"textarea\"\n          ?disabled=${knobs.disabled}\n          label=${knobs.label || nothing}\n          placeholder=${knobs.placeholder || nothing}\n          supporting-text=${knobs.supportingText ||\n          nothing}></md-outlined-text-field>\n      </div>\n    `;\n  },\n};\n\nconst icons: MaterialStoryInit<StoryKnobs> = {\n  name: 'Icons',\n  styles,\n  render(knobs) {\n    return html`\n      <div class=\"row\">\n        <md-filled-text-field\n          ?disabled=${knobs.disabled}\n          label=${knobs.label || nothing}\n          placeholder=${knobs.placeholder || nothing}\n          value=\"Value\"\n          prefix-text=${knobs.prefixText || nothing}\n          suffix-text=${knobs.suffixText || nothing}\n          supporting-text=${knobs.supportingText || nothing}>\n          <md-icon slot=\"leading-icon\">search</md-icon>\n          <md-icon-button\n            aria-label=\"Clear input\"\n            ?disabled=${knobs.disabled}\n            slot=\"trailing-icon\"\n            @click=${clearInput}>\n            <md-icon>clear</md-icon>\n          </md-icon-button>\n        </md-filled-text-field>\n\n        <md-outlined-text-field\n          ?disabled=${knobs.disabled}\n          label=${knobs.label || nothing}\n          placeholder=${knobs.placeholder || nothing}\n          value=\"Value\"\n          prefix-text=${knobs.prefixText || nothing}\n          suffix-text=${knobs.suffixText || nothing}\n          supporting-text=${knobs.supportingText || nothing}>\n          <md-icon slot=\"leading-icon\">search</md-icon>\n          <md-icon-button\n            aria-label=\"Clear input\"\n            ?disabled=${knobs.disabled}\n            slot=\"trailing-icon\"\n            @click=${clearInput}>\n            <md-icon>clear</md-icon>\n          </md-icon-button>\n        </md-outlined-text-field>\n      </div>\n    `;\n  },\n};\n\nconst validation: MaterialStoryInit<StoryKnobs> = {\n  name: 'Validation',\n  styles,\n  render(knobs) {\n    return html`\n      <div class=\"row\">\n        <md-outlined-text-field\n          ?disabled=${knobs.disabled}\n          label=\"Required\"\n          value=\"Value\"\n          required\n          supporting-text=\"* this field is required\"\n          @change=${reportValidity}></md-outlined-text-field>\n\n        <md-outlined-text-field\n          ?disabled=${knobs.disabled}\n          type=\"number\"\n          label=\"Numeric\"\n          min=\"1\"\n          max=\"10\"\n          supporting-text=\"Enter a number between 1 and 10\"\n          @change=${reportValidity}></md-outlined-text-field>\n\n        <md-outlined-text-field\n          ?disabled=${knobs.disabled}\n          label=\"Length\"\n          minlength=\"3\"\n          maxlength=\"10\"\n          supporting-text=\"3 to 10 characters\"\n          @change=${reportValidity}></md-outlined-text-field>\n\n        <md-outlined-text-field\n          style=\"text-align: end\"\n          ?disabled=${knobs.disabled}\n          label=\"Pattern\"\n          pattern=\"[a-zA-Z]+\"\n          placeholder=\"username\"\n          suffix-text=\"@gmail.com\"\n          supporting-text=\"Characters only\"\n          @change=${reportValidity}></md-outlined-text-field>\n      </div>\n    `;\n  },\n};\n\nconst forms: MaterialStoryInit<StoryKnobs> = {\n  name: 'Forms',\n  styles: [\n    styles,\n    css`\n      .buttons {\n        justify-content: flex-end;\n        padding: 16px;\n      }\n    `,\n  ],\n  render(knobs) {\n    return html`\n      <form @submit=${alertValues}>\n        <div class=\"row\">\n          <md-filled-text-field\n            ?disabled=${knobs.disabled}\n            label=\"First name\"\n            name=\"first-name\"\n            required\n            no-asterisk\n            autocomplete=\"given-name\"></md-filled-text-field>\n          <md-filled-text-field\n            ?disabled=${knobs.disabled}\n            label=\"Last name\"\n            name=\"last-name\"\n            required\n            no-asterisk\n            autocomplete=\"family-name\"></md-filled-text-field>\n        </div>\n        <div class=\"row buttons\">\n          <md-text-button type=\"reset\">Reset</md-text-button>\n          <md-outlined-button type=\"submit\">Submit</md-outlined-button>\n        </div>\n      </form>\n    `;\n  },\n};\n\nasync function reportValidity(event: Event) {\n  const textField = event.target as MdFilledTextField;\n  textField.reportValidity();\n}\n\nfunction clearInput(event: Event) {\n  const iconButton = event.target as HTMLElement;\n  const textField = iconButton.parentElement as MdFilledTextField;\n  iconButton.blur();\n  textField.value = '';\n  textField.focus();\n}\n\nfunction alertValues(event: SubmitEvent) {\n  event.preventDefault();\n  const data = new FormData(event.target as HTMLFormElement);\n  const first = data.get('first-name') || '<empty>';\n  const last = data.get('last-name') || '<empty>';\n  alert(`First name: ${first}, Last name: ${last}`);\n}\n\n/** Textfield stories. */\nexport const stories = [textfields, textareas, icons, validation, forms];\n"
  },
  {
    "path": "textfield/filled-text-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledStyles} from './internal/filled-styles.js';\nimport {FilledTextField} from './internal/filled-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\nexport {type TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles: CSSResultOrNative[] = [sharedStyles, filledStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"
  },
  {
    "path": "textfield/filled-text-field_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdFilledTextField} from './filled-text-field.js';\n\ndescribe('<md-filled-field>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdFilledTextField.styles);\n  });\n});\n"
  },
  {
    "path": "textfield/harness.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {TextField} from './internal/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  private valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n      await this.getInteractiveElement(),\n      beginIndex,\n      endIndex,\n    );\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n  }\n\n  protected simulateInput(\n    element: HTMLInputElement | HTMLTextAreaElement,\n    charactersToAppend: string,\n    init?: InputEventInit,\n  ) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n    element: HTMLInputElement | HTMLTextAreaElement,\n    beginIndex?: number,\n    endIndex?: number,\n    init?: InputEventInit,\n  ) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value =\n      element.value.substring(0, beginIndex ?? 0) +\n      element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(\n    element: HTMLInputElement | HTMLTextAreaElement,\n  ) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.input') as\n      | HTMLInputElement\n      | HTMLTextAreaElement;\n  }\n}\n"
  },
  {
    "path": "textfield/harness_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\nimport './filled-text-field.js';\n\nimport {html} from 'lit';\n\nimport {Environment} from '../testing/environment.js';\nimport {Harness} from '../testing/harness.js';\n\nimport {TextFieldHarness} from './harness.js';\n\ndescribe('TextFieldHarness', () => {\n  const env = new Environment();\n\n  async function setupTest() {\n    const root = env.render(\n      html`<md-filled-text-field></md-filled-text-field>`,\n    );\n    const instance = root.querySelector('md-filled-text-field');\n    if (!instance) {\n      throw new Error('Failed to query md-filled-text-field.');\n    }\n\n    await env.waitForStability();\n    return new TextFieldHarness(instance);\n  }\n\n  describe('inputValue()', () => {\n    it('should emit key events for each character typed', async () => {\n      // Setup.\n      const harness = await setupTest();\n      const keydownHandler = jasmine.createSpy('keydownHandler');\n      harness.element.addEventListener('keydown', keydownHandler);\n      // Test case.\n      await harness.inputValue('abc');\n      // Assertion.\n      expect(keydownHandler).toHaveBeenCalledTimes(3);\n      expect(keydownHandler).toHaveBeenCalledWith(jasmine.any(KeyboardEvent));\n      expect(keydownHandler.calls.allArgs()).toEqual([\n        [jasmine.objectContaining({key: 'a'})],\n        [jasmine.objectContaining({key: 'b'})],\n        [jasmine.objectContaining({key: 'c'})],\n      ]);\n    });\n\n    it('should emit input events for each character typed', async () => {\n      // Setup.\n      const harness = await setupTest();\n      const inputHandler = jasmine.createSpy('inputHandler');\n      harness.element.addEventListener('input', inputHandler);\n      // Test case.\n      await harness.inputValue('abc');\n      // Assertion.\n      expect(inputHandler).toHaveBeenCalledTimes(3);\n      expect(inputHandler).toHaveBeenCalledWith(jasmine.any(InputEvent));\n    });\n  });\n\n  describe('deleteValue()', () => {\n    it('should press the Backspace key', async () => {\n      // Setup.\n      const harness = await setupTest();\n      const keydownHandler = jasmine.createSpy('keydownHandler');\n      harness.element.addEventListener('keydown', keydownHandler);\n      harness.element.value = 'Value';\n      // Test case.\n      await harness.deleteValue();\n      // Assertion.\n      expect(keydownHandler).toHaveBeenCalledTimes(1);\n      expect(keydownHandler).toHaveBeenCalledWith(jasmine.any(KeyboardEvent));\n      expect(keydownHandler).toHaveBeenCalledWith(\n        jasmine.objectContaining({\n          key: 'Backspace',\n        }),\n      );\n    });\n\n    it('should delete the entire value by default', async () => {\n      // Setup.\n      const harness = await setupTest();\n      harness.element.value = 'Value';\n      // Test case.\n      await harness.deleteValue();\n      // Assertion.\n      expect(harness.element.value).toBe('');\n    });\n\n    it('should allow deleting part of the value', async () => {\n      // Setup.\n      const harness = await setupTest();\n      harness.element.value = 'Value';\n      // Test case.\n      await harness.deleteValue(1, 4);\n      // Assertion.\n      expect(harness.element.value).toBe('Ve');\n    });\n  });\n\n  describe('reset()', () => {\n    it('should set the value to an empty string', async () => {\n      // Setup.\n      const harness = await setupTest();\n      harness.element.value = 'Value';\n      // Test case.\n      await harness.reset();\n      // Assertion.\n      expect(harness.element.value).toBe('');\n    });\n\n    it('should call super.reset()', async () => {\n      // Setup.\n      const harness = await setupTest();\n      spyOn(Harness.prototype, 'reset');\n      // Test case.\n      await harness.reset();\n      // Assertion.\n      expect(Harness.prototype.reset).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe('simulating change events', () => {\n    it('should dispatch change if value changes after focus and blur', async () => {\n      // Setup.\n      const harness = await setupTest();\n      const changeHandler = jasmine.createSpy('changeHandler');\n      harness.element.addEventListener('change', changeHandler);\n      // Test case.\n      await harness.focusWithKeyboard();\n      await harness.inputValue('value');\n      await harness.blur();\n      // Assertion.\n      expect(changeHandler).toHaveBeenCalledTimes(1);\n    });\n\n    it('should not dispatch change if value does not change', async () => {\n      // Setup.\n      const harness = await setupTest();\n      const changeHandler = jasmine.createSpy('changeHandler');\n      harness.element.value = 'value';\n      harness.element.addEventListener('change', changeHandler);\n      // Test case.\n      await harness.focusWithKeyboard();\n      await harness.blur();\n      // Assertion.\n      expect(changeHandler).not.toHaveBeenCalled();\n    });\n\n    it('should not dispatch change if reset', async () => {\n      // Setup.\n      const harness = await setupTest();\n      const changeHandler = jasmine.createSpy('changeHandler');\n      await harness.focusWithKeyboard();\n      await harness.inputValue('value');\n      harness.element.addEventListener('change', changeHandler);\n      // Test case.\n      await harness.reset();\n      await harness.blur();\n      // Assertion.\n      expect(changeHandler).not.toHaveBeenCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "textfield/internal/_filled-text-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../field/filled-field';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-filled-text-field-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $token == 'container-shape' and meta.type-of($value) == 'list' {\n      @error 'Filled text field `container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';\n    }\n\n    @if $value {\n      --md-filled-text-field-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-filled-text-field-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    @include filled-field.theme(\n      (\n        // go/keep-sorted start\n        'active-indicator-color': var(--_active-indicator-color),\n        'active-indicator-height': var(--_active-indicator-height),\n        'bottom-space': var(--_bottom-space),\n        'container-color': var(--_container-color),\n        'container-shape-end-end': var(--_container-shape-end-end),\n        'container-shape-end-start': var(--_container-shape-end-start),\n        'container-shape-start-end': var(--_container-shape-start-end),\n        'container-shape-start-start': var(--_container-shape-start-start),\n        'content-color': var(--_input-text-color),\n        'content-font': var(--_input-text-font),\n        'content-line-height': var(--_input-text-line-height),\n        'content-size': var(--_input-text-size),\n        'content-space': var(--_icon-input-space),\n        'content-weight': var(--_input-text-weight),\n        'disabled-active-indicator-color':\n          var(--_disabled-active-indicator-color),\n        'disabled-active-indicator-height':\n          var(--_disabled-active-indicator-height),\n        'disabled-active-indicator-opacity':\n          var(--_disabled-active-indicator-opacity),\n        'disabled-container-color': var(--_disabled-container-color),\n        'disabled-container-opacity': var(--_disabled-container-opacity),\n        'disabled-content-color': var(--_disabled-input-text-color),\n        'disabled-content-opacity': var(--_disabled-input-text-opacity),\n        'disabled-label-text-color': var(--_disabled-label-text-color),\n        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),\n        'disabled-leading-content-color': var(--_disabled-leading-icon-color),\n        'disabled-leading-content-opacity':\n          var(--_disabled-leading-icon-opacity),\n        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),\n        'disabled-supporting-text-opacity':\n          var(--_disabled-supporting-text-opacity),\n        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),\n        'disabled-trailing-content-opacity':\n          var(--_disabled-trailing-icon-opacity),\n        'error-active-indicator-color': var(--_error-active-indicator-color),\n        'error-content-color': var(--_error-input-text-color),\n        'error-focus-active-indicator-color':\n          var(--_error-focus-active-indicator-color),\n        'error-focus-content-color': var(--_error-focus-input-text-color),\n        'error-focus-label-text-color': var(--_error-focus-label-text-color),\n        'error-focus-leading-content-color':\n          var(--_error-focus-leading-icon-color),\n        'error-focus-supporting-text-color':\n          var(--_error-focus-supporting-text-color),\n        'error-focus-trailing-content-color':\n          var(--_error-focus-trailing-icon-color),\n        'error-hover-active-indicator-color':\n          var(--_error-hover-active-indicator-color),\n        'error-hover-content-color': var(--_error-hover-input-text-color),\n        'error-hover-label-text-color': var(--_error-hover-label-text-color),\n        'error-hover-leading-content-color':\n          var(--_error-hover-leading-icon-color),\n        'error-hover-state-layer-color': var(--_error-hover-state-layer-color),\n        'error-hover-state-layer-opacity':\n          var(--_error-hover-state-layer-opacity),\n        'error-hover-supporting-text-color':\n          var(--_error-hover-supporting-text-color),\n        'error-hover-trailing-content-color':\n          var(--_error-hover-trailing-icon-color),\n        'error-label-text-color': var(--_error-label-text-color),\n        'error-leading-content-color': var(--_error-leading-icon-color),\n        'error-supporting-text-color': var(--_error-supporting-text-color),\n        'error-trailing-content-color': var(--_error-trailing-icon-color),\n        'focus-active-indicator-color': var(--_focus-active-indicator-color),\n        'focus-active-indicator-height': var(--_focus-active-indicator-height),\n        'focus-content-color': var(--_focus-input-text-color),\n        'focus-label-text-color': var(--_focus-label-text-color),\n        'focus-leading-content-color': var(--_focus-leading-icon-color),\n        'focus-supporting-text-color': var(--_focus-supporting-text-color),\n        'focus-trailing-content-color': var(--_focus-trailing-icon-color),\n        'hover-active-indicator-color': var(--_hover-active-indicator-color),\n        'hover-active-indicator-height': var(--_hover-active-indicator-height),\n        'hover-content-color': var(--_hover-input-text-color),\n        'hover-label-text-color': var(--_hover-label-text-color),\n        'hover-leading-content-color': var(--_hover-leading-icon-color),\n        'hover-state-layer-color': var(--_hover-state-layer-color),\n        'hover-state-layer-opacity': var(--_hover-state-layer-opacity),\n        'hover-supporting-text-color': var(--_hover-supporting-text-color),\n        'hover-trailing-content-color': var(--_hover-trailing-icon-color),\n        'label-text-color': var(--_label-text-color),\n        'label-text-font': var(--_label-text-font),\n        'label-text-line-height': var(--_label-text-line-height),\n        'label-text-populated-line-height':\n          var(--_label-text-populated-line-height),\n        'label-text-populated-size': var(--_label-text-populated-size),\n        'label-text-size': var(--_label-text-size),\n        'label-text-weight': var(--_label-text-weight),\n        'leading-content-color': var(--_leading-icon-color),\n        'leading-space': var(--_leading-space),\n        'supporting-text-color': var(--_supporting-text-color),\n        'supporting-text-font': var(--_supporting-text-font),\n        'supporting-text-line-height': var(--_supporting-text-line-height),\n        'supporting-text-size': var(--_supporting-text-size),\n        'supporting-text-weight': var(--_supporting-text-weight),\n        'top-space': var(--_top-space),\n        'trailing-content-color': var(--_trailing-icon-color),\n        'trailing-space': var(--_trailing-space),\n        'with-label-bottom-space': var(--_with-label-bottom-space),\n        'with-label-top-space': var(--_with-label-top-space),\n        'with-leading-content-leading-space':\n          var(--_with-leading-icon-leading-space),\n        'with-trailing-content-trailing-space':\n          var(--_with-trailing-icon-trailing-space),\n        // go/keep-sorted end\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "textfield/internal/_icon.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles() {\n  .icon {\n    color: currentColor;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    fill: currentColor;\n    position: relative;\n  }\n\n  .icon ::slotted(*) {\n    // Remove excess whitespace below inline elements\n    display: flex;\n    // Absolutely position the icons within their `icon-size` container. This\n    // supports icon buttons whose actual width and height is greater than the\n    // 24px `icon-size` due to their 40px ripple.\n    position: absolute;\n  }\n\n  [has-start] .icon.leading {\n    font-size: var(--_leading-icon-size);\n    height: var(--_leading-icon-size);\n    width: var(--_leading-icon-size);\n  }\n\n  [has-end] .icon.trailing {\n    font-size: var(--_trailing-icon-size);\n    height: var(--_trailing-icon-size);\n    width: var(--_trailing-icon-size);\n  }\n}\n"
  },
  {
    "path": "textfield/internal/_input.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@mixin styles() {\n  .input-wrapper {\n    display: flex;\n  }\n\n  .input-wrapper > * {\n    // Inherit field CSS set on the input wrapper, like font, but not margin or\n    // padding. This wrapper is needed since text fields may have prefix and\n    // suffix text next to an <input>\n    all: inherit;\n    padding: 0;\n  }\n\n  .input {\n    caret-color: var(--_caret-color);\n    // remove extra height added by horizontal scrollbars\n    overflow-x: hidden;\n    text-align: inherit;\n\n    &::placeholder {\n      color: currentColor;\n      opacity: 1;\n    }\n\n    // Remove built-in datepicker icon on Chrome\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n    }\n\n    // Remove built-in search icons on Chrome when type='search'\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n\n    @media (forced-colors: active) {\n      background: none; // Remove background in Firefox HCM\n    }\n  }\n\n  // Optionally remove number input's spinner\n  .no-spinner .input {\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      display: none;\n    }\n\n    &[type='number'] {\n      -moz-appearance: textfield;\n    }\n  }\n\n  :focus-within .input {\n    caret-color: var(--_focus-caret-color);\n  }\n\n  .error:focus-within .input {\n    caret-color: var(--_error-focus-caret-color);\n  }\n\n  .text-field:not(.disabled) .prefix {\n    color: var(--_input-text-prefix-color);\n  }\n\n  .text-field:not(.disabled) .suffix {\n    color: var(--_input-text-suffix-color);\n  }\n\n  .text-field:not(.disabled) .input::placeholder {\n    color: var(--_input-text-placeholder-color);\n  }\n\n  .prefix,\n  .suffix {\n    text-wrap: nowrap;\n    width: min-content;\n  }\n\n  .prefix {\n    padding-inline-end: var(--_input-text-prefix-trailing-space);\n  }\n\n  .suffix {\n    padding-inline-start: var(--_input-text-suffix-leading-space);\n  }\n}\n"
  },
  {
    "path": "textfield/internal/_outlined-text-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../../field/outlined-field';\n@use '../../tokens';\n// go/keep-sorted end\n\n@mixin theme($tokens) {\n  $supported-tokens: tokens.$md-comp-outlined-text-field-supported-tokens;\n  @each $token, $value in $tokens {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'Token `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-outlined-text-field-#{$token}: #{$value};\n    }\n  }\n}\n\n@mixin styles() {\n  $tokens: tokens.md-comp-outlined-text-field-values();\n\n  :host {\n    // Only use the logical properties.\n    $tokens: map.remove($tokens, 'container-shape');\n    @each $token, $value in $tokens {\n      --_#{$token}: #{$value};\n    }\n\n    @include outlined-field.theme(\n      (\n        // go/keep-sorted start\n        'bottom-space': var(--_bottom-space),\n        'container-shape-end-end': var(--_container-shape-end-end),\n        'container-shape-end-start': var(--_container-shape-end-start),\n        'container-shape-start-end': var(--_container-shape-start-end),\n        'container-shape-start-start': var(--_container-shape-start-start),\n        'content-color': var(--_input-text-color),\n        'content-font': var(--_input-text-font),\n        'content-line-height': var(--_input-text-line-height),\n        'content-size': var(--_input-text-size),\n        'content-space': var(--_icon-input-space),\n        'content-weight': var(--_input-text-weight),\n        'disabled-content-color': var(--_disabled-input-text-color),\n        'disabled-content-opacity': var(--_disabled-input-text-opacity),\n        'disabled-label-text-color': var(--_disabled-label-text-color),\n        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),\n        'disabled-leading-content-color': var(--_disabled-leading-icon-color),\n        'disabled-leading-content-opacity':\n          var(--_disabled-leading-icon-opacity),\n        'disabled-outline-color': var(--_disabled-outline-color),\n        'disabled-outline-opacity': var(--_disabled-outline-opacity),\n        'disabled-outline-width': var(--_disabled-outline-width),\n        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),\n        'disabled-supporting-text-opacity':\n          var(--_disabled-supporting-text-opacity),\n        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),\n        'disabled-trailing-content-opacity':\n          var(--_disabled-trailing-icon-opacity),\n        'error-content-color': var(--_error-input-text-color),\n        'error-focus-content-color': var(--_error-focus-input-text-color),\n        'error-focus-label-text-color': var(--_error-focus-label-text-color),\n        'error-focus-leading-content-color':\n          var(--_error-focus-leading-icon-color),\n        'error-focus-outline-color': var(--_error-focus-outline-color),\n        'error-focus-supporting-text-color':\n          var(--_error-focus-supporting-text-color),\n        'error-focus-trailing-content-color':\n          var(--_error-focus-trailing-icon-color),\n        'error-hover-content-color': var(--_error-hover-input-text-color),\n        'error-hover-label-text-color': var(--_error-hover-label-text-color),\n        'error-hover-leading-content-color':\n          var(--_error-hover-leading-icon-color),\n        'error-hover-outline-color': var(--_error-hover-outline-color),\n        'error-hover-supporting-text-color':\n          var(--_error-hover-supporting-text-color),\n        'error-hover-trailing-content-color':\n          var(--_error-hover-trailing-icon-color),\n        'error-label-text-color': var(--_error-label-text-color),\n        'error-leading-content-color': var(--_error-leading-icon-color),\n        'error-outline-color': var(--_error-outline-color),\n        'error-supporting-text-color': var(--_error-supporting-text-color),\n        'error-trailing-content-color': var(--_error-trailing-icon-color),\n        'focus-content-color': var(--_focus-input-text-color),\n        'focus-label-text-color': var(--_focus-label-text-color),\n        'focus-leading-content-color': var(--_focus-leading-icon-color),\n        'focus-outline-color': var(--_focus-outline-color),\n        'focus-outline-width': var(--_focus-outline-width),\n        'focus-supporting-text-color': var(--_focus-supporting-text-color),\n        'focus-trailing-content-color': var(--_focus-trailing-icon-color),\n        'hover-content-color': var(--_hover-input-text-color),\n        'hover-label-text-color': var(--_hover-label-text-color),\n        'hover-leading-content-color': var(--_hover-leading-icon-color),\n        'hover-outline-color': var(--_hover-outline-color),\n        'hover-outline-width': var(--_hover-outline-width),\n        'hover-supporting-text-color': var(--_hover-supporting-text-color),\n        'hover-trailing-content-color': var(--_hover-trailing-icon-color),\n        'label-text-color': var(--_label-text-color),\n        'label-text-font': var(--_label-text-font),\n        'label-text-line-height': var(--_label-text-line-height),\n        'label-text-populated-line-height':\n          var(--_label-text-populated-line-height),\n        'label-text-populated-size': var(--_label-text-populated-size),\n        'label-text-size': var(--_label-text-size),\n        'label-text-weight': var(--_label-text-weight),\n        'leading-content-color': var(--_leading-icon-color),\n        'leading-space': var(--_leading-space),\n        'outline-color': var(--_outline-color),\n        'outline-width': var(--_outline-width),\n        'supporting-text-color': var(--_supporting-text-color),\n        'supporting-text-font': var(--_supporting-text-font),\n        'supporting-text-line-height': var(--_supporting-text-line-height),\n        'supporting-text-size': var(--_supporting-text-size),\n        'supporting-text-weight': var(--_supporting-text-weight),\n        'top-space': var(--_top-space),\n        'trailing-content-color': var(--_trailing-icon-color),\n        'trailing-space': var(--_trailing-space),\n        'with-leading-content-leading-space':\n          var(--_with-leading-icon-leading-space),\n        'with-trailing-content-trailing-space':\n          var(--_with-trailing-icon-trailing-space),\n        // go/keep-sorted end\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "textfield/internal/_shared.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use './icon';\n@use './input';\n// go/keep-sorted end\n\n@mixin styles() {\n  :host {\n    display: inline-flex;\n    outline: none;\n    resize: both;\n    // Match default text-align of `<input>` instead of `inherit`.\n    text-align: start;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .text-field,\n  .field {\n    width: 100%;\n  }\n\n  .text-field {\n    display: inline-flex;\n  }\n\n  .field {\n    cursor: text;\n  }\n\n  .disabled .field {\n    cursor: default;\n  }\n\n  .text-field,\n  .textarea .field {\n    // Note: only inherit default `resize: both` to the field when textarea.\n    resize: inherit;\n  }\n\n  slot[name='container'] {\n    border-radius: inherit;\n  }\n\n  @include icon.styles;\n  @include input.styles;\n}\n"
  },
  {
    "path": "textfield/internal/filled-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './filled-text-field';\n// go/keep-sorted end\n\n@include filled-text-field.styles;\n"
  },
  {
    "path": "textfield/internal/filled-text-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../field/filled-field.js';\n\nimport {literal} from 'lit/static-html.js';\n\nimport {TextField} from './text-field.js';\n\n/**\n * A filled text field component.\n */\nexport class FilledTextField extends TextField {\n  protected readonly fieldTag = literal`md-filled-field`;\n}\n"
  },
  {
    "path": "textfield/internal/outlined-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './outlined-text-field';\n// go/keep-sorted end\n\n@include outlined-text-field.styles;\n"
  },
  {
    "path": "textfield/internal/outlined-text-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../field/outlined-field.js';\n\nimport {literal} from 'lit/static-html.js';\n\nimport {TextField} from './text-field.js';\n\n/**\n * An outlined text field component\n */\nexport class OutlinedTextField extends TextField {\n  protected readonly fieldTag = literal`md-outlined-field`;\n}\n"
  },
  {
    "path": "textfield/internal/shared-styles.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use './shared';\n// go/keep-sorted end\n\n@include shared.styles;\n"
  },
  {
    "path": "textfield/internal/text-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {live} from 'lit/directives/live.js';\nimport {StyleInfo, styleMap} from 'lit/directives/style-map.js';\nimport {StaticValue, html as staticHtml} from 'lit/static-html.js';\n\nimport {Field} from '../../field/internal/field.js';\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {stringConverter} from '../../internal/controller/string-converter.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {\n  mixinOnReportValidity,\n  onReportValidity,\n} from '../../labs/behaviors/on-report-validity.js';\nimport {TextFieldValidator} from '../../labs/behaviors/validators/text-field-validator.js';\nimport {Validator} from '../../labs/behaviors/validators/validator.js';\n\n/**\n * Input types that are compatible with the text field.\n */\nexport type TextFieldType =\n  | 'email'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'url'\n  | 'textarea';\n\n/**\n * Input types that are not fully supported for the text field.\n */\nexport type UnsupportedTextFieldType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'file'\n  | 'month'\n  | 'time'\n  | 'week';\n\n/**\n * Input types that are incompatible with the text field.\n */\nexport type InvalidTextFieldType =\n  | 'button'\n  | 'checkbox'\n  | 'hidden'\n  | 'image'\n  | 'radio'\n  | 'range'\n  | 'reset'\n  | 'submit';\n\n// Separate variable needed for closure.\nconst textFieldBaseClass = mixinDelegatesAria(\n  mixinOnReportValidity(\n    mixinConstraintValidation(\n      mixinFormAssociated(mixinElementInternals(LitElement)),\n    ),\n  ),\n);\n\n/**\n * A text field component.\n *\n * @fires select {Event} The native `select` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)\n * --bubbles\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport abstract class TextField extends textFieldBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   */\n  @property({type: Boolean, reflect: true}) error = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * This error message overrides the error message displayed by\n   * `reportValidity()`.\n   */\n  @property({attribute: 'error-text'}) errorText = '';\n\n  /**\n   * The floating Material label of the textfield component. It informs the user\n   * about what information is requested for a text field. It is aligned with\n   * the input text, is always visible, and it floats when focused or when text\n   * is entered into the textfield. This label also sets accessibilty labels,\n   * but the accessible label is overriden by `aria-label`.\n   *\n   * Learn more about floating labels from the Material Design guidelines:\n   * https://m3.material.io/components/text-fields/guidelines\n   */\n  @property() label = '';\n\n  /**\n   * Disables the asterisk on the floating label, when the text field is\n   * required.\n   */\n  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;\n\n  /**\n   * Indicates that the user must specify a value for the input before the\n   * owning form can be submitted and will render an error state when\n   * `reportValidity()` is invoked when value is empty. Additionally the\n   * floating label will render an asterisk `\"*\"` when true.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required\n   */\n  @property({type: Boolean, reflect: true}) required = false;\n\n  /**\n   * The current value of the text field. It is always a string.\n   */\n  @property() value = '';\n\n  /**\n   * An optional prefix to display before the input value.\n   */\n  @property({attribute: 'prefix-text'}) prefixText = '';\n\n  /**\n   * An optional suffix to display after the input value.\n   */\n  @property({attribute: 'suffix-text'}) suffixText = '';\n\n  /**\n   * Whether or not the text field has a leading icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-leading-icon'})\n  hasLeadingIcon = false;\n\n  /**\n   * Whether or not the text field has a trailing icon. Used for SSR.\n   */\n  @property({type: Boolean, attribute: 'has-trailing-icon'})\n  hasTrailingIcon = false;\n\n  /**\n   * Conveys additional information below the text field, such as how it should\n   * be used.\n   */\n  @property({attribute: 'supporting-text'}) supportingText = '';\n\n  /**\n   * Override the input text CSS `direction`. Useful for RTL languages that use\n   * LTR notation for fractions.\n   */\n  @property({attribute: 'text-direction'}) textDirection = '';\n\n  /**\n   * The number of rows to display for a `type=\"textarea\"` text field.\n   * Defaults to 2.\n   */\n  @property({type: Number}) rows = 2;\n\n  /**\n   * The number of cols to display for a `type=\"textarea\"` text field.\n   * Defaults to 20.\n   */\n  @property({type: Number}) cols = 20;\n\n  // <input> properties\n  @property({reflect: true}) override inputMode = '';\n\n  /**\n   * Defines the greatest value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n   */\n  @property() max = '';\n\n  /**\n   * The maximum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n   */\n  @property({type: Number}) maxLength = -1;\n\n  /**\n   * Defines the most negative value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n   */\n  @property() min = '';\n\n  /**\n   * The minimum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n   */\n  @property({type: Number}) minLength = -1;\n\n  /**\n   * When true, hide the spinner for `type=\"number\"` text fields.\n   */\n  @property({type: Boolean, attribute: 'no-spinner'}) noSpinner = false;\n\n  /**\n   * A regular expression that the text field's value must match to pass\n   * constraint validation.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n   */\n  @property() pattern = '';\n\n  /**\n   * Defines the text displayed in the textfield when it has no value. Provides\n   * a brief hint to the user as to the expected type of data that should be\n   * entered into the control. Unlike `label`, the placeholder is not visible\n   * and does not float when the textfield has a value.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  @property({reflect: true, converter: stringConverter}) placeholder = '';\n\n  /**\n   * Indicates whether or not a user should be able to edit the text field's\n   * value.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n   */\n  @property({type: Boolean, reflect: true}) readOnly = false;\n\n  /**\n   * Indicates that input accepts multiple email addresses.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple\n   */\n  @property({type: Boolean, reflect: true}) multiple = false;\n\n  /**\n   * Gets or sets the direction in which selection occurred.\n   */\n  get selectionDirection() {\n    return this.getInputOrTextarea().selectionDirection;\n  }\n  set selectionDirection(value: 'forward' | 'backward' | 'none' | null) {\n    this.getInputOrTextarea().selectionDirection = value;\n  }\n\n  /**\n   * Gets or sets the end position or offset of a text selection.\n   */\n  get selectionEnd() {\n    return this.getInputOrTextarea().selectionEnd;\n  }\n  set selectionEnd(value: number | null) {\n    this.getInputOrTextarea().selectionEnd = value;\n  }\n\n  /**\n   * Gets or sets the starting position or offset of a text selection.\n   */\n  get selectionStart() {\n    return this.getInputOrTextarea().selectionStart;\n  }\n  set selectionStart(value: number | null) {\n    this.getInputOrTextarea().selectionStart = value;\n  }\n\n  /**\n   * Returns or sets the element's step attribute, which works with min and max\n   * to limit the increments at which a numeric or date-time value can be set.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @property() step = '';\n\n  /**\n   * The `<input>` type to use, defaults to \"text\". The type greatly changes how\n   * the text field behaves.\n   *\n   * Text fields support a limited number of `<input>` types:\n   *\n   * - text\n   * - textarea\n   * - email\n   * - number\n   * - password\n   * - search\n   * - tel\n   * - url\n   *\n   * See\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   * for more details on each input type.\n   */\n  @property({reflect: true})\n  type: TextFieldType | UnsupportedTextFieldType = 'text';\n\n  /**\n   * Describes what, if any, type of autocomplete functionality the input\n   * should provide.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  @property({reflect: true}) autocomplete = '';\n\n  /**\n   * The text field's value as a number.\n   */\n  get valueAsNumber() {\n    const input = this.getInput();\n    if (!input) {\n      return NaN;\n    }\n\n    return input.valueAsNumber;\n  }\n  set valueAsNumber(value: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsNumber = value;\n    this.value = input.value;\n  }\n\n  /**\n   * The text field's value as a Date.\n   */\n  get valueAsDate() {\n    const input = this.getInput();\n    if (!input) {\n      return null;\n    }\n\n    return input.valueAsDate;\n  }\n  set valueAsDate(value: Date | null) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.valueAsDate = value;\n    this.value = input.value;\n  }\n\n  protected abstract readonly fieldTag: StaticValue;\n\n  /**\n   * Returns true when the text field has been interacted with. Native\n   * validation errors only display in response to user interactions.\n   */\n  @state() private dirty = false;\n  @state() private focused = false;\n  /**\n   * Whether or not a native error has been reported via `reportValidity()`.\n   */\n  @state() private nativeError = false;\n  /**\n   * The validation message displayed from a native error via\n   * `reportValidity()`.\n   */\n  @state() private nativeErrorText = '';\n\n  private get hasError() {\n    return this.error || this.nativeError;\n  }\n\n  @query('.input')\n  private readonly inputOrTextarea!:\n    | HTMLInputElement\n    | HTMLTextAreaElement\n    | null;\n  @query('.field') private readonly field!: Field | null;\n  @queryAssignedElements({slot: 'leading-icon'})\n  private readonly leadingIcons!: Element[];\n  @queryAssignedElements({slot: 'trailing-icon'})\n  private readonly trailingIcons!: Element[];\n\n  /**\n   * Selects all the text in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select\n   */\n  select() {\n    this.getInputOrTextarea().select();\n  }\n\n  /**\n   * Replaces a range of text with a new string.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText\n   */\n  setRangeText(replacement: string): void;\n  setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode?: SelectionMode,\n  ): void;\n  setRangeText(...args: unknown[]) {\n    // Calling setRangeText with 1 vs 3-4 arguments has different behavior.\n    // Use spread syntax and type casting to ensure correct usage.\n    this.getInputOrTextarea().setRangeText(\n      ...(args as Parameters<HTMLInputElement['setRangeText']>),\n    );\n    this.value = this.getInputOrTextarea().value;\n  }\n\n  /**\n   * Sets the start and end positions of a selection in the text field.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n   *\n   * @param start The offset into the text field for the start of the selection.\n   * @param end The offset into the text field for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  setSelectionRange(\n    start: number | null,\n    end: number | null,\n    direction?: 'forward' | 'backward' | 'none',\n  ) {\n    this.getInputOrTextarea().setSelectionRange(start, end, direction);\n  }\n\n  /**\n   * Shows the browser picker for an input element of type \"date\", \"time\", etc.\n   *\n   * For a full list of supported types, see:\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker\n   */\n  showPicker() {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.showPicker();\n  }\n\n  /**\n   * Decrements the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown\n   *\n   * @param stepDecrement The number of steps to decrement, defaults to 1.\n   */\n  stepDown(stepDecrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepDown(stepDecrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Increments the value of a numeric type text field by `step` or `n` `step`\n   * number of times.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp\n   *\n   * @param stepIncrement The number of steps to increment, defaults to 1.\n   */\n  stepUp(stepIncrement?: number) {\n    const input = this.getInput();\n    if (!input) {\n      return;\n    }\n\n    input.stepUp(stepIncrement);\n    this.value = input.value;\n  }\n\n  /**\n   * Reset the text field to its default value.\n   */\n  reset() {\n    this.dirty = false;\n    this.value = this.getAttribute('value') ?? '';\n    this.nativeError = false;\n    this.nativeErrorText = '';\n  }\n\n  override attributeChangedCallback(\n    attribute: string,\n    newValue: string | null,\n    oldValue: string | null,\n  ) {\n    if (attribute === 'value' && this.dirty) {\n      // After user input, changing the value attribute no longer updates the\n      // text field's value (until reset). This matches native <input> behavior.\n      return;\n    }\n\n    super.attributeChangedCallback(attribute, newValue, oldValue);\n  }\n\n  protected override render() {\n    const classes = {\n      'disabled': this.disabled,\n      'error': !this.disabled && this.hasError,\n      'textarea': this.type === 'textarea',\n      'no-spinner': this.noSpinner,\n    };\n\n    return html`\n      <span class=\"text-field ${classMap(classes)}\">\n        ${this.renderField()}\n      </span>\n    `;\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    // Keep changedProperties arg so that subclasses may call it\n\n    // If a property such as `type` changes and causes the internal <input>\n    // value to change without dispatching an event, re-sync it.\n    const value = this.getInputOrTextarea().value;\n    if (this.value !== value) {\n      // Note this is typically inefficient in updated() since it schedules\n      // another update. However, it is needed for the <input> to fully render\n      // before checking its value.\n      this.value = value;\n    }\n  }\n\n  private renderField() {\n    return staticHtml`<${this.fieldTag}\n      class=\"field\"\n      count=${this.value.length}\n      ?disabled=${this.disabled}\n      ?error=${this.hasError}\n      error-text=${this.getErrorText()}\n      ?focused=${this.focused}\n      ?has-end=${this.hasTrailingIcon}\n      ?has-start=${this.hasLeadingIcon}\n      label=${this.label}\n      ?no-asterisk=${this.noAsterisk}\n      max=${this.maxLength}\n      ?populated=${!!this.value}\n      ?required=${this.required}\n      ?resizable=${this.type === 'textarea'}\n      supporting-text=${this.supportingText}\n    >\n      ${this.renderLeadingIcon()}\n      ${this.renderInputOrTextarea()}\n      ${this.renderTrailingIcon()}\n      <div id=\"description\" slot=\"aria-describedby\"></div>\n      <slot name=\"container\" slot=\"container\"></slot>\n    </${this.fieldTag}>`;\n  }\n\n  private renderLeadingIcon() {\n    return html`\n      <span class=\"icon leading\" slot=\"start\">\n        <slot name=\"leading-icon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n    `;\n  }\n\n  private renderTrailingIcon() {\n    return html`\n      <span class=\"icon trailing\" slot=\"end\">\n        <slot name=\"trailing-icon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n    `;\n  }\n\n  private renderInputOrTextarea() {\n    const style: StyleInfo = {'direction': this.textDirection};\n    const ariaLabel =\n      (this as ARIAMixinStrict).ariaLabel || this.label || nothing;\n    // lit-anaylzer `autocomplete` types are too strict\n    // tslint:disable-next-line:no-any\n    const autocomplete = this.autocomplete as any;\n\n    // These properties may be set to null if the attribute is removed, and\n    // `null > -1` is incorrectly `true`.\n    const hasMaxLength = (this.maxLength ?? -1) > -1;\n    const hasMinLength = (this.minLength ?? -1) > -1;\n    if (this.type === 'textarea') {\n      return html`\n        <textarea\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          autocomplete=${autocomplete || nothing}\n          name=${this.name || nothing}\n          ?disabled=${this.disabled}\n          maxlength=${hasMaxLength ? this.maxLength : nothing}\n          minlength=${hasMinLength ? this.minLength : nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          rows=${this.rows}\n          cols=${this.cols}\n          .value=${live(this.value)}\n          @change=${this.redispatchEvent}\n          @focus=${this.handleFocusChange}\n          @blur=${this.handleFocusChange}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent}></textarea>\n      `;\n    }\n\n    const prefix = this.renderPrefix();\n    const suffix = this.renderSuffix();\n\n    // TODO(b/243805848): remove `as unknown as number` and `as any` once lit\n    // analyzer is fixed\n    // tslint:disable-next-line:no-any\n    const inputMode = this.inputMode as any;\n    return html`\n      <div class=\"input-wrapper\">\n        ${prefix}\n        <input\n          class=\"input\"\n          style=${styleMap(style)}\n          aria-describedby=\"description\"\n          aria-invalid=${this.hasError}\n          aria-label=${ariaLabel}\n          autocomplete=${autocomplete || nothing}\n          name=${this.name || nothing}\n          ?disabled=${this.disabled}\n          inputmode=${inputMode || nothing}\n          max=${(this.max || nothing) as unknown as number}\n          maxlength=${hasMaxLength ? this.maxLength : nothing}\n          min=${(this.min || nothing) as unknown as number}\n          minlength=${hasMinLength ? this.minLength : nothing}\n          pattern=${this.pattern || nothing}\n          placeholder=${this.placeholder || nothing}\n          ?readonly=${this.readOnly}\n          ?required=${this.required}\n          ?multiple=${this.multiple}\n          step=${(this.step || nothing) as unknown as number}\n          type=${this.type}\n          .value=${live(this.value)}\n          @change=${this.redispatchEvent}\n          @focus=${this.handleFocusChange}\n          @blur=${this.handleFocusChange}\n          @input=${this.handleInput}\n          @select=${this.redispatchEvent} />\n        ${suffix}\n      </div>\n    `;\n  }\n\n  private renderPrefix() {\n    return this.renderAffix(this.prefixText, /* isSuffix */ false);\n  }\n\n  private renderSuffix() {\n    return this.renderAffix(this.suffixText, /* isSuffix */ true);\n  }\n\n  private renderAffix(text: string, isSuffix: boolean) {\n    if (!text) {\n      return nothing;\n    }\n\n    const classes = {\n      'suffix': isSuffix,\n      'prefix': !isSuffix,\n    };\n\n    return html`<span class=\"${classMap(classes)}\">${text}</span>`;\n  }\n\n  private getErrorText() {\n    return this.error ? this.errorText : this.nativeErrorText;\n  }\n\n  private handleFocusChange() {\n    // When calling focus() or reportValidity() during change, it's possible\n    // for blur to be called after the new focus event. Rather than set\n    // `this.focused` to true/false on focus/blur, we always set it to whether\n    // or not the input itself is focused.\n    this.focused = this.inputOrTextarea?.matches(':focus') ?? false;\n  }\n\n  private handleInput(event: InputEvent) {\n    this.dirty = true;\n    this.value = (event.target as HTMLInputElement).value;\n  }\n\n  private redispatchEvent(event: Event) {\n    redispatchEvent(this, event);\n  }\n\n  private getInputOrTextarea() {\n    if (!this.inputOrTextarea) {\n      // If the input is not yet defined, synchronously render.\n      // e.g.\n      // const textField = document.createElement('md-outlined-text-field');\n      // document.body.appendChild(textField);\n      // textField.focus(); // synchronously render\n      this.connectedCallback();\n      this.scheduleUpdate();\n    }\n\n    if (this.isUpdatePending) {\n      // If there are pending updates, synchronously perform them. This ensures\n      // that constraint validation properties (like `required`) are synced\n      // before interacting with input APIs that depend on them.\n      this.scheduleUpdate();\n    }\n\n    return this.inputOrTextarea!;\n  }\n\n  private getInput() {\n    if (this.type === 'textarea') {\n      return null;\n    }\n\n    return this.getInputOrTextarea() as HTMLInputElement;\n  }\n\n  private handleIconChange() {\n    this.hasLeadingIcon = this.leadingIcons.length > 0;\n    this.hasTrailingIcon = this.trailingIcons.length > 0;\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.value;\n  }\n\n  override formResetCallback() {\n    this.reset();\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.value = state;\n  }\n\n  override focus() {\n    // Required for the case that the user slots a focusable element into the\n    // leading icon slot such as an iconbutton due to how delegatesFocus works.\n    this.getInputOrTextarea().focus();\n  }\n\n  override [createValidator](): Validator<unknown> {\n    return new TextFieldValidator(() => ({\n      state: this,\n      renderedControl: this.inputOrTextarea,\n    }));\n  }\n\n  override [getValidityAnchor](): HTMLElement | null {\n    return this.inputOrTextarea;\n  }\n\n  override [onReportValidity](invalidEvent: Event | null) {\n    // Prevent default pop-up behavior.\n    invalidEvent?.preventDefault();\n\n    const prevMessage = this.getErrorText();\n    this.nativeError = !!invalidEvent;\n    this.nativeErrorText = this.validationMessage;\n\n    if (prevMessage === this.getErrorText()) {\n      this.field?.reannounceError();\n    }\n  }\n}\n"
  },
  {
    "path": "textfield/internal/text-field_test.ts",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\nimport '../../field/filled-field.js';\n\nimport {html, render} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {Environment} from '../../testing/environment.js';\nimport {createFormTests} from '../../testing/forms.js';\nimport {Harness} from '../../testing/harness.js';\nimport {TextFieldHarness} from '../harness.js';\n\nimport {TextField} from './text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-test-text-field': TestTextField;\n  }\n}\n\n@customElement('md-test-text-field')\nclass TestTextField extends TextField {\n  protected override readonly fieldTag = literal`md-filled-field`;\n\n  async getHasError() {\n    await this.updateComplete;\n    return (\n      this.renderRoot.querySelector('input')?.getAttribute('aria-invalid') ===\n      'true'\n    );\n  }\n\n  async getErrorTextValue() {\n    await this.updateComplete;\n    return this.renderRoot.querySelector('md-filled-field')?.errorText || '';\n  }\n}\n\ndescribe('TextField', () => {\n  const env = new Environment();\n\n  async function setupTest(\n    template = html`<md-test-text-field></md-test-text-field>`,\n  ) {\n    // Variant type does not matter for shared tests\n    const element = env.render(template).querySelector('md-test-text-field');\n    if (!element) {\n      throw new Error('Could not query rendered <md-test-text-field>.');\n    }\n\n    await env.waitForStability();\n    const input = element.renderRoot.querySelector('input');\n    if (!input) {\n      throw new Error('Could not query rendered <input>.');\n    }\n\n    return {\n      input,\n      testElement: element,\n      harness: new TextFieldHarness(element),\n    };\n  }\n\n  describe('focusing the input', () => {\n    it('should call focus the input on click', async () => {\n      const {harness, input} = await setupTest();\n\n      await harness.clickWithMouse();\n\n      expect(input.matches(':focus')).withContext('is input:focus').toBeTrue();\n    });\n\n    it('should NOT focus the input when elements inside text field are clicked', async () => {\n      const {harness, input} = await setupTest();\n      // Add a trailing icon button to click on\n      render(html`<button slot=\"trailing-icon\">X</button>`, harness.element);\n      const button = harness.element.querySelector('button');\n\n      expect(button).toBeDefined();\n      const buttonHarness = new Harness(button!);\n      await buttonHarness.clickWithMouse();\n\n      expect(input.matches(':focus')).withContext('is input:focus').toBeFalse();\n    });\n\n    it('should not focus the input when disabled', async () => {\n      const {harness, input} = await setupTest();\n      harness.element.disabled = true;\n      await env.waitForStability();\n\n      harness.element.focus();\n\n      expect(input.matches(':focus'))\n        .withContext('not input:focus')\n        .toBeFalse();\n    });\n\n    it('focus() should focus input', async () => {\n      const {harness, input} = await setupTest();\n\n      harness.element.focus();\n\n      expect(input.matches(':focus')).withContext('is input:focus').toBeTrue();\n    });\n\n    it('blur() should blur input', async () => {\n      const {harness, input} = await setupTest();\n\n      harness.element.focus();\n      harness.element.blur();\n\n      expect(input.matches(':focus'))\n        .withContext('not input:focus')\n        .toBeFalse();\n    });\n  });\n\n  describe('input events', () => {\n    it('should update the text field value', async () => {\n      const {harness} = await setupTest();\n\n      await harness.inputValue('Value');\n\n      expect(harness.element.value).toEqual('Value');\n    });\n\n    it('should redispatch input events', async () => {\n      const {harness, input} = await setupTest();\n      const inputHandler = jasmine.createSpy('inputHandler');\n      harness.element.addEventListener('input', inputHandler);\n\n      const event = new InputEvent('input', {\n        composed: true,\n        bubbles: true,\n      });\n      input.dispatchEvent(event);\n\n      expect(inputHandler).toHaveBeenCalledWith(event);\n    });\n  });\n\n  describe('resetting the input', () => {\n    it('should set value back to default value', async () => {\n      const {harness} = await setupTest();\n      harness.element.setAttribute('value', 'Default');\n      await env.waitForStability();\n\n      expect(harness.element.value).toBe('Default');\n      await harness.deleteValue();\n      await harness.inputValue('Value');\n      expect(harness.element.value).toBe('Value');\n      harness.element.reset();\n\n      expect(harness.element.value).toBe('Default');\n    });\n\n    it('should set value to empty string if there is no default', async () => {\n      const {harness} = await setupTest();\n\n      await harness.inputValue('Value');\n      harness.element.reset();\n\n      expect(harness.element.value).toBe('');\n    });\n  });\n\n  describe('default value', () => {\n    it('should update `value` before user input', async () => {\n      const {harness} = await setupTest();\n\n      harness.element.setAttribute('value', 'Default');\n      await env.waitForStability();\n\n      expect(harness.element.value).toBe('Default');\n    });\n\n    it('should update `value` multiple times', async () => {\n      const {harness} = await setupTest();\n\n      harness.element.setAttribute('value', 'First default');\n      await env.waitForStability();\n      harness.element.setAttribute('value', 'Second default');\n      await env.waitForStability();\n\n      expect(harness.element.value).toBe('Second default');\n    });\n\n    it('should NOT update `value` after user input', async () => {\n      const {harness} = await setupTest();\n\n      harness.element.setAttribute('value', 'First default');\n      await env.waitForStability();\n      await harness.deleteValue();\n      await harness.inputValue('Value');\n\n      harness.element.setAttribute('value', 'Second default');\n      await env.waitForStability();\n\n      expect(harness.element.value).toBe('Value');\n    });\n\n    it('should render `value` instead of default value attribute when `value` changes', async () => {\n      const {harness, input} = await setupTest();\n\n      harness.element.setAttribute('value', 'Default');\n      await env.waitForStability();\n      expect(input.value).toBe('Default');\n\n      harness.element.value = 'Value';\n      await env.waitForStability();\n      expect(input.value).toBe('Value');\n\n      harness.element.value = '';\n      await env.waitForStability();\n      expect(input.value).toBe('');\n      expect(harness.element.getAttribute('value')).toBe('Default');\n    });\n  });\n\n  describe('valueAsDate', () => {\n    it('should get input.valueAsDate', async () => {\n      const {testElement, input} = await setupTest();\n      const spy = spyOnProperty(input, 'valueAsDate', 'get').and.callThrough();\n\n      expect(testElement.valueAsDate).toBe(null);\n\n      expect(spy).toHaveBeenCalled();\n    });\n\n    it('should set input.valueAsDate', async () => {\n      const {testElement, input} = await setupTest();\n      testElement.type = 'date';\n      await env.waitForStability();\n      const spy = spyOnProperty(input, 'valueAsDate', 'set').and.callThrough();\n\n      const value = new Date();\n      testElement.valueAsDate = value;\n\n      expect(spy).toHaveBeenCalledWith(value);\n    });\n\n    it('should set value to string version of date', async () => {\n      const {testElement} = await setupTest();\n      testElement.type = 'date';\n      await env.waitForStability();\n\n      const expectedValue = '2022-01-01';\n      testElement.valueAsDate = new Date(expectedValue);\n\n      expect(testElement.value).toBe(expectedValue);\n    });\n  });\n\n  describe('valueAsNumber', () => {\n    it('should get input.valueAsNumber', async () => {\n      const {testElement, input} = await setupTest();\n      const spy = spyOnProperty(\n        input,\n        'valueAsNumber',\n        'get',\n      ).and.callThrough();\n\n      expect(testElement.valueAsNumber).toEqual(NaN);\n\n      expect(spy).toHaveBeenCalled();\n    });\n\n    it('should set input.valueAsNumber', async () => {\n      const {testElement, input} = await setupTest();\n      testElement.type = 'number';\n      await env.waitForStability();\n      const spy = spyOnProperty(\n        input,\n        'valueAsNumber',\n        'set',\n      ).and.callThrough();\n\n      testElement.valueAsNumber = 100;\n\n      expect(spy).toHaveBeenCalledWith(100);\n    });\n\n    it('should set value to string version of number', async () => {\n      const {testElement} = await setupTest();\n      testElement.type = 'number';\n      await env.waitForStability();\n\n      testElement.valueAsNumber = 100;\n\n      expect(testElement.value).toBe('100');\n    });\n  });\n\n  describe('native validation', () => {\n    describe('checkValidity()', () => {\n      it('should return true if the text field is valid', async () => {\n        const {testElement} = await setupTest();\n\n        expect(testElement.checkValidity()).toBeTrue();\n      });\n\n      it('should return false if the text field is invalid', async () => {\n        const {testElement} = await setupTest();\n        testElement.required = true;\n\n        expect(testElement.checkValidity()).toBeFalse();\n      });\n\n      it('should not dispatch an invalid event when valid', async () => {\n        const {testElement} = await setupTest();\n        const invalidHandler = jasmine.createSpy('invalidHandler');\n        testElement.addEventListener('invalid', invalidHandler);\n\n        testElement.checkValidity();\n\n        expect(invalidHandler).not.toHaveBeenCalled();\n      });\n\n      it('should dispatch an invalid event when invalid', async () => {\n        const {testElement} = await setupTest();\n        const invalidHandler = jasmine.createSpy('invalidHandler');\n        testElement.addEventListener('invalid', invalidHandler);\n        testElement.required = true;\n\n        testElement.checkValidity();\n\n        expect(invalidHandler).toHaveBeenCalled();\n      });\n\n      it('should return validity during input event', async () => {\n        const {testElement, harness} = await setupTest();\n\n        testElement.required = true;\n        await harness.inputValue('Value');\n\n        let isValidDuringInput = true;\n        testElement.addEventListener('input', () => {\n          isValidDuringInput = testElement.validity.valid;\n        });\n\n        await harness.deleteValue();\n\n        expect(isValidDuringInput)\n          .withContext('validity.valid result during input event')\n          .toBeFalse();\n      });\n\n      it('should return validity during change event', async () => {\n        const {testElement, harness} = await setupTest();\n        testElement.required = true;\n\n        await harness.inputValue('Value');\n        await harness.blur();\n\n        let isValidDuringChange = true;\n        testElement.addEventListener(\n          'change',\n          () => {\n            isValidDuringChange = testElement.validity.valid;\n          },\n          {once: true},\n        );\n\n        await harness.deleteValue();\n        await harness.blur();\n\n        expect(isValidDuringChange)\n          .withContext('validity.valid result during change event')\n          .toBeFalse();\n      });\n    });\n\n    describe('reportValidity()', () => {\n      it('should return true when valid and set error to false', async () => {\n        const {testElement} = await setupTest();\n\n        const valid = testElement.reportValidity();\n\n        expect(valid).withContext('valid').toBeTrue();\n        expect(await testElement.getHasError())\n          .withContext('testElement.getHasError()')\n          .toBeFalse();\n      });\n\n      it('should return false when invalid and set error to true', async () => {\n        const {testElement} = await setupTest();\n        testElement.required = true;\n\n        const valid = testElement.reportValidity();\n\n        expect(valid).withContext('valid').toBeFalse();\n        expect(await testElement.getHasError())\n          .withContext('testElement.getHasError()')\n          .toBeTrue();\n      });\n\n      it('should update error text to validationMessage', async () => {\n        const {testElement} = await setupTest();\n        const errorMessage = 'Error message';\n        testElement.setCustomValidity(errorMessage);\n\n        testElement.reportValidity();\n\n        expect(testElement.validationMessage).toEqual(errorMessage);\n        expect(await testElement.getErrorTextValue()).toEqual(errorMessage);\n      });\n\n      it('should not update error or error text if invalid event is canceled', async () => {\n        const {testElement} = await setupTest();\n        testElement.addEventListener('invalid', (e) => {\n          e.preventDefault();\n        });\n        const errorMessage = 'Error message';\n        testElement.setCustomValidity(errorMessage);\n\n        const valid = testElement.reportValidity();\n\n        expect(valid).withContext('valid').toBeFalse();\n        expect(await testElement.getHasError())\n          .withContext('testElement.getHasError()')\n          .toBeFalse();\n        expect(await testElement.getErrorTextValue()).toEqual('');\n      });\n\n      it('should be overridden by error and errorText', async () => {\n        const {testElement} = await setupTest();\n        testElement.error = true;\n        const errorMessage = 'Error message';\n        testElement.errorText = errorMessage;\n\n        const valid = testElement.reportValidity();\n        expect(valid).withContext('native validity should be valid').toBeTrue();\n        expect(await testElement.getHasError())\n          .withContext('testElement.getHasError()')\n          .toBeTrue();\n        expect(await testElement.getErrorTextValue()).toEqual(errorMessage);\n      });\n    });\n\n    describe('setCustomValidity()', () => {\n      it('should set a custom validationMessage', async () => {\n        const {testElement} = await setupTest();\n\n        const errorMessage = 'Error message';\n        testElement.setCustomValidity(errorMessage);\n        expect(testElement.validationMessage)\n          .withContext('validationMessage')\n          .toEqual(errorMessage);\n      });\n    });\n\n    describe('minLength and maxLength', () => {\n      it('should set attribute on input', async () => {\n        const {testElement, input} = await setupTest();\n        testElement.minLength = 2;\n        testElement.maxLength = 5;\n        await env.waitForStability();\n\n        expect(input.getAttribute('minLength'))\n          .withContext('minLength')\n          .toEqual('2');\n        expect(input.getAttribute('maxLength'))\n          .withContext('maxLength')\n          .toEqual('5');\n      });\n\n      it('should not set attribute if value is -1', async () => {\n        const {testElement, input} = await setupTest();\n        testElement.minLength = 2;\n        testElement.maxLength = 5;\n        await env.waitForStability();\n\n        expect(input.hasAttribute('minlength'))\n          .withContext('should have minlength')\n          .toBeTrue();\n        expect(input.hasAttribute('maxlength'))\n          .withContext('should have maxlength')\n          .toBeTrue();\n\n        testElement.minLength = -1;\n        testElement.maxLength = -1;\n        await env.waitForStability();\n\n        expect(input.hasAttribute('minlength'))\n          .withContext('should not have minlength')\n          .toBeFalse();\n        expect(input.hasAttribute('maxlength'))\n          .withContext('should not have maxlength')\n          .toBeFalse();\n      });\n    });\n\n    describe('min, max, and step', () => {\n      it('should set attribute on input', async () => {\n        const {testElement, input} = await setupTest();\n        testElement.type = 'number';\n        testElement.min = '2';\n        testElement.max = '5';\n        testElement.step = '1';\n        await env.waitForStability();\n\n        expect(input.getAttribute('min')).withContext('min').toEqual('2');\n        expect(input.getAttribute('max')).withContext('max').toEqual('5');\n        expect(input.getAttribute('step')).withContext('step').toEqual('1');\n      });\n\n      it('should not set attribute if value is empty', async () => {\n        const {testElement, input} = await setupTest();\n        testElement.type = 'number';\n        testElement.min = '2';\n        testElement.max = '5';\n        testElement.step = '1';\n        await env.waitForStability();\n\n        expect(input.hasAttribute('min'))\n          .withContext('should have min')\n          .toBeTrue();\n        expect(input.hasAttribute('max'))\n          .withContext('should have max')\n          .toBeTrue();\n        expect(input.hasAttribute('step'))\n          .withContext('should have step')\n          .toBeTrue();\n\n        testElement.min = '';\n        testElement.max = '';\n        testElement.step = '';\n        await env.waitForStability();\n\n        expect(input.hasAttribute('min'))\n          .withContext('should not have min')\n          .toBeFalse();\n        expect(input.hasAttribute('max'))\n          .withContext('should not have max')\n          .toBeFalse();\n        expect(input.hasAttribute('step'))\n          .withContext('should not have step')\n          .toBeFalse();\n      });\n    });\n\n    describe('pattern', () => {\n      it('should set attribute on input', async () => {\n        const {testElement, input} = await setupTest();\n        testElement.pattern = 'foo';\n        await env.waitForStability();\n\n        expect(input.getAttribute('pattern'))\n          .withContext('pattern')\n          .toEqual('foo');\n      });\n\n      it('should not set attribute if value is empty', async () => {\n        const {testElement, input} = await setupTest();\n        testElement.pattern = 'foo';\n        await env.waitForStability();\n\n        expect(input.hasAttribute('pattern'))\n          .withContext('should have pattern')\n          .toBeTrue();\n\n        testElement.pattern = '';\n        await env.waitForStability();\n\n        expect(input.hasAttribute('pattern'))\n          .withContext('should not have pattern')\n          .toBeFalse();\n      });\n    });\n  });\n\n  describe('stepUp()', () => {\n    it('should increment the value by `step`', async () => {\n      const {testElement} = await setupTest();\n      testElement.type = 'number';\n      testElement.valueAsNumber = 10;\n      testElement.step = '5';\n\n      testElement.stepUp();\n\n      expect(testElement.valueAsNumber).toEqual(15);\n    });\n  });\n\n  describe('stepDown()', () => {\n    it('should decrement the value by `step`', async () => {\n      const {testElement} = await setupTest();\n      testElement.type = 'number';\n      testElement.valueAsNumber = 10;\n      testElement.step = '5';\n\n      testElement.stepDown();\n\n      expect(testElement.valueAsNumber).toEqual(5);\n    });\n  });\n\n  describe('forms', () => {\n    createFormTests({\n      queryControl: (root) => root.querySelector('md-test-text-field'),\n      valueTests: [\n        {\n          name: 'unnamed',\n          render: () =>\n            html`<md-test-text-field value=\"Value\"></md-test-text-field>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form without a name')\n              .toHaveSize(0);\n          },\n        },\n        {\n          name: 'should add empty value',\n          render: () =>\n            html`<md-test-text-field name=\"input\"></md-test-text-field>`,\n          assertValue(formData) {\n            expect(formData.get('input')).toBe('');\n          },\n        },\n        {\n          name: 'with value',\n          render: () =>\n            html`<md-test-text-field\n              name=\"input\"\n              value=\"Value\"></md-test-text-field>`,\n          assertValue(formData) {\n            expect(formData.get('input')).toBe('Value');\n          },\n        },\n        {\n          name: 'disabled',\n          render: () =>\n            html`<md-test-text-field\n              name=\"input\"\n              value=\"Value\"\n              disabled></md-test-text-field>`,\n          assertValue(formData) {\n            expect(formData)\n              .withContext('should not add anything to form when disabled')\n              .toHaveSize(0);\n          },\n        },\n      ],\n      resetTests: [\n        {\n          name: 'reset to empty value',\n          render: () =>\n            html`<md-test-text-field name=\"input\"></md-test-text-field>`,\n          change(textField) {\n            textField.value = 'Value';\n          },\n          assertReset(textField) {\n            expect(textField.value)\n              .withContext('textField.value after reset')\n              .toBe('');\n          },\n        },\n        {\n          name: 'reset value',\n          render: () =>\n            html`<md-test-text-field\n              name=\"input\"\n              value=\"First\"></md-test-text-field>`,\n          change(textField) {\n            textField.value = 'Second';\n          },\n          assertReset(textField) {\n            expect(textField.value)\n              .withContext('textField.value after reset')\n              .toBe('First');\n          },\n        },\n      ],\n      restoreTests: [\n        {\n          name: 'restore value',\n          render: () =>\n            html`<md-test-text-field\n              name=\"input\"\n              value=\"Value\"></md-test-text-field>`,\n          assertRestored(textField) {\n            expect(textField.value)\n              .withContext('textField.value after restore')\n              .toBe('Value');\n          },\n        },\n      ],\n    });\n  });\n});\n"
  },
  {
    "path": "textfield/outlined-text-field.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/outlined-field.js';\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {OutlinedTextField} from './internal/outlined-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\nexport {type TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-text-field': MdOutlinedTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-text-field')\nexport class MdOutlinedTextField extends OutlinedTextField {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n\n  protected override readonly fieldTag = literal`md-outlined-field`;\n}\n"
  },
  {
    "path": "textfield/outlined-text-field_test.ts",
    "content": "/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// import 'jasmine'; (google3-only)\n\nimport {createTokenTests} from '../testing/tokens.js';\n\nimport {MdOutlinedTextField} from './outlined-text-field.js';\n\ndescribe('<md-outlined-field>', () => {\n  describe('.styles', () => {\n    createTokenTests(MdOutlinedTextField.styles);\n  });\n});\n"
  },
  {
    "path": "tokens/_index.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@forward 'md-comp-assist-chip' as md-comp-assist-chip-*;\n@forward 'md-comp-badge' as md-comp-badge-*;\n@forward 'md-comp-checkbox' as md-comp-checkbox-*;\n@forward 'md-comp-circular-progress' as md-comp-circular-progress-*;\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-elevation' as md-comp-elevation-*;\n@forward 'md-comp-fab' as md-comp-fab-*;\n@forward 'md-comp-fab-branded' as md-comp-fab-branded-*;\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-field' as md-comp-filled-field-*;\n@forward 'md-comp-filled-icon-button' as md-comp-filled-icon-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-focus-ring' as md-comp-focus-ring-*;\n@forward 'md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;\n@forward 'md-comp-icon' as md-comp-icon-*;\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-item' as md-comp-item-*;\n@forward 'md-comp-linear-progress' as md-comp-linear-progress-*;\n@forward 'md-comp-list' as md-comp-list-*;\n@forward 'md-comp-list-item' as md-comp-list-item-*;\n@forward 'md-comp-menu' as md-comp-menu-*;\n@forward 'md-comp-menu-item' as md-comp-menu-item-*;\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-outlined-button' as md-comp-outlined-button-*;\n@forward 'md-comp-outlined-card' as md-comp-outlined-card-*;\n@forward 'md-comp-outlined-field' as md-comp-outlined-field-*;\n@forward 'md-comp-outlined-icon-button' as md-comp-outlined-icon-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-primary-tab' as md-comp-primary-tab-*;\n@forward 'md-comp-radio' as md-comp-radio-*;\n@forward 'md-comp-ripple' as md-comp-ripple-*;\n@forward 'md-comp-secondary-tab' as md-comp-secondary-tab-*;\n@forward 'md-comp-slider' as md-comp-slider-*;\n@forward 'md-comp-suggestion-chip' as md-comp-suggestion-chip-*;\n@forward 'md-comp-switch' as md-comp-switch-*;\n@forward 'md-comp-test-table' as md-comp-test-table-*;\n@forward 'md-comp-text-button' as md-comp-text-button-*;\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// go/keep-sorted end\n"
  },
  {
    "path": "tokens/_md-comp-assist-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-assist-chip';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-icon-color',\n  'disabled-leading-icon-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'elevated-container-color',\n  'elevated-container-elevation',\n  'elevated-container-shadow-color',\n  'elevated-disabled-container-color',\n  'elevated-disabled-container-elevation',\n  'elevated-disabled-container-opacity',\n  'elevated-focus-container-elevation',\n  'elevated-hover-container-elevation',\n  'elevated-pressed-container-elevation',\n  'focus-label-text-color',\n  'focus-leading-icon-color',\n  'focus-outline-color',\n  'hover-label-text-color',\n  'hover-leading-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-label-space',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-space',\n  'outline-color',\n  'outline-width',\n  'pressed-label-text-color',\n  'pressed-leading-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'container-elevation',\n  'dragged-container-elevation',\n  'dragged-label-text-color',\n  'dragged-leading-icon-color',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-assist-chip.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      'leading-space': if($exclude-hardcoded-values, null, 16px),\n      'trailing-space': if($exclude-hardcoded-values, null, 16px),\n      'icon-label-space': if($exclude-hardcoded-values, null, 8px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 8px),\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"flat-*\" prefix (b/275577569)\n      'flat-container-elevation': 'container-elevation',\n      'flat-disabled-outline-color': 'disabled-outline-color',\n      'flat-disabled-outline-opacity': 'disabled-outline-opacity',\n      'flat-focus-outline-color': 'focus-outline-color',\n      'flat-outline-color': 'outline-color',\n      'flat-outline-width': 'outline-width',\n      // Remove \"with-*\" prefixes (b/273534858)\n      // Rename \"icon\" to \"leading-icon\" (b/275577569)\n      'with-icon-disabled-icon-color': 'disabled-leading-icon-color',\n      'with-icon-disabled-icon-opacity': 'disabled-leading-icon-opacity',\n      'with-icon-dragged-icon-color': 'dragged-leading-icon-color',\n      'with-icon-focus-icon-color': 'focus-leading-icon-color',\n      'with-icon-hover-icon-color': 'hover-leading-icon-color',\n      'with-icon-icon-color': 'leading-icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-pressed-icon-color': 'pressed-leading-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-assist-chip-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-assist-chip-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-badge.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-badge';\n// go/keep-sorted end\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$_unsupported-tokens: ('large-label-text-tracking', 'large-label-text-type');\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-badge.values($deps, $exclude-hardcoded-values);\n  $tokens: map.remove($tokens, $_unsupported-tokens...);\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-badge-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-checkbox.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-checkbox';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'container-size',\n  'disabled-container-opacity',\n  'disabled-outline-color',\n  'disabled-outline-width',\n  'focus-outline-color',\n  'focus-outline-width',\n  'hover-outline-color',\n  'hover-outline-width',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-size',\n  'outline-color',\n  'outline-width',\n  'pressed-outline-color',\n  'pressed-outline-width',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'selected-container-color',\n  'selected-disabled-container-color',\n  'selected-disabled-container-opacity',\n  'selected-disabled-icon-color',\n  'selected-focus-container-color',\n  'selected-focus-icon-color',\n  'selected-hover-container-color',\n  'selected-hover-icon-color',\n  'selected-hover-state-layer-color',\n  'selected-hover-state-layer-opacity',\n  'selected-icon-color',\n  'selected-pressed-container-color',\n  'selected-pressed-icon-color',\n  'selected-pressed-state-layer-color',\n  'selected-pressed-state-layer-opacity',\n  'state-layer-shape',\n  'state-layer-size',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'error-focus-outline-color',\n  'error-focus-state-layer-color',\n  'error-focus-state-layer-opacity',\n  'error-hover-outline-color',\n  'error-hover-state-layer-color',\n  'error-hover-state-layer-opacity',\n  'error-outline-color',\n  'error-pressed-outline-color',\n  'error-pressed-state-layer-color',\n  'error-pressed-state-layer-opacity',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'selected-disabled-container-outline-width',\n  'selected-error-container-color',\n  'selected-error-focus-container-color',\n  'selected-error-focus-icon-color',\n  'selected-error-hover-container-color',\n  'selected-error-hover-icon-color',\n  'selected-error-icon-color',\n  'selected-error-pressed-container-color',\n  'selected-error-pressed-icon-color',\n  'selected-focus-outline-width',\n  'selected-focus-state-layer-color',\n  'selected-focus-state-layer-opacity',\n  'selected-hover-outline-width',\n  'selected-outline-width',\n  'selected-pressed-outline-width',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-checkbox.values($deps, $exclude-hardcoded-values);\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove default \"unselected\" prefix (b/292244480)\n      'unselected-disabled-container-opacity': 'disabled-container-opacity',\n      'unselected-disabled-outline-color': 'disabled-outline-color',\n      'unselected-disabled-outline-width': 'disabled-outline-width',\n      'unselected-error-focus-outline-color': 'error-focus-outline-color',\n      'unselected-error-hover-outline-color': 'error-hover-outline-color',\n      'unselected-error-outline-color': 'error-outline-color',\n      'unselected-error-pressed-outline-color': 'error-pressed-outline-color',\n      'unselected-focus-outline-color': 'focus-outline-color',\n      'unselected-focus-outline-width': 'focus-outline-width',\n      'unselected-hover-outline-color': 'hover-outline-color',\n      'unselected-hover-outline-width': 'hover-outline-width',\n      'unselected-hover-state-layer-color': 'hover-state-layer-color',\n      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',\n      'unselected-outline-color': 'outline-color',\n      'unselected-outline-width': 'outline-width',\n      'unselected-pressed-outline-color': 'pressed-outline-color',\n      'unselected-pressed-outline-width': 'pressed-outline-width',\n      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',\n      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity',\n      'unselected-focus-state-layer-color': 'focus-state-layer-color',\n      'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-checkbox-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-checkbox-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-circular-progress.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:math';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'versions/v0_192/md-comp-circular-progress-indicator';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-indicator-color',\n  'active-indicator-width',\n  'four-color-active-indicator-four-color',\n  'four-color-active-indicator-one-color',\n  'four-color-active-indicator-three-color',\n  'four-color-active-indicator-two-color',\n  'size',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  // must be circular\n  'active-indicator-shape',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-circular-progress-indicator.values(\n      $deps,\n      $exclude-hardcoded-values\n    ),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens\n  );\n\n  @if not $exclude-hardcoded-values {\n    // must be set as a raw % for compatibility between rendering border or svg.\n    $width: map.get($tokens, 'active-indicator-width');\n    $size: map.get($tokens, 'size');\n    $container-padding: 4px;\n    $size-without-padding: $size - $container-padding - $container-padding;\n    $tokens: map.set(\n      $tokens,\n      'active-indicator-width',\n      math.div($width, $size-without-padding) * 100\n    );\n  }\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-circular-progress-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-dialog';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'headline-color',\n  'headline-font',\n  'headline-line-height',\n  'headline-size',\n  'headline-weight',\n  'icon-color',\n  'icon-size',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-weight',\n  // go/keep-sorted end\n);\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// Note: currently ignoring tokens for `action-*-label-text` and\n// `action-*-state-layer` since actions are spec'd as standard text buttons.\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'action-focus-label-text-color',\n  'action-focus-state-layer-color',\n  'action-focus-state-layer-opacity',\n  'action-hover-label-text-color',\n  'action-hover-state-layer-color',\n  'action-hover-state-layer-opacity',\n  'action-label-text-color',\n  'action-label-text-font',\n  'action-label-text-line-height',\n  'action-label-text-size',\n  'action-label-text-tracking',\n  'action-label-text-type',\n  'action-label-text-weight',\n  'action-pressed-label-text-color',\n  'action-pressed-state-layer-color',\n  'action-pressed-state-layer-opacity',\n  'container-elevation',\n  // Unused without a shadow color\n  'headline-tracking',\n  'headline-type',\n  'supporting-text-tracking',\n  'supporting-text-type',\n  // go/keep-sorted end\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-dialog.values($deps, $exclude-hardcoded-values);\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-icon-icon-color': 'icon-color',\n      'with-icon-icon-size': 'icon-size'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-dialog-container-shape, #{$value});\n      }\n\n      $tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-divider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'versions/v0_192/md-comp-divider';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'color',\n  'thickness',\n  // go/keep-sorted end\n);\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-divider.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-divider-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-elevated-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-elevated-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-height',\n  'container-shadow-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-container-color',\n  'disabled-container-elevation',\n  'disabled-container-opacity',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'focus-container-elevation',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-container-elevation',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-space',\n  'pressed-container-elevation',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-leading-icon-trailing-space',\n  'with-trailing-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-elevated-button.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      // b/198759625 - Remove once spacing tokens are formally added\n      // go/keep-sorted start\n      'leading-space': if($exclude-hardcoded-values, null, 24px),\n      'trailing-space': if($exclude-hardcoded-values, null, 24px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 16px),\n      'with-leading-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-leading-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 16px),\n      // go/keep-sorted end\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-icon-disabled-icon-color': 'disabled-icon-color',\n      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',\n      'with-icon-focus-icon-color': 'focus-icon-color',\n      'with-icon-hover-icon-color': 'hover-icon-color',\n      'with-icon-icon-color': 'icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-pressed-icon-color': 'pressed-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-elevated-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-elevated-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-elevated-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-elevated-card';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-shadow-color',\n  'container-shape',\n  // go/keep-sorted end\n);\n\n// TODO(b/307362112): Add interactive card tokens (hover, focus, pressed)\n// TODO(b/307361748): Add disabled cards tokens.\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'disabled-container-color',\n  'disabled-container-elevation',\n  'disabled-container-opacity',\n  'dragged-container-elevation',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'focus-container-elevation',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'hover-container-elevation',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'pressed-container-elevation',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-elevated-card.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-elevated-card-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-elevation.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'level',\n  'shadow-color',\n  // go/keep-sorted end\n);\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: (\n    'level': map.get($deps, 'md-sys-elevation', 'level0'),\n    'shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-elevation-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return validate.values($tokens, $supported-tokens: $supported-tokens);\n}\n"
  },
  {
    "path": "tokens/_md-comp-fab-branded.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-extended-fab-branded';\n@use 'versions/v0_192/md-comp-fab-branded';\n@use 'versions/v0_192/md-comp-fab-branded-large';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-height',\n  'container-shadow-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'container-width',\n  'focus-container-elevation',\n  'focus-label-text-color',\n  'hover-container-elevation',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'large-container-height',\n  'large-container-shape',\n  'large-container-shape-end-end',\n  'large-container-shape-end-start',\n  'large-container-shape-start-end',\n  'large-container-shape-start-start',\n  'large-container-width',\n  'large-icon-size',\n  'lowered-container-color',\n  'lowered-container-elevation',\n  'lowered-focus-container-elevation',\n  'lowered-hover-container-elevation',\n  'lowered-pressed-container-elevation',\n  'pressed-container-elevation',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  // go/keep-sorted end\n);\n\n@function _get-new-tokens($deps, $exclude-hardcoded-values) {\n  $large-tokens: md-comp-fab-branded-large.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $extended-branded-tokens: md-comp-extended-fab-branded.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n\n  @return (\n    'focus-label-text-color':\n      map.get($extended-branded-tokens, 'focus-label-text-color'),\n    'hover-label-text-color':\n      map.get($extended-branded-tokens, 'hover-label-text-color'),\n    'label-text-color': map.get($extended-branded-tokens, 'label-text-color'),\n    'label-text-font': map.get($extended-branded-tokens, 'label-text-font'),\n    'label-text-size': map.get($extended-branded-tokens, 'label-text-size'),\n    'label-text-line-height':\n      map.get($extended-branded-tokens, 'label-text-line-height'),\n    'label-text-weight': map.get($extended-branded-tokens, 'label-text-weight'),\n    'large-container-height': map.get($large-tokens, 'container-height'),\n    'large-container-shape': map.get($large-tokens, 'container-shape'),\n    'large-container-width': map.get($large-tokens, 'container-width'),\n    'large-icon-size': map.get($large-tokens, 'icon-size'),\n    'pressed-label-text-color':\n      map.get($extended-branded-tokens, 'pressed-label-text-color')\n  );\n}\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-fab-branded.values($deps, $exclude-hardcoded-values);\n  $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    $new-tokens,\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape')\n  );\n\n  $new-tokens: map.merge(\n    $new-tokens,\n    shape.get-new-logical-shape-tokens($new-tokens, 'large-container-shape')\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $shape-tokens: ('container-shape', 'large-container-shape');\n      @each $shape-token in $shape-tokens {\n        @if string.index($token, '#{$shape-token}-') == 1 {\n          // Add fallback to shorthand for logical shape properties.\n          $value: var(--md-fab-branded-#{$shape-token}, #{$value});\n        }\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-fab-branded-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-fab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-extended-fab-primary';\n@use 'versions/v0_192/md-comp-extended-fab-secondary';\n@use 'versions/v0_192/md-comp-extended-fab-surface';\n@use 'versions/v0_192/md-comp-extended-fab-tertiary';\n@use 'versions/v0_192/md-comp-fab-primary';\n@use 'versions/v0_192/md-comp-fab-secondary';\n@use 'versions/v0_192/md-comp-fab-surface';\n@use 'versions/v0_192/md-comp-fab-surface-large';\n@use 'versions/v0_192/md-comp-fab-surface-small';\n@use 'versions/v0_192/md-comp-fab-tertiary';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-height',\n  'container-shadow-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'container-width',\n  'focus-container-elevation',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-container-elevation',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'large-container-height',\n  'large-container-shape',\n  'large-container-shape-end-end',\n  'large-container-shape-end-start',\n  'large-container-shape-start-end',\n  'large-container-shape-start-start',\n  'large-container-width',\n  'large-icon-size',\n  'lowered-container-color',\n  'lowered-container-elevation',\n  'lowered-focus-container-elevation',\n  'lowered-hover-container-elevation',\n  'lowered-pressed-container-elevation',\n  'pressed-container-elevation',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'primary-container-color',\n  'primary-focus-icon-color',\n  'primary-focus-label-text-color',\n  'primary-hover-icon-color',\n  'primary-hover-label-text-color',\n  'primary-hover-state-layer-color',\n  'primary-icon-color',\n  'primary-label-text-color',\n  'primary-pressed-icon-color',\n  'primary-pressed-label-text-color',\n  'primary-pressed-state-layer-color',\n  'secondary-container-color',\n  'secondary-focus-icon-color',\n  'secondary-focus-label-text-color',\n  'secondary-hover-icon-color',\n  'secondary-hover-label-text-color',\n  'secondary-hover-state-layer-color',\n  'secondary-icon-color',\n  'secondary-label-text-color',\n  'secondary-pressed-icon-color',\n  'secondary-pressed-label-text-color',\n  'secondary-pressed-state-layer-color',\n  'small-container-height',\n  'small-container-shape',\n  'small-container-shape-end-end',\n  'small-container-shape-end-start',\n  'small-container-shape-start-end',\n  'small-container-shape-start-start',\n  'small-container-width',\n  'small-icon-size',\n  'tertiary-container-color',\n  'tertiary-focus-icon-color',\n  'tertiary-focus-label-text-color',\n  'tertiary-hover-icon-color',\n  'tertiary-hover-label-text-color',\n  'tertiary-hover-state-layer-color',\n  'tertiary-icon-color',\n  'tertiary-label-text-color',\n  'tertiary-pressed-icon-color',\n  'tertiary-pressed-label-text-color',\n  'tertiary-pressed-state-layer-color',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  // go/keep-sorted end\n);\n\n@function _get-new-tokens($deps, $exclude-hardcoded-values) {\n  $large-tokens: md-comp-fab-surface-large.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $small-tokens: md-comp-fab-surface-small.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $primary-tokens: md-comp-fab-primary.values($deps, $exclude-hardcoded-values);\n  $secondary-tokens: md-comp-fab-secondary.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $tertiary-tokens: md-comp-fab-tertiary.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $extended-surface-tokens: md-comp-extended-fab-surface.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $extended-primary-tokens: md-comp-extended-fab-primary.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $extended-secondary-tokens: md-comp-extended-fab-secondary.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $extended-tertiary-tokens: md-comp-extended-fab-tertiary.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n\n  @return (\n    // go/keep-sorted start\n    'focus-label-text-color':\n      map.get($extended-surface-tokens, 'focus-label-text-color'),\n    'hover-label-text-color':\n      map.get($extended-surface-tokens, 'hover-label-text-color'),\n    'label-text-color': map.get($extended-surface-tokens, 'label-text-color'),\n    'label-text-font': map.get($extended-surface-tokens, 'label-text-font'),\n    'label-text-line-height':\n      map.get($extended-surface-tokens, 'label-text-line-height'),\n    'label-text-size': map.get($extended-surface-tokens, 'label-text-size'),\n    'label-text-weight': map.get($extended-surface-tokens, 'label-text-weight'),\n    'large-container-height': map.get($large-tokens, 'container-height'),\n    'large-container-shape': map.get($large-tokens, 'container-shape'),\n    'large-container-width': map.get($large-tokens, 'container-width'),\n    'large-icon-size': map.get($large-tokens, 'icon-size'),\n    'pressed-label-text-color':\n      map.get($extended-surface-tokens, 'pressed-label-text-color'),\n    'primary-container-color': map.get($primary-tokens, 'container-color'),\n    'primary-focus-icon-color': map.get($primary-tokens, 'focus-icon-color'),\n    'primary-focus-label-text-color':\n      map.get($extended-primary-tokens, 'focus-label-text-color'),\n    'primary-hover-icon-color': map.get($primary-tokens, 'hover-icon-color'),\n    'primary-hover-label-text-color':\n      map.get($extended-primary-tokens, 'hover-label-text-color'),\n    'primary-hover-state-layer-color':\n      map.get($primary-tokens, 'hover-state-layer-color'),\n    'primary-icon-color': map.get($primary-tokens, 'icon-color'),\n    'primary-label-text-color':\n      map.get($extended-primary-tokens, 'label-text-color'),\n    'primary-pressed-icon-color': map.get($primary-tokens, 'pressed-icon-color'),\n    'primary-pressed-label-text-color':\n      map.get($extended-primary-tokens, 'pressed-label-text-color'),\n    'primary-pressed-state-layer-color':\n      map.get($primary-tokens, 'pressed-state-layer-color'),\n    'secondary-container-color': map.get($secondary-tokens, 'container-color'),\n    'secondary-focus-icon-color': map.get($secondary-tokens, 'focus-icon-color'),\n    'secondary-focus-label-text-color':\n      map.get($extended-secondary-tokens, 'focus-label-text-color'),\n    'secondary-hover-icon-color': map.get($secondary-tokens, 'hover-icon-color'),\n    'secondary-hover-label-text-color':\n      map.get($extended-secondary-tokens, 'hover-label-text-color'),\n    'secondary-hover-state-layer-color':\n      map.get($secondary-tokens, 'hover-state-layer-color'),\n    'secondary-icon-color': map.get($secondary-tokens, 'icon-color'),\n    'secondary-label-text-color':\n      map.get($extended-secondary-tokens, 'label-text-color'),\n    'secondary-pressed-icon-color':\n      map.get($secondary-tokens, 'pressed-icon-color'),\n    'secondary-pressed-label-text-color':\n      map.get($extended-secondary-tokens, 'pressed-label-text-color'),\n    'secondary-pressed-state-layer-color':\n      map.get($secondary-tokens, 'pressed-state-layer-color'),\n    'small-container-height': map.get($small-tokens, 'container-height'),\n    'small-container-shape': map.get($small-tokens, 'container-shape'),\n    'small-container-width': map.get($small-tokens, 'container-width'),\n    'small-icon-size': map.get($small-tokens, 'icon-size'),\n    'tertiary-container-color': map.get($tertiary-tokens, 'container-color'),\n    'tertiary-focus-icon-color': map.get($tertiary-tokens, 'focus-icon-color'),\n    'tertiary-focus-label-text-color':\n      map.get($extended-tertiary-tokens, 'focus-label-text-color'),\n    'tertiary-hover-icon-color': map.get($tertiary-tokens, 'hover-icon-color'),\n    'tertiary-hover-label-text-color':\n      map.get($extended-tertiary-tokens, 'hover-label-text-color'),\n    'tertiary-hover-state-layer-color':\n      map.get($tertiary-tokens, 'hover-state-layer-color'),\n    'tertiary-icon-color': map.get($tertiary-tokens, 'icon-color'),\n    'tertiary-label-text-color':\n      map.get($extended-tertiary-tokens, 'label-text-color'),\n    'tertiary-pressed-icon-color':\n      map.get($tertiary-tokens, 'pressed-icon-color'),\n    'tertiary-pressed-label-text-color':\n      map.get($extended-tertiary-tokens, 'pressed-label-text-color'),\n    'tertiary-pressed-state-layer-color':\n      map.get($tertiary-tokens, 'pressed-state-layer-color'),\n    // go/keep-sorted end\n  );\n}\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-fab-surface.values($deps, $exclude-hardcoded-values);\n  $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    $new-tokens,\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape')\n  );\n\n  $new-tokens: map.merge(\n    $new-tokens,\n    shape.get-new-logical-shape-tokens(\n      $new-tokens,\n      'large-container-shape',\n      'small-container-shape'\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $shape-tokens: (\n        'container-shape',\n        'large-container-shape',\n        'small-container-shape'\n      );\n\n      @each $shape-token in $shape-tokens {\n        @if string.index($token, '#{$shape-token}-') == 1 {\n          // Add fallback to shorthand for logical shape properties.\n          $value: var(--md-fab-#{$shape-token}, #{$value});\n        }\n      }\n\n      $tokens: map.set($tokens, $token, var(--md-fab-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-filled-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-height',\n  'container-shadow-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-container-color',\n  'disabled-container-elevation',\n  'disabled-container-opacity',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'focus-container-elevation',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-container-elevation',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-space',\n  'pressed-container-elevation',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-leading-icon-trailing-space',\n  'with-trailing-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-filled-button.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      // b/198759625 - Remove once spacing tokens are formally added\n      // go/keep-sorted start\n      'leading-space': if($exclude-hardcoded-values, null, 24px),\n      'trailing-space': if($exclude-hardcoded-values, null, 24px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 16px),\n      'with-leading-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-leading-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 16px),\n      // go/keep-sorted end\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-icon-disabled-icon-color': 'disabled-icon-color',\n      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',\n      'with-icon-focus-icon-color': 'focus-icon-color',\n      'with-icon-hover-icon-color': 'hover-icon-color',\n      'with-icon-icon-color': 'icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-pressed-icon-color': 'pressed-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filled-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-filled-card';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-shadow-color',\n  'container-shape',\n  // go/keep-sorted end\n);\n\n// TODO(b/307362112): Add interactive card tokens (hover, focus, pressed)\n// TODO(b/307361748): Add disabled cards tokens.\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'disabled-container-color',\n  'disabled-container-elevation',\n  'disabled-container-opacity',\n  'dragged-container-elevation',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'focus-container-elevation',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'hover-container-elevation',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'pressed-container-elevation',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-filled-card.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-card-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-filled-text-field';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-indicator-color',\n  'active-indicator-height',\n  'bottom-space',\n  'container-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'content-color',\n  'content-font',\n  'content-line-height',\n  'content-size',\n  'content-space',\n  'content-weight',\n  'disabled-active-indicator-color',\n  'disabled-active-indicator-height',\n  'disabled-active-indicator-opacity',\n  'disabled-container-color',\n  'disabled-container-opacity',\n  'disabled-content-color',\n  'disabled-content-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-content-color',\n  'disabled-leading-content-opacity',\n  'disabled-supporting-text-color',\n  'disabled-supporting-text-opacity',\n  'disabled-trailing-content-color',\n  'disabled-trailing-content-opacity',\n  'error-active-indicator-color',\n  'error-content-color',\n  'error-focus-active-indicator-color',\n  'error-focus-content-color',\n  'error-focus-label-text-color',\n  'error-focus-leading-content-color',\n  'error-focus-supporting-text-color',\n  'error-focus-trailing-content-color',\n  'error-hover-active-indicator-color',\n  'error-hover-content-color',\n  'error-hover-label-text-color',\n  'error-hover-leading-content-color',\n  'error-hover-state-layer-color',\n  'error-hover-state-layer-opacity',\n  'error-hover-supporting-text-color',\n  'error-hover-trailing-content-color',\n  'error-label-text-color',\n  'error-leading-content-color',\n  'error-supporting-text-color',\n  'error-trailing-content-color',\n  'focus-active-indicator-color',\n  'focus-active-indicator-height',\n  'focus-content-color',\n  'focus-label-text-color',\n  'focus-leading-content-color',\n  'focus-supporting-text-color',\n  'focus-trailing-content-color',\n  'hover-active-indicator-color',\n  'hover-active-indicator-height',\n  'hover-content-color',\n  'hover-label-text-color',\n  'hover-leading-content-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'hover-supporting-text-color',\n  'hover-trailing-content-color',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-populated-line-height',\n  'label-text-populated-size',\n  'label-text-size',\n  'label-text-weight',\n  'leading-content-color',\n  'leading-space',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-leading-space',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-top-space',\n  'supporting-text-trailing-space',\n  'supporting-text-weight',\n  'top-space',\n  'trailing-content-color',\n  'trailing-space',\n  'with-label-bottom-space',\n  'with-label-top-space',\n  'with-leading-content-leading-space',\n  'with-trailing-content-trailing-space',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $text-field: md-comp-filled-text-field.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n\n  $tokens: (\n    // go/keep-sorted start\n    'active-indicator-color': map.get($text-field, 'active-indicator-color'),\n    'active-indicator-height': map.get($text-field, 'active-indicator-height'),\n    'bottom-space': if($exclude-hardcoded-values, null, 16px),\n    'container-color': map.get($text-field, 'container-color'),\n    'container-shape': map.get($text-field, 'container-shape'),\n    'content-color': map.get($text-field, 'input-text-color'),\n    'content-font': map.get($text-field, 'input-text-font'),\n    'content-line-height': map.get($text-field, 'input-text-line-height'),\n    'content-size': map.get($text-field, 'input-text-size'),\n    'content-space': if($exclude-hardcoded-values, null, 16px),\n    'content-weight': map.get($text-field, 'input-text-weight'),\n    'disabled-active-indicator-color':\n      map.get($text-field, 'disabled-active-indicator-color'),\n    'disabled-active-indicator-height':\n      map.get($text-field, 'disabled-active-indicator-height'),\n    'disabled-active-indicator-opacity':\n      map.get($text-field, 'disabled-active-indicator-opacity'),\n    'disabled-container-color': map.get($text-field, 'disabled-container-color'),\n    'disabled-container-opacity':\n      map.get($text-field, 'disabled-container-opacity'),\n    'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),\n    'disabled-content-opacity':\n      map.get($text-field, 'disabled-input-text-opacity'),\n    'disabled-label-text-color':\n      map.get($text-field, 'disabled-label-text-color'),\n    'disabled-label-text-opacity':\n      map.get($text-field, 'disabled-label-text-opacity'),\n    'disabled-leading-content-color':\n      map.get($text-field, 'disabled-leading-icon-color'),\n    'disabled-leading-content-opacity':\n      map.get($text-field, 'disabled-leading-icon-opacity'),\n    'disabled-supporting-text-color':\n      map.get($text-field, 'disabled-supporting-text-color'),\n    'disabled-supporting-text-opacity':\n      map.get($text-field, 'disabled-supporting-text-opacity'),\n    'disabled-trailing-content-color':\n      map.get($text-field, 'disabled-trailing-icon-color'),\n    'disabled-trailing-content-opacity':\n      map.get($text-field, 'disabled-trailing-icon-opacity'),\n    'error-active-indicator-color':\n      map.get($text-field, 'error-active-indicator-color'),\n    'error-content-color': map.get($text-field, 'error-input-text-color'),\n    'error-focus-active-indicator-color':\n      map.get($text-field, 'error-focus-active-indicator-color'),\n    'error-focus-content-color':\n      map.get($text-field, 'error-focus-leading-icon-color'),\n    'error-focus-label-text-color':\n      map.get($text-field, 'error-focus-label-text-color'),\n    'error-focus-leading-content-color':\n      map.get($text-field, 'error-focus-leading-icon-color'),\n    'error-focus-supporting-text-color':\n      map.get($text-field, 'error-focus-supporting-text-color'),\n    'error-focus-trailing-content-color':\n      map.get($text-field, 'error-focus-trailing-icon-color'),\n    'error-hover-active-indicator-color':\n      map.get($text-field, 'error-hover-active-indicator-color'),\n    'error-hover-content-color':\n      map.get($text-field, 'error-hover-input-text-color'),\n    'error-hover-label-text-color':\n      map.get($text-field, 'error-hover-label-text-color'),\n    'error-hover-leading-content-color':\n      map.get($text-field, 'error-hover-leading-icon-color'),\n    'error-hover-state-layer-color':\n      map.get($text-field, 'error-hover-state-layer-color'),\n    'error-hover-state-layer-opacity':\n      map.get($text-field, 'error-hover-state-layer-opacity'),\n    'error-hover-supporting-text-color':\n      map.get($text-field, 'error-hover-supporting-text-color'),\n    'error-hover-trailing-content-color':\n      map.get($text-field, 'error-hover-trailing-icon-color'),\n    'error-label-text-color': map.get($text-field, 'error-label-text-color'),\n    'error-leading-content-color':\n      map.get($text-field, 'error-leading-icon-color'),\n    'error-supporting-text-color':\n      map.get($text-field, 'error-supporting-text-color'),\n    'error-trailing-content-color':\n      map.get($text-field, 'error-trailing-icon-color'),\n    'focus-active-indicator-color':\n      map.get($text-field, 'focus-active-indicator-color'),\n    // TODO(b/259455114): remove when focus tokens update to 3px\n    'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px),\n    'focus-content-color': map.get($text-field, 'focus-input-text-color'),\n    'focus-label-text-color': map.get($text-field, 'focus-label-text-color'),\n    'focus-leading-content-color':\n      map.get($text-field, 'focus-leading-icon-color'),\n    'focus-supporting-text-color':\n      map.get($text-field, 'focus-supporting-text-color'),\n    'focus-trailing-content-color':\n      map.get($text-field, 'focus-trailing-icon-color'),\n    'hover-active-indicator-color':\n      map.get($text-field, 'hover-active-indicator-color'),\n    'hover-active-indicator-height':\n      map.get($text-field, 'hover-active-indicator-height'),\n    'hover-content-color': map.get($text-field, 'hover-input-text-color'),\n    'hover-label-text-color': map.get($text-field, 'hover-label-text-color'),\n    'hover-leading-content-color':\n      map.get($text-field, 'hover-leading-icon-color'),\n    'hover-state-layer-color': map.get($text-field, 'hover-state-layer-color'),\n    'hover-state-layer-opacity':\n      map.get($text-field, 'hover-state-layer-opacity'),\n    'hover-supporting-text-color':\n      map.get($text-field, 'hover-supporting-text-color'),\n    'hover-trailing-content-color':\n      map.get($text-field, 'hover-trailing-icon-color'),\n    'label-text-color': map.get($text-field, 'label-text-color'),\n    'label-text-font': map.get($text-field, 'label-text-font'),\n    'label-text-line-height': map.get($text-field, 'label-text-line-height'),\n    'label-text-populated-line-height':\n      map.get($text-field, 'label-text-populated-line-height'),\n    'label-text-populated-size':\n      map.get($text-field, 'label-text-populated-size'),\n    'label-text-size': map.get($text-field, 'label-text-size'),\n    'label-text-weight': map.get($text-field, 'label-text-weight'),\n    'leading-content-color': map.get($text-field, 'leading-icon-color'),\n    'leading-space': if($exclude-hardcoded-values, null, 16px),\n    'supporting-text-color': map.get($text-field, 'supporting-text-color'),\n    'supporting-text-font': map.get($text-field, 'supporting-text-font'),\n    'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px),\n    'supporting-text-line-height':\n      map.get($text-field, 'supporting-text-line-height'),\n    'supporting-text-size': map.get($text-field, 'supporting-text-size'),\n    'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px),\n    'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),\n    'supporting-text-weight': map.get($text-field, 'supporting-text-weight'),\n    'top-space': if($exclude-hardcoded-values, null, 16px),\n    'trailing-content-color': map.get($text-field, 'trailing-icon-color'),\n    'trailing-space': if($exclude-hardcoded-values, null, 16px),\n    'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),\n    'with-label-top-space': if($exclude-hardcoded-values, null, 8px),\n    'with-leading-content-leading-space':\n      if($exclude-hardcoded-values, null, 12px),\n    'with-trailing-content-trailing-space':\n      if($exclude-hardcoded-values, null, 12px),\n    // go/keep-sorted end\n  );\n\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filled-field-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-field-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-filled-icon-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'container-width',\n  'disabled-container-color',\n  'disabled-container-opacity',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'focus-icon-color',\n  'hover-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'pressed-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'selected-container-color',\n  'toggle-focus-icon-color',\n  'toggle-hover-icon-color',\n  'toggle-hover-state-layer-color',\n  'toggle-icon-color',\n  'toggle-pressed-icon-color',\n  'toggle-pressed-state-layer-color',\n  'toggle-selected-focus-icon-color',\n  'toggle-selected-hover-icon-color',\n  'toggle-selected-hover-state-layer-color',\n  'toggle-selected-icon-color',\n  'toggle-selected-pressed-icon-color',\n  'toggle-selected-pressed-state-layer-color',\n  // Note: filled icon buttons have three container colors,\n  // \"container-color\" for regular, then selected/unselected for toggle.\n  'unselected-container-color',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'toggle-focus-state-layer-color',\n  'toggle-selected-focus-state-layer-color',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-filled-icon-button.values($deps, $exclude-hardcoded-values);\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove default \"unselected\" prefix (b/292244480)\n      'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color',\n      'toggle-unselected-hover-icon-color': 'toggle-hover-icon-color',\n      'toggle-unselected-hover-state-layer-color':\n        'toggle-hover-state-layer-color',\n      'toggle-unselected-icon-color': 'toggle-icon-color',\n      'toggle-unselected-pressed-icon-color': 'toggle-pressed-icon-color',\n      'toggle-unselected-pressed-state-layer-color':\n        'toggle-pressed-state-layer-color',\n      'toggle-unselected-focus-state-layer-color':\n        'toggle-focus-state-layer-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filled-icon-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-icon-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-filled-select';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'text-field-active-indicator-color',\n  'text-field-active-indicator-height',\n  'text-field-container-color',\n  'text-field-container-shape',\n  'text-field-container-shape-end-end',\n  'text-field-container-shape-end-start',\n  'text-field-container-shape-start-end',\n  'text-field-container-shape-start-start',\n  'text-field-disabled-active-indicator-color',\n  'text-field-disabled-active-indicator-height',\n  'text-field-disabled-active-indicator-opacity',\n  'text-field-disabled-container-color',\n  'text-field-disabled-container-opacity',\n  'text-field-disabled-input-text-color',\n  'text-field-disabled-input-text-opacity',\n  'text-field-disabled-label-text-color',\n  'text-field-disabled-label-text-opacity',\n  'text-field-disabled-leading-icon-color',\n  'text-field-disabled-leading-icon-opacity',\n  'text-field-disabled-supporting-text-color',\n  'text-field-disabled-supporting-text-opacity',\n  'text-field-disabled-trailing-icon-color',\n  'text-field-disabled-trailing-icon-opacity',\n  'text-field-error-active-indicator-color',\n  'text-field-error-focus-active-indicator-color',\n  'text-field-error-focus-input-text-color',\n  'text-field-error-focus-label-text-color',\n  'text-field-error-focus-leading-icon-color',\n  'text-field-error-focus-supporting-text-color',\n  'text-field-error-focus-trailing-icon-color',\n  'text-field-error-hover-active-indicator-color',\n  'text-field-error-hover-input-text-color',\n  'text-field-error-hover-label-text-color',\n  'text-field-error-hover-leading-icon-color',\n  'text-field-error-hover-state-layer-color',\n  'text-field-error-hover-state-layer-opacity',\n  'text-field-error-hover-supporting-text-color',\n  'text-field-error-hover-trailing-icon-color',\n  'text-field-error-input-text-color',\n  'text-field-error-label-text-color',\n  'text-field-error-leading-icon-color',\n  'text-field-error-supporting-text-color',\n  'text-field-error-trailing-icon-color',\n  'text-field-focus-active-indicator-color',\n  'text-field-focus-active-indicator-height',\n  'text-field-focus-input-text-color',\n  'text-field-focus-label-text-color',\n  'text-field-focus-leading-icon-color',\n  'text-field-focus-supporting-text-color',\n  'text-field-focus-trailing-icon-color',\n  'text-field-hover-active-indicator-color',\n  'text-field-hover-active-indicator-height',\n  'text-field-hover-input-text-color',\n  'text-field-hover-label-text-color',\n  'text-field-hover-leading-icon-color',\n  'text-field-hover-state-layer-color',\n  'text-field-hover-state-layer-opacity',\n  'text-field-hover-supporting-text-color',\n  'text-field-hover-trailing-icon-color',\n  'text-field-input-text-color',\n  'text-field-input-text-font',\n  'text-field-input-text-line-height',\n  'text-field-input-text-size',\n  'text-field-input-text-weight',\n  'text-field-label-text-color',\n  'text-field-label-text-font',\n  'text-field-label-text-line-height',\n  'text-field-label-text-populated-line-height',\n  'text-field-label-text-populated-size',\n  'text-field-label-text-size',\n  'text-field-label-text-weight',\n  'text-field-leading-icon-color',\n  'text-field-leading-icon-size',\n  'text-field-supporting-text-color',\n  'text-field-supporting-text-font',\n  'text-field-supporting-text-line-height',\n  'text-field-supporting-text-size',\n  'text-field-supporting-text-weight',\n  'text-field-trailing-icon-color',\n  'text-field-trailing-icon-size',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'menu-cascading-menu-indicator-icon-color',\n  'menu-cascading-menu-indicator-icon-size',\n  'menu-container-color',\n  'menu-container-elevation',\n  'menu-container-shadow-color',\n  'menu-container-shape',\n  'menu-divider-color',\n  'menu-divider-height',\n  'menu-list-item-container-height',\n  'menu-list-item-label-text-color',\n  'menu-list-item-label-text-font',\n  'menu-list-item-label-text-line-height',\n  'menu-list-item-label-text-size',\n  'menu-list-item-label-text-tracking',\n  'menu-list-item-label-text-type',\n  'menu-list-item-label-text-weight',\n  'menu-list-item-selected-container-color',\n  'menu-list-item-with-leading-icon-leading-icon-color',\n  'menu-list-item-with-leading-icon-leading-icon-size',\n  'menu-list-item-with-trailing-icon-trailing-icon-color',\n  'menu-list-item-with-trailing-icon-trailing-icon-size',\n  'text-field-input-text-tracking',\n  'text-field-input-text-type',\n  'text-field-label-text-tracking',\n  'text-field-label-text-type',\n  'text-field-supporting-text-tracking',\n  'text-field-supporting-text-type',\n  // go/keep-sorted end\n);\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 _get-override-tokens($exclude-hardcoded-values) {\n  // Values pulled from b/198759625 spreadsheet\n  @return (\n    // go/keep-sorted start\n    // TODO(b/259455114): remove when focus tokens update to 3px\n    'text-field-focus-active-indicator-height':\n      if($exclude-hardcoded-values, null, 3px),\n    // go/keep-sorted end\n  );\n}\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $original-tokens: md-comp-filled-select.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n  $original-tokens: map.merge(\n    $original-tokens,\n    _get-override-tokens($exclude-hardcoded-values)\n  );\n  $new-tokens: shape.get-new-logical-shape-tokens(\n    $original-tokens,\n    'text-field-container-shape'\n  );\n\n  $tokens: validate.values(\n    $original-tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'text-field-container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filled-select-text-field-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-select-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-text-field.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-filled-text-field';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-indicator-color',\n  'active-indicator-height',\n  'bottom-space',\n  'caret-color',\n  'container-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-active-indicator-color',\n  'disabled-active-indicator-height',\n  'disabled-active-indicator-opacity',\n  'disabled-container-color',\n  'disabled-container-opacity',\n  'disabled-input-text-color',\n  'disabled-input-text-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-icon-color',\n  'disabled-leading-icon-opacity',\n  'disabled-supporting-text-color',\n  'disabled-supporting-text-opacity',\n  'disabled-trailing-icon-color',\n  'disabled-trailing-icon-opacity',\n  'error-active-indicator-color',\n  'error-focus-active-indicator-color',\n  'error-focus-caret-color',\n  'error-focus-input-text-color',\n  'error-focus-label-text-color',\n  'error-focus-leading-icon-color',\n  'error-focus-supporting-text-color',\n  'error-focus-trailing-icon-color',\n  'error-hover-active-indicator-color',\n  'error-hover-input-text-color',\n  'error-hover-label-text-color',\n  'error-hover-leading-icon-color',\n  'error-hover-state-layer-color',\n  'error-hover-state-layer-opacity',\n  'error-hover-supporting-text-color',\n  'error-hover-trailing-icon-color',\n  'error-input-text-color',\n  'error-label-text-color',\n  'error-leading-icon-color',\n  'error-supporting-text-color',\n  'error-trailing-icon-color',\n  'focus-active-indicator-color',\n  'focus-active-indicator-height',\n  'focus-caret-color',\n  'focus-input-text-color',\n  'focus-label-text-color',\n  'focus-leading-icon-color',\n  'focus-supporting-text-color',\n  'focus-trailing-icon-color',\n  'hover-active-indicator-color',\n  'hover-active-indicator-height',\n  'hover-input-text-color',\n  'hover-label-text-color',\n  'hover-leading-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'hover-supporting-text-color',\n  'hover-trailing-icon-color',\n  'icon-input-space',\n  'input-text-color',\n  'input-text-font',\n  'input-text-line-height',\n  'input-text-placeholder-color',\n  'input-text-prefix-color',\n  'input-text-prefix-trailing-space',\n  'input-text-size',\n  'input-text-suffix-color',\n  'input-text-suffix-leading-space',\n  'input-text-weight',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-populated-line-height',\n  'label-text-populated-size',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-icon-size',\n  'leading-space',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-weight',\n  'top-space',\n  'trailing-icon-color',\n  'trailing-icon-size',\n  'trailing-space',\n  'with-label-bottom-space',\n  'with-label-top-space',\n  'with-leading-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'input-text-tracking',\n  'input-text-type',\n  'label-text-tracking',\n  'label-text-type',\n  'supporting-text-tracking',\n  'supporting-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-filled-text-field.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      'icon-input-space': if($exclude-hardcoded-values, null, 16px),\n      'leading-space': if($exclude-hardcoded-values, null, 16px),\n      'trailing-space': if($exclude-hardcoded-values, null, 16px),\n      'top-space': if($exclude-hardcoded-values, null, 16px),\n      'bottom-space': if($exclude-hardcoded-values, null, 16px),\n      'input-text-prefix-trailing-space':\n        if($exclude-hardcoded-values, null, 2px),\n      'input-text-suffix-leading-space':\n        if($exclude-hardcoded-values, null, 2px),\n      'with-label-top-space': if($exclude-hardcoded-values, null, 8px),\n      'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),\n      // TODO(b/270705687): remove when focus-caret-color token added\n      'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 12px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 12px),\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  $tokens: map.merge(\n    $tokens,\n    (\n      // TODO(b/259455114): remove when focus tokens update to 3px\n      'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px)\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filled-text-field-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-text-field-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-tonal-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-filled-tonal-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-height',\n  'container-shadow-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-container-color',\n  'disabled-container-elevation',\n  'disabled-container-opacity',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'focus-container-elevation',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-container-elevation',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-space',\n  'pressed-container-elevation',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-leading-icon-trailing-space',\n  'with-trailing-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-filled-tonal-button.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      // b/198759625 - Remove once spacing tokens are formally added\n      // go/keep-sorted start\n      'leading-space': if($exclude-hardcoded-values, null, 24px),\n      'trailing-space': if($exclude-hardcoded-values, null, 24px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 16px),\n      'with-leading-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-leading-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 16px),\n      // go/keep-sorted end\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-icon-disabled-icon-color': 'disabled-icon-color',\n      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',\n      'with-icon-focus-icon-color': 'focus-icon-color',\n      'with-icon-hover-icon-color': 'hover-icon-color',\n      'with-icon-icon-color': 'icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-pressed-icon-color': 'pressed-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filled-tonal-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-tonal-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filled-tonal-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-filled-tonal-icon-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'container-width',\n  'disabled-container-color',\n  'disabled-container-opacity',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'focus-icon-color',\n  'hover-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'pressed-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'selected-container-color',\n  'toggle-focus-icon-color',\n  'toggle-hover-icon-color',\n  'toggle-hover-state-layer-color',\n  'toggle-icon-color',\n  'toggle-pressed-icon-color',\n  'toggle-pressed-state-layer-color',\n  'toggle-selected-focus-icon-color',\n  'toggle-selected-hover-icon-color',\n  'toggle-selected-hover-state-layer-color',\n  'toggle-selected-icon-color',\n  'toggle-selected-pressed-icon-color',\n  'toggle-selected-pressed-state-layer-color',\n  // Note: filled icon buttons have three container colors,\n  // \"container-color\" for regular, then selected/unselected for toggle.\n  'unselected-container-color',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'toggle-focus-state-layer-color',\n  'toggle-selected-focus-state-layer-color',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-filled-tonal-icon-button.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove default \"unselected\" prefix (b/292244480)\n      'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color',\n      'toggle-unselected-hover-icon-color': 'toggle-hover-icon-color',\n      'toggle-unselected-hover-state-layer-color':\n        'toggle-hover-state-layer-color',\n      'toggle-unselected-icon-color': 'toggle-icon-color',\n      'toggle-unselected-pressed-icon-color': 'toggle-pressed-icon-color',\n      'toggle-unselected-pressed-state-layer-color':\n        'toggle-pressed-state-layer-color',\n      'toggle-unselected-focus-state-layer-color':\n        'toggle-focus-state-layer-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filled-tonal-icon-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filled-tonal-icon-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-filter-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-filter-chip';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-icon-color',\n  'disabled-leading-icon-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'disabled-selected-container-color',\n  'disabled-selected-container-opacity',\n  'disabled-trailing-icon-color',\n  'disabled-trailing-icon-opacity',\n  'elevated-container-color',\n  'elevated-container-elevation',\n  'elevated-container-shadow-color',\n  'elevated-disabled-container-color',\n  'elevated-disabled-container-elevation',\n  'elevated-disabled-container-opacity',\n  'elevated-focus-container-elevation',\n  'elevated-hover-container-elevation',\n  'elevated-pressed-container-elevation',\n  'elevated-selected-container-color',\n  'focus-label-text-color',\n  'focus-leading-icon-color',\n  'focus-outline-color',\n  'focus-trailing-icon-color',\n  'hover-label-text-color',\n  'hover-leading-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'hover-trailing-icon-color',\n  'icon-label-space',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-space',\n  'outline-color',\n  'outline-width',\n  'pressed-label-text-color',\n  'pressed-leading-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'pressed-trailing-icon-color',\n  'selected-container-color',\n  'selected-focus-label-text-color',\n  'selected-focus-leading-icon-color',\n  'selected-focus-trailing-icon-color',\n  'selected-hover-label-text-color',\n  'selected-hover-leading-icon-color',\n  'selected-hover-state-layer-color',\n  'selected-hover-state-layer-opacity',\n  'selected-hover-trailing-icon-color',\n  'selected-label-text-color',\n  'selected-leading-icon-color',\n  'selected-outline-width',\n  'selected-pressed-label-text-color',\n  'selected-pressed-leading-icon-color',\n  'selected-pressed-state-layer-color',\n  'selected-pressed-state-layer-opacity',\n  'selected-pressed-trailing-icon-color',\n  'selected-trailing-icon-color',\n  'trailing-icon-color',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'container-elevation',\n  'dragged-container-elevation',\n  'dragged-label-text-color',\n  'dragged-leading-icon-color',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'dragged-trailing-icon-color',\n  'focus-container-elevation',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'hover-container-elevation',\n  'label-text-tracking',\n  'label-text-type',\n  'pressed-container-elevation',\n  'selected-dragged-label-text-color',\n  'selected-dragged-leading-icon-color',\n  'selected-dragged-state-layer-color',\n  'selected-dragged-state-layer-opacity',\n  'selected-dragged-trailing-icon-color',\n  'selected-focus-container-elevation',\n  'selected-focus-state-layer-color',\n  'selected-focus-state-layer-opacity',\n  'selected-hover-container-elevation',\n  'selected-pressed-container-elevation',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-filter-chip.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      'leading-space': if($exclude-hardcoded-values, null, 16px),\n      'trailing-space': if($exclude-hardcoded-values, null, 16px),\n      'icon-label-space': if($exclude-hardcoded-values, null, 8px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 8px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 8px),\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"unselected-*\" and \"flat-*\" prefix (b/275577569)\n      'elevated-unselected-container-color': 'elevated-container-color',\n      'flat-container-elevation': 'container-elevation',\n      'flat-disabled-unselected-outline-color': 'disabled-outline-color',\n      'flat-disabled-unselected-outline-opacity': 'disabled-outline-opacity',\n      'flat-disabled-selected-container-color':\n        'disabled-selected-container-color',\n      'flat-disabled-selected-container-opacity':\n        'disabled-selected-container-opacity',\n      'flat-unselected-focus-container-elevation': 'focus-container-elevation',\n      'flat-unselected-focus-outline-color': 'focus-outline-color',\n      'flat-unselected-hover-container-elevation': 'hover-container-elevation',\n      'flat-unselected-outline-color': 'outline-color',\n      'flat-unselected-outline-width': 'outline-width',\n      'flat-unselected-pressed-container-elevation':\n        'pressed-container-elevation',\n      'flat-selected-container-color': 'selected-container-color',\n      'flat-selected-focus-container-elevation':\n        'selected-focus-container-elevation',\n      'flat-selected-hover-container-elevation':\n        'selected-hover-container-elevation',\n      'flat-selected-outline-width': 'selected-outline-width',\n      'flat-selected-pressed-container-elevation':\n        'selected-pressed-container-elevation',\n      'unselected-dragged-label-text-color': 'dragged-label-text-color',\n      'unselected-dragged-state-layer-color': 'dragged-state-layer-color',\n      'unselected-dragged-state-layer-opacity': 'dragged-state-layer-opacity',\n      'unselected-focus-label-text-color': 'focus-label-text-color',\n      'unselected-focus-state-layer-color': 'focus-state-layer-color',\n      'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity',\n      'unselected-hover-label-text-color': 'hover-label-text-color',\n      'unselected-hover-state-layer-color': 'hover-state-layer-color',\n      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',\n      'unselected-label-text-color': 'label-text-color',\n      'unselected-pressed-label-text-color': 'pressed-label-text-color',\n      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',\n      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity',\n      // Remove \"with-*\" prefixex (b/273534858)\n      'with-icon-icon-size': 'icon-size',\n      'with-leading-icon-disabled-leading-icon-color':\n        'disabled-leading-icon-color',\n      'with-leading-icon-disabled-leading-icon-opacity':\n        'disabled-leading-icon-opacity',\n      'with-leading-icon-selected-dragged-leading-icon-color':\n        'selected-dragged-leading-icon-color',\n      'with-leading-icon-selected-focus-leading-icon-color':\n        'selected-focus-leading-icon-color',\n      'with-leading-icon-selected-hover-leading-icon-color':\n        'selected-hover-leading-icon-color',\n      'with-leading-icon-selected-leading-icon-color':\n        'selected-leading-icon-color',\n      'with-leading-icon-selected-pressed-leading-icon-color':\n        'selected-pressed-leading-icon-color',\n      'with-leading-icon-unselected-dragged-leading-icon-color':\n        'dragged-leading-icon-color',\n      'with-leading-icon-unselected-focus-leading-icon-color':\n        'focus-leading-icon-color',\n      'with-leading-icon-unselected-hover-leading-icon-color':\n        'hover-leading-icon-color',\n      'with-leading-icon-unselected-leading-icon-color': 'leading-icon-color',\n      'with-leading-icon-unselected-pressed-leading-icon-color':\n        'pressed-leading-icon-color',\n      'with-trailing-icon-disabled-trailing-icon-color':\n        'disabled-trailing-icon-color',\n      'with-trailing-icon-disabled-trailing-icon-opacity':\n        'disabled-trailing-icon-opacity',\n      'with-trailing-icon-selected-dragged-trailing-icon-color':\n        'selected-dragged-trailing-icon-color',\n      'with-trailing-icon-selected-focus-trailing-icon-color':\n        'selected-focus-trailing-icon-color',\n      'with-trailing-icon-selected-hover-trailing-icon-color':\n        'selected-hover-trailing-icon-color',\n      'with-trailing-icon-selected-pressed-trailing-icon-color':\n        'selected-pressed-trailing-icon-color',\n      'with-trailing-icon-selected-trailing-icon-color':\n        'selected-trailing-icon-color',\n      'with-trailing-icon-unselected-dragged-trailing-icon-color':\n        'dragged-trailing-icon-color',\n      'with-trailing-icon-unselected-focus-trailing-icon-color':\n        'focus-trailing-icon-color',\n      'with-trailing-icon-unselected-hover-trailing-icon-color':\n        'hover-trailing-icon-color',\n      'with-trailing-icon-unselected-pressed-trailing-icon-color':\n        'pressed-trailing-icon-color',\n      'with-trailing-icon-unselected-trailing-icon-color': 'trailing-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-filter-chip-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-filter-chip-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-focus-ring.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-width',\n  'color',\n  'duration',\n  'inward-offset',\n  'outward-offset',\n  'shape',\n  'shape-end-end',\n  'shape-end-start',\n  'shape-start-end',\n  'shape-start-start',\n  'width',\n  // go/keep-sorted end\n);\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-motion': md-sys-motion.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: (\n    'active-width': if($exclude-hardcoded-values, null, 8px),\n    'color': map.get($deps, 'md-sys-color', 'secondary'),\n    'duration': map.get($deps, 'md-sys-motion', 'duration-long4'),\n    'inward-offset': if($exclude-hardcoded-values, null, 0px),\n    'outward-offset': if($exclude-hardcoded-values, null, 2px),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'width': if($exclude-hardcoded-values, null, 3px),\n  );\n\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-focus-ring-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-focus-ring-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-full-screen-dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-full-screen-dialog';\n// go/keep-sorted end\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 md-comp-full-screen-dialog.values($deps, $exclude-hardcoded-values);\n}\n"
  },
  {
    "path": "tokens/_md-comp-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-icon-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'focus-icon-color',\n  'hover-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'pressed-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'selected-focus-icon-color',\n  'selected-hover-icon-color',\n  'selected-hover-state-layer-color',\n  'selected-hover-state-layer-opacity',\n  'selected-icon-color',\n  'selected-pressed-icon-color',\n  'selected-pressed-state-layer-color',\n  'selected-pressed-state-layer-opacity',\n  'state-layer-height',\n  'state-layer-shape',\n  'state-layer-width',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'selected-focus-state-layer-color',\n  'selected-focus-state-layer-opacity',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-icon-button.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $renamed-tokens: (\n      // Remove default \"unselected\" prefix (b/292244480)\n      'unselected-focus-icon-color': 'focus-icon-color',\n      'unselected-hover-icon-color': 'hover-icon-color',\n      'unselected-hover-state-layer-color': 'hover-state-layer-color',\n      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',\n      'unselected-icon-color': 'icon-color',\n      'unselected-pressed-icon-color': 'pressed-icon-color',\n      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',\n      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity',\n      'unselected-focus-state-layer-color': 'focus-state-layer-color',\n      'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-icon-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-icon.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'font',\n  'size',\n  // go/keep-sorted end\n);\n\n@function _get-new-tokens($exclude-hardcoded-values) {\n  @return (\n    // go/keep-sorted start\n    font: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'),\n    size: if($exclude-hardcoded-values, null, 24px),\n    // go/keep-sorted end\n  );\n}\n\n@function values(\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    (),\n    $supported-tokens: $supported-tokens,\n    $new-tokens: _get-new-tokens($exclude-hardcoded-values)\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-input-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-input-chip';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'avatar-shape',\n  'avatar-size',\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-avatar-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-icon-color',\n  'disabled-leading-icon-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'disabled-selected-container-color',\n  'disabled-selected-container-opacity',\n  'disabled-trailing-icon-color',\n  'disabled-trailing-icon-opacity',\n  'focus-label-text-color',\n  'focus-leading-icon-color',\n  'focus-outline-color',\n  'focus-trailing-icon-color',\n  'hover-label-text-color',\n  'hover-leading-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'hover-trailing-icon-color',\n  'icon-label-space',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-space',\n  'outline-color',\n  'outline-width',\n  'pressed-label-text-color',\n  'pressed-leading-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'pressed-trailing-icon-color',\n  'selected-container-color',\n  'selected-focus-label-text-color',\n  'selected-focus-leading-icon-color',\n  'selected-focus-trailing-icon-color',\n  'selected-hover-label-text-color',\n  'selected-hover-leading-icon-color',\n  'selected-hover-state-layer-color',\n  'selected-hover-state-layer-opacity',\n  'selected-hover-trailing-icon-color',\n  'selected-label-text-color',\n  'selected-leading-icon-color',\n  'selected-outline-width',\n  'selected-pressed-label-text-color',\n  'selected-pressed-leading-icon-color',\n  'selected-pressed-state-layer-color',\n  'selected-pressed-state-layer-opacity',\n  'selected-pressed-trailing-icon-color',\n  'selected-trailing-icon-color',\n  'trailing-icon-color',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'container-elevation',\n  'dragged-container-elevation',\n  'dragged-label-text-color',\n  'dragged-leading-icon-color',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'dragged-trailing-icon-color',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  'selected-dragged-label-text-color',\n  'selected-dragged-leading-icon-color',\n  'selected-dragged-state-layer-color',\n  'selected-dragged-state-layer-opacity',\n  'selected-dragged-trailing-icon-color',\n  'selected-focus-state-layer-color',\n  'selected-focus-state-layer-opacity',\n  'trailing-icon-size',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-input-chip.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      'leading-space': if($exclude-hardcoded-values, null, 16px),\n      'trailing-space': if($exclude-hardcoded-values, null, 16px),\n      'icon-label-space': if($exclude-hardcoded-values, null, 8px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 8px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 8px),\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"unselected-*\" prefix (b/275577569)\n      'disabled-unselected-outline-color': 'disabled-outline-color',\n      'disabled-unselected-outline-opacity': 'disabled-outline-opacity',\n      'unselected-dragged-label-text-color': 'dragged-label-text-color',\n      'unselected-dragged-state-layer-color': 'dragged-state-layer-color',\n      'unselected-dragged-state-layer-opacity': 'dragged-state-layer-opacity',\n      'unselected-focus-label-text-color': 'focus-label-text-color',\n      'unselected-focus-outline-color': 'focus-outline-color',\n      'unselected-focus-state-layer-color': 'focus-state-layer-color',\n      'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity',\n      'unselected-hover-label-text-color': 'hover-label-text-color',\n      'unselected-hover-state-layer-color': 'hover-state-layer-color',\n      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',\n      'unselected-label-text-color': 'label-text-color',\n      'unselected-outline-color': 'outline-color',\n      'unselected-outline-width': 'outline-width',\n      'unselected-pressed-label-text-color': 'pressed-label-text-color',\n      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',\n      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity',\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-avatar-avatar-shape': 'avatar-shape',\n      'with-avatar-avatar-size': 'avatar-size',\n      'with-avatar-disabled-avatar-opacity': 'disabled-avatar-opacity',\n      'with-leading-icon-disabled-leading-icon-color':\n        'disabled-leading-icon-color',\n      'with-leading-icon-disabled-leading-icon-opacity':\n        'disabled-leading-icon-opacity',\n      // Rename \"leading-icon-size\" to \"icon-size\" (b/275577569)\n      'with-leading-icon-leading-icon-size': 'icon-size',\n      'with-leading-icon-selected-dragged-leading-icon-color':\n        'selected-dragged-leading-icon-color',\n      'with-leading-icon-selected-focus-leading-icon-color':\n        'selected-focus-leading-icon-color',\n      'with-leading-icon-selected-hover-leading-icon-color':\n        'selected-hover-leading-icon-color',\n      'with-leading-icon-selected-leading-icon-color':\n        'selected-leading-icon-color',\n      'with-leading-icon-selected-pressed-leading-icon-color':\n        'selected-pressed-leading-icon-color',\n      'with-leading-icon-unselected-dragged-leading-icon-color':\n        'dragged-leading-icon-color',\n      'with-leading-icon-unselected-focus-leading-icon-color':\n        'focus-leading-icon-color',\n      'with-leading-icon-unselected-hover-leading-icon-color':\n        'hover-leading-icon-color',\n      'with-leading-icon-unselected-leading-icon-color': 'leading-icon-color',\n      'with-leading-icon-unselected-pressed-leading-icon-color':\n        'pressed-leading-icon-color',\n      'with-trailing-icon-disabled-trailing-icon-color':\n        'disabled-trailing-icon-color',\n      'with-trailing-icon-disabled-trailing-icon-opacity':\n        'disabled-trailing-icon-opacity',\n      'with-trailing-icon-selected-dragged-trailing-icon-color':\n        'selected-dragged-trailing-icon-color',\n      'with-trailing-icon-selected-focus-trailing-icon-color':\n        'selected-focus-trailing-icon-color',\n      'with-trailing-icon-selected-hover-trailing-icon-color':\n        'selected-hover-trailing-icon-color',\n      'with-trailing-icon-selected-pressed-trailing-icon-color':\n        'selected-pressed-trailing-icon-color',\n      'with-trailing-icon-selected-trailing-icon-color':\n        'selected-trailing-icon-color',\n      'with-trailing-icon-trailing-icon-size': 'trailing-icon-size',\n      'with-trailing-icon-unselected-dragged-trailing-icon-color':\n        'dragged-trailing-icon-color',\n      'with-trailing-icon-unselected-focus-trailing-icon-color':\n        'focus-trailing-icon-color',\n      'with-trailing-icon-unselected-hover-trailing-icon-color':\n        'hover-trailing-icon-color',\n      'with-trailing-icon-unselected-pressed-trailing-icon-color':\n        'pressed-trailing-icon-color',\n      'with-trailing-icon-unselected-trailing-icon-color': 'trailing-icon-color'\n    )\n  );\n\n  // TODO(b/288199264): remove once input chip leading icon color is fixed\n  $tokens: map.set(\n    $tokens,\n    'leading-icon-color',\n    map.get($deps, 'md-sys-color', 'primary')\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-input-chip-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-input-chip-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-list';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'overline-color',\n  'overline-font',\n  'overline-line-height',\n  'overline-size',\n  'overline-weight',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-weight',\n  'trailing-supporting-text-color',\n  'trailing-supporting-text-font',\n  'trailing-supporting-text-line-height',\n  'trailing-supporting-text-size',\n  'trailing-supporting-text-weight',\n  // go/keep-sorted end\n);\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  // Note: <md-item> does not provide `--md-item-*` custom properties.\n  $list-tokens: md-comp-list.values($deps, $exclude-hardcoded-values);\n\n  $tokens: (\n    // go/keep-sorted start\n    'label-text-color': map.get($list-tokens, 'list-item-label-text-color'),\n    'label-text-font': map.get($list-tokens, 'list-item-label-text-font'),\n    'label-text-line-height':\n      map.get($list-tokens, 'list-item-label-text-line-height'),\n    'label-text-size': map.get($list-tokens, 'list-item-label-text-size'),\n    'label-text-weight': map.get($list-tokens, 'list-item-label-text-weight'),\n    'overline-color': map.get($list-tokens, 'list-item-overline-color'),\n    'overline-font': map.get($list-tokens, 'list-item-overline-font'),\n    'overline-line-height':\n      map.get($list-tokens, 'list-item-overline-line-height'),\n    'overline-size': map.get($list-tokens, 'list-item-overline-size'),\n    'overline-weight': map.get($list-tokens, 'list-item-overline-weight'),\n    'supporting-text-color':\n      map.get($list-tokens, 'list-item-supporting-text-color'),\n    'supporting-text-font':\n      map.get($list-tokens, 'list-item-supporting-text-font'),\n    'supporting-text-line-height':\n      map.get($list-tokens, 'list-item-supporting-text-line-height'),\n    'supporting-text-size':\n      map.get($list-tokens, 'list-item-supporting-text-size'),\n    'supporting-text-weight':\n      map.get($list-tokens, 'list-item-supporting-text-weight'),\n    'trailing-supporting-text-color':\n      map.get($list-tokens, 'list-item-trailing-supporting-text-color'),\n    'trailing-supporting-text-font':\n      map.get($list-tokens, 'list-item-trailing-supporting-text-font'),\n    'trailing-supporting-text-line-height':\n      map.get($list-tokens, 'list-item-trailing-supporting-text-line-height'),\n    'trailing-supporting-text-size':\n      map.get($list-tokens, 'list-item-trailing-supporting-text-size'),\n    'trailing-supporting-text-weight':\n      map.get($list-tokens, 'list-item-trailing-supporting-text-weight'),\n    // go/keep-sorted end\n  );\n\n  @return validate.values($tokens, $supported-tokens: $supported-tokens);\n}\n"
  },
  {
    "path": "tokens/_md-comp-linear-progress.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'versions/v0_192/md-comp-linear-progress-indicator';\n// go/keep-sorted end\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-indicator-color',\n  'active-indicator-height',\n  'four-color-active-indicator-four-color',\n  'four-color-active-indicator-one-color',\n  'four-color-active-indicator-three-color',\n  'four-color-active-indicator-two-color',\n  'track-color',\n  'track-height',\n  'track-shape',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  // can only control track since scaling is used on buffer/progress\n  'active-indicator-shape',\n  // go/keep-sorted end\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-linear-progress-indicator.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-linear-progress-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-list-item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-list';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'bottom-space',\n  'disabled-opacity',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-space',\n  'one-line-container-height',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-weight',\n  'top-space',\n  'trailing-icon-color',\n  'trailing-space',\n  'trailing-supporting-text-color',\n  'trailing-supporting-text-font',\n  'trailing-supporting-text-line-height',\n  'trailing-supporting-text-size',\n  'trailing-supporting-text-weight',\n  'two-line-container-height',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-shape',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-icon-color',\n  'disabled-leading-icon-opacity',\n  'disabled-state-layer-color',\n  'disabled-state-layer-opacity',\n  'disabled-trailing-icon-color',\n  'disabled-trailing-icon-opacity',\n  'divider-leading-space',\n  'divider-trailing-space',\n  'dragged-container-elevation',\n  'dragged-label-text-color',\n  'dragged-leading-icon-icon-color',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'dragged-trailing-icon-icon-color',\n  'focus-label-text-color',\n  'focus-leading-icon-icon-color',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'focus-trailing-icon-icon-color',\n  'hover-label-text-color',\n  'hover-leading-icon-icon-color',\n  'hover-trailing-icon-icon-color',\n  'label-text-tracking',\n  'label-text-type',\n  'large-leading-video-height',\n  'leading-avatar-color',\n  'leading-avatar-label-color',\n  'leading-avatar-label-font',\n  'leading-avatar-label-line-height',\n  'leading-avatar-label-size',\n  'leading-avatar-label-tracking',\n  'leading-avatar-label-type',\n  'leading-avatar-label-weight',\n  'leading-avatar-shape',\n  'leading-avatar-size',\n  'leading-icon-size',\n  'leading-image-height',\n  'leading-image-shape',\n  'leading-image-width',\n  'leading-video-shape',\n  'leading-video-width',\n  'overline-color',\n  'overline-font',\n  'overline-line-height',\n  'overline-size',\n  'overline-tracking',\n  'overline-type',\n  'overline-weight',\n  'pressed-label-text-color',\n  'pressed-leading-icon-icon-color',\n  'pressed-trailing-icon-icon-color',\n  'selected-trailing-icon-color',\n  'small-leading-video-height',\n  'supporting-text-tracking',\n  'supporting-text-type',\n  'three-line-container-height',\n  'trailing-icon-size',\n  'trailing-supporting-text-tracking',\n  'trailing-supporting-text-type',\n  'unselected-trailing-icon-color',\n  // go/keep-sorted end\n);\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values);\n\n  $tokens: validate.values(\n    $original-tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: (\n      'top-space': if($exclude-hardcoded-values, null, 12px),\n      'bottom-space': if($exclude-hardcoded-values, null, 12px),\n      'disabled-opacity':\n        map.get($original-tokens, 'list-item-disabled-label-text-opacity'),\n    ),\n    $renamed-tokens: _get-renamed-tokens($original-tokens)\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-list-item-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n\n// remove list-item prefix from tokens\n@function _get-renamed-tokens($tokens) {\n  $keys: map.keys($tokens);\n  $renamed-tokens: ();\n\n  @each $key in $keys {\n    @if string.index($key, 'list-item-') == 1 {\n      $renamed-key: string.slice($key, string.length('list-item-') + 1);\n      $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key);\n    }\n  }\n\n  @return $renamed-tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-list.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'versions/v0_192/md-comp-list';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  // go/keep-sorted end\n);\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $list-tokens: md-comp-list.values($deps, $exclude-hardcoded-values);\n  $tokens: (\n    'container-color': map.get($list-tokens, 'list-item-container-color'),\n  );\n\n  $tokens: validate.values($tokens, $supported-tokens: $supported-tokens);\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-list-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-menu-item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-comp-list-item';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-menu';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'bottom-space',\n  'container-color',\n  'disabled-opacity',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-space',\n  'one-line-container-height',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'selected-container-color',\n  'selected-label-text-color',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-weight',\n  'top-space',\n  'trailing-icon-color',\n  'trailing-space',\n  'trailing-supporting-text-color',\n  'trailing-supporting-text-font',\n  'trailing-supporting-text-line-height',\n  'trailing-supporting-text-size',\n  'trailing-supporting-text-weight',\n  'two-line-container-height',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'container-elevation',\n  'container-shadow-color',\n  'container-shape',\n  'selected-with-leading-icon-trailing-icon-color',\n  'with-leading-icon-icon-color',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-menu.values($deps);\n\n  // Like list items, menu items use their parent menu for their container\n  // color. However, menu items can have a selected background color, so we\n  // change its default unselected background color to transparent to inherit\n  // from its parent menu.\n  $tokens: map.set($tokens, 'container-color', transparent);\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens:\n      md-comp-list-item.values($deps, $exclude-custom-properties: true),\n    $renamed-tokens: _get-renamed-tokens($tokens)\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-menu-item-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n\n// remove list-item prefix from tokens\n@function _get-renamed-tokens($tokens) {\n  $keys: map.keys($tokens);\n  $renamed-tokens: ();\n\n  @each $key in $keys {\n    @each $prefix in ('list-item-', 'menu-list-item-') {\n      @if string.index($key, $prefix) == 1 {\n        $renamed-key: string.slice($key, string.length($prefix) + 1);\n        $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key);\n      }\n    }\n  }\n\n  @return $renamed-tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-menu.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'versions/v0_192/md-comp-menu';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'bottom-space',\n  'container-color',\n  'container-elevation',\n  'container-shadow-color',\n  'container-shape',\n  'top-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'list-item-selected-container-color',\n  'list-item-selected-label-text-color',\n  'list-item-selected-with-leading-icon-trailing-icon-color',\n  'menu-list-item-with-leading-icon-icon-color',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-menu.values($deps),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: (\n      'top-space': if($exclude-hardcoded-values, null, 8px),\n      'bottom-space': if($exclude-hardcoded-values, null, 8px),\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-menu-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-navigation-bar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-navigation-bar';\n// go/keep-sorted end\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-navigation-bar.values($deps, $exclude-hardcoded-values);\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-navigation-bar-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-navigation-drawer.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-navigation-drawer';\n// go/keep-sorted end\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-navigation-drawer.values($deps, $exclude-hardcoded-values);\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-navigation-drawer-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-outlined-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-outlined-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-space',\n  'outline-color',\n  'outline-width',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-outline-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-leading-icon-trailing-space',\n  'with-trailing-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-outline-color',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'hover-outline-color',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-outlined-button.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      // b/198759625 - Remove once spacing tokens are formally added\n      // go/keep-sorted start\n      'leading-space': if($exclude-hardcoded-values, null, 24px),\n      'trailing-space': if($exclude-hardcoded-values, null, 24px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 16px),\n      'with-leading-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-leading-space':\n        if($exclude-hardcoded-values, null, 24px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 16px),\n      // go/keep-sorted end\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-icon-disabled-icon-color': 'disabled-icon-color',\n      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',\n      'with-icon-focus-icon-color': 'focus-icon-color',\n      'with-icon-hover-icon-color': 'hover-icon-color',\n      'with-icon-icon-color': 'icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-pressed-icon-color': 'pressed-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-outlined-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-outlined-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-outlined-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-outlined-card';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-color',\n  'container-elevation',\n  'container-shadow-color',\n  'container-shape',\n  'outline-color',\n  'outline-width',\n  // go/keep-sorted end\n);\n\n// TODO(b/307362112): Add interactive card tokens (hover, focus, pressed)\n// TODO(b/307361748): Add disabled cards tokens.\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'disabled-container-elevation',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'dragged-container-elevation',\n  'dragged-outline-color',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'focus-container-elevation',\n  'focus-outline-color',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'hover-container-elevation',\n  'hover-outline-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'pressed-container-elevation',\n  'pressed-outline-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-outlined-card.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-outlined-card-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-outlined-field.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-outlined-text-field';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'bottom-space',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'content-color',\n  'content-font',\n  'content-line-height',\n  'content-size',\n  'content-space',\n  'content-weight',\n  'disabled-content-color',\n  'disabled-content-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-content-color',\n  'disabled-leading-content-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'disabled-outline-width',\n  'disabled-supporting-text-color',\n  'disabled-supporting-text-opacity',\n  'disabled-trailing-content-color',\n  'disabled-trailing-content-opacity',\n  'error-content-color',\n  'error-focus-content-color',\n  'error-focus-label-text-color',\n  'error-focus-leading-content-color',\n  'error-focus-outline-color',\n  'error-focus-supporting-text-color',\n  'error-focus-trailing-content-color',\n  'error-hover-content-color',\n  'error-hover-label-text-color',\n  'error-hover-leading-content-color',\n  'error-hover-outline-color',\n  'error-hover-supporting-text-color',\n  'error-hover-trailing-content-color',\n  'error-label-text-color',\n  'error-leading-content-color',\n  'error-outline-color',\n  'error-supporting-text-color',\n  'error-trailing-content-color',\n  'focus-content-color',\n  'focus-label-text-color',\n  'focus-leading-content-color',\n  'focus-outline-color',\n  'focus-outline-width',\n  'focus-supporting-text-color',\n  'focus-trailing-content-color',\n  'hover-content-color',\n  'hover-label-text-color',\n  'hover-leading-content-color',\n  'hover-outline-color',\n  'hover-outline-width',\n  'hover-supporting-text-color',\n  'hover-trailing-content-color',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-padding-bottom',\n  'label-text-populated-line-height',\n  'label-text-populated-size',\n  'label-text-size',\n  'label-text-weight',\n  'leading-content-color',\n  'leading-space',\n  'outline-color',\n  'outline-label-padding',\n  'outline-width',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-leading-space',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-top-space',\n  'supporting-text-trailing-space',\n  'supporting-text-weight',\n  'top-space',\n  'trailing-content-color',\n  'trailing-space',\n  'with-leading-content-leading-space',\n  'with-trailing-content-trailing-space',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $text-field: md-comp-outlined-text-field.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n\n  $tokens: (\n    // go/keep-sorted start\n    'bottom-space': if($exclude-hardcoded-values, null, 16px),\n    'container-shape': map.get($text-field, 'container-shape'),\n    'content-color': map.get($text-field, 'input-text-color'),\n    'content-font': map.get($text-field, 'input-text-font'),\n    'content-line-height': map.get($text-field, 'input-text-line-height'),\n    'content-size': map.get($text-field, 'input-text-size'),\n    'content-space': if($exclude-hardcoded-values, null, 16px),\n    'content-weight': map.get($text-field, 'input-text-weight'),\n    'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),\n    'disabled-content-opacity':\n      map.get($text-field, 'disabled-input-text-opacity'),\n    'disabled-label-text-color':\n      map.get($text-field, 'disabled-label-text-color'),\n    'disabled-label-text-opacity':\n      map.get($text-field, 'disabled-label-text-opacity'),\n    'disabled-leading-content-color':\n      map.get($text-field, 'disabled-leading-icon-color'),\n    'disabled-leading-content-opacity':\n      map.get($text-field, 'disabled-leading-icon-opacity'),\n    'disabled-outline-color': map.get($text-field, 'disabled-outline-color'),\n    'disabled-outline-opacity': map.get($text-field, 'disabled-outline-opacity'),\n    'disabled-outline-width': map.get($text-field, 'disabled-outline-width'),\n    'disabled-supporting-text-color':\n      map.get($text-field, 'disabled-supporting-text-color'),\n    'disabled-supporting-text-opacity':\n      map.get($text-field, 'disabled-supporting-text-opacity'),\n    'disabled-trailing-content-color':\n      map.get($text-field, 'disabled-trailing-icon-color'),\n    'disabled-trailing-content-opacity':\n      map.get($text-field, 'disabled-trailing-icon-opacity'),\n    'error-content-color': map.get($text-field, 'error-input-text-color'),\n    'error-focus-content-color':\n      map.get($text-field, 'error-focus-input-text-color'),\n    'error-focus-label-text-color':\n      map.get($text-field, 'error-focus-label-text-color'),\n    'error-focus-leading-content-color':\n      map.get($text-field, 'error-focus-leading-icon-color'),\n    'error-focus-outline-color':\n      map.get($text-field, 'error-focus-outline-color'),\n    'error-focus-supporting-text-color':\n      map.get($text-field, 'error-focus-supporting-text-color'),\n    'error-focus-trailing-content-color':\n      map.get($text-field, 'error-focus-trailing-icon-color'),\n    'error-hover-content-color':\n      map.get($text-field, 'error-hover-input-text-color'),\n    'error-hover-label-text-color':\n      map.get($text-field, 'error-hover-label-text-color'),\n    'error-hover-leading-content-color':\n      map.get($text-field, 'error-hover-leading-icon-color'),\n    'error-hover-outline-color':\n      map.get($text-field, 'error-hover-outline-color'),\n    'error-hover-supporting-text-color':\n      map.get($text-field, 'error-hover-supporting-text-color'),\n    'error-hover-trailing-content-color':\n      map.get($text-field, 'error-hover-trailing-icon-color'),\n    'error-label-text-color': map.get($text-field, 'error-label-text-color'),\n    'error-leading-content-color':\n      map.get($text-field, 'error-leading-icon-color'),\n    'error-outline-color': map.get($text-field, 'error-outline-color'),\n    'error-supporting-text-color':\n      map.get($text-field, 'error-supporting-text-color'),\n    'error-trailing-content-color':\n      map.get($text-field, 'error-trailing-icon-color'),\n    'focus-content-color': map.get($text-field, 'focus-input-text-color'),\n    'focus-label-text-color': map.get($text-field, 'focus-label-text-color'),\n    'focus-leading-content-color':\n      map.get($text-field, 'focus-leading-icon-color'),\n    'focus-outline-color': map.get($text-field, 'focus-outline-color'),\n    // TODO(b/259455114): remove when focus tokens update to 3px\n    'focus-outline-width': if($exclude-hardcoded-values, null, 3px),\n    'focus-supporting-text-color':\n      map.get($text-field, 'focus-supporting-text-color'),\n    'focus-trailing-content-color':\n      map.get($text-field, 'focus-trailing-icon-color'),\n    'hover-content-color': map.get($text-field, 'hover-input-text-color'),\n    'hover-label-text-color': map.get($text-field, 'hover-label-text-color'),\n    'hover-leading-content-color':\n      map.get($text-field, 'hover-leading-icon-color'),\n    'hover-outline-color': map.get($text-field, 'hover-outline-color'),\n    'hover-outline-width': map.get($text-field, 'hover-outline-width'),\n    'hover-supporting-text-color':\n      map.get($text-field, 'hover-supporting-text-color'),\n    'hover-trailing-content-color':\n      map.get($text-field, 'hover-trailing-icon-color'),\n    'label-text-color': map.get($text-field, 'label-text-color'),\n    'label-text-font': map.get($text-field, 'label-text-font'),\n    'label-text-line-height': map.get($text-field, 'label-text-line-height'),\n    'label-text-padding-bottom': if($exclude-hardcoded-values, null, 8px),\n    'label-text-populated-line-height':\n      map.get($text-field, 'label-text-populated-line-height'),\n    'label-text-populated-size':\n      map.get($text-field, 'label-text-populated-size'),\n    'label-text-size': map.get($text-field, 'label-text-size'),\n    'label-text-weight': map.get($text-field, 'label-text-weight'),\n    'leading-content-color': map.get($text-field, 'leading-icon-color'),\n    'leading-space': if($exclude-hardcoded-values, null, 16px),\n    'outline-color': map.get($text-field, 'outline-color'),\n    'outline-label-padding': if($exclude-hardcoded-values, null, 4px),\n    'outline-width': map.get($text-field, 'outline-width'),\n    'supporting-text-color': map.get($text-field, 'supporting-text-color'),\n    'supporting-text-font': map.get($text-field, 'supporting-text-font'),\n    'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px),\n    'supporting-text-line-height':\n      map.get($text-field, 'supporting-text-line-height'),\n    'supporting-text-size': map.get($text-field, 'supporting-text-size'),\n    'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px),\n    'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),\n    'supporting-text-weight': map.get($text-field, 'supporting-text-weight'),\n    'top-space': if($exclude-hardcoded-values, null, 16px),\n    'trailing-content-color': map.get($text-field, 'trailing-icon-color'),\n    'trailing-space': if($exclude-hardcoded-values, null, 16px),\n    'with-leading-content-leading-space':\n      if($exclude-hardcoded-values, null, 12px),\n    'with-trailing-content-trailing-space':\n      if($exclude-hardcoded-values, null, 12px),\n    // go/keep-sorted end\n  );\n\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-outlined-field-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-outlined-field-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-outlined-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-outlined-icon-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'container-width',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'disabled-selected-container-color',\n  'disabled-selected-container-opacity',\n  'focus-icon-color',\n  'hover-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'outline-color',\n  'outline-width',\n  'pressed-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'selected-container-color',\n  'selected-focus-icon-color',\n  'selected-hover-icon-color',\n  'selected-hover-state-layer-color',\n  'selected-icon-color',\n  'selected-pressed-icon-color',\n  'selected-pressed-state-layer-color',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'selected-focus-state-layer-color',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-outlined-icon-button.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove default \"unselected\" prefix (b/292244480)\n      'disabled-unselected-outline-color': 'disabled-outline-color',\n      'disabled-unselected-outline-opacity': 'disabled-outline-opacity',\n      'unselected-focus-icon-color': 'focus-icon-color',\n      'unselected-hover-icon-color': 'hover-icon-color',\n      'unselected-hover-state-layer-color': 'hover-state-layer-color',\n      'unselected-icon-color': 'icon-color',\n      'unselected-outline-color': 'outline-color',\n      'unselected-outline-width': 'outline-width',\n      'unselected-pressed-icon-color': 'pressed-icon-color',\n      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',\n      'unselected-focus-state-layer-color': 'focus-state-layer-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-outlined-icon-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-outlined-icon-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-outlined-segmented-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Ide\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-outlined-segmented-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-height',\n  'disabled-icon-color',\n  'disabled-label-text-color',\n  'disabled-outline-color',\n  'hover-state-layer-opacity',\n  'icon-size',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'outline-color',\n  'pressed-state-layer-opacity',\n  'selected-container-color',\n  'selected-focus-icon-color',\n  'selected-focus-label-text-color',\n  'selected-hover-icon-color',\n  'selected-hover-label-text-color',\n  'selected-hover-state-layer-color',\n  'selected-icon-color',\n  'selected-label-text-color',\n  'selected-pressed-icon-color',\n  'selected-pressed-label-text-color',\n  'selected-pressed-state-layer-color',\n  'shape',\n  'shape-end-end',\n  'shape-end-start',\n  'shape-start-end',\n  'shape-start-start',\n  'unselected-focus-icon-color',\n  'unselected-focus-label-text-color',\n  'unselected-hover-icon-color',\n  'unselected-hover-label-text-color',\n  'unselected-hover-state-layer-color',\n  'unselected-icon-color',\n  'unselected-label-text-color',\n  'unselected-pressed-icon-color',\n  'unselected-pressed-label-text-color',\n  'unselected-pressed-state-layer-color',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'disabled-icon-opacity',\n  'disabled-label-text-opacity',\n  'disabled-outline-opacity',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  'outline-width',\n  'selected-focus-state-layer-color',\n  'unselected-focus-state-layer-color',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-outlined-segmented-button.values(\n    $deps,\n    $exclude-hardcoded-values\n  );\n\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-icon-icon-size': 'icon-size',\n      'selected-with-icon-icon-color': 'selected-icon-color',\n      'unselected-with-icon-icon-color': 'unselected-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-outlined-segmented-button-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-outlined-segmented-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-outlined-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-outlined-select';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'text-field-container-shape',\n  'text-field-container-shape-end-end',\n  'text-field-container-shape-end-start',\n  'text-field-container-shape-start-end',\n  'text-field-container-shape-start-start',\n  'text-field-disabled-input-text-color',\n  'text-field-disabled-input-text-opacity',\n  'text-field-disabled-label-text-color',\n  'text-field-disabled-label-text-opacity',\n  'text-field-disabled-leading-icon-color',\n  'text-field-disabled-leading-icon-opacity',\n  'text-field-disabled-outline-color',\n  'text-field-disabled-outline-opacity',\n  'text-field-disabled-outline-width',\n  'text-field-disabled-supporting-text-color',\n  'text-field-disabled-supporting-text-opacity',\n  'text-field-disabled-trailing-icon-color',\n  'text-field-disabled-trailing-icon-opacity',\n  'text-field-error-focus-input-text-color',\n  'text-field-error-focus-label-text-color',\n  'text-field-error-focus-leading-icon-color',\n  'text-field-error-focus-outline-color',\n  'text-field-error-focus-supporting-text-color',\n  'text-field-error-focus-trailing-icon-color',\n  'text-field-error-hover-input-text-color',\n  'text-field-error-hover-label-text-color',\n  'text-field-error-hover-leading-icon-color',\n  'text-field-error-hover-outline-color',\n  'text-field-error-hover-supporting-text-color',\n  'text-field-error-hover-trailing-icon-color',\n  'text-field-error-input-text-color',\n  'text-field-error-label-text-color',\n  'text-field-error-leading-icon-color',\n  'text-field-error-outline-color',\n  'text-field-error-supporting-text-color',\n  'text-field-error-trailing-icon-color',\n  'text-field-focus-input-text-color',\n  'text-field-focus-label-text-color',\n  'text-field-focus-leading-icon-color',\n  'text-field-focus-outline-color',\n  'text-field-focus-outline-width',\n  'text-field-focus-supporting-text-color',\n  'text-field-focus-trailing-icon-color',\n  'text-field-hover-input-text-color',\n  'text-field-hover-label-text-color',\n  'text-field-hover-leading-icon-color',\n  'text-field-hover-outline-color',\n  'text-field-hover-outline-width',\n  'text-field-hover-supporting-text-color',\n  'text-field-hover-trailing-icon-color',\n  'text-field-input-text-color',\n  'text-field-input-text-font',\n  'text-field-input-text-line-height',\n  'text-field-input-text-size',\n  'text-field-input-text-weight',\n  'text-field-label-text-color',\n  'text-field-label-text-font',\n  'text-field-label-text-line-height',\n  'text-field-label-text-populated-line-height',\n  'text-field-label-text-populated-size',\n  'text-field-label-text-size',\n  'text-field-label-text-weight',\n  'text-field-leading-icon-color',\n  'text-field-leading-icon-size',\n  'text-field-outline-color',\n  'text-field-outline-width',\n  'text-field-supporting-text-color',\n  'text-field-supporting-text-font',\n  'text-field-supporting-text-line-height',\n  'text-field-supporting-text-size',\n  'text-field-supporting-text-weight',\n  'text-field-trailing-icon-color',\n  'text-field-trailing-icon-size',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'menu-cascading-menu-indicator-icon-color',\n  'menu-cascading-menu-indicator-icon-size',\n  'menu-container-color',\n  'menu-container-elevation',\n  'menu-container-shadow-color',\n  'menu-container-shape',\n  'menu-divider-color',\n  'menu-divider-height',\n  'menu-list-item-container-height',\n  'menu-list-item-label-text-color',\n  'menu-list-item-label-text-font',\n  'menu-list-item-label-text-line-height',\n  'menu-list-item-label-text-size',\n  'menu-list-item-label-text-tracking',\n  'menu-list-item-label-text-type',\n  'menu-list-item-label-text-weight',\n  'menu-list-item-selected-container-color',\n  'menu-list-item-with-leading-icon-leading-icon-color',\n  'menu-list-item-with-leading-icon-leading-icon-size',\n  'menu-list-item-with-trailing-icon-trailing-icon-color',\n  'menu-list-item-with-trailing-icon-trailing-icon-size',\n  'text-field-container-color',\n  'text-field-error-hover-state-layer-color',\n  'text-field-error-hover-state-layer-opacity',\n  'text-field-hover-state-layer-color',\n  'text-field-hover-state-layer-opacity',\n  'text-field-input-text-tracking',\n  'text-field-input-text-type',\n  'text-field-label-text-tracking',\n  'text-field-label-text-type',\n  'text-field-supporting-text-tracking',\n  'text-field-supporting-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-outlined-select.values($deps, $exclude-hardcoded-values);\n  $new-tokens: shape.get-new-logical-shape-tokens(\n    $tokens,\n    'text-field-container-shape'\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  $tokens: map.merge(\n    $tokens,\n    (\n      // TODO(b/259455114): remove when focus tokens update to 3px\n      'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 3px)\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'text-field-container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-outlined-select-text-field-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-outlined-select-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-outlined-text-field.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-outlined-text-field';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'bottom-space',\n  'caret-color',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-input-text-color',\n  'disabled-input-text-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-icon-color',\n  'disabled-leading-icon-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'disabled-outline-width',\n  'disabled-supporting-text-color',\n  'disabled-supporting-text-opacity',\n  'disabled-trailing-icon-color',\n  'disabled-trailing-icon-opacity',\n  'error-focus-caret-color',\n  'error-focus-input-text-color',\n  'error-focus-label-text-color',\n  'error-focus-leading-icon-color',\n  'error-focus-outline-color',\n  'error-focus-supporting-text-color',\n  'error-focus-trailing-icon-color',\n  'error-hover-input-text-color',\n  'error-hover-label-text-color',\n  'error-hover-leading-icon-color',\n  'error-hover-outline-color',\n  'error-hover-supporting-text-color',\n  'error-hover-trailing-icon-color',\n  'error-input-text-color',\n  'error-label-text-color',\n  'error-leading-icon-color',\n  'error-outline-color',\n  'error-supporting-text-color',\n  'error-trailing-icon-color',\n  'focus-caret-color',\n  'focus-input-text-color',\n  'focus-label-text-color',\n  'focus-leading-icon-color',\n  'focus-outline-color',\n  'focus-outline-width',\n  'focus-supporting-text-color',\n  'focus-trailing-icon-color',\n  'hover-input-text-color',\n  'hover-label-text-color',\n  'hover-leading-icon-color',\n  'hover-outline-color',\n  'hover-outline-width',\n  'hover-supporting-text-color',\n  'hover-trailing-icon-color',\n  'icon-input-space',\n  'input-text-color',\n  'input-text-font',\n  'input-text-line-height',\n  'input-text-placeholder-color',\n  'input-text-prefix-color',\n  'input-text-prefix-trailing-space',\n  'input-text-size',\n  'input-text-suffix-color',\n  'input-text-suffix-leading-space',\n  'input-text-weight',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-populated-line-height',\n  'label-text-populated-size',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-icon-size',\n  'leading-space',\n  'outline-color',\n  'outline-width',\n  'supporting-text-color',\n  'supporting-text-font',\n  'supporting-text-line-height',\n  'supporting-text-size',\n  'supporting-text-weight',\n  'top-space',\n  'trailing-icon-color',\n  'trailing-icon-size',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'input-text-tracking',\n  'input-text-type',\n  'label-text-tracking',\n  'label-text-type',\n  'supporting-text-tracking',\n  'supporting-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      'icon-input-space': if($exclude-hardcoded-values, null, 16px),\n      'leading-space': if($exclude-hardcoded-values, null, 16px),\n      'trailing-space': if($exclude-hardcoded-values, null, 16px),\n      'top-space': if($exclude-hardcoded-values, null, 16px),\n      'bottom-space': if($exclude-hardcoded-values, null, 16px),\n      'input-text-prefix-trailing-space':\n        if($exclude-hardcoded-values, null, 2px),\n      'input-text-suffix-leading-space':\n        if($exclude-hardcoded-values, null, 2px),\n      // TODO(b/270705687): remove when focus-caret-color token added\n      'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 12px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 12px),\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens\n  );\n\n  $tokens: map.merge(\n    $tokens,\n    (\n      // TODO(b/259455114): remove when focus tokens update to 3px\n      'focus-outline-width': if($exclude-hardcoded-values, null, 3px)\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-outlined-text-field-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-outlined-text-field-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-primary-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-primary-navigation-tab';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-focus-icon-color',\n  'active-focus-label-text-color',\n  'active-hover-icon-color',\n  'active-hover-label-text-color',\n  'active-hover-state-layer-color',\n  'active-hover-state-layer-opacity',\n  'active-icon-color',\n  'active-indicator-color',\n  'active-indicator-height',\n  'active-indicator-shape',\n  'active-label-text-color',\n  'active-pressed-icon-color',\n  'active-pressed-label-text-color',\n  'active-pressed-state-layer-color',\n  'active-pressed-state-layer-opacity',\n  'container-color',\n  'container-elevation',\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'with-icon-and-label-text-container-height',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'active-focus-state-layer-color',\n  'active-focus-state-layer-opacity',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-primary-navigation-tab.values(\n    $deps,\n    $exclude-hardcoded-values: $exclude-hardcoded-values\n  );\n\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // rename inactive-\n      'inactive-focus-state-layer-color': 'focus-state-layer-color',\n      'inactive-focus-state-layer-opacity': 'focus-state-layer-opacity',\n      'inactive-hover-state-layer-color': 'hover-state-layer-color',\n      'inactive-hover-state-layer-opacity': 'hover-state-layer-opacity',\n      'inactive-pressed-state-layer-color': 'pressed-state-layer-color',\n      'inactive-pressed-state-layer-opacity': 'pressed-state-layer-opacity',\n      // rename with-icon- and inactive-\n      'with-icon-active-focus-icon-color': 'active-focus-icon-color',\n      'with-icon-active-hover-icon-color': 'active-hover-icon-color',\n      'with-icon-active-icon-color': 'active-icon-color',\n      'with-icon-active-pressed-icon-color': 'active-pressed-icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-inactive-focus-icon-color': 'focus-icon-color',\n      'with-icon-inactive-hover-icon-color': 'hover-icon-color',\n      'with-icon-inactive-icon-color': 'icon-color',\n      'with-icon-inactive-pressed-icon-color': 'pressed-icon-color',\n      // rename with-label-text- and inactive-\n      'with-label-text-label-text-font': 'label-text-font',\n      'with-label-text-label-text-line-height': 'label-text-line-height',\n      'with-label-text-label-text-size': 'label-text-size',\n      'with-label-text-label-text-tracking': 'label-text-tracking',\n      'with-label-text-label-text-weight': 'label-text-weight',\n      'with-label-text-active-focus-label-text-color':\n        'active-focus-label-text-color',\n      'with-label-text-active-hover-label-text-color':\n        'active-hover-label-text-color',\n      'with-label-text-active-label-text-color': 'active-label-text-color',\n      'with-label-text-active-pressed-label-text-color':\n        'active-pressed-label-text-color',\n      'with-label-text-inactive-focus-label-text-color':\n        'focus-label-text-color',\n      'with-label-text-inactive-hover-label-text-color':\n        'hover-label-text-color',\n      'with-label-text-inactive-label-text-color': 'label-text-color',\n      'with-label-text-inactive-pressed-label-text-color':\n        'pressed-label-text-color',\n      'with-label-text-label-text-type': 'label-text-type'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-primary-tab-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-primary-tab-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-radio.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-radio-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'disabled-selected-icon-color',\n  'disabled-selected-icon-opacity',\n  'disabled-unselected-icon-color',\n  'disabled-unselected-icon-opacity',\n  'focus-icon-color',\n  'hover-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'pressed-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'selected-focus-icon-color',\n  'selected-hover-icon-color',\n  'selected-hover-state-layer-color',\n  'selected-hover-state-layer-opacity',\n  'selected-icon-color',\n  'selected-pressed-icon-color',\n  'selected-pressed-state-layer-color',\n  'selected-pressed-state-layer-opacity',\n  'state-layer-size',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'selected-focus-state-layer-color',\n  'selected-focus-state-layer-opacity',\n  'unselected-focus-state-layer-color',\n  'unselected-focus-state-layer-opacity',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-radio-button.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $renamed-tokens: (\n      // Remove default \"unselected\" prefix (b/292244480)\n      'unselected-focus-icon-color': 'focus-icon-color',\n      'unselected-hover-icon-color': 'hover-icon-color',\n      'unselected-hover-state-layer-color': 'hover-state-layer-color',\n      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',\n      'unselected-icon-color': 'icon-color',\n      'unselected-pressed-icon-color': 'pressed-icon-color',\n      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',\n      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-radio-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-ripple.scss",
    "content": "//\n// Copyright 2022 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'hover-color',\n  'hover-opacity',\n  'pressed-color',\n  'pressed-opacity',\n  // go/keep-sorted end\n);\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-custom-properties: false) {\n  $tokens: (\n    'hover-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'pressed-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n  );\n\n  $tokens: validate.values($tokens, $supported-tokens: $supported-tokens);\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-ripple-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-secondary-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-secondary-navigation-tab';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-focus-icon-color',\n  'active-focus-label-text-color',\n  'active-hover-icon-color',\n  'active-hover-label-text-color',\n  'active-hover-state-layer-color',\n  'active-hover-state-layer-opacity',\n  'active-icon-color',\n  'active-indicator-color',\n  'active-indicator-height',\n  'active-indicator-shape',\n  'active-label-text-color',\n  'active-pressed-icon-color',\n  'active-pressed-label-text-color',\n  'active-pressed-state-layer-color',\n  'active-pressed-state-layer-opacity',\n  'container-color',\n  'container-elevation',\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // include an icon and the size will adjust;\n  // height is 48 and it's 64 with icon\n  'container-shadow-color',\n  'label-text-type',\n  'label-text-tracking',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity'\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-secondary-navigation-tab.values(\n    $deps,\n    $exclude-hardcoded-values: $exclude-hardcoded-values\n  );\n\n  $tokens: _add-missing-secondary-tokens($tokens);\n  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      'inactive-label-text-color': 'label-text-color',\n      'with-icon-active-icon-color': 'active-icon-color',\n      'with-icon-focus-icon-color': 'focus-icon-color',\n      'with-icon-hover-icon-color': 'hover-icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-inactive-icon-color': 'icon-color',\n      'with-icon-pressed-icon-color': 'pressed-icon-color',\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-secondary-tab-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-secondary-tab-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n\n// add missing secondary tokens to match primary variant.\n@function _add-missing-secondary-tokens($tokens) {\n  $tokens: map.merge(\n    $tokens,\n    (\n      'active-focus-icon-color': map.get($tokens, 'icon-color'),\n      'active-focus-label-text-color':\n        map.get($tokens, 'active-label-text-color'),\n      'active-hover-icon-color': map.get($tokens, 'icon-color'),\n      'active-hover-label-text-color':\n        map.get($tokens, 'active-label-text-color'),\n      'active-hover-state-layer-color':\n        map.get($tokens, 'hover-state-layer-color'),\n      'active-hover-state-layer-opacity':\n        map.get($tokens, 'hover-state-layer-opacity'),\n      'active-icon-color': map.get($tokens, 'icon-color'),\n      'active-indicator-shape': 0,\n      'active-pressed-icon-color': map.get($tokens, 'icon-color'),\n      'active-pressed-label-text-color':\n        map.get($tokens, 'active-label-text-color'),\n      'active-pressed-state-layer-color':\n        map.get($tokens, 'pressed-state-layer-color'),\n      'active-pressed-state-layer-opacity':\n        map.get($tokens, 'pressed-state-layer-opacity'),\n    )\n  );\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-slider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-slider';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'active-track-color',\n  'active-track-height',\n  'active-track-shape',\n  'disabled-active-track-color',\n  'disabled-active-track-opacity',\n  'disabled-handle-color',\n  'disabled-handle-elevation',\n  'disabled-inactive-track-color',\n  'disabled-inactive-track-opacity',\n  'focus-handle-color',\n  'handle-color',\n  'handle-elevation',\n  'handle-height',\n  'handle-shadow-color',\n  'handle-shape',\n  'handle-width',\n  'hover-handle-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'inactive-track-color',\n  'inactive-track-height',\n  'inactive-track-shape',\n  'label-container-color',\n  'label-container-height',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'pressed-handle-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'state-layer-size',\n  'with-overlap-handle-outline-color',\n  'with-overlap-handle-outline-width',\n  'with-tick-marks-active-container-color',\n  'with-tick-marks-container-size',\n  'with-tick-marks-disabled-container-color',\n  'with-tick-marks-inactive-container-color',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  'disabled-handle-opacity',\n  'label-container-elevation',\n  'label-text-type',\n  'label-text-tracking',\n  'track-elevation',\n  // for efficiency, tick marks are rendered as radial-gradients and\n  // have more limited customization\n  'with-tick-marks-container-shape',\n  // Due to how opacity is multiplied together in the browser, using\n  // these tokens results in low contrast tick marks.\n  'with-tick-marks-active-container-opacity',\n  'with-tick-marks-disabled-container-opacity',\n  'with-tick-marks-inactive-container-opacity',\n  // focus tokens no longer used.\n  'focus-state-layer-color',\n  'focus-state-layer-opacity'\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: validate.values(\n    md-comp-slider.values($deps, $exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $renamed-tokens: (\n      'label-label-text-color': 'label-text-color',\n      'label-label-text-type': 'label-text-type',\n      'label-label-text-font': 'label-text-font',\n      'label-label-text-line-height': 'label-text-line-height',\n      'label-label-text-size': 'label-text-size',\n      'label-label-text-tracking': 'label-text-tracking',\n      'label-label-text-weight': 'label-text-weight',\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $tokens: map.set($tokens, $token, var(--md-slider-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-suggestion-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-suggestion-chip';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'disabled-leading-icon-color',\n  'disabled-leading-icon-opacity',\n  'disabled-outline-color',\n  'disabled-outline-opacity',\n  'elevated-container-color',\n  'elevated-container-elevation',\n  'elevated-container-shadow-color',\n  'elevated-disabled-container-color',\n  'elevated-disabled-container-elevation',\n  'elevated-disabled-container-opacity',\n  'elevated-focus-container-elevation',\n  'elevated-hover-container-elevation',\n  'elevated-pressed-container-elevation',\n  'focus-label-text-color',\n  'focus-leading-icon-color',\n  'focus-outline-color',\n  'hover-label-text-color',\n  'hover-leading-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-label-space',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-icon-color',\n  'leading-space',\n  'outline-color',\n  'outline-width',\n  'pressed-label-text-color',\n  'pressed-leading-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'container-elevation',\n  'dragged-container-elevation',\n  'dragged-label-text-color',\n  'dragged-leading-icon-color',\n  'dragged-state-layer-color',\n  'dragged-state-layer-opacity',\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      'leading-space': if($exclude-hardcoded-values, null, 16px),\n      'trailing-space': if($exclude-hardcoded-values, null, 16px),\n      'icon-label-space': if($exclude-hardcoded-values, null, 8px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 8px),\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"flat-*\" prefix (b/275577569)\n      'flat-container-elevation': 'container-elevation',\n      'flat-disabled-outline-color': 'disabled-outline-color',\n      'flat-disabled-outline-opacity': 'disabled-outline-opacity',\n      'flat-focus-outline-color': 'focus-outline-color',\n      'flat-outline-color': 'outline-color',\n      'flat-outline-width': 'outline-width',\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-leading-icon-disabled-leading-icon-color':\n        'disabled-leading-icon-color',\n      'with-leading-icon-disabled-leading-icon-opacity':\n        'disabled-leading-icon-opacity',\n      'with-leading-icon-dragged-leading-icon-color':\n        'dragged-leading-icon-color',\n      'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',\n      'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',\n      'with-leading-icon-leading-icon-color': 'leading-icon-color',\n      'with-leading-icon-pressed-leading-icon-color':\n        'pressed-leading-icon-color',\n      // Rename \"leading-icon-size\" to \"icon-size\" (b/275577569)\n      'with-leading-icon-leading-icon-size': 'icon-size'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-suggestion-chip-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-suggestion-chip-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-switch.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'versions/v0_192/md-comp-switch';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'disabled-handle-color',\n  'disabled-handle-opacity',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'disabled-selected-handle-color',\n  'disabled-selected-handle-opacity',\n  'disabled-selected-icon-color',\n  'disabled-selected-icon-opacity',\n  'disabled-selected-track-color',\n  'disabled-track-color',\n  'disabled-track-opacity',\n  'disabled-track-outline-color',\n  'focus-handle-color',\n  'focus-icon-color',\n  'focus-track-color',\n  'focus-track-outline-color',\n  'handle-color',\n  'handle-height',\n  'handle-shape',\n  'handle-shape-end-end',\n  'handle-shape-end-start',\n  'handle-shape-start-end',\n  'handle-shape-start-start',\n  'handle-width',\n  'hover-handle-color',\n  'hover-icon-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'hover-track-color',\n  'hover-track-outline-color',\n  'icon-color',\n  'icon-size',\n  'pressed-handle-color',\n  'pressed-handle-height',\n  'pressed-handle-width',\n  'pressed-icon-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'pressed-track-color',\n  'pressed-track-outline-color',\n  'selected-focus-handle-color',\n  'selected-focus-icon-color',\n  'selected-focus-track-color',\n  'selected-handle-color',\n  'selected-handle-height',\n  'selected-handle-width',\n  'selected-hover-handle-color',\n  'selected-hover-icon-color',\n  'selected-hover-state-layer-color',\n  'selected-hover-state-layer-opacity',\n  'selected-hover-track-color',\n  'selected-icon-color',\n  'selected-icon-size',\n  'selected-pressed-handle-color',\n  'selected-pressed-icon-color',\n  'selected-pressed-state-layer-color',\n  'selected-pressed-state-layer-opacity',\n  'selected-pressed-track-color',\n  'selected-track-color',\n  'state-layer-shape',\n  'state-layer-size',\n  'touch-target-size',\n  'track-color',\n  'track-height',\n  'track-outline-color',\n  'track-outline-width',\n  'track-shape',\n  'track-shape-end-end',\n  'track-shape-end-start',\n  'track-shape-start-end',\n  'track-shape-start-start',\n  'track-width',\n  'with-icon-handle-height',\n  'with-icon-handle-width',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'selected-focus-state-layer-color',\n  'selected-focus-state-layer-opacity',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-switch.values($deps, $exclude-hardcoded-values);\n  $new-tokens: shape.get-new-logical-shape-tokens(\n    $tokens,\n    'handle-shape',\n    'track-shape'\n  );\n  $new-tokens: map.merge(\n    $new-tokens,\n    (\n      'touch-target-size': if($exclude-hardcoded-values, null, 48px)\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove default \"unselected\" prefix (b/292244480)\n      'disabled-unselected-handle-color': 'disabled-handle-color',\n      'disabled-unselected-handle-opacity': 'disabled-handle-opacity',\n      'disabled-unselected-icon-color': 'disabled-icon-color',\n      'disabled-unselected-icon-opacity': 'disabled-icon-opacity',\n      'disabled-unselected-track-color': 'disabled-track-color',\n      'disabled-unselected-track-outline-color': 'disabled-track-outline-color',\n      'unselected-focus-handle-color': 'focus-handle-color',\n      'unselected-focus-icon-color': 'focus-icon-color',\n      'unselected-focus-state-layer-color': 'focus-state-layer-color',\n      'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity',\n      'unselected-focus-track-color': 'focus-track-color',\n      'unselected-focus-track-outline-color': 'focus-track-outline-color',\n      'unselected-handle-color': 'handle-color',\n      'unselected-handle-height': 'handle-height',\n      'unselected-handle-width': 'handle-width',\n      'unselected-hover-handle-color': 'hover-handle-color',\n      'unselected-hover-icon-color': 'hover-icon-color',\n      'unselected-hover-state-layer-color': 'hover-state-layer-color',\n      'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity',\n      'unselected-hover-track-color': 'hover-track-color',\n      'unselected-hover-track-outline-color': 'hover-track-outline-color',\n      'unselected-icon-color': 'icon-color',\n      'unselected-icon-size': 'icon-size',\n      'unselected-pressed-handle-color': 'pressed-handle-color',\n      'unselected-pressed-icon-color': 'pressed-icon-color',\n      'unselected-pressed-state-layer-color': 'pressed-state-layer-color',\n      'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity',\n      'unselected-pressed-track-color': 'pressed-track-color',\n      'unselected-pressed-track-outline-color': 'pressed-track-outline-color',\n      'unselected-track-color': 'track-color',\n      'unselected-track-outline-color': 'track-outline-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      $shape-tokens: ('handle-shape', 'track-shape');\n      @each $shape-token in $shape-tokens {\n        @if string.index($token, '#{$shape-token}-') == 1 {\n          // Add fallback to shorthand for logical shape properties.\n          $value: var(--md-switch-#{$shape-token}, #{$value});\n        }\n      }\n\n      $tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value}));\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-comp-test-table.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'md-sys-color';\n@use 'md-sys-typescale';\n// go/keep-sorted end\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default) {\n  @return (\n    'cell-color': map.get($deps, 'md-sys-color', 'surface-container-lowest'),\n    'cell-position': 'relative',\n    'cell-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'cell-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'cell-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'cell-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'cell-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'cell-grid-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'header-cell-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'header-cell-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-cell-text-font':\n      map.get($deps, 'md-sys-typescale', 'title-medium-font'),\n    'header-cell-text-size':\n      map.get($deps, 'md-sys-typescale', 'title-medium-size'),\n    'header-cell-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),\n    'header-cell-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline')\n  );\n}\n"
  },
  {
    "path": "tokens/_md-comp-text-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n@use 'sass:string';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/shape';\n@use 'internal/validate';\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n@use 'versions/v0_192/md-comp-text-button';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'container-height',\n  'container-shape',\n  'container-shape-end-end',\n  'container-shape-end-start',\n  'container-shape-start-end',\n  'container-shape-start-start',\n  'disabled-icon-color',\n  'disabled-icon-opacity',\n  'disabled-label-text-color',\n  'disabled-label-text-opacity',\n  'focus-icon-color',\n  'focus-label-text-color',\n  'hover-icon-color',\n  'hover-label-text-color',\n  'hover-state-layer-color',\n  'hover-state-layer-opacity',\n  'icon-color',\n  'icon-size',\n  'label-text-color',\n  'label-text-font',\n  'label-text-line-height',\n  'label-text-size',\n  'label-text-weight',\n  'leading-space',\n  'pressed-icon-color',\n  'pressed-label-text-color',\n  'pressed-state-layer-color',\n  'pressed-state-layer-opacity',\n  'trailing-space',\n  'with-leading-icon-leading-space',\n  'with-leading-icon-trailing-space',\n  'with-trailing-icon-leading-space',\n  'with-trailing-icon-trailing-space',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'focus-state-layer-color',\n  'focus-state-layer-opacity',\n  'label-text-tracking',\n  'label-text-type',\n  // go/keep-sorted end\n);\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(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-comp-text-button.values($deps, $exclude-hardcoded-values);\n  $new-tokens: map.merge(\n    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),\n    (\n      // b/198759625 - Remove once spacing tokens are formally added\n      // go/keep-sorted start\n      'leading-space': if($exclude-hardcoded-values, null, 12px),\n      'trailing-space': if($exclude-hardcoded-values, null, 12px),\n      'with-leading-icon-leading-space':\n        if($exclude-hardcoded-values, null, 12px),\n      'with-leading-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 16px),\n      'with-trailing-icon-leading-space':\n        if($exclude-hardcoded-values, null, 16px),\n      'with-trailing-icon-trailing-space':\n        if($exclude-hardcoded-values, null, 12px),\n      // go/keep-sorted end\n    )\n  );\n\n  $tokens: validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens,\n    $new-tokens: $new-tokens,\n    $renamed-tokens: (\n      // Remove \"with-*\" prefixes (b/273534858)\n      'with-icon-disabled-icon-color': 'disabled-icon-color',\n      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',\n      'with-icon-focus-icon-color': 'focus-icon-color',\n      'with-icon-hover-icon-color': 'hover-icon-color',\n      'with-icon-icon-color': 'icon-color',\n      'with-icon-icon-size': 'icon-size',\n      'with-icon-pressed-icon-color': 'pressed-icon-color'\n    )\n  );\n\n  @if not $exclude-custom-properties {\n    @each $token, $value in $tokens {\n      @if string.index($token, 'container-shape-') == 1 {\n        // Add fallback to shorthand for logical shape properties.\n        $value: var(--md-text-button-container-shape, #{$value});\n      }\n\n      $tokens: map.set(\n        $tokens,\n        $token,\n        var(--md-text-button-#{$token}, #{$value})\n      );\n    }\n  }\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-ref-palette.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'versions/v0_192/md-ref-palette';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'black',\n  'error0',\n  'error10',\n  'error100',\n  'error20',\n  'error30',\n  'error40',\n  'error50',\n  'error60',\n  'error70',\n  'error80',\n  'error90',\n  'error95',\n  'error99',\n  'neutral-variant0',\n  'neutral-variant10',\n  'neutral-variant100',\n  'neutral-variant20',\n  'neutral-variant30',\n  'neutral-variant40',\n  'neutral-variant50',\n  'neutral-variant60',\n  'neutral-variant70',\n  'neutral-variant80',\n  'neutral-variant90',\n  'neutral-variant95',\n  'neutral-variant99',\n  'neutral0',\n  'neutral10',\n  'neutral100',\n  'neutral12',\n  'neutral17',\n  'neutral20',\n  'neutral22',\n  'neutral24',\n  'neutral30',\n  'neutral4',\n  'neutral40',\n  'neutral50',\n  'neutral6',\n  'neutral60',\n  'neutral70',\n  'neutral80',\n  'neutral87',\n  'neutral90',\n  'neutral92',\n  'neutral94',\n  'neutral95',\n  'neutral96',\n  'neutral98',\n  'neutral99',\n  'primary0',\n  'primary10',\n  'primary100',\n  'primary20',\n  'primary30',\n  'primary40',\n  'primary50',\n  'primary60',\n  'primary70',\n  'primary80',\n  'primary90',\n  'primary95',\n  'primary99',\n  'secondary0',\n  'secondary10',\n  'secondary100',\n  'secondary20',\n  'secondary30',\n  'secondary40',\n  'secondary50',\n  'secondary60',\n  'secondary70',\n  'secondary80',\n  'secondary90',\n  'secondary95',\n  'secondary99',\n  'tertiary0',\n  'tertiary10',\n  'tertiary100',\n  'tertiary20',\n  'tertiary30',\n  'tertiary40',\n  'tertiary50',\n  'tertiary60',\n  'tertiary70',\n  'tertiary80',\n  'tertiary90',\n  'tertiary95',\n  'tertiary99',\n  'white',\n  // go/keep-sorted end\n);\n\n@function values($exclude-hardcoded-values: false) {\n  @return validate.values(\n    md-ref-palette.values($exclude-hardcoded-values),\n    $supported-tokens: $supported-tokens\n  );\n}\n"
  },
  {
    "path": "tokens/_md-ref-typeface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'versions/v0_192/md-ref-typeface';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'brand',\n  'plain',\n  'weight-bold',\n  'weight-medium',\n  'weight-regular',\n  // go/keep-sorted end\n);\n\n@function values(\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-ref-typeface.values(\n    $exclude-hardcoded-values: $exclude-hardcoded-values,\n  );\n\n  @if not $exclude-custom-properties {\n    // Create --md-ref-typeface-* custom properties\n    @each $token, $value in $tokens {\n      @if $value != null {\n        $tokens: map.set(\n          $tokens,\n          $token,\n          var(--md-ref-typeface-#{$token}, #{$value})\n        );\n      }\n    }\n  }\n\n  @return validate.values($tokens, $supported-tokens: $supported-tokens);\n}\n"
  },
  {
    "path": "tokens/_md-sys-color.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-ref-palette';\n@use 'versions/v0_192/md-sys-color';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'background',\n  'error',\n  'error-container',\n  'inverse-on-surface',\n  'inverse-primary',\n  'inverse-surface',\n  'on-background',\n  'on-error',\n  'on-error-container',\n  'on-primary',\n  'on-primary-container',\n  'on-primary-fixed',\n  'on-primary-fixed-variant',\n  'on-secondary',\n  'on-secondary-container',\n  'on-secondary-fixed',\n  'on-secondary-fixed-variant',\n  'on-surface',\n  'on-surface-variant',\n  'on-tertiary',\n  'on-tertiary-container',\n  'on-tertiary-fixed',\n  'on-tertiary-fixed-variant',\n  'outline',\n  'outline-variant',\n  'primary',\n  'primary-container',\n  'primary-fixed',\n  'primary-fixed-dim',\n  'scrim',\n  'secondary',\n  'secondary-container',\n  'secondary-fixed',\n  'secondary-fixed-dim',\n  'shadow',\n  'surface',\n  'surface-bright',\n  'surface-container',\n  'surface-container-high',\n  'surface-container-highest',\n  'surface-container-low',\n  'surface-container-lowest',\n  'surface-dim',\n  'surface-tint',\n  'surface-variant',\n  'tertiary',\n  'tertiary-container',\n  'tertiary-fixed',\n  'tertiary-fixed-dim',\n  // go/keep-sorted end\n);\n\n$_default-dark: (\n  'md-ref-palette': md-ref-palette.values(),\n);\n\n@function values-dark(\n  $deps: $_default-dark,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-sys-color.values-dark($deps);\n\n  @if not $exclude-custom-properties {\n    // Create --md-sys-color-* custom properties\n    @each $token, $value in $tokens {\n      @if $value != null {\n        $tokens: map.set(\n          $tokens,\n          $token,\n          var(--md-sys-color-#{$token}, #{$value})\n        );\n      }\n    }\n  }\n\n  @return validate.values($tokens, $supported-tokens: $supported-tokens);\n}\n\n$_default-light: (\n  'md-ref-palette': md-ref-palette.values(),\n);\n\n@function values-light(\n  $deps: $_default-light,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-sys-color.values-light($deps);\n\n  @if not $exclude-custom-properties {\n    // Create --md-sys-color-* custom properties\n    @each $token, $value in $tokens {\n      @if $value != null {\n        $tokens: map.set(\n          $tokens,\n          $token,\n          var(--md-sys-color-#{$token}, #{$value})\n        );\n      }\n    }\n  }\n\n  @return validate.values($tokens, $supported-tokens: $supported-tokens);\n}\n"
  },
  {
    "path": "tokens/_md-sys-elevation.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'versions/v0_192/md-sys-elevation';\n// go/keep-sorted end\n\n@function values($exclude-hardcoded-values: false) {\n  $tokens: md-sys-elevation.values($exclude-hardcoded-values);\n  $tokens: map.merge(\n    $tokens,\n    (\n      // Elevation levels on web should use the level number, not the dp value.\n      // We can remove this if the generated tokens swap from dp to level. See\n      // b/261602454.\n      'level0': if($exclude-hardcoded-values, null, 0),\n      'level1': if($exclude-hardcoded-values, null, 1),\n      'level2': if($exclude-hardcoded-values, null, 2),\n      'level3': if($exclude-hardcoded-values, null, 3),\n      'level4': if($exclude-hardcoded-values, null, 4),\n      'level5': if($exclude-hardcoded-values, null, 5)\n    )\n  );\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-sys-motion.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'versions/v0_192/md-sys-motion';\n// go/keep-sorted end\n\n@function values($exclude-hardcoded-values: false) {\n  @return md-sys-motion.values($exclude-hardcoded-values);\n}\n"
  },
  {
    "path": "tokens/_md-sys-shape.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'versions/v0_192/md-sys-shape';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'corner-extra-large',\n  'corner-extra-small',\n  'corner-full',\n  'corner-large',\n  'corner-medium',\n  'corner-none',\n  'corner-small',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'corner-extra-large-top',\n  'corner-extra-small-top',\n  'corner-large-end',\n  'corner-large-start',\n  'corner-large-top',\n  // go/keep-sorted end\n);\n\n@function values(\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $original-tokens: md-sys-shape.values($exclude-hardcoded-values);\n  $tokens: validate.values(\n    $original-tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens\n  );\n\n  @if not $exclude-custom-properties {\n    // Create --md-sys-shape-* custom properties\n    @each $token, $value in $tokens {\n      @if $value != null {\n        $tokens: map.set(\n          $tokens,\n          $token,\n          var(--md-sys-shape-#{$token}, #{$value})\n        );\n      }\n    }\n  }\n\n  // Add multi-corner shape tokens purely for other Sass token APIs. These do\n  // not represent real token custom properties that can be set (there is no\n  // `--md-sys-shape-corner-extra-large-top` custom property).\n  // Instead, these are shorthand values that point to single-corner custom\n  // properties for usage in Sass component token mappings.\n  $tokens: map.merge(\n    $tokens,\n    (\n      'corner-extra-large-top': (\n        map.get($tokens, 'corner-extra-large'),\n        map.get($tokens, 'corner-extra-large'),\n        map.get($tokens, 'corner-none'),\n        map.get($tokens, 'corner-none'),\n      ),\n      'corner-extra-small-top': (\n        map.get($tokens, 'corner-extra-small'),\n        map.get($tokens, 'corner-extra-small'),\n        map.get($tokens, 'corner-none'),\n        map.get($tokens, 'corner-none'),\n      ),\n      'corner-large-end': (\n        map.get($tokens, 'corner-none'),\n        map.get($tokens, 'corner-large'),\n        map.get($tokens, 'corner-large'),\n        map.get($tokens, 'corner-none'),\n      ),\n      'corner-large-start': (\n        map.get($tokens, 'corner-large'),\n        map.get($tokens, 'corner-none'),\n        map.get($tokens, 'corner-none'),\n        map.get($tokens, 'corner-large'),\n      ),\n      'corner-large-top': (\n        map.get($tokens, 'corner-large'),\n        map.get($tokens, 'corner-large'),\n        map.get($tokens, 'corner-none'),\n        map.get($tokens, 'corner-none'),\n      ),\n    )\n  );\n\n  @return $tokens;\n}\n"
  },
  {
    "path": "tokens/_md-sys-state.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'versions/v0_192/md-sys-state';\n// go/keep-sorted end\n\n@function values($exclude-hardcoded-values: false) {\n  @return md-sys-state.values($exclude-hardcoded-values);\n}\n"
  },
  {
    "path": "tokens/_md-sys-typescale.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use 'internal/validate';\n@use 'md-ref-typeface';\n@use 'versions/v0_192/md-sys-typescale';\n// go/keep-sorted end\n\n$supported-tokens: (\n  // go/keep-sorted start\n  'body-large-font',\n  'body-large-line-height',\n  'body-large-size',\n  'body-large-weight',\n  'body-medium-font',\n  'body-medium-line-height',\n  'body-medium-size',\n  'body-medium-weight',\n  'body-small-font',\n  'body-small-line-height',\n  'body-small-size',\n  'body-small-weight',\n  'display-large-font',\n  'display-large-line-height',\n  'display-large-size',\n  'display-large-weight',\n  'display-medium-font',\n  'display-medium-line-height',\n  'display-medium-size',\n  'display-medium-weight',\n  'display-small-font',\n  'display-small-line-height',\n  'display-small-size',\n  'display-small-weight',\n  'headline-large-font',\n  'headline-large-line-height',\n  'headline-large-size',\n  'headline-large-weight',\n  'headline-medium-font',\n  'headline-medium-line-height',\n  'headline-medium-size',\n  'headline-medium-weight',\n  'headline-small-font',\n  'headline-small-line-height',\n  'headline-small-size',\n  'headline-small-weight',\n  'label-large-font',\n  'label-large-line-height',\n  'label-large-size',\n  'label-large-weight',\n  'label-large-weight-prominent',\n  'label-medium-font',\n  'label-medium-line-height',\n  'label-medium-size',\n  'label-medium-weight',\n  'label-medium-weight-prominent',\n  'label-small-font',\n  'label-small-line-height',\n  'label-small-size',\n  'label-small-weight',\n  'title-large-font',\n  'title-large-line-height',\n  'title-large-size',\n  'title-large-weight',\n  'title-medium-font',\n  'title-medium-line-height',\n  'title-medium-size',\n  'title-medium-weight',\n  'title-small-font',\n  'title-small-line-height',\n  'title-small-size',\n  'title-small-weight',\n  // go/keep-sorted end\n);\n\n$unsupported-tokens: (\n  // go/keep-sorted start\n  'body-large',\n  'body-large-tracking',\n  'body-medium',\n  'body-medium-tracking',\n  'body-small',\n  'body-small-tracking',\n  'display-large',\n  'display-large-tracking',\n  'display-medium',\n  'display-medium-tracking',\n  'display-small',\n  'display-small-tracking',\n  'headline-large',\n  'headline-large-tracking',\n  'headline-medium',\n  'headline-medium-tracking',\n  'headline-small',\n  'headline-small-tracking',\n  'label-large',\n  'label-large-tracking',\n  'label-medium',\n  'label-medium-tracking',\n  'label-small',\n  'label-small-tracking',\n  'title-large',\n  'title-large-tracking',\n  'title-medium',\n  'title-medium-tracking',\n  'title-small',\n  'title-small-tracking',\n  // go/keep-sorted end\n);\n\n$_default: (\n  'md-ref-typeface': md-ref-typeface.values(),\n);\n\n@function values(\n  $deps: $_default,\n  $exclude-hardcoded-values: false,\n  $exclude-custom-properties: false\n) {\n  $tokens: md-sys-typescale.values(\n    $deps,\n    $exclude-hardcoded-values: $exclude-hardcoded-values\n  );\n\n  @if not $exclude-custom-properties {\n    // Create --md-sys-typescale-* custom properties\n    @each $token, $value in $tokens {\n      @if $value != null {\n        $tokens: map.set(\n          $tokens,\n          $token,\n          var(--md-sys-typescale-#{$token}, #{$value})\n        );\n      }\n    }\n  }\n\n  @return validate.values(\n    $tokens,\n    $supported-tokens: $supported-tokens,\n    $unsupported-tokens: $unsupported-tokens\n  );\n}\n"
  },
  {
    "path": "tokens/internal/_shape.scss",
    "content": "//\n// Copyright 2024 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n// go/keep-sorted end\n\n/// Returns a map of 4 logical tokens (start-start, start-end, end-end,\n/// and end-start) for each of the given shape tokens in the provided token\n/// map.\n///\n/// @example scss\n///   $tokens: ('container-shape': 16px 16px 0px 0px);\n///   $new-tokens: shape.get-new-logical-shape-tokens(\n///     $tokens,\n///     'container-shape'\n///   );\n///   // (\n///   //   'container-shape-start-start': 16px,\n///   //   'container-shape-start-end': 16px,\n///   //   'container-shape-end-end': 0px,\n///   //   'container-shape-end-start': 0px,\n///   // )\n///\n/// @param $tokens A Map of tokens.\n/// @param $shape-tokens One or more shape tokens in the provided map. Each\n///     shape token will add 4 logical shape tokens to the returned map.\n/// @return A map with 4 logical tokens for each provided shape token.\n@function get-new-logical-shape-tokens($tokens, $shape-tokens...) {\n  $new-logical-tokens: ();\n  $logical-suffixes: (\n    // top-left\n    'start-start',\n    // top-right\n    'start-end',\n    // bottom-right\n    'end-end',\n    // bottom-left\n    'end-start'\n  );\n\n  @each $shape-token in $shape-tokens {\n    $shorthand-value: _expand-shorthand-to-list(map.get($tokens, $shape-token));\n\n    @each $logical-suffix in $logical-suffixes {\n      $logical-token: '#{$shape-token}-#{$logical-suffix}';\n      $logical-index: list.index($logical-suffixes, $logical-suffix);\n\n      $new-logical-tokens: map.set(\n        $new-logical-tokens,\n        $logical-token,\n        list.nth($shorthand-value, $logical-index)\n      );\n    }\n  }\n\n  @return $new-logical-tokens;\n}\n\n@function _expand-shorthand-to-list($shorthand) {\n  @if meta.type-of($shorthand) != 'list' or list.length($shorthand) == 1 {\n    @return ($shorthand, $shorthand, $shorthand, $shorthand);\n  }\n\n  @if list.length($shorthand) == 2 {\n    $top-left-and-bottom-right: list.nth($shorthand, 1);\n    $top-right-and-bottom-left: list.nth($shorthand, 2);\n    @return (\n      $top-left-and-bottom-right,\n      $top-right-and-bottom-left,\n      $top-left-and-bottom-right,\n      $top-right-and-bottom-left\n    );\n  }\n\n  @if list.length($shorthand) == 3 {\n    $top-left: list.nth($shorthand, 1);\n    $top-right-and-bottom-left: list.nth($shorthand, 2);\n    $bottom-right: list.nth($shorthand, 3);\n    @return (\n      $top-left,\n      $top-right-and-bottom-left,\n      $bottom-right,\n      $top-right-and-bottom-left\n    );\n  }\n\n  @return $shorthand;\n}\n"
  },
  {
    "path": "tokens/internal/_validate.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n// go/keep-sorted end\n\n/// Validates the Map returned from `tokens.md-comp-*-values()` functions.\n///\n/// Validation requires a `$values` Map and at least the `$supported-tokens`\n/// keyword argument.\n/// @example - scss\n///   $tokens: validate.values(\n///     md-comp-foo.values($deps, $exclude-hardcoded-values),\n///     $supported-tokens: (),\n///       'foo-color',\n///       'foo-size',\n///     ),\n///   );\n///\n/// Additional keyword arguments for `$unsupported-tokens`, `$renamed-tokens`,\n/// and `$new-tokens` are optional.\n///\n/// @param {Map} $values - The values Map returned from\n///     `tokens.md-comp-*-values()` functions.\n/// @param {List} $supported-tokens - Keyword argument for every token that is\n///     supported.\n/// @param {List} $unsupported-tokens [null] - Keyword argument for every token\n///     that is not supported and should be removed.\n/// @param {Map} $renamed-tokens [null] - Keyword argument for a Map whose keys\n///     are token names and values are new token names to rename them to. The\n///     new token name must appear in the `$supported-tokens` list.\n/// @param {Map} $new-tokens [null] - Keyword argument for a Map whose keys\n///     and values are new tokens to be added. They must also appear in the\n///     `$supported-tokens` list.\n/// @return {Map} The `tokens.md-comp-*-values()` Map with any unsupported\n///     tokens removed, renamed tokens updated, and new tokens added.\n@function values($values, $tokens...) {\n  $tokens: meta.keywords($tokens);\n\n  $renamed-tokens: map.get($tokens, 'renamed-tokens');\n  @if $renamed-tokens {\n    @if meta.type-of($renamed-tokens) != 'map' {\n      @error 'validate.values($renamed-tokens) must be a map.';\n    }\n\n    @each $old-token, $new-token in $renamed-tokens {\n      @if not map.has-key($values, $old-token) {\n        @error 'validate.values($renamed-tokens: (\\'#{$old-token}\\': \\'#{$new-token}\\')) old-token in not the provided values.';\n      }\n\n      $values: map.set($values, $new-token, map.get($values, $old-token));\n      $values: map.remove($values, $old-token);\n    }\n  }\n\n  $unsupported-tokens: map.get($tokens, 'unsupported-tokens');\n  @if $unsupported-tokens {\n    @if meta.type-of($unsupported-tokens) != 'list' {\n      @error 'validate.values($unsupported-tokens) must be a list.';\n    }\n\n    @each $unsupported-token in $unsupported-tokens {\n      @if not map.has-key($values, $unsupported-token) {\n        @error 'validate.values($unsupported-tokens: (\\'#{$unsupported-token}\\')) token is not in the provided values.';\n      }\n\n      $values: map.remove($values, $unsupported-token);\n    }\n  }\n\n  $new-tokens: map.get($tokens, 'new-tokens');\n  @if $new-tokens {\n    @if meta.type-of($new-tokens) != 'map' {\n      @error 'validate.values($new-tokens) must be a map.';\n    }\n\n    @each $new-token, $new-value in $new-tokens {\n      @if map.has-key($values, $new-token) {\n        @warn 'validate.values($new-tokens: (\\'#{$new-token}\\': \\'#{$new-value}\\')) already exists. Has it been added to tokens? If so, remove this new token.';\n      }\n\n      $values: map.set($values, $new-token, $new-value);\n    }\n  }\n\n  $supported-tokens: map.get($tokens, 'supported-tokens');\n  @if not $supported-tokens or meta.type-of($supported-tokens) != 'list' {\n    @error 'validate.values() must include a $supported-tokens list.';\n  }\n\n  @each $token in map.keys($values) {\n    @if list.index($supported-tokens, $token) == null {\n      @error 'validate.values($supported-tokens) is missing the \\'#{$token}\\' token. Does it need adding to $unsupported-tokens?';\n    }\n  }\n\n  @each $supported-token in $supported-tokens {\n    @if not map.has-key($values, $supported-token) {\n      @error 'The provided values are missing the supported \\'#{$supported-token}\\' token.';\n    }\n  }\n\n  @return $values;\n}\n"
  },
  {
    "path": "tokens/v0_192/_index.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n/// @deprecated this folder has moved to `@material/web/tokens/versions/v0_192`\n/// TODO: b/449809799 - remove this folder in the next major version.\n@forward '../versions/v0_192/index';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-assist-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-assist-chip';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-badge.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-badge';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-banner.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-banner';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-bottom-app-bar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-bottom-app-bar';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-carousel-item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-carousel-item';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-checkbox.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-checkbox';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-circular-progress-indicator.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-circular-progress-indicator';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-data-table.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-data-table';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-date-input-modal.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-date-input-modal';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-date-picker-docked.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-date-picker-docked';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-date-picker-modal.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-date-picker-modal';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-dialog';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-divider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-divider';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-elevated-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-elevated-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-elevated-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-elevated-card';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-extended-fab-branded.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-extended-fab-branded';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-extended-fab-primary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-extended-fab-primary';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-extended-fab-secondary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-extended-fab-secondary';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-extended-fab-surface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-extended-fab-surface';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-extended-fab-tertiary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-extended-fab-tertiary';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-branded-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-branded-large';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-branded.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-branded';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-primary-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-primary-large';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-primary-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-primary-small';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-primary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-primary';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-secondary-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-secondary-large';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-secondary-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-secondary-small';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-secondary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-secondary';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-surface-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-surface-large';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-surface-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-surface-small';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-surface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-surface';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-tertiary-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-tertiary-large';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-tertiary-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-tertiary-small';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-fab-tertiary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-fab-tertiary';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-autocomplete.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-autocomplete';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-card';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-icon-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-menu-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-menu-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-select';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-text-field.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-text-field';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-tonal-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-tonal-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filled-tonal-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filled-tonal-icon-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-filter-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-filter-chip';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-full-screen-dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-full-screen-dialog';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-icon-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-input-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-input-chip';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-linear-progress-indicator.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-linear-progress-indicator';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-list.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-list';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-menu.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-menu';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-navigation-bar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-navigation-bar';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-navigation-drawer.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-navigation-drawer';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-navigation-rail.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-navigation-rail';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-autocomplete.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-autocomplete';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-card';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-icon-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-menu-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-menu-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-segmented-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-segmented-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-select';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-outlined-text-field.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-outlined-text-field';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-plain-tooltip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-plain-tooltip';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-primary-navigation-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-primary-navigation-tab';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-radio-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-radio-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-rich-tooltip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-rich-tooltip';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-scrim.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-scrim';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-search-bar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-search-bar';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-search-view.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-search-view';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-secondary-navigation-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-secondary-navigation-tab';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-sheet-bottom.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-sheet-bottom';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-sheet-floating.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-sheet-floating';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-sheet-side.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-sheet-side';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-slider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-slider';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-snackbar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-snackbar';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-standard-menu-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-standard-menu-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-suggestion-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-suggestion-chip';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-switch.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-switch';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-text-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-text-button';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-time-input.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-time-input';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-time-picker.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-time-picker';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-top-app-bar-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-top-app-bar-large';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-top-app-bar-medium.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-top-app-bar-medium';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-top-app-bar-small-centered.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-top-app-bar-small-centered';\n"
  },
  {
    "path": "tokens/v0_192/_md-comp-top-app-bar-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-comp-top-app-bar-small';\n"
  },
  {
    "path": "tokens/v0_192/_md-ref-palette.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-ref-palette';\n"
  },
  {
    "path": "tokens/v0_192/_md-ref-typeface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-ref-typeface';\n"
  },
  {
    "path": "tokens/v0_192/_md-sys-color.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-sys-color';\n"
  },
  {
    "path": "tokens/v0_192/_md-sys-elevation.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-sys-elevation';\n"
  },
  {
    "path": "tokens/v0_192/_md-sys-motion.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-sys-motion';\n"
  },
  {
    "path": "tokens/v0_192/_md-sys-shape.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-sys-shape';\n"
  },
  {
    "path": "tokens/v0_192/_md-sys-state.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-sys-state';\n"
  },
  {
    "path": "tokens/v0_192/_md-sys-typescale.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@forward '../versions/v0_192/md-sys-typescale';\n"
  },
  {
    "path": "tokens/v0_192/index.test.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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": "tokens/v0_192/lib.test.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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": "tokens/versions/README.md",
    "content": "This folder contains auto-generated files for Material Design token versions.\n\n> **WARNING: These files may unexpectedly change across different non-major\n> versions of `@material/web`.**\n>\n> Most users should ignore this folder and use other APIs provided by\n> `@material/web/tokens`.\n\n`@material/web/tokens/versions` is useful for custom implementations of or\nexperimentations with the Material Design system.\n\nTo avoid unexpected breakages when using these files, save the *exact version*\nof `@material/web` instead of a version range (e.g. `@2.0.0` instead of\n`@^2.0.0`).\n\n```\nExample of a minor breaking change:\n\n<!-- v2.0.0 - add tokens v5 -->\n@material/web@2.0.0/tokens/version/v5_0/_md-sys-color.scss\n\nThe path to this file may break in a typically non-breaking minor version bump.\n\n<!-- v2.1.0 - update v5 tokens to include a new component -->\n@material/web@2.1.0/tokens/version/v5_1/_md-sys-color.scss\n```\n"
  },
  {
    "path": "tokens/versions/v0_192/_index.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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": "tokens/versions/v0_192/_md-comp-assist-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-badge.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-banner.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-low'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\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": "tokens/versions/v0_192/_md-comp-bottom-app-bar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-carousel-item.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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": "tokens/versions/v0_192/_md-comp-checkbox.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-circular-progress-indicator.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-data-table.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-highest'),\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": "tokens/versions/v0_192/_md-comp-date-input-modal.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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-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": "tokens/versions/v0_192/_md-comp-date-picker-docked.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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-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": "tokens/versions/v0_192/_md-comp-date-picker-modal.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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-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": "tokens/versions/v0_192/_md-comp-dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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'),\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": "tokens/versions/v0_192/_md-comp-divider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-elevated-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-low'),\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    '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": "tokens/versions/v0_192/_md-comp-elevated-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-low'),\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    '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": "tokens/versions/v0_192/_md-comp-extended-fab-branded.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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-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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-extended-fab-primary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-extended-fab-secondary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-extended-fab-surface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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', '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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-extended-fab-tertiary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-branded-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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-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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-fab-branded.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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-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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-fab-primary-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-primary-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-primary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-secondary-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-secondary-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-secondary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-surface-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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', '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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-fab-surface-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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', '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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-fab-surface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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', '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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-fab-tertiary-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-tertiary-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-fab-tertiary.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-filled-autocomplete.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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    '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-container-highest'),\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": "tokens/versions/v0_192/_md-comp-filled-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-filled-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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": "tokens/versions/v0_192/_md-comp-filled-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-width': 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-container-highest')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-filled-menu-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-filled-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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-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-container-highest'),\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-container-highest'),\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, 24px),\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": "tokens/versions/v0_192/_md-comp-filled-text-field.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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": "tokens/versions/v0_192/_md-comp-filled-tonal-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-filled-tonal-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-width': 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-container-highest')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-filter-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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-container-low'),\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": "tokens/versions/v0_192/_md-comp-full-screen-dialog.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-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-color':\n      map.get($deps, 'md-sys-color', 'surface-container'),\n    'header-on-scroll-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-height': if($exclude-hardcoded-values, null, 40px),\n    'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'state-layer-width': 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": "tokens/versions/v0_192/_md-comp-input-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-linear-progress-indicator.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-highest'),\n    'track-height': if($exclude-hardcoded-values, null, 4px),\n    'track-shape': map.get($deps, 'md-sys-shape', 'corner-none')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-list.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    'divider-leading-space': if($exclude-hardcoded-values, null, 16px),\n    'divider-trailing-space': if($exclude-hardcoded-values, null, 16px),\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, 24px),\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-space': if($exclude-hardcoded-values, null, 16px),\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-space': if($exclude-hardcoded-values, null, 16px),\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": "tokens/versions/v0_192/_md-comp-menu.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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    'list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'list-item-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'list-item-selected-with-leading-icon-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'menu-list-item-with-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-navigation-bar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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    '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": "tokens/versions/v0_192/_md-comp-navigation-drawer.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-height': if($exclude-hardcoded-values, null, 100%),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large-end'),\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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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-color': map.get($deps, 'md-sys-color', 'surface'),\n    'standard-container-elevation': map.get($deps, 'md-sys-elevation', 'level0')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-navigation-rail.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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": "tokens/versions/v0_192/_md-comp-outlined-autocomplete.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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    'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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": "tokens/versions/v0_192/_md-comp-outlined-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-outlined-card.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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": "tokens/versions/v0_192/_md-comp-outlined-icon-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-width': 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": "tokens/versions/v0_192/_md-comp-outlined-menu-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-outlined-segmented-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-outlined-select.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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-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-container-highest'),\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-container-highest'),\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": "tokens/versions/v0_192/_md-comp-outlined-text-field.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-plain-tooltip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-primary-navigation-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-radio-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-rich-tooltip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container'),\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-medium'),\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": "tokens/versions/v0_192/_md-comp-scrim.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-search-bar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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    '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": "tokens/versions/v0_192/_md-comp-search-view.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\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": "tokens/versions/v0_192/_md-comp-secondary-navigation-tab.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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": "tokens/versions/v0_192/_md-comp-sheet-bottom.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\n    'docked-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-large-top'),\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-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": "tokens/versions/v0_192/_md-comp-sheet-floating.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-low'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-sheet-side.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-height': if($exclude-hardcoded-values, null, 100%),\n    'docked-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\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-color':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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-color': map.get($deps, 'md-sys-color', 'surface'),\n    'docked-standard-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-comp-slider.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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": "tokens/versions/v0_192/_md-comp-snackbar.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-standard-menu-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-suggestion-chip.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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':\n      map.get($deps, 'md-sys-color', 'surface-container-low'),\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": "tokens/versions/v0_192/_md-comp-switch.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-highest'),\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-container-highest'),\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-container-highest'),\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-container-highest'),\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-container-highest'),\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-container-highest'),\n    'unselected-hover-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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-container-highest'),\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-container-highest'),\n    'unselected-pressed-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-track-color':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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": "tokens/versions/v0_192/_md-comp-text-button.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-comp-time-input.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-container-high'),\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    'time-input-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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": "tokens/versions/v0_192/_md-comp-time-picker.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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':\n      map.get($deps, 'md-sys-color', 'surface-container-highest'),\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-container-high'),\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    '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-container-highest'),\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": "tokens/versions/v0_192/_md-comp-top-app-bar-large.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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": "tokens/versions/v0_192/_md-comp-top-app-bar-medium.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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": "tokens/versions/v0_192/_md-comp-top-app-bar-small-centered.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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-color':\n      map.get($deps, 'md-sys-color', 'surface-container'),\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": "tokens/versions/v0_192/_md-comp-top-app-bar-small.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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    '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-color':\n      map.get($deps, 'md-sys-color', 'surface-container'),\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": "tokens/versions/v0_192/_md-ref-palette.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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, #1d1b20),\n    'neutral100': if($exclude-hardcoded-values, null, #fff),\n    'neutral12': if($exclude-hardcoded-values, null, #211f26),\n    'neutral17': if($exclude-hardcoded-values, null, #2b2930),\n    'neutral20': if($exclude-hardcoded-values, null, #322f35),\n    'neutral22': if($exclude-hardcoded-values, null, #36343b),\n    'neutral24': if($exclude-hardcoded-values, null, #3b383e),\n    'neutral30': if($exclude-hardcoded-values, null, #48464c),\n    'neutral4': if($exclude-hardcoded-values, null, #0f0d13),\n    'neutral40': if($exclude-hardcoded-values, null, #605d64),\n    'neutral50': if($exclude-hardcoded-values, null, #79767d),\n    'neutral6': if($exclude-hardcoded-values, null, #141218),\n    'neutral60': if($exclude-hardcoded-values, null, #938f96),\n    'neutral70': if($exclude-hardcoded-values, null, #aea9b1),\n    'neutral80': if($exclude-hardcoded-values, null, #cac5cd),\n    'neutral87': if($exclude-hardcoded-values, null, #ded8e1),\n    'neutral90': if($exclude-hardcoded-values, null, #e6e0e9),\n    'neutral92': if($exclude-hardcoded-values, null, #ece6f0),\n    'neutral94': if($exclude-hardcoded-values, null, #f3edf7),\n    'neutral95': if($exclude-hardcoded-values, null, #f5eff7),\n    'neutral96': if($exclude-hardcoded-values, null, #f7f2fa),\n    'neutral98': if($exclude-hardcoded-values, null, #fef7ff),\n    'neutral99': if($exclude-hardcoded-values, null, #fffbff),\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": "tokens/versions/v0_192/_md-ref-typeface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-sys-color.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\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', 'neutral6'),\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', 'neutral6'),\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', 'neutral98'),\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', 'neutral98'),\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": "tokens/versions/v0_192/_md-sys-elevation.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-sys-motion.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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': /* Type \"motion_path\" is not supported. */ null\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/_md-sys-shape.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-sys-state.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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": "tokens/versions/v0_192/_md-sys-typescale.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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.192\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Platform\": \"Web\"\n// User-configured context group \"Scheme\": \"Dynamic\"\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.03125rem),\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.015625rem),\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.5625rem) #{'/'} 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.5625rem),\n    'display-large-tracking': if($exclude-hardcoded-values, null, -0.015625rem),\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.8125rem) #{'/'} 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.8125rem),\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.00625rem),\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.03125rem),\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.6875rem) #{'/'} 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.6875rem),\n    'label-small-tracking': if($exclude-hardcoded-values, null, 0.03125rem),\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.009375rem),\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.00625rem),\n    'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')\n  );\n}\n"
  },
  {
    "path": "tokens/versions/v0_192/index.test.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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": "tokens/versions/v0_192/lib.test.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n//\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": "tokens/versions/v30_0/sass/_index.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/index.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@forward 'md-comp-app-bar' as md-comp-app-bar--*;\n@forward 'md-comp-app-bar-large' as md-comp-app-bar-large--*;\n@forward 'md-comp-app-bar-large-flexible' as md-comp-app-bar-large-flexible--*;\n@forward 'md-comp-app-bar-medium' as md-comp-app-bar-medium--*;\n@forward 'md-comp-app-bar-medium-flexible' as md-comp-app-bar-medium-flexible--*;\n@forward 'md-comp-app-bar-small' as md-comp-app-bar-small--*;\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-banners' as md-comp-banners--*;\n@forward 'md-comp-banners-basic' as md-comp-banners-basic--*;\n@forward 'md-comp-banners-rich' as md-comp-banners-rich--*;\n@forward 'md-comp-bottom-app-bar' as md-comp-bottom-app-bar--*;\n@forward 'md-comp-button' as md-comp-button--*;\n@forward 'md-comp-button-elevated' as md-comp-button-elevated--*;\n@forward 'md-comp-button-filled' as md-comp-button-filled--*;\n@forward 'md-comp-button-group-connected-large' as\n  md-comp-button-group-connected-large--*;\n@forward 'md-comp-button-group-connected-medium' as\n  md-comp-button-group-connected-medium--*;\n@forward 'md-comp-button-group-connected-small' as\n  md-comp-button-group-connected-small--*;\n@forward 'md-comp-button-group-connected-xlarge' as\n  md-comp-button-group-connected-xlarge--*;\n@forward 'md-comp-button-group-connected-xsmall' as\n  md-comp-button-group-connected-xsmall--*;\n@forward 'md-comp-button-group-standard-large' as\n  md-comp-button-group-standard-large--*;\n@forward 'md-comp-button-group-standard-medium' as\n  md-comp-button-group-standard-medium--*;\n@forward 'md-comp-button-group-standard-small' as\n  md-comp-button-group-standard-small--*;\n@forward 'md-comp-button-group-standard-xlarge' as\n  md-comp-button-group-standard-xlarge--*;\n@forward 'md-comp-button-group-standard-xsmall' as\n  md-comp-button-group-standard-xsmall--*;\n@forward 'md-comp-button-large' as md-comp-button-large--*;\n@forward 'md-comp-button-medium' as md-comp-button-medium--*;\n@forward 'md-comp-button-outlined' as md-comp-button-outlined--*;\n@forward 'md-comp-button-small' as md-comp-button-small--*;\n@forward 'md-comp-button-text' as md-comp-button-text--*;\n@forward 'md-comp-button-tonal' as md-comp-button-tonal--*;\n@forward 'md-comp-button-xlarge' as md-comp-button-xlarge--*;\n@forward 'md-comp-button-xsmall' as md-comp-button-xsmall--*;\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-drag-handle' as md-comp-drag-handle--*;\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' as md-comp-extended-fab--*;\n@forward 'md-comp-extended-fab-branded' as md-comp-extended-fab-branded--*;\n@forward 'md-comp-extended-fab-large' as md-comp-extended-fab-large--*;\n@forward 'md-comp-extended-fab-medium' as md-comp-extended-fab-medium--*;\n@forward 'md-comp-extended-fab-primary' as md-comp-extended-fab-primary--*;\n@forward 'md-comp-extended-fab-primary-container' as\n  md-comp-extended-fab-primary-container--*;\n@forward 'md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary--*;\n@forward 'md-comp-extended-fab-secondary-container' as\n  md-comp-extended-fab-secondary-container--*;\n@forward 'md-comp-extended-fab-small' as md-comp-extended-fab-small--*;\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-extended-fab-tertiary-container' as\n  md-comp-extended-fab-tertiary-container--*;\n@forward 'md-comp-fab' as md-comp-fab--*;\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-large' as md-comp-fab-large--*;\n@forward 'md-comp-fab-medium' as md-comp-fab-medium--*;\n@forward 'md-comp-fab-menu' as md-comp-fab-menu--*;\n@forward 'md-comp-fab-menu-primary-close-button' as\n  md-comp-fab-menu-primary-close-button--*;\n@forward 'md-comp-fab-menu-primary-container' as\n  md-comp-fab-menu-primary-container--*;\n@forward 'md-comp-fab-menu-secondary-close-button' as\n  md-comp-fab-menu-secondary-close-button--*;\n@forward 'md-comp-fab-menu-secondary-container' as\n  md-comp-fab-menu-secondary-container--*;\n@forward 'md-comp-fab-menu-tertiary-close-button' as\n  md-comp-fab-menu-tertiary-close-button--*;\n@forward 'md-comp-fab-menu-tertiary-container' as\n  md-comp-fab-menu-tertiary-container--*;\n@forward 'md-comp-fab-primary' as md-comp-fab-primary--*;\n@forward 'md-comp-fab-primary-container' as md-comp-fab-primary-container--*;\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-container' as md-comp-fab-secondary-container--*;\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-small' as md-comp-fab-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-tertiary' as md-comp-fab-tertiary--*;\n@forward 'md-comp-fab-tertiary-container' as md-comp-fab-tertiary-container--*;\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-icon-button-filled' as md-comp-icon-button-filled--*;\n@forward 'md-comp-icon-button-large' as md-comp-icon-button-large--*;\n@forward 'md-comp-icon-button-medium' as md-comp-icon-button-medium--*;\n@forward 'md-comp-icon-button-outlined' as md-comp-icon-button-outlined--*;\n@forward 'md-comp-icon-button-small' as md-comp-icon-button-small--*;\n@forward 'md-comp-icon-button-standard' as md-comp-icon-button-standard--*;\n@forward 'md-comp-icon-button-tonal' as md-comp-icon-button-tonal--*;\n@forward 'md-comp-icon-button-xlarge' as md-comp-icon-button-xlarge--*;\n@forward 'md-comp-icon-button-xsmall' as md-comp-icon-button-xsmall--*;\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-list-expand' as md-comp-list-expand--*;\n@forward 'md-comp-list-reorder' as md-comp-list-reorder--*;\n@forward 'md-comp-list-reveal' as md-comp-list-reveal--*;\n@forward 'md-comp-loading-indicator' as md-comp-loading-indicator--*;\n@forward 'md-comp-menu' as md-comp-menu--*;\n@forward 'md-comp-menus' as md-comp-menus--*;\n@forward 'md-comp-menus-standard' as md-comp-menus-standard--*;\n@forward 'md-comp-menus-vibrant' as md-comp-menus-vibrant--*;\n@forward 'md-comp-nav-bar' as md-comp-nav-bar--*;\n@forward 'md-comp-nav-bar-item-horizontal' as md-comp-nav-bar-item-horizontal--*;\n@forward 'md-comp-nav-bar-item-vertical' as md-comp-nav-bar-item-vertical--*;\n@forward 'md-comp-nav-rail' as md-comp-nav-rail--*;\n@forward 'md-comp-nav-rail-collapsed' as md-comp-nav-rail-collapsed--*;\n@forward 'md-comp-nav-rail-expanded' as md-comp-nav-rail-expanded--*;\n@forward 'md-comp-nav-rail-item' as md-comp-nav-rail-item--*;\n@forward 'md-comp-nav-rail-item-horizontal' as\n  md-comp-nav-rail-item-horizontal--*;\n@forward 'md-comp-nav-rail-item-vertical' as md-comp-nav-rail-item-vertical--*;\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-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-progress-indicator' as md-comp-progress-indicator--*;\n@forward 'md-comp-progress-indicator-circular' as\n  md-comp-progress-indicator-circular--*;\n@forward 'md-comp-progress-indicator-linear' as\n  md-comp-progress-indicator-linear--*;\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-slider-large' as md-comp-slider-large--*;\n@forward 'md-comp-slider-medium' as md-comp-slider-medium--*;\n@forward 'md-comp-slider-small' as md-comp-slider-small--*;\n@forward 'md-comp-slider-xlarge' as md-comp-slider-xlarge--*;\n@forward 'md-comp-slider-xsmall' as md-comp-slider-xsmall--*;\n@forward 'md-comp-snackbar' as md-comp-snackbar--*;\n@forward 'md-comp-split-button-large' as md-comp-split-button-large--*;\n@forward 'md-comp-split-button-medium' as md-comp-split-button-medium--*;\n@forward 'md-comp-split-button-small' as md-comp-split-button-small--*;\n@forward 'md-comp-split-button-xlarge' as md-comp-split-button-xlarge--*;\n@forward 'md-comp-split-button-xsmall' as md-comp-split-button-xsmall--*;\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-toolbar-docked' as md-comp-toolbar-docked--*;\n@forward 'md-comp-toolbar-floating' as md-comp-toolbar-floating--*;\n@forward 'md-comp-toolbar-floating-fab' as md-comp-toolbar-floating-fab--*;\n@forward 'md-comp-toolbar-standard' as md-comp-toolbar-standard--*;\n@forward 'md-comp-toolbar-vibrant' as md-comp-toolbar-vibrant--*;\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-color__dark' as md-sys-color--dark--*;\n@forward 'md-sys-color__dark__high-contrast' as\n  md-sys-color--dark--high-contrast--*;\n@forward 'md-sys-color__dark__medium-contrast' as\n  md-sys-color--dark--medium-contrast--*;\n@forward 'md-sys-color__high-contrast' as md-sys-color--high-contrast--*;\n@forward 'md-sys-color__medium-contrast' as md-sys-color--medium-contrast--*;\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-state-focus-indicator' as md-sys-state-focus-indicator--*;\n@forward 'md-sys-typescale' as md-sys-typescale--*;\n@forward 'md-sys-typescale-emphasized' as md-sys-typescale-emphasized--*;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-app-bar-large-flexible.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.app-bar.large-flexible.container.height\n$container-height: 120px;\n/// md.comp.app-bar.large-flexible.with-subtitle.container.height\n$with-subtitle-container-height: 152px;\n/// md.comp.app-bar.large-flexible.subtitle.font\n@mixin subtitle-font {\n  @include md-sys-typescale.title-medium;\n}\n/// md.comp.app-bar.large-flexible.title.font\n@mixin title-font {\n  @include md-sys-typescale.display-small;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-app-bar-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.app-bar.large.container.height\n$container-height: 152px;\n/// md.comp.app-bar.large.icon.size\n///\n/// @deprecated Please use icon size token in the common app bar set\n$icon-size: 24px;\n/// md.comp.app-bar.large.subtitle.font\n///\n/// @deprecated No subtitle support on the legacy app bar. Please use the new, flexible variant instead.\n@mixin subtitle-font {\n  @include md-sys-typescale.title-medium;\n}\n/// md.comp.app-bar.large.title.font\n@mixin title-font {\n  @include md-sys-typescale.headline-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-app-bar-medium-flexible.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.app-bar.medium-flexible.container.height\n$container-height: 112px;\n/// md.comp.app-bar.medium-flexible.with-subtitle.container.height\n$with-subtitle-container-height: 136px;\n/// md.comp.app-bar.medium-flexible.subtitle.font\n@mixin subtitle-font {\n  @include md-sys-typescale.label-large;\n}\n/// md.comp.app-bar.medium-flexible.title.font\n@mixin title-font {\n  @include md-sys-typescale.headline-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-app-bar-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.app-bar.medium.container.height\n$container-height: 112px;\n/// md.comp.app-bar.medium.icon.size\n///\n/// @deprecated Please use icon size token in the common app bar set\n$icon-size: 24px;\n/// md.comp.app-bar.medium.subtitle.font\n///\n/// @deprecated No subtitle support on the legacy app bar. Please use the new, flexible variant instead.\n@mixin subtitle-font {\n  @include md-sys-typescale.label-large;\n}\n/// md.comp.app-bar.medium.title.font\n@mixin title-font {\n  @include md-sys-typescale.headline-small;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-app-bar-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.app-bar.small.container.height\n$container-height: 64px;\n/// md.comp.app-bar.small.icon.size\n///\n/// @deprecated Please use icon size token in the common app bar set\n$icon-size: 24px;\n/// md.comp.app-bar.small.search.container.height\n$search-container-height: 56px;\n/// md.comp.app-bar.small.search.container.shape\n$search-container-shape: md-sys-shape.$corner-full;\n/// md.comp.app-bar.small.search.label-text.font\n@mixin search-label-text-font {\n  @include md-sys-typescale.body-large;\n}\n/// md.comp.app-bar.small.subtitle.font\n@mixin subtitle-font {\n  @include md-sys-typescale.label-medium;\n}\n/// md.comp.app-bar.small.title.font\n@mixin title-font {\n  @include md-sys-typescale.title-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-app-bar.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n\n/// md.comp.app-bar.avatar.size (Size)\n$avatar-size: 32px;\n/// md.comp.app-bar.icon-button-space (Spacing)\n$icon-button-space: 0px;\n/// md.comp.app-bar.icon.size (Size)\n$icon-size: 24px;\n/// md.comp.app-bar.leading-space (Spacing)\n$leading-space: 4px;\n/// md.comp.app-bar.search.leading-space (Spacing)\n$search-leading-space: 8px;\n/// md.comp.app-bar.search.trailing-space (Spacing)\n$search-trailing-space: 8px;\n/// md.comp.app-bar.trailing-space (Spacing)\n$trailing-space: 4px;\n/// md.comp.app-bar.container.color (Color)\n$container-color: md-sys-color.$surface;\n/// md.comp.app-bar.container.elevation (Color)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.app-bar.container.shape (Shape)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.app-bar.leading-icon.color (Color)\n$leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.app-bar.on-scroll.container.color (Color)\n$on-scroll-container-color: md-sys-color.$surface-container;\n/// md.comp.app-bar.on-scroll.container.elevation (Color)\n$on-scroll-container-elevation: md-sys-elevation.$level2;\n/// md.comp.app-bar.search.container.color (Color)\n$search-container-color: md-sys-color.$surface-container;\n/// md.comp.app-bar.search.label.color (Color)\n$search-label-color: md-sys-color.$on-surface-variant;\n/// md.comp.app-bar.search.on-scroll.container.color (Color)\n$search-on-scroll-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.app-bar.subtitle.color (Color)\n$subtitle-color: md-sys-color.$on-surface-variant;\n/// md.comp.app-bar.title.color (Color)\n$title-color: md-sys-color.$on-surface;\n/// md.comp.app-bar.trailing-icon.color (Color)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-assist-chip.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.assist-chip.container.height (Enabled / Container)\n$container-height: 32px;\n/// md.comp.assist-chip.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.assist-chip.elevated.disabled.container.opacity (Disabled / Container)\n$elevated-disabled-container-opacity: 0.12;\n/// md.comp.assist-chip.flat.disabled.outline.opacity (Disabled / Container)\n$flat-disabled-outline-opacity: 0.12;\n/// md.comp.assist-chip.flat.outline.width (Enabled / Container)\n$flat-outline-width: 1px;\n/// md.comp.assist-chip.with-icon.disabled.icon.opacity (Disabled / Icon)\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.assist-chip.with-icon.icon.size (Enabled / Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.assist-chip.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-small;\n/// md.comp.assist-chip.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.assist-chip.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.dragged.container.elevation (Dragged / Container)\n$dragged-container-elevation: md-sys-elevation.$level4;\n/// md.comp.assist-chip.dragged.label-text.color (Dragged / Label text)\n$dragged-label-text-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.dragged.state-layer.color (Dragged / State layer)\n$dragged-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.dragged.state-layer.opacity (Dragged / State layer)\n$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.assist-chip.elevated.container.color (Enabled / Container)\n$elevated-container-color: md-sys-color.$surface-container-low;\n/// md.comp.assist-chip.elevated.container.elevation (Enabled / Container)\n$elevated-container-elevation: md-sys-elevation.$level1;\n/// md.comp.assist-chip.elevated.container.shadow-color (Enabled / Container)\n$elevated-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.assist-chip.elevated.disabled.container.color (Disabled / Container)\n$elevated-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.elevated.disabled.container.elevation (Disabled / Container)\n$elevated-disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.assist-chip.elevated.focus.container.elevation (Focused / Container)\n$elevated-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.assist-chip.elevated.hover.container.elevation (Hovered / Container)\n$elevated-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.assist-chip.elevated.pressed.container.elevation (Pressed (ripple) / Container)\n$elevated-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.assist-chip.flat.container.elevation (Enabled / Container)\n$flat-container-elevation: md-sys-elevation.$level0;\n/// md.comp.assist-chip.flat.disabled.outline.color (Disabled / Container)\n$flat-disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.flat.focus.outline.color (Focused / Container)\n$flat-focus-outline-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.flat.outline.color (Enabled / Container)\n$flat-outline-color: md-sys-color.$outline-variant;\n/// md.comp.assist-chip.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.assist-chip.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.assist-chip.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.assist-chip.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.assist-chip.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.assist-chip.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.assist-chip.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.assist-chip.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.assist-chip.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.assist-chip.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.assist-chip.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.assist-chip.with-icon.disabled.icon.color (Disabled / Icon)\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.assist-chip.with-icon.dragged.icon.color (Dragged / Icon)\n$with-icon-dragged-icon-color: md-sys-color.$primary;\n/// md.comp.assist-chip.with-icon.focus.icon.color (Focused / Icon)\n$with-icon-focus-icon-color: md-sys-color.$primary;\n/// md.comp.assist-chip.with-icon.hover.icon.color (Hovered / Icon)\n$with-icon-hover-icon-color: md-sys-color.$primary;\n/// md.comp.assist-chip.with-icon.icon.color (Enabled / Icon)\n$with-icon-icon-color: md-sys-color.$primary;\n/// md.comp.assist-chip.with-icon.pressed.icon.color (Pressed (ripple) / Icon)\n$with-icon-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.assist-chip.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-badge.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.badge.large.size (Enabled / Container)\n$large-size: 16px;\n/// md.comp.badge.size (Enabled / Container)\n$size: 6px;\n/// md.comp.badge.color (Enabled / Container)\n$color: md-sys-color.$error;\n/// md.comp.badge.large.color (Enabled / Container)\n$large-color: md-sys-color.$error;\n/// md.comp.badge.large.label-text.color (Enabled / Label text)\n$large-label-text-color: md-sys-color.$on-error;\n/// md.comp.badge.large.label-text.font (Enabled / Label text)\n$large-label-text-font: md-sys-typescale.$label-small-font;\n/// md.comp.badge.large.label-text.line-height (Enabled / Label text)\n$large-label-text-line-height: md-sys-typescale.$label-small-line-height;\n/// md.comp.badge.large.label-text.size (Enabled / Label text)\n$large-label-text-size: md-sys-typescale.$label-small-size;\n/// md.comp.badge.large.label-text.tracking (Enabled / Label text)\n$large-label-text-tracking: md-sys-typescale.$label-small-tracking;\n/// md.comp.badge.large.label-text.weight (Enabled / Label text)\n$large-label-text-weight: md-sys-typescale.$label-small-weight;\n/// md.comp.badge.large.shape (Enabled / Container)\n$large-shape: md-sys-shape.$corner-full;\n/// md.comp.badge.shape (Enabled / Container)\n$shape: md-sys-shape.$corner-full;\n/// md.comp.badge.large.label-text.type (Enabled / Label text)\n@mixin large-label-text-type {\n  font-family: $large-label-text-font;\n  font-size: $large-label-text-size;\n  font-weight: $large-label-text-weight;\n  letter-spacing: $large-label-text-tracking;\n  line-height: $large-label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-banner.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.banner.desktop.with-single-line.container.height (Enabled / Container)\n$desktop-with-single-line-container-height: 52px;\n/// md.comp.banner.desktop.with-three-lines.container.height (Enabled / Container)\n$desktop-with-three-lines-container-height: 90px;\n/// md.comp.banner.desktop.with-two-lines.with-image.container.height (Enabled / Container)\n$desktop-with-two-lines-with-image-container-height: 72px;\n/// md.comp.banner.divider.height (Enabled / Divider)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$divider-height: 1px;\n/// md.comp.banner.mobile.with-single-line.container.height (Enabled / Container)\n$mobile-with-single-line-container-height: 54px;\n/// md.comp.banner.mobile.with-two-lines.container.height (Enabled / Container)\n$mobile-with-two-lines-container-height: 112px;\n/// md.comp.banner.mobile.with-two-lines.with-image.container.height (Enabled / Container)\n$mobile-with-two-lines-with-image-container-height: 120px;\n/// md.comp.banner.with-image.image.size (Enabled / Supporting text)\n$with-image-image-size: 40px;\n/// md.comp.banner.action.focus.label-text.color (Focused / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.banner.action.focus.state-layer.color (Focused / State layer)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.banner.action.focus.state-layer.opacity (Focused / State layer)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.banner.action.hover.label-text.color (Hovered / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-hover-label-text-color: md-sys-color.$primary;\n/// md.comp.banner.action.hover.state-layer.color (Hovered / State layer)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.banner.action.hover.state-layer.opacity (Hovered / State layer)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.banner.action.label-text.color (Enabled / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-label-text-color: md-sys-color.$primary;\n/// md.comp.banner.action.label-text.font (Enabled / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.banner.action.label-text.line-height (Enabled / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.banner.action.label-text.size (Enabled / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.banner.action.label-text.tracking (Enabled / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.banner.action.label-text.weight (Enabled / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.banner.action.pressed.label-text.color (Pressed (ripple) / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.banner.action.pressed.state-layer.color (Pressed (ripple) / State layer)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.banner.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.banner.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-low;\n/// md.comp.banner.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level1;\n/// md.comp.banner.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.banner.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.banner.divider.color (Enabled / Divider)\n///\n/// @deprecated Use standalone components tokens instead of embedded divider and button components.\n$divider-color: md-sys-color.$surface-variant;\n/// md.comp.banner.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.banner.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-medium-font;\n/// md.comp.banner.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-medium-line-height;\n/// md.comp.banner.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-medium-size;\n/// md.comp.banner.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-medium-tracking;\n/// md.comp.banner.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-medium-weight;\n/// md.comp.banner.with-image.image.shape (Enabled / Supporting text)\n$with-image-image-shape: md-sys-shape.$corner-full;\n/// md.comp.banner.action.label-text.type (Enabled / Label text)\n///\n/// @deprecated Use standalone components tokens instead of embedded button components.\n@mixin action-label-text-type {\n  font-family: $action-label-text-font;\n  font-size: $action-label-text-size;\n  font-weight: $action-label-text-weight;\n  letter-spacing: $action-label-text-tracking;\n  line-height: $action-label-text-line-height;\n}\n/// md.comp.banner.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-banners-basic.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.banners.basic.actions-close-button-space (Body text)\n$actions-close-button-space: 8px;\n/// md.comp.banners.basic.actions.between-space (Button actions)\n$actions-between-space: 8px;\n/// md.comp.banners.basic.actions.bottom-space (Button actions)\n$actions-bottom-space: 0px;\n/// md.comp.banners.basic.actions.leading-space (Button actions)\n$actions-leading-space: 8px;\n/// md.comp.banners.basic.actions.top-space (Button actions)\n$actions-top-space: 0px;\n/// md.comp.banners.basic.actions.trailing-space (Button actions)\n$actions-trailing-space: 8px;\n/// md.comp.banners.basic.body-text.bottom-space (Body text)\n$body-text-bottom-space: 14px;\n/// md.comp.banners.basic.body-text.leading-space (Body text)\n$body-text-leading-space: 0px;\n/// md.comp.banners.basic.body-text.top-space (Body text)\n$body-text-top-space: 14px;\n/// md.comp.banners.basic.body-text.trailing-space (Body text)\n$body-text-trailing-space: 48px;\n/// md.comp.banners.basic.bottom-space (Container)\n$bottom-space: 4px;\n/// md.comp.banners.basic.centered.body-text.trailing-space (Body text)\n$centered-body-text-trailing-space: 0px;\n/// md.comp.banners.basic.height (Container)\n$height: 56px;\n/// md.comp.banners.basic.icon.container.size (Leading icon)\n$icon-container-size: 48px;\n/// md.comp.banners.basic.icon.size (Leading icon)\n$icon-size: 24px;\n/// md.comp.banners.basic.leading-space (Container)\n$leading-space: 4px;\n/// md.comp.banners.basic.mobile.actions-close-button-space (Body text)\n$mobile-actions-close-button-space: 4px;\n/// md.comp.banners.basic.mobile.actions.trailing-space (Button actions)\n$mobile-actions-trailing-space: 4px;\n/// md.comp.banners.basic.mobile.height (Container)\n$mobile-height: 112px;\n/// md.comp.banners.basic.mobile.top-space (Container)\n$mobile-top-space: 8px;\n/// md.comp.banners.basic.round.no-icon.body-text.leading-space (Body text)\n$round-no-icon-body-text-leading-space: 16px;\n/// md.comp.banners.basic.square.no-icon.body-text.leading-space (Body text)\n$square-no-icon-body-text-leading-space: 12px;\n/// md.comp.banners.basic.top-space (Container)\n$top-space: 4px;\n/// md.comp.banners.basic.trailing-space (Container)\n$trailing-space: 4px;\n/// md.comp.banners.basic.two-lines.body-text.bottom-space (Body text)\n$two-lines-body-text-bottom-space: 8px;\n/// md.comp.banners.basic.two-lines.body-text.top-space (Body text)\n$two-lines-body-text-top-space: 8px;\n/// md.comp.banners.basic.two-lines.container-buttons-bottom-space (Button actions)\n$two-lines-container-buttons-bottom-space: 4px;\n/// md.comp.banners.basic.two-lines.container-buttons-top-space (Button actions)\n$two-lines-container-buttons-top-space: 4px;\n/// md.comp.banners.basic.two-lines.height (Container)\n$two-lines-height: 64px;\n/// md.comp.banners.basic.shape.round (Container)\n$shape-round: md-sys-shape.$corner-extra-large;\n/// md.comp.banners.basic.shape.square (Container)\n$shape-square: md-sys-shape.$corner-none;\n/// md.comp.banners.basic.body-text.type (Body text)\n@mixin body-text-type {\n  @include md-sys-typescale.body-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-banners-rich.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n@use 'md-sys-typescale-emphasized';\n\n/// md.comp.banners.rich.actions.between-space (Button action)\n$actions-between-space: 8px;\n/// md.comp.banners.rich.actions.bottom-space (Button action)\n$actions-bottom-space: 12px;\n/// md.comp.banners.rich.actions.leading-space (Button action)\n$actions-leading-space: 12px;\n/// md.comp.banners.rich.actions.top-space (Button action)\n$actions-top-space: 12px;\n/// md.comp.banners.rich.actions.trailing-space (Button action)\n$actions-trailing-space: 12px;\n/// md.comp.banners.rich.body-text.bottom-space (Body text)\n$body-text-bottom-space: 0px;\n/// md.comp.banners.rich.body-text.leading-space (Body text)\n$body-text-leading-space: 0px;\n/// md.comp.banners.rich.body-text.text-actions-space (Body text)\n$body-text-text-actions-space: 8px;\n/// md.comp.banners.rich.body-text.top-space (Body text)\n$body-text-top-space: 0px;\n/// md.comp.banners.rich.body-text.trailing-space (Body text)\n$body-text-trailing-space: 48px;\n/// md.comp.banners.rich.bottom-space (Container)\n$bottom-space: 12px;\n/// md.comp.banners.rich.icon-text-space (Leading element)\n$icon-text-space: 4px;\n/// md.comp.banners.rich.icon.size (Leading element)\n$icon-size: 24px;\n/// md.comp.banners.rich.image-text-space (Leading element)\n$image-text-space: 8px;\n/// md.comp.banners.rich.image.size (Leading element)\n$image-size: 80px;\n/// md.comp.banners.rich.leading-element.bottom-space (Leading element)\n$leading-element-bottom-space: 12px;\n/// md.comp.banners.rich.leading-element.leading-space (Leading element)\n$leading-element-leading-space: 4px;\n/// md.comp.banners.rich.leading-element.top-space (Leading element)\n$leading-element-top-space: 12px;\n/// md.comp.banners.rich.leading-element.trailing-space (Leading element)\n$leading-element-trailing-space: 4px;\n/// md.comp.banners.rich.leading-space (Container)\n$leading-space: 12px;\n/// md.comp.banners.rich.title-text.bottom-space (Title text)\n$title-text-bottom-space: 14px;\n/// md.comp.banners.rich.title-text.height (Title text)\n$title-text-height: 48px;\n/// md.comp.banners.rich.title-text.leading-space (Title text)\n$title-text-leading-space: 0px;\n/// md.comp.banners.rich.title-text.top-space (Title text)\n$title-text-top-space: 14px;\n/// md.comp.banners.rich.title-text.trailing-space (Title text)\n$title-text-trailing-space: 0px;\n/// md.comp.banners.rich.top-space (Container)\n$top-space: 12px;\n/// md.comp.banners.rich.trailing-space (Container)\n$trailing-space: 12px;\n/// md.comp.banners.rich.with-image-leading-space (Container)\n$with-image-leading-space: 20px;\n/// md.comp.banners.rich.image.shape (Leading element)\n$image-shape: md-sys-shape.$corner-none;\n/// md.comp.banners.rich.shape (Container)\n$shape: md-sys-shape.$corner-extra-large;\n/// md.comp.banners.rich.body-text.type (Body text)\n@mixin body-text-type {\n  @include md-sys-typescale.body-medium;\n}\n/// md.comp.banners.rich.title-text.type (Title text)\n@mixin title-text-type {\n  @include md-sys-typescale-emphasized.body-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-banners.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n\n/// md.comp.banners.banners.close-button.pressed.state-layer.color (Close button color)\n$banners-close-button-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.banners.close-button.color (Close button color)\n$close-button-color: md-sys-color.$primary;\n/// md.comp.banners.close-button.focused.state-layer.color (Close button color)\n$close-button-focused-state-layer-color: md-sys-color.$primary;\n/// md.comp.banners.close-button.hovered.state-layer.color (Close button color)\n$close-button-hovered-state-layer-color: md-sys-color.$primary;\n/// md.comp.banners.standard.body-text.color (Color - Standard)\n$standard-body-text-color: md-sys-color.$on-surface;\n/// md.comp.banners.standard.color (Color - Standard)\n$standard-color: md-sys-color.$surface-container;\n/// md.comp.banners.standard.icon.color (Color - Standard)\n$standard-icon-color: md-sys-color.$on-surface;\n/// md.comp.banners.standard.title-text.color (Color - Standard)\n$standard-title-text-color: md-sys-color.$on-surface;\n/// md.comp.banners.vibrant.body-text.color (Color -Vibrant)\n$vibrant-body-text-color: md-sys-color.$on-primary-container;\n/// md.comp.banners.vibrant.color (Color -Vibrant)\n$vibrant-color: md-sys-color.$primary-container;\n/// md.comp.banners.vibrant.icon.color (Color -Vibrant)\n$vibrant-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.banners.vibrant.title-text.color (Color -Vibrant)\n$vibrant-title-text-color: md-sys-color.$on-primary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-bottom-app-bar.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n\n/// md.comp.bottom-app-bar.container.height (Enabled / Container)\n$container-height: 80px;\n/// md.comp.bottom-app-bar.with-fab.container.height (Enabled / Container)\n///\n/// @deprecated Bottom app bar design updated to use a single height for all configurations, with vertically centered content. Please use md.comp.bottom-app-bar.container.height instead\n$with-fab-container-height: 72px;\n/// md.comp.bottom-app-bar.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container;\n/// md.comp.bottom-app-bar.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level2;\n/// md.comp.bottom-app-bar.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.bottom-app-bar.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-elevated.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.button.elevated.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.button.elevated.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.button.elevated.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.button.elevated.container.color (Enabled)\n$container-color: md-sys-color.$surface-container-low;\n/// md.comp.button.elevated.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level1;\n/// md.comp.button.elevated.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.button.elevated.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.button.elevated.disabled.container.elevation (Disabled)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.elevated.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.button.elevated.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.button.elevated.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level1;\n/// md.comp.button.elevated.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.elevated.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.button.elevated.hovered.container.elevation (Hovered)\n///\n/// @deprecated No longer part of the design spec\n$hovered-container-elevation: md-sys-elevation.$level2;\n/// md.comp.button.elevated.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.elevated.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.button.elevated.icon.color (Enabled)\n$icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.label-text.color (Enabled)\n$label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.button.elevated.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.elevated.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.button.elevated.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$primary;\n/// md.comp.button.elevated.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.focused.label-text.color (Focused)\n$selected-focused-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.hovered.label-text.color (Hovered)\n$selected-hovered-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.label-text.color (Enabled)\n$selected-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.pressed.label-text.color (Pressed)\n$selected-pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.elevated.unselected.container.color (Enabled)\n$unselected-container-color: md-sys-color.$surface-container-low;\n/// md.comp.button.elevated.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.focused.label-text.color (Focused)\n$unselected-focused-label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.hovered.label-text.color (Hovered)\n$unselected-hovered-label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.label-text.color (Enabled)\n$unselected-label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.pressed.label-text.color (Pressed)\n$unselected-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.button.elevated.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-filled.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.button.filled.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.button.filled.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.button.filled.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.button.filled.container.color (Enabled)\n$container-color: md-sys-color.$primary;\n/// md.comp.button.filled.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.filled.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.button.filled.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.button.filled.disabled.container.elevation (Disabled)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.filled.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.button.filled.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.button.filled.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.filled.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.button.filled.hovered.container.elevation (Hovered)\n///\n/// @deprecated No longer part of the design spec\n$hovered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.button.filled.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.button.filled.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.filled.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.button.filled.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$primary;\n/// md.comp.button.filled.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.focused.label-text.color (Focused)\n$selected-focused-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.hovered.label-text.color (Hovered)\n$selected-hovered-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.label-text.color (Enabled)\n$selected-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.pressed.label-text.color (Pressed)\n$selected-pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.filled.unselected.container.color (Enabled)\n$unselected-container-color: md-sys-color.$surface-container;\n/// md.comp.button.filled.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.focused.label-text.color (Focused)\n$unselected-focused-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.hovered.label-text.color (Hovered)\n$unselected-hovered-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.label-text.color (Enabled)\n$unselected-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.pressed.label-text.color (Pressed)\n$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.filled.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-connected-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.button-group.connected.large.between-space\n$between-space: 2px;\n/// md.comp.button-group.connected.large.container.height\n$container-height: 96px;\n/// md.comp.button-group.connected.large.selected.inner-corner.corner-size\n$selected-inner-corner-corner-size: 50%;\n/// md.comp.button-group.connected.large.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.button-group.connected.large.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-large;\n/// md.comp.button-group.connected.large.pressed.inner-corner.corner-size\n$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-medium;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-connected-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.button-group.connected.medium.between-space\n$between-space: 2px;\n/// md.comp.button-group.connected.medium.container.height\n$container-height: 56px;\n/// md.comp.button-group.connected.medium.selected.inner-corner.corner-size\n$selected-inner-corner-corner-size: 50%;\n/// md.comp.button-group.connected.medium.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.button-group.connected.medium.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-small;\n/// md.comp.button-group.connected.medium.pressed.inner-corner.corner-size\n$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-connected-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.button-group.connected.small.between-space\n$between-space: 2px;\n/// md.comp.button-group.connected.small.container.height\n$container-height: 40px;\n/// md.comp.button-group.connected.small.selected.inner-corner.corner-size\n$selected-inner-corner-corner-size: 50%;\n/// md.comp.button-group.connected.small.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.button-group.connected.small.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-small;\n/// md.comp.button-group.connected.small.pressed.inner-corner.corner-size\n$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-connected-xlarge.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.button-group.connected.xlarge.between-space\n$between-space: 2px;\n/// md.comp.button-group.connected.xlarge.container.height\n$container-height: 136px;\n/// md.comp.button-group.connected.xlarge.selected.inner-corner.corner-size\n$selected-inner-corner-corner-size: 50%;\n/// md.comp.button-group.connected.xlarge.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.button-group.connected.xlarge.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-large-increased;\n/// md.comp.button-group.connected.xlarge.pressed.inner-corner.corner-size\n$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-large;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-connected-xsmall.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.button-group.connected.xsmall.between-space\n$between-space: 2px;\n/// md.comp.button-group.connected.xsmall.container.height\n$container-height: 32px;\n/// md.comp.button-group.connected.xsmall.selected.inner-corner.corner-size\n$selected-inner-corner-corner-size: 50%;\n/// md.comp.button-group.connected.xsmall.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.button-group.connected.xsmall.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-small;\n/// md.comp.button-group.connected.xsmall.pressed.inner-corner.corner-size\n$pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-standard-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n\n/// md.comp.button-group.standard.large.between-space\n$between-space: 8px;\n/// md.comp.button-group.standard.large.container.height\n$container-height: 96px;\n/// md.comp.button-group.standard.large.pressed.item.width.multiplier (Pressed)\n$pressed-item-width-multiplier: 15%;\n/// md.comp.button-group.standard.large.pressed.item.width.motion.spring.dampening (Pressed)\n$pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button-group.standard.large.pressed.item.width.motion.spring.stiffness (Pressed)\n$pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-standard-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n\n/// md.comp.button-group.standard.medium.between-space\n$between-space: 8px;\n/// md.comp.button-group.standard.medium.container.height\n$container-height: 56px;\n/// md.comp.button-group.standard.medium.pressed.item.width.multiplier (Pressed)\n$pressed-item-width-multiplier: 15%;\n/// md.comp.button-group.standard.medium.pressed.item.width.motion.spring.dampening (Pressed)\n$pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button-group.standard.medium.pressed.item.width.motion.spring.stiffness (Pressed)\n$pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-standard-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n\n/// md.comp.button-group.standard.small.between-space\n$between-space: 12px;\n/// md.comp.button-group.standard.small.container.height\n$container-height: 40px;\n/// md.comp.button-group.standard.small.pressed.item.width.multiplier (Pressed)\n$pressed-item-width-multiplier: 15%;\n/// md.comp.button-group.standard.small.pressed.item.width.motion.spring.dampening (Pressed)\n$pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button-group.standard.small.pressed.item.width.motion.spring.stiffness (Pressed)\n$pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-standard-xlarge.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n\n/// md.comp.button-group.standard.xlarge.between-space\n$between-space: 8px;\n/// md.comp.button-group.standard.xlarge.container.height\n$container-height: 136px;\n/// md.comp.button-group.standard.xlarge.pressed.item.width.multiplier (Pressed)\n$pressed-item-width-multiplier: 15%;\n/// md.comp.button-group.standard.xlarge.pressed.item.width.motion.spring.dampening (Pressed)\n$pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button-group.standard.xlarge.pressed.item.width.motion.spring.stiffness (Pressed)\n$pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-group-standard-xsmall.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n\n/// md.comp.button-group.standard.xsmall.between-space\n$between-space: 18px;\n/// md.comp.button-group.standard.xsmall.container.height\n$container-height: 32px;\n/// md.comp.button-group.standard.xsmall.pressed.item.width.multiplier (Pressed)\n$pressed-item-width-multiplier: 15%;\n/// md.comp.button-group.standard.xsmall.pressed.item.width.motion.spring.dampening (Pressed)\n$pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button-group.standard.xsmall.pressed.item.width.motion.spring.stiffness (Pressed)\n$pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.button.large.container.height\n$container-height: 96px;\n/// md.comp.button.large.icon-label-space\n$icon-label-space: 12px;\n/// md.comp.button.large.icon.size\n$icon-size: 32px;\n/// md.comp.button.large.leading-space\n$leading-space: 48px;\n/// md.comp.button.large.outlined.outline.width\n$outlined-outline-width: 2px;\n/// md.comp.button.large.trailing-space\n$trailing-space: 48px;\n/// md.comp.button.large.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.button.large.container.shape.square\n$container-shape-square: md-sys-shape.$corner-extra-large;\n/// md.comp.button.large.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button.large.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.button.large.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-large;\n/// md.comp.button.large.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-extra-large;\n/// md.comp.button.large.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n/// md.comp.button.large.label-text\n@mixin label-text {\n  @include md-sys-typescale.headline-small;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.button.medium.container.height\n$container-height: 56px;\n/// md.comp.button.medium.icon-label-space\n$icon-label-space: 8px;\n/// md.comp.button.medium.icon.size\n$icon-size: 24px;\n/// md.comp.button.medium.leading-space\n$leading-space: 24px;\n/// md.comp.button.medium.outlined.outline.width\n$outlined-outline-width: 1px;\n/// md.comp.button.medium.trailing-space\n$trailing-space: 24px;\n/// md.comp.button.medium.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.button.medium.container.shape.square\n$container-shape-square: md-sys-shape.$corner-large;\n/// md.comp.button.medium.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button.medium.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.button.medium.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-medium;\n/// md.comp.button.medium.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-large;\n/// md.comp.button.medium.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n/// md.comp.button.medium.label-text\n@mixin label-text {\n  @include md-sys-typescale.title-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-outlined.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.button.outlined.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.button.outlined.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.button.outlined.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.button.outlined.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.button.outlined.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.button.outlined.disabled.outline.color (Disabled)\n$disabled-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.focused.outline.color (Focused)\n$focused-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.button.outlined.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.hovered.outline.color (Hovered)\n$hovered-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.button.outlined.icon.color (Enabled)\n$icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.outline.color (Enabled)\n$outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.pressed.outline.color (Pressed)\n$pressed-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.button.outlined.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$inverse-surface;\n/// md.comp.button.outlined.selected.disabled.container.color (Disabled)\n$selected-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.button.outlined.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.focused.label-text.color (Focused)\n$selected-focused-label-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.hovered.label-text.color (Hovered)\n$selected-hovered-label-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.label-text.color (Enabled)\n$selected-label-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.pressed.label-text.color (Pressed)\n$selected-pressed-label-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.button.outlined.unselected.disabled.outline.color (Disabled)\n$unselected-disabled-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.focused.label-text.color (Focused)\n$unselected-focused-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.focused.outline.color (Focused)\n$unselected-focused-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.hovered.label-text.color (Hovered)\n$unselected-hovered-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.hovered.outline.color (Hovered)\n$unselected-hovered-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.label-text.color (Enabled)\n$unselected-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.pressed.label-text.color (Pressed)\n$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.outlined.unselected.pressed.outline.color (Pressed)\n$unselected-pressed-outline-color: md-sys-color.$outline-variant;\n/// md.comp.button.outlined.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.button.small.container.height\n$container-height: 40px;\n/// md.comp.button.small.icon-label-space\n$icon-label-space: 8px;\n/// md.comp.button.small.icon.size\n$icon-size: 20px;\n/// md.comp.button.small.leading-space\n$leading-space: 16px;\n/// md.comp.button.small.outlined.outline.width\n$outlined-outline-width: 1px;\n/// md.comp.button.small.trailing-space\n$trailing-space: 16px;\n/// md.comp.button.small.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.button.small.container.shape.square\n$container-shape-square: md-sys-shape.$corner-medium;\n/// md.comp.button.small.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button.small.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.button.small.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-small;\n/// md.comp.button.small.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-medium;\n/// md.comp.button.small.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n/// md.comp.button.small.label-text\n@mixin label-text {\n  @include md-sys-typescale.label-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-text.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.button.text.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.button.text.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.button.text.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.button.text.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.button.text.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.button.text.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.button.text.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$primary;\n/// md.comp.button.text.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$primary;\n/// md.comp.button.text.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.text.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.button.text.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$primary;\n/// md.comp.button.text.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$primary;\n/// md.comp.button.text.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.text.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.button.text.icon.color (Enabled)\n$icon-color: md-sys-color.$primary;\n/// md.comp.button.text.label-text.color (Enabled)\n$label-text-color: md-sys-color.$primary;\n/// md.comp.button.text.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$primary;\n/// md.comp.button.text.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.button.text.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.button.text.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-tonal.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.button.tonal.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.button.tonal.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.button.tonal.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.button.tonal.container.color (Enabled)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.button.tonal.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.tonal.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.button.tonal.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.button.tonal.disabled.container.elevation (Disabled)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.tonal.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.button.tonal.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.button.tonal.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.tonal.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.button.tonal.hovered.container.elevation (Hovered)\n///\n/// @deprecated No longer part of the design spec\n$hovered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.button.tonal.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.button.tonal.icon.color (Enabled)\n$icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.tonal.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.button.tonal.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$secondary;\n/// md.comp.button.tonal.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.focused.label-text.color (Focused)\n$selected-focused-label-text-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.hovered.label-text.color (Hovered)\n$selected-hovered-label-text-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.label-text.color (Enabled)\n$selected-label-text-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.pressed.label-text.color (Pressed)\n$selected-pressed-label-text-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.button.tonal.unselected.container.color (Enabled)\n$unselected-container-color: md-sys-color.$secondary-container;\n/// md.comp.button.tonal.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.focused.label-text.color (Focused)\n$unselected-focused-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.hovered.label-text.color (Hovered)\n$unselected-hovered-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.label-text.color (Enabled)\n$unselected-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.pressed.label-text.color (Pressed)\n$unselected-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.button.tonal.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-xlarge.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.button.xlarge.container.height\n$container-height: 136px;\n/// md.comp.button.xlarge.icon-label-space\n$icon-label-space: 16px;\n/// md.comp.button.xlarge.icon.size\n$icon-size: 40px;\n/// md.comp.button.xlarge.leading-space\n$leading-space: 64px;\n/// md.comp.button.xlarge.outlined.outline.width\n$outlined-outline-width: 3px;\n/// md.comp.button.xlarge.trailing-space\n$trailing-space: 64px;\n/// md.comp.button.xlarge.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.button.xlarge.container.shape.square\n$container-shape-square: md-sys-shape.$corner-extra-large;\n/// md.comp.button.xlarge.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button.xlarge.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.button.xlarge.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-large;\n/// md.comp.button.xlarge.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-extra-large;\n/// md.comp.button.xlarge.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n/// md.comp.button.xlarge.label-text\n@mixin label-text {\n  @include md-sys-typescale.headline-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button-xsmall.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.button.xsmall.container.height\n$container-height: 32px;\n/// md.comp.button.xsmall.icon-label-space\n$icon-label-space: 8px;\n/// md.comp.button.xsmall.icon.size\n$icon-size: 20px;\n/// md.comp.button.xsmall.leading-space\n$leading-space: 12px;\n/// md.comp.button.xsmall.outlined.outline.width\n$outlined-outline-width: 1px;\n/// md.comp.button.xsmall.trailing-space\n$trailing-space: 12px;\n/// md.comp.button.xsmall.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.button.xsmall.container.shape.square\n$container-shape-square: md-sys-shape.$corner-medium;\n/// md.comp.button.xsmall.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button.xsmall.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.button.xsmall.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-small;\n/// md.comp.button.xsmall.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-medium;\n/// md.comp.button.xsmall.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n/// md.comp.button.xsmall.label-text\n@mixin label-text {\n  @include md-sys-typescale.label-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\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-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.button.container.height (Enabled)\n$container-height: 40px;\n/// md.comp.button.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.button.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.button.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.button.icon-label-space (Enabled)\n$icon-label-space: 8px;\n/// md.comp.button.icon.size (Enabled)\n$icon-size: 20px;\n/// md.comp.button.leading-space (Enabled)\n$leading-space: 24px;\n/// md.comp.button.trailing-space (Enabled)\n$trailing-space: 24px;\n/// md.comp.button.container.color (Enabled)\n$container-color: md-sys-color.$primary;\n/// md.comp.button.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.button.container.shape.round (Enabled)\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.button.container.shape.square (Enabled)\n$container-shape-square: md-sys-shape.$corner-medium;\n/// md.comp.button.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.button.disabled.container.elevation (Disabled)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.button.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.button.focus.indicator.color (Enabled)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.button.focus.indicator.outline.offset (Enabled)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.button.focus.indicator.thickness (Enabled)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.button.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.button.hovered.container.elevation (Hovered)\n///\n/// @deprecated No longer part of the design spec\n$hovered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.button.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.button.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.button.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.label-text.selected.color (Enabled)\n$label-text-selected-color: md-sys-color.$on-primary;\n/// md.comp.button.label-text.unselected.color (Enabled)\n$label-text-unselected-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.pressed.container.corner-size.motion.spring.damping (Enabled)\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.button.pressed.container.corner-size.motion.spring.stiffness (Enabled)\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.button.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.button.pressed.container.shape (Enabled)\n$pressed-container-shape: md-sys-shape.$corner-small;\n/// md.comp.button.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.button.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$primary;\n/// md.comp.button.selected.container.shape.round (Enabled)\n$selected-container-shape-round: md-sys-shape.$corner-medium;\n/// md.comp.button.selected.container.shape.square (Enabled)\n$selected-container-shape-square: md-sys-shape.$corner-full;\n/// md.comp.button.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.focused.label-text.color (Focused)\n$selected-focused-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.hovered.label-text.color (Hovered)\n$selected-hovered-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.pressed.label-text.color (Pressed)\n$selected-pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.button.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.button.unselected.container.color (Enabled)\n$unselected-container-color: md-sys-color.$surface-container;\n/// md.comp.button.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.focused.label-text.color (Focused)\n$unselected-focused-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.hovered.label-text.color (Hovered)\n$unselected-hovered-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.pressed.label-text.color (Pressed)\n$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.button.label-text (Enabled)\n@mixin label-text {\n  @include md-sys-typescale.label-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-carousel-item.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.carousel-item.disabled.container.opacity (Disabled / Container)\n$disabled-container-opacity: 0.38;\n/// md.comp.carousel-item.with-outline.disabled.outline.opacity (Disabled / Outline)\n$with-outline-disabled-outline-opacity: 0.12;\n/// md.comp.carousel-item.with-outline.outline.width (Enabled / Outline)\n$with-outline-outline-width: 1px;\n/// md.comp.carousel-item.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.carousel-item.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.carousel-item.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.carousel-item.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.carousel-item.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.carousel-item.disabled.container.color (Disabled / Container)\n$disabled-container-color: md-sys-color.$surface;\n/// md.comp.carousel-item.disabled.container.elevation (Disabled / Container)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.carousel-item.focus.container.elevation (Focus / Container)\n$focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.carousel-item.focus.indicator.color (Focus / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.carousel-item.focus.indicator.outline.offset (Focus / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.carousel-item.focus.indicator.thickness (Focus / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.carousel-item.focus.state-layer.color (Focus / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.carousel-item.focus.state-layer.opacity (Focus / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.carousel-item.hover.container.elevation (Hover / Container)\n$hover-container-elevation: md-sys-elevation.$level1;\n/// md.comp.carousel-item.hover.state-layer.color (Hover / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.carousel-item.hover.state-layer.opacity (Hover / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.carousel-item.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.carousel-item.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.carousel-item.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.carousel-item.with-outline.disabled.outline.color (Disabled / Outline)\n$with-outline-disabled-outline-color: md-sys-color.$outline;\n/// md.comp.carousel-item.with-outline.focus.outline.color (Focus / Outline)\n$with-outline-focus-outline-color: md-sys-color.$on-surface;\n/// md.comp.carousel-item.with-outline.hover.outline.color (Hover / Outline)\n$with-outline-hover-outline-color: md-sys-color.$outline;\n/// md.comp.carousel-item.with-outline.outline.color (Enabled / Outline)\n$with-outline-outline-color: md-sys-color.$outline;\n/// md.comp.carousel-item.with-outline.pressed.outline.color (Pressed (ripple) / Outline)\n$with-outline-pressed-outline-color: md-sys-color.$outline;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-checkbox.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.checkbox.container.height (Enabled / Container)\n///\n/// @deprecated Combining height and width into a single size token\n$container-height: 18px;\n/// md.comp.checkbox.container.shape (Enabled / Container)\n$container-shape: 2px;\n/// md.comp.checkbox.container.size (Enabled / Container)\n$container-size: 18px;\n/// md.comp.checkbox.container.width (Enabled / Container)\n///\n/// @deprecated Combining height and width into a single size token\n$container-width: 18px;\n/// md.comp.checkbox.disabled.selected.icon.opacity (Disabled / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$disabled-selected-icon-opacity: 0.38;\n/// md.comp.checkbox.disabled.unselected.icon.opacity (Disabled / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$disabled-unselected-icon-opacity: 0.38;\n/// md.comp.checkbox.icon.size (Enabled / Icon)\n$icon-size: 18px;\n/// md.comp.checkbox.selected.disabled.container.opacity (Disabled / Container)\n$selected-disabled-container-opacity: 0.38;\n/// md.comp.checkbox.selected.disabled.container.outline.width (Disabled / Container)\n$selected-disabled-container-outline-width: 0px;\n/// md.comp.checkbox.selected.error.focus.outline.width (Focused / Container)\n///\n/// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead.\n$selected-error-focus-outline-width: 0px;\n/// md.comp.checkbox.selected.error.hover.outline.width (Hovered / Container)\n///\n/// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead.\n$selected-error-hover-outline-width: 0px;\n/// md.comp.checkbox.selected.error.pressed.outline.width (Pressed (ripple) / Container)\n///\n/// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead.\n$selected-error-pressed-outline-width: 0px;\n/// md.comp.checkbox.selected.focus.outline.width (Focused / Container)\n$selected-focus-outline-width: 0px;\n/// md.comp.checkbox.selected.hover.outline.width (Hovered / Container)\n$selected-hover-outline-width: 0px;\n/// md.comp.checkbox.selected.outline.width (Enabled / Container)\n$selected-outline-width: 0px;\n/// md.comp.checkbox.selected.pressed.outline.width (Pressed (ripple) / Container)\n$selected-pressed-outline-width: 0px;\n/// md.comp.checkbox.state-layer.size (Enabled / State layer)\n$state-layer-size: 40px;\n/// md.comp.checkbox.unselected.disabled.container.opacity (Disabled / Container)\n$unselected-disabled-container-opacity: 0.38;\n/// md.comp.checkbox.unselected.disabled.outline.width (Disabled / Container)\n$unselected-disabled-outline-width: 2px;\n/// md.comp.checkbox.unselected.error.focus.outline.width (Focused / Container)\n///\n/// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead.\n$unselected-error-focus-outline-width: 2px;\n/// md.comp.checkbox.unselected.error.hover.outline.width (Hovered / Container)\n///\n/// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead.\n$unselected-error-hover-outline-width: 2px;\n/// md.comp.checkbox.unselected.error.pressed.outline.width (Pressed (ripple) / Container)\n///\n/// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead.\n$unselected-error-pressed-outline-width: 2px;\n/// md.comp.checkbox.unselected.focus.outline.width (Focused / Container)\n$unselected-focus-outline-width: 2px;\n/// md.comp.checkbox.unselected.hover.outline.width (Hovered / Container)\n$unselected-hover-outline-width: 2px;\n/// md.comp.checkbox.unselected.outline.width (Enabled / Container)\n$unselected-outline-width: 2px;\n/// md.comp.checkbox.unselected.pressed.outline.width (Pressed (ripple) / Container)\n$unselected-pressed-outline-width: 2px;\n/// md.comp.checkbox.disabled.selected.icon.color (Disabled / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$disabled-selected-icon-color: md-sys-color.$primary;\n/// md.comp.checkbox.disabled.unselected.icon.color (Disabled / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$disabled-unselected-icon-color: md-sys-color.$primary;\n/// md.comp.checkbox.error.focus.state-layer.color (Focused / State layer)\n$error-focus-state-layer-color: md-sys-color.$error;\n/// md.comp.checkbox.error.focus.state-layer.opacity (Focused / State layer)\n$error-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.checkbox.error.hover.state-layer.color (Hovered / State layer)\n$error-hover-state-layer-color: md-sys-color.$error;\n/// md.comp.checkbox.error.hover.state-layer.opacity (Hovered / State layer)\n$error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.checkbox.error.pressed.state-layer.color (Pressed (ripple) / State layer)\n$error-pressed-state-layer-color: md-sys-color.$error;\n/// md.comp.checkbox.error.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$error-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.checkbox.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.checkbox.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.checkbox.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.checkbox.selected.container.color (Enabled / Container)\n$selected-container-color: md-sys-color.$primary;\n/// md.comp.checkbox.selected.disabled.container.color (Disabled / Container)\n$selected-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.selected.disabled.icon.color (Disabled / Icon)\n$selected-disabled-icon-color: md-sys-color.$surface;\n/// md.comp.checkbox.selected.error.container.color (Enabled / Container)\n$selected-error-container-color: md-sys-color.$error;\n/// md.comp.checkbox.selected.error.focus.container.color (Focused / Container)\n$selected-error-focus-container-color: md-sys-color.$error;\n/// md.comp.checkbox.selected.error.focus.icon.color (Focused / Icon)\n$selected-error-focus-icon-color: md-sys-color.$on-error;\n/// md.comp.checkbox.selected.error.hover.container.color (Hovered / Container)\n$selected-error-hover-container-color: md-sys-color.$error;\n/// md.comp.checkbox.selected.error.hover.icon.color (Hovered / Icon)\n$selected-error-hover-icon-color: md-sys-color.$on-error;\n/// md.comp.checkbox.selected.error.icon.color (Enabled / Icon)\n$selected-error-icon-color: md-sys-color.$on-error;\n/// md.comp.checkbox.selected.error.pressed.container.color (Pressed (ripple) / Container)\n$selected-error-pressed-container-color: md-sys-color.$error;\n/// md.comp.checkbox.selected.error.pressed.icon.color (Pressed (ripple) / Icon)\n$selected-error-pressed-icon-color: md-sys-color.$on-error;\n/// md.comp.checkbox.selected.focus.container.color (Focused / Container)\n$selected-focus-container-color: md-sys-color.$primary;\n/// md.comp.checkbox.selected.focus.icon.color (Focused / Icon)\n$selected-focus-icon-color: md-sys-color.$on-primary;\n/// md.comp.checkbox.selected.focus.state-layer.color (Focused / State layer)\n$selected-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.checkbox.selected.focus.state-layer.opacity (Focused / State layer)\n$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.checkbox.selected.hover.container.color (Hovered / Container)\n$selected-hover-container-color: md-sys-color.$primary;\n/// md.comp.checkbox.selected.hover.icon.color (Hovered / Icon)\n$selected-hover-icon-color: md-sys-color.$on-primary;\n/// md.comp.checkbox.selected.hover.state-layer.color (Hovered / State layer)\n$selected-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.checkbox.selected.hover.state-layer.opacity (Hovered / State layer)\n$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.checkbox.selected.icon.color (Enabled / Icon)\n$selected-icon-color: md-sys-color.$on-primary;\n/// md.comp.checkbox.selected.pressed.container.color (Pressed (ripple) / Container)\n$selected-pressed-container-color: md-sys-color.$primary;\n/// md.comp.checkbox.selected.pressed.icon.color (Pressed (ripple) / Icon)\n$selected-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.checkbox.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.checkbox.state-layer.shape (Enabled / State layer)\n$state-layer-shape: md-sys-shape.$corner-full;\n/// md.comp.checkbox.unselected.disabled.outline.color (Disabled / Container)\n$unselected-disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.error.focus.outline.color (Focused / Container)\n$unselected-error-focus-outline-color: md-sys-color.$error;\n/// md.comp.checkbox.unselected.error.hover.outline.color (Hovered / Container)\n$unselected-error-hover-outline-color: md-sys-color.$error;\n/// md.comp.checkbox.unselected.error.outline.color (Enabled / Container)\n$unselected-error-outline-color: md-sys-color.$error;\n/// md.comp.checkbox.unselected.error.pressed.outline.color (Pressed (ripple) / Container)\n$unselected-error-pressed-outline-color: md-sys-color.$error;\n/// md.comp.checkbox.unselected.focus.icon.color (Focused / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$unselected-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.focus.outline.color (Focused / Container)\n$unselected-focus-outline-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.focus.state-layer.color (Focused / State layer)\n$unselected-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.focus.state-layer.opacity (Focused / State layer)\n$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.checkbox.unselected.hover.icon.color (Hovered / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$unselected-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.hover.outline.color (Hovered / Container)\n$unselected-hover-outline-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.hover.state-layer.color (Hovered / State layer)\n$unselected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.hover.state-layer.opacity (Hovered / State layer)\n$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.checkbox.unselected.icon.color (Enabled / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$unselected-icon-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.outline.color (Enabled / Container)\n$unselected-outline-color: md-sys-color.$on-surface-variant;\n/// md.comp.checkbox.unselected.pressed.icon.color (Pressed (ripple) / Icon)\n///\n/// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens.\n$unselected-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.pressed.outline.color (Pressed (ripple) / Container)\n$unselected-pressed-outline-color: md-sys-color.$on-surface;\n/// md.comp.checkbox.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.checkbox.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-circular-progress-indicator.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n\n/// md.comp.circular-progress-indicator.active-indicator.width ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$active-indicator-width: 4px;\n/// md.comp.circular-progress-indicator.size ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$size: 48px;\n/// md.comp.circular-progress-indicator.active-indicator.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$active-indicator-color: md-sys-color.$primary;\n/// md.comp.circular-progress-indicator.active-indicator.shape ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$active-indicator-shape: md-sys-shape.$corner-none;\n/// md.comp.circular-progress-indicator.four-color.active-indicator.four.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-four-color: md-sys-color.$tertiary-container;\n/// md.comp.circular-progress-indicator.four-color.active-indicator.one.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-one-color: md-sys-color.$primary;\n/// md.comp.circular-progress-indicator.four-color.active-indicator.three.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-three-color: md-sys-color.$tertiary;\n/// md.comp.circular-progress-indicator.four-color.active-indicator.two.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-two-color: md-sys-color.$primary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-data-table.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.data-table.footer.container.height\n$footer-container-height: 52px;\n/// md.comp.data-table.footer.outlined-select.text-field.container.height\n///\n/// @deprecated Deprecating this token until we have density tokens that can support our outline-select component.\n$footer-outlined-select-text-field-container-height: 36px;\n/// md.comp.data-table.header.container.height\n$header-container-height: 56px;\n/// md.comp.data-table.outline.width\n$outline-width: 1px;\n/// md.comp.data-table.row-item.container.height\n$row-item-container-height: 52px;\n/// md.comp.data-table.row-item.disabled.label-text.opacity\n$row-item-disabled-label-text-opacity: 0.38;\n/// md.comp.data-table.row-item.divider.thickness\n///\n/// @deprecated Replacing divider with outline. Please use md.comp.data-table.row-item.outline.* instead.\n$row-item-divider-thickness: 1px;\n/// md.comp.data-table.row-item.outline.width\n$row-item-outline-width: 1px;\n/// md.comp.data-table.container.shape\n$container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.data-table.footer.container.color\n$footer-container-color: md-sys-color.$surface;\n/// md.comp.data-table.footer.supporting-text.color\n$footer-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.data-table.footer.supporting-text.font\n$footer-supporting-text-font: md-sys-typescale.$body-medium-font;\n/// md.comp.data-table.footer.supporting-text.line-height\n$footer-supporting-text-line-height: md-sys-typescale.$body-medium-line-height;\n/// md.comp.data-table.footer.supporting-text.size\n$footer-supporting-text-size: md-sys-typescale.$body-medium-size;\n/// md.comp.data-table.footer.supporting-text.tracking\n$footer-supporting-text-tracking: md-sys-typescale.$body-medium-tracking;\n/// md.comp.data-table.footer.supporting-text.weight\n$footer-supporting-text-weight: md-sys-typescale.$body-medium-weight;\n/// md.comp.data-table.header.container.color\n$header-container-color: md-sys-color.$surface;\n/// md.comp.data-table.header.headline.color\n$header-headline-color: md-sys-color.$on-surface-variant;\n/// md.comp.data-table.header.headline.font\n$header-headline-font: md-sys-typescale.$title-small-font;\n/// md.comp.data-table.header.headline.line-height\n$header-headline-line-height: md-sys-typescale.$title-small-line-height;\n/// md.comp.data-table.header.headline.size\n$header-headline-size: md-sys-typescale.$title-small-size;\n/// md.comp.data-table.header.headline.tracking\n$header-headline-tracking: md-sys-typescale.$title-small-tracking;\n/// md.comp.data-table.header.headline.weight\n$header-headline-weight: md-sys-typescale.$title-small-weight;\n/// md.comp.data-table.header.hover.headline.color\n$header-hover-headline-color: md-sys-color.$on-surface;\n/// md.comp.data-table.header.hover.sorting.icon-button.color\n$header-hover-sorting-icon-button-color: md-sys-color.$on-surface;\n/// md.comp.data-table.outline.color\n$outline-color: md-sys-color.$outline-variant;\n/// md.comp.data-table.row-item.disabled.label-text.color\n$row-item-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.data-table.row-item.divider.color\n///\n/// @deprecated Replacing divider with outline. Please use md.comp.data-table.row-item.outline.* instead.\n$row-item-divider-color: md-sys-color.$surface-variant;\n/// md.comp.data-table.row-item.label-text.color\n$row-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.data-table.row-item.label-text.font\n$row-item-label-text-font: md-sys-typescale.$body-medium-font;\n/// md.comp.data-table.row-item.label-text.line-height\n$row-item-label-text-line-height: md-sys-typescale.$body-medium-line-height;\n/// md.comp.data-table.row-item.label-text.size\n$row-item-label-text-size: md-sys-typescale.$body-medium-size;\n/// md.comp.data-table.row-item.label-text.tracking\n$row-item-label-text-tracking: md-sys-typescale.$body-medium-tracking;\n/// md.comp.data-table.row-item.label-text.weight\n$row-item-label-text-weight: md-sys-typescale.$body-medium-weight;\n/// md.comp.data-table.row-item.outline.color\n$row-item-outline-color: md-sys-color.$outline-variant;\n/// md.comp.data-table.row-item.selected.container.color\n$row-item-selected-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.data-table.row-item.selected.hover.state-layer.color\n$row-item-selected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.data-table.row-item.selected.hover.state-layer.opacity\n$row-item-selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.data-table.row-item.unselected.container.color\n$row-item-unselected-container-color: md-sys-color.$surface;\n/// md.comp.data-table.row-item.unselected.hover.state-layer.color\n$row-item-unselected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.data-table.row-item.unselected.hover.state-layer.opacity\n$row-item-unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-date-input-modal.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.date-input.modal.container.height (Enabled / Container)\n$container-height: 512px;\n/// md.comp.date-input.modal.container.width (Enabled / Container)\n$container-width: 328px;\n/// md.comp.date-input.modal.header.container.height (Enabled / Container)\n$header-container-height: 120px;\n/// md.comp.date-input.modal.header.container.width (Enabled / Container)\n$header-container-width: 328px;\n/// md.comp.date-input.modal.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.date-input.modal.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.date-input.modal.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.date-input.modal.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.date-input.modal.header.headline.color (Enabled / Headline)\n$header-headline-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-input.modal.header.headline.font (Enabled / Headline)\n$header-headline-font: md-sys-typescale.$headline-large-font;\n/// md.comp.date-input.modal.header.headline.line-height (Enabled / Headline)\n$header-headline-line-height: md-sys-typescale.$headline-large-line-height;\n/// md.comp.date-input.modal.header.headline.size (Enabled / Headline)\n$header-headline-size: md-sys-typescale.$headline-large-size;\n/// md.comp.date-input.modal.header.headline.tracking (Enabled / Headline)\n$header-headline-tracking: md-sys-typescale.$headline-large-tracking;\n/// md.comp.date-input.modal.header.headline.weight (Enabled / Headline)\n$header-headline-weight: md-sys-typescale.$headline-large-weight;\n/// md.comp.date-input.modal.header.supporting-text.color (Enabled / Supporting text)\n$header-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-input.modal.header.supporting-text.font (Enabled / Supporting text)\n$header-supporting-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.date-input.modal.header.supporting-text.line-height (Enabled / Supporting text)\n$header-supporting-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.date-input.modal.header.supporting-text.size (Enabled / Supporting text)\n$header-supporting-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.date-input.modal.header.supporting-text.tracking (Enabled / Supporting text)\n$header-supporting-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.date-input.modal.header.supporting-text.weight (Enabled / Supporting text)\n$header-supporting-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.date-input.modal.header.headline.type (Enabled / Headline)\n@mixin header-headline-type {\n  font-family: $header-headline-font;\n  font-size: $header-headline-size;\n  font-weight: $header-headline-weight;\n  letter-spacing: $header-headline-tracking;\n  line-height: $header-headline-line-height;\n}\n/// md.comp.date-input.modal.header.supporting-text.type (Enabled / Supporting text)\n@mixin header-supporting-text-type {\n  font-family: $header-supporting-text-font;\n  font-size: $header-supporting-text-size;\n  font-weight: $header-supporting-text-weight;\n  letter-spacing: $header-supporting-text-tracking;\n  line-height: $header-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-date-picker-docked.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.date-picker.docked.container.height (Enabled / Container)\n$container-height: 456px;\n/// md.comp.date-picker.docked.container.width (Enabled / Container)\n$container-width: 360px;\n/// md.comp.date-picker.docked.date.container.height (Enabled / Container)\n$date-container-height: 48px;\n/// md.comp.date-picker.docked.date.container.width (Enabled / Container)\n$date-container-width: 48px;\n/// md.comp.date-picker.docked.date.state-layer.height (Enabled / State layer)\n$date-state-layer-height: 40px;\n/// md.comp.date-picker.docked.date.state-layer.width (Enabled / State layer)\n$date-state-layer-width: 40px;\n/// md.comp.date-picker.docked.date.today.container.outline.width (Enabled / Container)\n$date-today-container-outline-width: 1px;\n/// md.comp.date-picker.docked.date.unselected.outside-month.label-text.opacity (Enabled / Label text)\n$date-unselected-outside-month-label-text-opacity: 0.38;\n/// md.comp.date-picker.docked.header.height (Enabled / Header)\n$header-height: 64px;\n/// md.comp.date-picker.docked.menu-button.container.height (Enabled / Container)\n$menu-button-container-height: 40px;\n/// md.comp.date-picker.docked.menu-button.disabled.icon.opacity (Disabled / Icon)\n$menu-button-disabled-icon-opacity: 0.38;\n/// md.comp.date-picker.docked.menu-button.disabled.label-text.opacity (Disabled / Label text)\n$menu-button-disabled-label-text-opacity: 0.38;\n/// md.comp.date-picker.docked.menu-button.icon.size (Enabled / Icon)\n$menu-button-icon-size: 18px;\n/// md.comp.date-picker.docked.menu.list-item.container.height (Enabled / Container)\n$menu-list-item-container-height: 48px;\n/// md.comp.date-picker.docked.menu.list-item.selected.leading-icon.size (Enabled / Leading icon)\n$menu-list-item-selected-leading-icon-size: 24px;\n/// md.comp.date-picker.docked.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.date-picker.docked.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.date-picker.docked.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.date-picker.docked.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.date-picker.docked.date.container.shape (Enabled / Container)\n$date-container-shape: md-sys-shape.$corner-full;\n/// md.comp.date-picker.docked.date.focus.state-layer.opacity (Focused / State layer)\n$date-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.date-picker.docked.date.hover.state-layer.opacity (Hovered / State layer)\n$date-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.date-picker.docked.date.label-text.font (Enabled / Label text)\n$date-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.date-picker.docked.date.label-text.line-height (Enabled / Label text)\n$date-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.date-picker.docked.date.label-text.size (Enabled / Label text)\n$date-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.date-picker.docked.date.label-text.tracking (Enabled / Label text)\n$date-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.date-picker.docked.date.label-text.weight (Enabled / Label text)\n$date-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.date-picker.docked.date.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$date-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.date-picker.docked.date.selected.container.color (Enabled / Container)\n$date-selected-container-color: md-sys-color.$primary;\n/// md.comp.date-picker.docked.date.selected.focus.state-layer.color (Focused / State layer)\n$date-selected-focus-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.docked.date.selected.hover.state-layer.color (Hovered / State layer)\n$date-selected-hover-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.docked.date.selected.label-text.color (Enabled / Label text)\n$date-selected-label-text-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.docked.date.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$date-selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.docked.date.state-layer.shape (Enabled / State layer)\n$date-state-layer-shape: md-sys-shape.$corner-full;\n/// md.comp.date-picker.docked.date.today.container.outline.color (Enabled / Container)\n$date-today-container-outline-color: md-sys-color.$primary;\n/// md.comp.date-picker.docked.date.today.focus.state-layer.color (Focused / State layer)\n$date-today-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.date-picker.docked.date.today.hover.state-layer.color (Hovered / State layer)\n$date-today-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.date-picker.docked.date.today.label-text.color (Enabled / Label text)\n$date-today-label-text-color: md-sys-color.$primary;\n/// md.comp.date-picker.docked.date.today.pressed.state-layer.color (Pressed (ripple) / State layer)\n$date-today-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.date-picker.docked.date.unselected.focus.state-layer.color (Focused / State layer)\n$date-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.date.unselected.hover.state-layer.color (Hovered / State layer)\n$date-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.date.unselected.label-text.color (Enabled / Label text)\n$date-unselected-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.date.unselected.outside-month.label-text.color (Enabled / Label text)\n$date-unselected-outside-month-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.date.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$date-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.container.shape (Enabled / Container)\n$menu-button-container-shape: md-sys-shape.$corner-full;\n/// md.comp.date-picker.docked.menu-button.disabled.icon.color (Disabled / Icon)\n$menu-button-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu-button.disabled.label-text.color (Disabled / Label text)\n$menu-button-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu-button.focus.icon.color (Focused / Icon)\n$menu-button-focus-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.focus.label-text.color (Focused / Label text)\n$menu-button-focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.focus.state-layer.color (Focused / State layer)\n$menu-button-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.focus.state-layer.opacity (Focused / State layer)\n$menu-button-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.date-picker.docked.menu-button.hover.icon.color (Hovered / Icon)\n$menu-button-hover-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.hover.label-text.color (Hovered / Label text)\n$menu-button-hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.hover.state-layer.color (Hovered / State layer)\n$menu-button-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.hover.state-layer.opacity (Hovered / State layer)\n$menu-button-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.date-picker.docked.menu-button.icon.color (Enabled / Icon)\n$menu-button-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.label-text.color (Enabled / Label text)\n$menu-button-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.label-text.font (Enabled / Label text)\n$menu-button-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.date-picker.docked.menu-button.label-text.line-height (Enabled / Label text)\n$menu-button-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.date-picker.docked.menu-button.label-text.size (Enabled / Label text)\n$menu-button-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.date-picker.docked.menu-button.label-text.tracking (Enabled / Label text)\n$menu-button-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.date-picker.docked.menu-button.label-text.weight (Enabled / Label text)\n$menu-button-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.date-picker.docked.menu-button.pressed.icon.color (Pressed (ripple) / Icon)\n$menu-button-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.pressed.label-text.color (Pressed (ripple) / Label text)\n$menu-button-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.pressed.state-layer.color (Pressed (ripple) / State layer)\n$menu-button-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$menu-button-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.date-picker.docked.menu.list-item.focus.label-text.color (Focused / Label text)\n$menu-list-item-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.focus.state-layer.color (Focused / State layer)\n$menu-list-item-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.focus.state-layer.opacity (Focused / State layer)\n$menu-list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.date-picker.docked.menu.list-item.hover.label-text.color (Hovered / Label text)\n$menu-list-item-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.hover.state-layer.color (Hovered / State layer)\n$menu-list-item-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.hover.state-layer.opacity (Hovered / State layer)\n$menu-list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.date-picker.docked.menu.list-item.label-text.color (Enabled / Label text)\n$menu-list-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.label-text.font (Enabled / Label text)\n$menu-list-item-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.date-picker.docked.menu.list-item.label-text.line-height (Enabled / Label text)\n$menu-list-item-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.date-picker.docked.menu.list-item.label-text.size (Enabled / Label text)\n$menu-list-item-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.date-picker.docked.menu.list-item.label-text.tracking (Enabled / Label text)\n$menu-list-item-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.date-picker.docked.menu.list-item.label-text.weight (Enabled / Label text)\n$menu-list-item-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.date-picker.docked.menu.list-item.pressed.label-text.color (Pressed (ripple) / Label text)\n$menu-list-item-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.pressed.state-layer.color (Pressed (ripple) / State layer)\n$menu-list-item-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$menu-list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.date-picker.docked.menu.list-item.selected.container.color (Enabled / Container)\n$menu-list-item-selected-container-color: md-sys-color.$surface-variant;\n/// md.comp.date-picker.docked.menu.list-item.selected.focus.leading-icon.color (Focused / Leading icon)\n$menu-list-item-selected-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu.list-item.selected.hover.leading-icon.color (Hovered / Leading icon)\n$menu-list-item-selected-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.menu.list-item.selected.leading-icon.color (Enabled / Leading icon)\n$menu-list-item-selected-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.menu.list-item.selected.pressed.leading-icon.color (Pressed (ripple) / Leading icon)\n$menu-list-item-selected-pressed-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.docked.weekdays.label-text.color (Enabled / Label text)\n$weekdays-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.docked.weekdays.label-text.font (Enabled / Label text)\n$weekdays-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.date-picker.docked.weekdays.label-text.line-height (Enabled / Label text)\n$weekdays-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.date-picker.docked.weekdays.label-text.size (Enabled / Label text)\n$weekdays-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.date-picker.docked.weekdays.label-text.tracking (Enabled / Label text)\n$weekdays-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.date-picker.docked.weekdays.label-text.weight (Enabled / Label text)\n$weekdays-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.date-picker.docked.date.label-text.type (Enabled / Label text)\n@mixin date-label-text-type {\n  font-family: $date-label-text-font;\n  font-size: $date-label-text-size;\n  font-weight: $date-label-text-weight;\n  letter-spacing: $date-label-text-tracking;\n  line-height: $date-label-text-line-height;\n}\n/// md.comp.date-picker.docked.menu-button.label-text.type (Enabled / Label text)\n@mixin menu-button-label-text-type {\n  font-family: $menu-button-label-text-font;\n  font-size: $menu-button-label-text-size;\n  font-weight: $menu-button-label-text-weight;\n  letter-spacing: $menu-button-label-text-tracking;\n  line-height: $menu-button-label-text-line-height;\n}\n/// md.comp.date-picker.docked.menu.list-item.label-text.type (Enabled / Label text)\n@mixin menu-list-item-label-text-type {\n  font-family: $menu-list-item-label-text-font;\n  font-size: $menu-list-item-label-text-size;\n  font-weight: $menu-list-item-label-text-weight;\n  letter-spacing: $menu-list-item-label-text-tracking;\n  line-height: $menu-list-item-label-text-line-height;\n}\n/// md.comp.date-picker.docked.weekdays.label-text.type (Enabled / Label text)\n@mixin weekdays-label-text-type {\n  font-family: $weekdays-label-text-font;\n  font-size: $weekdays-label-text-size;\n  font-weight: $weekdays-label-text-weight;\n  letter-spacing: $weekdays-label-text-tracking;\n  line-height: $weekdays-label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-date-picker-modal.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.date-picker.modal.container.height (Enabled / Container)\n$container-height: 524px;\n/// md.comp.date-picker.modal.container.width (Enabled / Container)\n$container-width: 360px;\n/// md.comp.date-picker.modal.date.container.height (Enabled / Container)\n$date-container-height: 40px;\n/// md.comp.date-picker.modal.date.container.width (Enabled / Container)\n$date-container-width: 40px;\n/// md.comp.date-picker.modal.date.state-layer.height (Enabled / State layer)\n$date-state-layer-height: 40px;\n/// md.comp.date-picker.modal.date.state-layer.width (Enabled / State layer)\n$date-state-layer-width: 40px;\n/// md.comp.date-picker.modal.date.today.container.outline.width (Enabled / Container)\n$date-today-container-outline-width: 1px;\n/// md.comp.date-picker.modal.header.container.height (Enabled / Container)\n$header-container-height: 120px;\n/// md.comp.date-picker.modal.header.container.width (Enabled / Container)\n$header-container-width: 360px;\n/// md.comp.date-picker.modal.range-selection.active-indicator.container.height (Enabled / Container)\n$range-selection-active-indicator-container-height: 40px;\n/// md.comp.date-picker.modal.range-selection.header.container.height (Enabled / Container)\n$range-selection-header-container-height: 128px;\n/// md.comp.date-picker.modal.year-selection.year.container.height (Enabled / Container)\n$year-selection-year-container-height: 36px;\n/// md.comp.date-picker.modal.year-selection.year.container.width (Enabled / Container)\n$year-selection-year-container-width: 72px;\n/// md.comp.date-picker.modal.year-selection.year.state-layer.height (Enabled / State layer)\n$year-selection-year-state-layer-height: 36px;\n/// md.comp.date-picker.modal.year-selection.year.state-layer.width (Enabled / State layer)\n$year-selection-year-state-layer-width: 72px;\n/// md.comp.date-picker.modal.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.date-picker.modal.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.date-picker.modal.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.date-picker.modal.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.date-picker.modal.date.container.shape (Enabled / Container)\n$date-container-shape: md-sys-shape.$corner-full;\n/// md.comp.date-picker.modal.date.focus.state-layer.opacity (Focused / State layer)\n$date-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.date-picker.modal.date.hover.state-layer.opacity (Hovered / State layer)\n$date-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.date-picker.modal.date.label-text.font (Enabled / Label text)\n$date-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.date-picker.modal.date.label-text.line-height (Enabled / Label text)\n$date-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.date-picker.modal.date.label-text.size (Enabled / Label text)\n$date-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.date-picker.modal.date.label-text.tracking (Enabled / Label text)\n$date-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.date-picker.modal.date.label-text.weight (Enabled / Label text)\n$date-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.date-picker.modal.date.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$date-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.date-picker.modal.date.selected.container.color (Enabled / Container)\n$date-selected-container-color: md-sys-color.$primary;\n/// md.comp.date-picker.modal.date.selected.focus.state-layer.color (Focused / State layer)\n$date-selected-focus-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.date.selected.hover.state-layer.color (Hovered / State layer)\n$date-selected-hover-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.date.selected.label-text.color (Enabled / Label text)\n$date-selected-label-text-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.date.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$date-selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.date.state-layer.shape (Enabled / State layer)\n$date-state-layer-shape: md-sys-shape.$corner-full;\n/// md.comp.date-picker.modal.date.today.container.outline.color (Enabled / Container)\n$date-today-container-outline-color: md-sys-color.$primary;\n/// md.comp.date-picker.modal.date.today.focus.state-layer.color (Focused / State layer)\n$date-today-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.date-picker.modal.date.today.hover.state-layer.color (Hovered / State layer)\n$date-today-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.date-picker.modal.date.today.label-text.color (Enabled / Label text)\n$date-today-label-text-color: md-sys-color.$primary;\n/// md.comp.date-picker.modal.date.today.pressed.state-layer.color (Pressed (ripple) / State layer)\n$date-today-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.date-picker.modal.date.unselected.focus.state-layer.color (Focused / State layer)\n$date-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.date.unselected.hover.state-layer.color (Hovered / State layer)\n$date-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.date.unselected.label-text.color (Enabled / Label text)\n$date-unselected-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.modal.date.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$date-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.header.headline.color (Enabled / Headline)\n$header-headline-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.header.headline.font (Enabled / Headline)\n$header-headline-font: md-sys-typescale.$headline-large-font;\n/// md.comp.date-picker.modal.header.headline.line-height (Enabled / Headline)\n$header-headline-line-height: md-sys-typescale.$headline-large-line-height;\n/// md.comp.date-picker.modal.header.headline.size (Enabled / Headline)\n$header-headline-size: md-sys-typescale.$headline-large-size;\n/// md.comp.date-picker.modal.header.headline.tracking (Enabled / Headline)\n$header-headline-tracking: md-sys-typescale.$headline-large-tracking;\n/// md.comp.date-picker.modal.header.headline.weight (Enabled / Headline)\n$header-headline-weight: md-sys-typescale.$headline-large-weight;\n/// md.comp.date-picker.modal.header.supporting-text.color (Enabled / Header)\n$header-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.header.supporting-text.font (Enabled / Header)\n$header-supporting-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.date-picker.modal.header.supporting-text.line-height (Enabled / Header)\n$header-supporting-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.date-picker.modal.header.supporting-text.size (Enabled / Header)\n$header-supporting-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.date-picker.modal.header.supporting-text.tracking (Enabled / Header)\n$header-supporting-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.date-picker.modal.header.supporting-text.weight (Enabled / Header)\n$header-supporting-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.date-picker.modal.range-selection.active-indicator.container.color (Enabled / Container)\n$range-selection-active-indicator-container-color: md-sys-color.$secondary-container;\n/// md.comp.date-picker.modal.range-selection.active-indicator.container.shape (Enabled / Container)\n$range-selection-active-indicator-container-shape: md-sys-shape.$corner-full;\n/// md.comp.date-picker.modal.range-selection.container.elevation (Enabled / Container)\n$range-selection-container-elevation: md-sys-elevation.$level0;\n/// md.comp.date-picker.modal.range-selection.container.shape (Enabled / Container)\n$range-selection-container-shape: md-sys-shape.$corner-none;\n/// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.color (Focused / State layer)\n$range-selection-date-in-range-focus-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opacity (Focused / State layer)\n$range-selection-date-in-range-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opcaity (Focused / State layer)\n///\n/// @deprecated Fixed spelling (was \".opcaity\" should be \".opacity\")\n$range-selection-date-in-range-focus-state-layer-opcaity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.color (Hovered / State layer)\n$range-selection-date-in-range-hover-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opacity (Hovered / State layer)\n$range-selection-date-in-range-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opcaity (Hovered / State layer)\n///\n/// @deprecated Fixed spelling (was \".opcaity\" should be \".opacity\")\n$range-selection-date-in-range-hover-state-layer-opcaity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.date-picker.modal.range-selection.date.in-range.label-text.color (Enabled / Label text)\n$range-selection-date-in-range-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.color (Pressed (ripple) / State layer)\n$range-selection-date-in-range-pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$range-selection-date-in-range-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opcaity (Pressed (ripple) / State layer)\n///\n/// @deprecated Fixed spelling (was \".opcaity\" should be \".opacity\")\n$range-selection-date-in-range-pressed-state-layer-opcaity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.date-picker.modal.range-selection.header.headline.font (Enabled / Headline)\n$range-selection-header-headline-font: md-sys-typescale.$title-large-font;\n/// md.comp.date-picker.modal.range-selection.header.headline.line-height (Enabled / Headline)\n$range-selection-header-headline-line-height: md-sys-typescale.$title-large-line-height;\n/// md.comp.date-picker.modal.range-selection.header.headline.size (Enabled / Headline)\n$range-selection-header-headline-size: md-sys-typescale.$title-large-size;\n/// md.comp.date-picker.modal.range-selection.header.headline.tracking (Enabled / Headline)\n$range-selection-header-headline-tracking: md-sys-typescale.$title-large-tracking;\n/// md.comp.date-picker.modal.range-selection.header.headline.weight (Enabled / Headline)\n$range-selection-header-headline-weight: md-sys-typescale.$title-large-weight;\n/// md.comp.date-picker.modal.range-selection.month.subhead.color (Enabled / Subhead)\n$range-selection-month-subhead-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.range-selection.month.subhead.font (Enabled / Subhead)\n$range-selection-month-subhead-font: md-sys-typescale.$title-small-font;\n/// md.comp.date-picker.modal.range-selection.month.subhead.line-height (Enabled / Subhead)\n$range-selection-month-subhead-line-height: md-sys-typescale.$title-small-line-height;\n/// md.comp.date-picker.modal.range-selection.month.subhead.size (Enabled / Subhead)\n$range-selection-month-subhead-size: md-sys-typescale.$title-small-size;\n/// md.comp.date-picker.modal.range-selection.month.subhead.tracking (Enabled / Subhead)\n$range-selection-month-subhead-tracking: md-sys-typescale.$title-small-tracking;\n/// md.comp.date-picker.modal.range-selection.month.subhead.weight (Enabled / Subhead)\n$range-selection-month-subhead-weight: md-sys-typescale.$title-small-weight;\n/// md.comp.date-picker.modal.weekdays.label-text.color (Enabled / Label text)\n$weekdays-label-text-color: md-sys-color.$on-surface;\n/// md.comp.date-picker.modal.weekdays.label-text.font (Enabled / Label text)\n$weekdays-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.date-picker.modal.weekdays.label-text.line-height (Enabled / Label text)\n$weekdays-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.date-picker.modal.weekdays.label-text.size (Enabled / Label text)\n$weekdays-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.date-picker.modal.weekdays.label-text.tracking (Enabled / Label text)\n$weekdays-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.date-picker.modal.weekdays.label-text.weight (Enabled / Label text)\n$weekdays-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.date-picker.modal.year-selection.year.focus.state-layer.opacity (Focused / State layer)\n$year-selection-year-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.date-picker.modal.year-selection.year.hover.state-layer.opacity (Hovered / State layer)\n$year-selection-year-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.date-picker.modal.year-selection.year.label-text.font (Enabled / Label text)\n$year-selection-year-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.date-picker.modal.year-selection.year.label-text.line-height (Enabled / Label text)\n$year-selection-year-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.date-picker.modal.year-selection.year.label-text.size (Enabled / Label text)\n$year-selection-year-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.date-picker.modal.year-selection.year.label-text.tracking (Enabled / Label text)\n$year-selection-year-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.date-picker.modal.year-selection.year.label-text.weight (Enabled / Label text)\n$year-selection-year-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.date-picker.modal.year-selection.year.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$year-selection-year-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.date-picker.modal.year-selection.year.selected.container.color (Enabled / Container)\n$year-selection-year-selected-container-color: md-sys-color.$primary;\n/// md.comp.date-picker.modal.year-selection.year.selected.focus.state-layer.color (Focused / State layer)\n$year-selection-year-selected-focus-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.year-selection.year.selected.hover.state-layer.color (Hovered / State layer)\n$year-selection-year-selected-hover-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.year-selection.year.selected.label-text.color (Enabled / Label text)\n$year-selection-year-selected-label-text-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.year-selection.year.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$year-selection-year-selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.date-picker.modal.year-selection.year.state-layer.shape (Enabled / State layer)\n$year-selection-year-state-layer-shape: md-sys-shape.$corner-full;\n/// md.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color (Focused / State layer)\n$year-selection-year-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color (Hovered / State layer)\n$year-selection-year-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.year-selection.year.unselected.label-text.color (Enabled / Label text)\n$year-selection-year-unselected-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$year-selection-year-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.date-picker.modal.date.label-text.type (Enabled / Label text)\n@mixin date-label-text-type {\n  font-family: $date-label-text-font;\n  font-size: $date-label-text-size;\n  font-weight: $date-label-text-weight;\n  letter-spacing: $date-label-text-tracking;\n  line-height: $date-label-text-line-height;\n}\n/// md.comp.date-picker.modal.header.headline.type (Enabled / Headline)\n@mixin header-headline-type {\n  font-family: $header-headline-font;\n  font-size: $header-headline-size;\n  font-weight: $header-headline-weight;\n  letter-spacing: $header-headline-tracking;\n  line-height: $header-headline-line-height;\n}\n/// md.comp.date-picker.modal.header.supporting-text.type (Enabled / Supporting text)\n@mixin header-supporting-text-type {\n  font-family: $header-supporting-text-font;\n  font-size: $header-supporting-text-size;\n  font-weight: $header-supporting-text-weight;\n  letter-spacing: $header-supporting-text-tracking;\n  line-height: $header-supporting-text-line-height;\n}\n/// md.comp.date-picker.modal.range-selection.header.headline.type (Enabled / Headline)\n@mixin range-selection-header-headline-type {\n  font-family: $range-selection-header-headline-font;\n  font-size: $range-selection-header-headline-size;\n  font-weight: $range-selection-header-headline-weight;\n  letter-spacing: $range-selection-header-headline-tracking;\n  line-height: $range-selection-header-headline-line-height;\n}\n/// md.comp.date-picker.modal.range-selection.month.subhead.type (Enabled / Subhead)\n@mixin range-selection-month-subhead-type {\n  font-family: $range-selection-month-subhead-font;\n  font-size: $range-selection-month-subhead-size;\n  font-weight: $range-selection-month-subhead-weight;\n  letter-spacing: $range-selection-month-subhead-tracking;\n  line-height: $range-selection-month-subhead-line-height;\n}\n/// md.comp.date-picker.modal.weekdays.label-text.type (Enabled / Label text)\n@mixin weekdays-label-text-type {\n  font-family: $weekdays-label-text-font;\n  font-size: $weekdays-label-text-size;\n  font-weight: $weekdays-label-text-weight;\n  letter-spacing: $weekdays-label-text-tracking;\n  line-height: $weekdays-label-text-line-height;\n}\n/// md.comp.date-picker.modal.year-selection.year.label-text.type (Enabled / Label text)\n@mixin year-selection-year-label-text-type {\n  font-family: $year-selection-year-label-text-font;\n  font-size: $year-selection-year-label-text-size;\n  font-weight: $year-selection-year-label-text-weight;\n  letter-spacing: $year-selection-year-label-text-tracking;\n  line-height: $year-selection-year-label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-dialog.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.dialog.with-divider.divider.height (Enabled / Divider)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement\n$with-divider-divider-height: 1px;\n/// md.comp.dialog.with-icon.icon.size (Enabled / Icon)\n$with-icon-icon-size: 24px;\n/// md.comp.dialog.action.focus.label-text.color (Focused / Label text)\n$action-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.dialog.action.focus.state-layer.color (Focused / State layer)\n$action-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.dialog.action.focus.state-layer.opacity (Focused / State layer)\n$action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.dialog.action.hover.label-text.color (Hovered / Label text)\n$action-hover-label-text-color: md-sys-color.$primary;\n/// md.comp.dialog.action.hover.state-layer.color (Hovered / State layer)\n$action-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.dialog.action.hover.state-layer.opacity (Hovered / State layer)\n$action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.dialog.action.label-text.color (Enabled / Label text)\n$action-label-text-color: md-sys-color.$primary;\n/// md.comp.dialog.action.label-text.font (Enabled / Label text)\n$action-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.dialog.action.label-text.line-height (Enabled / Label text)\n$action-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.dialog.action.label-text.size (Enabled / Label text)\n$action-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.dialog.action.label-text.tracking (Enabled / Label text)\n$action-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.dialog.action.label-text.weight (Enabled / Label text)\n$action-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.dialog.action.pressed.label-text.color (Pressed (ripple) / Label text)\n$action-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.dialog.action.pressed.state-layer.color (Pressed (ripple) / State layer)\n$action-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.dialog.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.dialog.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.dialog.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.dialog.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.dialog.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.dialog.headline.color (Enabled / Headline)\n$headline-color: md-sys-color.$on-surface;\n/// md.comp.dialog.headline.font (Enabled / Headline)\n$headline-font: md-sys-typescale.$headline-small-font;\n/// md.comp.dialog.headline.line-height (Enabled / Headline)\n$headline-line-height: md-sys-typescale.$headline-small-line-height;\n/// md.comp.dialog.headline.size (Enabled / Headline)\n$headline-size: md-sys-typescale.$headline-small-size;\n/// md.comp.dialog.headline.tracking (Enabled / Headline)\n$headline-tracking: md-sys-typescale.$headline-small-tracking;\n/// md.comp.dialog.headline.weight (Enabled / Headline)\n$headline-weight: md-sys-typescale.$headline-small-weight;\n/// md.comp.dialog.subhead.color (Enabled / Subhead)\n///\n/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead\n$subhead-color: md-sys-color.$on-surface;\n/// md.comp.dialog.subhead.font (Enabled / Subhead)\n///\n/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead\n$subhead-font: md-sys-typescale.$headline-small-font;\n/// md.comp.dialog.subhead.line-height (Enabled / Subhead)\n///\n/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead\n$subhead-line-height: md-sys-typescale.$headline-small-line-height;\n/// md.comp.dialog.subhead.size (Enabled / Subhead)\n///\n/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead\n$subhead-size: md-sys-typescale.$headline-small-size;\n/// md.comp.dialog.subhead.tracking (Enabled / Subhead)\n///\n/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead\n$subhead-tracking: md-sys-typescale.$headline-small-tracking;\n/// md.comp.dialog.subhead.weight (Enabled / Subhead)\n///\n/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead\n$subhead-weight: md-sys-typescale.$headline-small-weight;\n/// md.comp.dialog.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.dialog.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-medium-font;\n/// md.comp.dialog.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-medium-line-height;\n/// md.comp.dialog.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-medium-size;\n/// md.comp.dialog.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-medium-tracking;\n/// md.comp.dialog.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-medium-weight;\n/// md.comp.dialog.with-divider.divider.color (Enabled / Divider)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement\n$with-divider-divider-color: md-sys-color.$outline;\n/// md.comp.dialog.with-icon.icon.color (Enabled / Icon)\n$with-icon-icon-color: md-sys-color.$secondary;\n/// md.comp.dialog.action.label-text.type (Enabled / Label text)\n@mixin action-label-text-type {\n  font-family: $action-label-text-font;\n  font-size: $action-label-text-size;\n  font-weight: $action-label-text-weight;\n  letter-spacing: $action-label-text-tracking;\n  line-height: $action-label-text-line-height;\n}\n/// md.comp.dialog.headline.type (Enabled / Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n/// md.comp.dialog.subhead.type (Enabled / Subhead)\n///\n/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead\n@mixin subhead-type {\n  font-family: $subhead-font;\n  font-size: $subhead-size;\n  font-weight: $subhead-weight;\n  letter-spacing: $subhead-tracking;\n  line-height: $subhead-line-height;\n}\n/// md.comp.dialog.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-divider.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n\n/// md.comp.divider.thickness (Enabled / Container)\n$thickness: 1px;\n/// md.comp.divider.color (Enabled / Container)\n$color: md-sys-color.$outline-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-drag-handle.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n\n/// md.comp.drag-handle.container.width (Enabled / Container)\n///\n/// The drag handle container is wider than than the handle, and stretches to fill vertical space.\n$container-width: 24px;\n/// md.comp.drag-handle.height (Enabled / Drag Handle)\n$height: 48px;\n/// md.comp.drag-handle.pressed.height (Pressed / Drag handle)\n$pressed-height: 52px;\n/// md.comp.drag-handle.pressed.width (Pressed / Drag handle)\n$pressed-width: 12px;\n/// md.comp.drag-handle.width (Enabled / Drag Handle)\n$width: 4px;\n/// md.comp.drag-handle.color (Enabled / Drag Handle)\n$color: md-sys-color.$outline;\n/// md.comp.drag-handle.elevation (Enabled / Drag Handle)\n$elevation: md-sys-elevation.$level0;\n/// md.comp.drag-handle.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.drag-handle.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.drag-handle.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.drag-handle.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.drag-handle.pressed.color (Pressed / Drag handle)\n$pressed-color: md-sys-color.$on-surface;\n/// md.comp.drag-handle.pressed.elevation (Pressed / Drag handle)\n$pressed-elevation: md-sys-elevation.$level0;\n/// md.comp.drag-handle.pressed.shape (Pressed / Drag handle)\n$pressed-shape: md-sys-shape.$corner-medium;\n/// md.comp.drag-handle.shape (Enabled / Drag Handle)\n$shape: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-elevated-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.elevated-button.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.elevated-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-opacity: 0.12;\n/// md.comp.elevated-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.elevated-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.elevated-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.elevated-button.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$surface-container-low;\n/// md.comp.elevated-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level1;\n/// md.comp.elevated-button.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.elevated-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.elevated-button.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.elevated-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.elevated-button.disabled.container.elevation ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.elevated-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.elevated-button.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.elevated-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.elevated-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.elevated-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.elevated-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.elevated-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.elevated-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.elevated-button.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.elevated-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n$hover-label-text-color: md-sys-color.$primary;\n/// md.comp.elevated-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.elevated-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.elevated-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-color: md-sys-color.$primary;\n/// md.comp.elevated-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.elevated-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.elevated-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.elevated-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.elevated-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.elevated-button.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.elevated-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.elevated-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.elevated-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.elevated-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.elevated-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$with-icon-focus-icon-color: md-sys-color.$primary;\n/// md.comp.elevated-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$with-icon-hover-icon-color: md-sys-color.$primary;\n/// md.comp.elevated-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-color: md-sys-color.$primary;\n/// md.comp.elevated-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$with-icon-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.elevated-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-elevated-card.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.elevated-card.disabled.container.opacity (Disabled / Container)\n$disabled-container-opacity: 0.38;\n/// md.comp.elevated-card.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.elevated-card.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-low;\n/// md.comp.elevated-card.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level1;\n/// md.comp.elevated-card.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.elevated-card.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-medium;\n/// md.comp.elevated-card.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.elevated-card.disabled.container.color (Disabled / Container)\n$disabled-container-color: md-sys-color.$surface;\n/// md.comp.elevated-card.disabled.container.elevation (Disabled / Container)\n$disabled-container-elevation: md-sys-elevation.$level1;\n/// md.comp.elevated-card.dragged.container.elevation (Dragged / Container)\n$dragged-container-elevation: md-sys-elevation.$level4;\n/// md.comp.elevated-card.dragged.state-layer.color (Dragged / State layer)\n$dragged-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.elevated-card.dragged.state-layer.opacity (Dragged / State layer)\n$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.elevated-card.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.elevated-card.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.elevated-card.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.elevated-card.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.elevated-card.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.elevated-card.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.elevated-card.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.elevated-card.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.elevated-card.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.elevated-card.icon.color (Enabled / Icon)\n$icon-color: md-sys-color.$primary;\n/// md.comp.elevated-card.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.elevated-card.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.elevated-card.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-branded.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.branded.container.height (Enabled / Container)\n$container-height: 56px;\n/// md.comp.extended-fab.branded.icon.size (Enabled / Icon)\n$icon-size: 36px;\n/// md.comp.extended-fab.branded.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.extended-fab.branded.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.branded.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.branded.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.extended-fab.branded.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.extended-fab.branded.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.branded.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.extended-fab.branded.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.extended-fab.branded.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.extended-fab.branded.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.extended-fab.branded.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.extended-fab.branded.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.branded.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.branded.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$primary;\n/// md.comp.extended-fab.branded.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.extended-fab.branded.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.branded.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$on-surface;\n/// md.comp.extended-fab.branded.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.extended-fab.branded.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.extended-fab.branded.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.extended-fab.branded.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.extended-fab.branded.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.extended-fab.branded.lowered.container.color (Enabled / Container)\n$lowered-container-color: md-sys-color.$surface-container-low;\n/// md.comp.extended-fab.branded.lowered.container.elevation (Enabled / Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.branded.lowered.focus.container.elevation (Focused / Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.branded.lowered.hover.container.elevation (Hovered / Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.extended-fab.branded.lowered.pressed.container.elevation (Pressed (ripple) / Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.branded.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.branded.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.extended-fab.branded.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.extended-fab.branded.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.extended-fab.branded.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.large.container.height\n$container-height: 96px;\n/// md.comp.extended-fab.large.icon-label-space\n$icon-label-space: 16px;\n/// md.comp.extended-fab.large.icon.size\n$icon-size: 36px;\n/// md.comp.extended-fab.large.leading-space\n$leading-space: 28px;\n/// md.comp.extended-fab.large.trailing-space\n$trailing-space: 28px;\n/// md.comp.extended-fab.large.container.shape\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.extended-fab.large.label-text\n@mixin label-text {\n  @include md-sys-typescale.headline-small;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.medium.container.height\n$container-height: 80px;\n/// md.comp.extended-fab.medium.icon-label-space\n$icon-label-space: 12px;\n/// md.comp.extended-fab.medium.icon.size\n$icon-size: 28px;\n/// md.comp.extended-fab.medium.leading-space\n$leading-space: 26px;\n/// md.comp.extended-fab.medium.trailing-space\n$trailing-space: 26px;\n/// md.comp.extended-fab.medium.container.shape\n$container-shape: md-sys-shape.$corner-large-increased;\n/// md.comp.extended-fab.medium.label-text\n@mixin label-text {\n  @include md-sys-typescale.title-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-primary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.extended-fab.primary-container.container.color (Enabled)\n$container-color: md-sys-color.$primary-container;\n/// md.comp.extended-fab.primary-container.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.primary-container.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.primary-container.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.primary-container.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.primary-container.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.primary-container.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.primary-container.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.primary-container.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary-container.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-primary.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.primary.container.height ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-height: 56px;\n/// md.comp.extended-fab.primary.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$icon-size: 24px;\n/// md.comp.extended-fab.primary.container.color (Enabled)\n$container-color: md-sys-color.$primary;\n/// md.comp.extended-fab.primary.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.primary.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.primary.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.extended-fab.primary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.primary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$focus-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.extended-fab.primary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.extended-fab.primary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.extended-fab.primary.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$focus-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.primary.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.primary.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.primary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.primary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$hover-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$hover-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.extended-fab.primary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.primary.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.primary.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.primary.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.extended-fab.primary.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.extended-fab.primary.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.extended-fab.primary.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.extended-fab.primary.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.extended-fab.primary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.primary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.primary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.extended-fab.primary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.primary.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.primary.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.extended-fab.primary.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.extended-fab.primary.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-secondary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.extended-fab.secondary-container.container.color (Enabled)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.extended-fab.secondary-container.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.secondary-container.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.secondary-container.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.secondary-container.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.secondary-container.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.secondary-container.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.secondary-container.icon.color (Enabled)\n$icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.secondary-container.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary-container.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-secondary.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.secondary.container.height ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-height: 56px;\n/// md.comp.extended-fab.secondary.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$icon-size: 24px;\n/// md.comp.extended-fab.secondary.container.color (Enabled)\n$container-color: md-sys-color.$secondary;\n/// md.comp.extended-fab.secondary.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.secondary.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.secondary.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.extended-fab.secondary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.secondary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.extended-fab.secondary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.extended-fab.secondary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.extended-fab.secondary.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$focus-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.secondary.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.secondary.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.secondary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.secondary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$hover-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.extended-fab.secondary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.secondary.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.secondary.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.secondary.icon.color (Enabled)\n$icon-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.extended-fab.secondary.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.extended-fab.secondary.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.extended-fab.secondary.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.extended-fab.secondary.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.extended-fab.secondary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.secondary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.secondary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.extended-fab.secondary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.secondary.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.secondary.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.extended-fab.secondary.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.extended-fab.secondary.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.small.container.height\n$container-height: 56px;\n/// md.comp.extended-fab.small.icon-label-space\n$icon-label-space: 8px;\n/// md.comp.extended-fab.small.icon.size\n$icon-size: 24px;\n/// md.comp.extended-fab.small.leading-space\n$leading-space: 16px;\n/// md.comp.extended-fab.small.trailing-space\n$trailing-space: 16px;\n/// md.comp.extended-fab.small.container.shape\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.extended-fab.small.label-text\n@mixin label-text {\n  @include md-sys-typescale.title-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-surface.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.surface.container.height (Enabled / Container)\n$container-height: 56px;\n/// md.comp.extended-fab.surface.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.extended-fab.surface.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.extended-fab.surface.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.surface.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.surface.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.extended-fab.surface.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.extended-fab.surface.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.surface.focus.icon.color (Focused / Icon)\n$focus-icon-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.extended-fab.surface.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.extended-fab.surface.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.extended-fab.surface.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.surface.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.surface.hover.icon.color (Hovered / Icon)\n$hover-icon-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.surface.icon.color (Enabled / Icon)\n$icon-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.extended-fab.surface.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.extended-fab.surface.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.extended-fab.surface.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.extended-fab.surface.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.extended-fab.surface.lowered.container.color (Enabled / Container)\n$lowered-container-color: md-sys-color.$surface-container-low;\n/// md.comp.extended-fab.surface.lowered.container.elevation (Enabled / Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.surface.lowered.focus.container.elevation (Focused / Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.surface.lowered.hover.container.elevation (Hovered / Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.extended-fab.surface.lowered.pressed.container.elevation (Pressed (ripple) / Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.surface.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.surface.pressed.icon.color (Pressed (ripple) / Icon)\n$pressed-icon-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.extended-fab.surface.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.extended-fab.surface.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-tertiary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.extended-fab.tertiary-container.container.color (Enabled)\n$container-color: md-sys-color.$tertiary-container;\n/// md.comp.extended-fab.tertiary-container.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.tertiary-container.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.tertiary-container.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.tertiary-container.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.tertiary-container.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.tertiary-container.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.tertiary-container.icon.color (Enabled)\n$icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.tertiary-container.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary-container.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab-tertiary.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.tertiary.container.height ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-height: 56px;\n/// md.comp.extended-fab.tertiary.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$icon-size: 24px;\n/// md.comp.extended-fab.tertiary.container.color (Enabled)\n$container-color: md-sys-color.$tertiary;\n/// md.comp.extended-fab.tertiary.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.tertiary.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.extended-fab.tertiary.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.extended-fab.tertiary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.tertiary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$focus-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.extended-fab.tertiary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.extended-fab.tertiary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.extended-fab.tertiary.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$focus-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.tertiary.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.tertiary.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.extended-fab.tertiary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.tertiary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$hover-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$hover-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.extended-fab.tertiary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.tertiary.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.extended-fab.tertiary.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.extended-fab.tertiary.icon.color (Enabled)\n$icon-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.extended-fab.tertiary.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.extended-fab.tertiary.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.extended-fab.tertiary.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.extended-fab.tertiary.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.extended-fab.tertiary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.tertiary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.tertiary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.extended-fab.tertiary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.extended-fab.tertiary.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.extended-fab.tertiary.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.extended-fab.tertiary.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.extended-fab.tertiary.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n///\n/// @deprecated Token is deprecated.\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-extended-fab.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.extended-fab.container.height\n$container-height: 56px;\n/// md.comp.extended-fab.icon-label-space\n$icon-label-space: 12px;\n/// md.comp.extended-fab.icon.size\n$icon-size: 24px;\n/// md.comp.extended-fab.leading-space\n$leading-space: 16px;\n/// md.comp.extended-fab.trailing-space\n$trailing-space: 20px;\n/// md.comp.extended-fab.container.shape\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.extended-fab.label-text\n@mixin label-text {\n  @include md-sys-typescale.label-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-branded-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.branded.large.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 96px;\n/// md.comp.fab.branded.large.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 96px;\n/// md.comp.fab.branded.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 48px;\n/// md.comp.fab.branded.large.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.fab.branded.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.branded.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.branded.large.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.fab.branded.large.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.fab.branded.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.branded.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.branded.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.branded.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.branded.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.branded.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.branded.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.branded.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.branded.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.branded.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n///\n/// @deprecated Bug fix. The branded FAB is using a four-colored icon.\n$icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab.branded.large.lowered.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-color: md-sys-color.$surface-container-low;\n/// md.comp.fab.branded.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.branded.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.branded.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.branded.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.branded.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.branded.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.branded.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-branded.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.branded.container.height (Enabled / Container)\n$container-height: 56px;\n/// md.comp.fab.branded.container.width (Enabled / Container)\n$container-width: 56px;\n/// md.comp.fab.branded.icon.size (Enabled / Icon)\n$icon-size: 36px;\n/// md.comp.fab.branded.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.fab.branded.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.branded.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.branded.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.fab.branded.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.fab.branded.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.branded.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.branded.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.branded.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.branded.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.branded.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.branded.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.branded.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.branded.indicator.outline.offset (Focused / Focus indicator)\n$indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.branded.lowered.container.color (Enabled / Container)\n$lowered-container-color: md-sys-color.$surface-container-low;\n/// md.comp.fab.branded.lowered.container.elevation (Enabled / Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.branded.lowered.focus.container.elevation (Focused / Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.branded.lowered.hover.container.elevation (Hovered / Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.branded.lowered.pressed.container.elevation (Pressed (ripple) / Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.branded.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.branded.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.branded.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.fab.large.container.height\n$container-height: 96px;\n/// md.comp.fab.large.container.width\n$container-width: 96px;\n/// md.comp.fab.large.icon.size\n$icon-size: 36px;\n/// md.comp.fab.large.container.shape\n$container-shape: md-sys-shape.$corner-extra-large;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.fab.medium.container.height\n$container-height: 80px;\n/// md.comp.fab.medium.container.width\n$container-width: 80px;\n/// md.comp.fab.medium.icon.size\n$icon-size: 28px;\n/// md.comp.fab.medium.container.shape\n$container-shape: md-sys-shape.$corner-large-increased;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-menu-primary-close-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab-menu.primary.close-button.container.color (Enabled)\n$container-color: md-sys-color.$primary;\n/// md.comp.fab-menu.primary.close-button.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab-menu.primary.close-button.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.primary.close-button.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.fab-menu.primary.close-button.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.fab-menu.primary.close-button.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab-menu.primary.close-button.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab-menu.primary.close-button.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.fab-menu.primary.close-button.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.fab-menu.primary.close-button.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab-menu.primary.close-button.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.fab-menu.primary.close-button.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.primary.close-button.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.fab-menu.primary.close-button.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.fab-menu.primary.close-button.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-menu-primary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab-menu.primary-container.list-item.container.color (Enabled)\n$list-item-container-color: md-sys-color.$primary-container;\n/// md.comp.fab-menu.primary-container.list-item.container.shadow-color (Enabled)\n$list-item-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab-menu.primary-container.list-item.focused.container.elevation (Focused)\n$list-item-focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.primary-container.list-item.focused.icon.color (Focused)\n$list-item-focused-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.focused.label-text.color (Focused)\n$list-item-focused-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.focused.state-layer.color (Focused)\n$list-item-focused-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.focused.state-layer.opacity (Focused)\n$list-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab-menu.primary-container.list-item.hovered.container.elevation (Hovered)\n$list-item-hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab-menu.primary-container.list-item.hovered.icon.color (Hovered)\n$list-item-hovered-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.hovered.label-text.color (Hovered)\n$list-item-hovered-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.hovered.state-layer.color (Hovered)\n$list-item-hovered-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.hovered.state-layer.opacity (Hovered)\n$list-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab-menu.primary-container.list-item.icon.color (Enabled)\n$list-item-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.label-text.color (Enabled)\n$list-item-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.pressed.container.elevation (Pressed)\n$list-item-pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.primary-container.list-item.pressed.icon.color (Pressed)\n$list-item-pressed-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.pressed.label-text.color (Pressed)\n$list-item-pressed-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.pressed.state-layer.color (Pressed)\n$list-item-pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab-menu.primary-container.list-item.pressed.state-layer.opacity (Pressed)\n$list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-menu-secondary-close-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab-menu.secondary.close-button.container.color (Enabled)\n$container-color: md-sys-color.$secondary;\n/// md.comp.fab-menu.secondary.close-button.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab-menu.secondary.close-button.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.secondary.close-button.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab-menu.secondary.close-button.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.fab-menu.secondary.close-button.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab-menu.secondary.close-button.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab-menu.secondary.close-button.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab-menu.secondary.close-button.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.fab-menu.secondary.close-button.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab-menu.secondary.close-button.icon.color (Enabled)\n$icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab-menu.secondary.close-button.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.secondary.close-button.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab-menu.secondary.close-button.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.fab-menu.secondary.close-button.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-menu-secondary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab-menu.secondary-container.list-item.container.color (Enabled)\n$list-item-container-color: md-sys-color.$secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.container.shadow-color (Enabled)\n$list-item-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab-menu.secondary-container.list-item.focused.container.elevation (Focused)\n$list-item-focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.secondary-container.list-item.focused.icon.color (Focused)\n$list-item-focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.focused.label-text.color (Focused)\n$list-item-focused-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.focused.state-layer.color (Focused)\n$list-item-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.focused.state-layer.opacity (Focused)\n$list-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab-menu.secondary-container.list-item.hovered.container.elevation (Hovered)\n$list-item-hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab-menu.secondary-container.list-item.hovered.icon.color (Hovered)\n$list-item-hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.hovered.label-text.color (Hovered)\n$list-item-hovered-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.hovered.state-layer.color (Hovered)\n$list-item-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.hovered.state-layer.opacity (Hovered)\n$list-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab-menu.secondary-container.list-item.icon.color (Enabled)\n$list-item-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.label-text.color (Enabled)\n$list-item-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.pressed.container.elevation (Pressed)\n$list-item-pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.secondary-container.list-item.pressed.icon.color (Pressed)\n$list-item-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.pressed.label-text.color (Pressed)\n$list-item-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.pressed.state-layer.color (Pressed)\n$list-item-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab-menu.secondary-container.list-item.pressed.state-layer.opacity (Pressed)\n$list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-menu-tertiary-close-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab-menu.tertiary.close-button.container.color (Enabled)\n$container-color: md-sys-color.$tertiary;\n/// md.comp.fab-menu.tertiary.close-button.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab-menu.tertiary.close-button.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.tertiary.close-button.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab-menu.tertiary.close-button.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.fab-menu.tertiary.close-button.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab-menu.tertiary.close-button.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab-menu.tertiary.close-button.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab-menu.tertiary.close-button.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.fab-menu.tertiary.close-button.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab-menu.tertiary.close-button.icon.color (Enabled)\n$icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab-menu.tertiary.close-button.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.tertiary.close-button.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab-menu.tertiary.close-button.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.fab-menu.tertiary.close-button.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-menu-tertiary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab-menu.tertiary-container.list-item.container.color (Enabled)\n$list-item-container-color: md-sys-color.$tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.container.shadow-color (Enabled)\n$list-item-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab-menu.tertiary-container.list-item.focused.container.elevation (Focused)\n$list-item-focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.tertiary-container.list-item.focused.icon.color (Focused)\n$list-item-focused-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.focused.label-text.color (Focused)\n$list-item-focused-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.focused.state-layer.color (Focused)\n$list-item-focused-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.focused.state-layer.opacity (Focused)\n$list-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab-menu.tertiary-container.list-item.hovered.container.elevation (Hovered)\n$list-item-hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab-menu.tertiary-container.list-item.hovered.icon.color (Hovered)\n$list-item-hovered-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.hovered.label-text.color (Hovered)\n$list-item-hovered-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.color (Hovered)\n$list-item-hovered-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.opacity (Hovered)\n$list-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab-menu.tertiary-container.list-item.icon.color (Enabled)\n$list-item-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.label-text.color (Enabled)\n$list-item-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.pressed.container.elevation (Pressed)\n$list-item-pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.tertiary-container.list-item.pressed.icon.color (Pressed)\n$list-item-pressed-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.pressed.label-text.color (Pressed)\n$list-item-pressed-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.color (Pressed)\n$list-item-pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.opacity (Pressed)\n$list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-menu.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.fab-menu.close-button.between-space (Close button)\n$close-button-between-space: 8px;\n/// md.comp.fab-menu.close-button.container.height (Close button)\n$close-button-container-height: 56px;\n/// md.comp.fab-menu.close-button.container.width (Close button)\n$close-button-container-width: 56px;\n/// md.comp.fab-menu.close-button.icon.size (Close button)\n$close-button-icon-size: 20px;\n/// md.comp.fab-menu.menu-item.between-space (List item)\n$menu-item-between-space: 4px;\n/// md.comp.fab-menu.menu-item.container.height (List item)\n$menu-item-container-height: 56px;\n/// md.comp.fab-menu.menu-item.icon-label-space (List item)\n$menu-item-icon-label-space: 8px;\n/// md.comp.fab-menu.menu-item.icon.size (List item)\n$menu-item-icon-size: 24px;\n/// md.comp.fab-menu.menu-item.leading-space (List item)\n$menu-item-leading-space: 24px;\n/// md.comp.fab-menu.menu-item.trailing-space (List item)\n$menu-item-trailing-space: 24px;\n/// md.comp.fab-menu.close-button.container.elevation (Close button)\n$close-button-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab-menu.close-button.container.shape (Close button)\n$close-button-container-shape: md-sys-shape.$corner-full;\n/// md.comp.fab-menu.menu-item.container.elevation (List item)\n$menu-item-container-elevation: md-sys-elevation.$level0;\n/// md.comp.fab-menu.menu-item.container.shape (List item)\n$menu-item-container-shape: md-sys-shape.$corner-full;\n/// md.comp.fab-menu.menu-item.label-text (List item)\n@mixin menu-item-label-text {\n  @include md-sys-typescale.title-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-primary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab.primary-container.container.color (Enabled)\n$container-color: md-sys-color.$primary-container;\n/// md.comp.fab.primary-container.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary-container.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.primary-container.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary-container.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary-container.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary-container.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.primary-container.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.primary-container.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary-container.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary-container.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.primary-container.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary-container.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary-container.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary-container.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary-container.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-primary-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.primary.large.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 96px;\n/// md.comp.fab.primary.large.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 96px;\n/// md.comp.fab.primary.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 36px;\n/// md.comp.fab.primary.large.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$primary-container;\n/// md.comp.fab.primary.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.primary.large.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.fab.primary.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.primary.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.primary.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.primary.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.primary.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.primary.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.primary.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.primary.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-primary-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.primary.small.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.fab.primary.small.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 40px;\n/// md.comp.fab.primary.small.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 24px;\n/// md.comp.fab.primary.small.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$primary-container;\n/// md.comp.fab.primary.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.small.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.primary.small.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-medium;\n/// md.comp.fab.primary.small.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.small.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.small.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.primary.small.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.primary.small.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.primary.small.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.small.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.primary.small.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.primary.small.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.small.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.small.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.primary.small.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.small.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.small.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.small.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.primary.small.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.small.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.small.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.small.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.small.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-primary.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.primary.container.height ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-height: 56px;\n/// md.comp.fab.primary.container.width ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-width: 56px;\n/// md.comp.fab.primary.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$icon-size: 24px;\n/// md.comp.fab.primary.container.color (Enabled)\n$container-color: md-sys-color.$primary;\n/// md.comp.fab.primary.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.primary.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.fab.primary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$focus-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.primary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.primary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.primary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.primary.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.fab.primary.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.fab.primary.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.primary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.primary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$hover-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.fab.primary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.primary.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.primary.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.fab.primary.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.fab.primary.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.primary.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.fab.primary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.primary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.primary.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.primary.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.fab.primary.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.fab.primary.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-secondary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab.secondary-container.container.color (Enabled)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.fab.secondary-container.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary-container.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.secondary-container.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary-container.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary-container.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary-container.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.secondary-container.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.secondary-container.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary-container.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary-container.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.secondary-container.icon.color (Enabled)\n$icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary-container.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary-container.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary-container.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary-container.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-secondary-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.secondary.large.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 96px;\n/// md.comp.fab.secondary.large.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 96px;\n/// md.comp.fab.secondary.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 36px;\n/// md.comp.fab.secondary.large.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.fab.secondary.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.secondary.large.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.fab.secondary.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.secondary.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.secondary.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.secondary.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.secondary.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.secondary.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.secondary.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.secondary.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-secondary-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.secondary.small.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.fab.secondary.small.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 40px;\n/// md.comp.fab.secondary.small.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 24px;\n/// md.comp.fab.secondary.small.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.fab.secondary.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.small.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.secondary.small.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-medium;\n/// md.comp.fab.secondary.small.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.small.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.small.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.secondary.small.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.secondary.small.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.secondary.small.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.small.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.secondary.small.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.secondary.small.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.small.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.small.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.secondary.small.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.small.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.small.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.small.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.secondary.small.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.small.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.small.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.small.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.small.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-secondary.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.secondary.container.height ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-height: 56px;\n/// md.comp.fab.secondary.container.width ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-width: 56px;\n/// md.comp.fab.secondary.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$icon-size: 24px;\n/// md.comp.fab.secondary.container.color (Enabled)\n$container-color: md-sys-color.$secondary;\n/// md.comp.fab.secondary.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.secondary.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.fab.secondary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.secondary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.secondary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.secondary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.secondary.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab.secondary.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.fab.secondary.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.secondary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.secondary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.fab.secondary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.secondary.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.secondary.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab.secondary.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.fab.secondary.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.secondary.icon.color (Enabled)\n$icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab.secondary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.secondary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.secondary.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.secondary.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-secondary;\n/// md.comp.fab.secondary.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.fab.secondary.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.fab.small.container.height\n$container-height: 40px;\n/// md.comp.fab.small.container.width\n$container-width: 40px;\n/// md.comp.fab.small.icon.size\n$icon-size: 24px;\n/// md.comp.fab.small.container.shape\n$container-shape: md-sys-shape.$corner-medium;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-surface-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.surface.large.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 96px;\n/// md.comp.fab.surface.large.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 96px;\n/// md.comp.fab.surface.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 36px;\n/// md.comp.fab.surface.large.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.fab.surface.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.surface.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.surface.large.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.fab.surface.large.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.fab.surface.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.surface.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.surface.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.surface.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.surface.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.surface.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.surface.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.surface.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.surface.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.surface.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.large.lowered.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-color: md-sys-color.$surface-container-low;\n/// md.comp.fab.surface.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.surface.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.surface.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.surface.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.surface.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.surface.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.surface.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-surface.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.surface.container.height (Enabled / Container)\n$container-height: 56px;\n/// md.comp.fab.surface.container.width (Enabled / Container)\n$container-width: 56px;\n/// md.comp.fab.surface.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.fab.surface.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.fab.surface.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.surface.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.surface.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.fab.surface.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.fab.surface.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.surface.focus.icon.color (Focused / Icon)\n$focus-icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.surface.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.surface.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.surface.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.surface.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.surface.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.surface.hover.icon.color (Hovered / Icon)\n$hover-icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.surface.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.surface.icon.color (Enabled / Icon)\n$icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.lowered.container.color (Enabled / Container)\n$lowered-container-color: md-sys-color.$surface-container-low;\n/// md.comp.fab.surface.lowered.container.elevation (Enabled / Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.surface.lowered.focus.container.elevation (Focused / Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.surface.lowered.hover.container.elevation (Hovered / Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.surface.lowered.pressed.container.elevation (Pressed (ripple) / Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.surface.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.surface.pressed.icon.color (Pressed (ripple) / Icon)\n$pressed-icon-color: md-sys-color.$primary;\n/// md.comp.fab.surface.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.fab.surface.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-tertiary-container.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-state';\n\n/// md.comp.fab.tertiary-container.container.color (Enabled)\n$container-color: md-sys-color.$tertiary-container;\n/// md.comp.fab.tertiary-container.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary-container.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.tertiary-container.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary-container.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary-container.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary-container.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.tertiary-container.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.tertiary-container.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary-container.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary-container.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.tertiary-container.icon.color (Enabled)\n$icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary-container.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary-container.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary-container.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary-container.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-tertiary-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.tertiary.large.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 96px;\n/// md.comp.fab.tertiary.large.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 96px;\n/// md.comp.fab.tertiary.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 36px;\n/// md.comp.fab.tertiary.large.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$tertiary-container;\n/// md.comp.fab.tertiary.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.tertiary.large.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.fab.tertiary.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.tertiary.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.tertiary.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.tertiary.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.tertiary.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.tertiary.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.tertiary.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.tertiary.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-tertiary-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.tertiary.small.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.fab.tertiary.small.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 40px;\n/// md.comp.fab.tertiary.small.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 24px;\n/// md.comp.fab.tertiary.small.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$tertiary-container;\n/// md.comp.fab.tertiary.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.small.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.tertiary.small.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-medium;\n/// md.comp.fab.tertiary.small.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.small.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.small.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.tertiary.small.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.tertiary.small.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.tertiary.small.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.small.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.tertiary.small.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.tertiary.small.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.small.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.small.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.tertiary.small.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.small.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.small.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.small.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.tertiary.small.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.small.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.small.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.small.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.small.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab-tertiary.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.fab.tertiary.container.height ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-height: 56px;\n/// md.comp.fab.tertiary.container.width ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-width: 56px;\n/// md.comp.fab.tertiary.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$icon-size: 24px;\n/// md.comp.fab.tertiary.container.color (Enabled)\n$container-color: md-sys-color.$tertiary;\n/// md.comp.fab.tertiary.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.fab.tertiary.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.fab.tertiary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$focus-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$focus-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.fab.tertiary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.fab.tertiary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n///\n/// @deprecated Token is deprecated.\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.fab.tertiary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.tertiary.focused.container.elevation (Focused)\n$focused-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab.tertiary.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.fab.tertiary.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.fab.tertiary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$hover-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.tertiary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$hover-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.fab.tertiary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.tertiary.hovered.container.elevation (Hovered)\n$hovered-container-elevation: md-sys-elevation.$level4;\n/// md.comp.fab.tertiary.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab.tertiary.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.fab.tertiary.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.fab.tertiary.icon.color (Enabled)\n$icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab.tertiary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.fab.tertiary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n///\n/// @deprecated Token is deprecated.\n$lowered-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.fab.tertiary.pressed.container.elevation (Pressed)\n$pressed-container-elevation: md-sys-elevation.$level3;\n/// md.comp.fab.tertiary.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.fab.tertiary.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.fab.tertiary.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-fab.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.fab.container.height\n$container-height: 56px;\n/// md.comp.fab.container.width\n$container-width: 56px;\n/// md.comp.fab.icon.size\n$icon-size: 24px;\n/// md.comp.fab.container.shape\n$container-shape: md-sys-shape.$corner-large;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-autocomplete.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.size (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-size: 24px;\n/// md.comp.filled-autocomplete.menu.divider.height (Enabled / Divider)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-divider-height: 1px;\n/// md.comp.filled-autocomplete.menu.list-item.container.height (Enabled / Container)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-container-height: 48px;\n/// md.comp.filled-autocomplete.text-field.active-indicator.height (Enabled / Active indicator)\n$text-field-active-indicator-height: 1px;\n/// md.comp.filled-autocomplete.text-field.container.height (Enabled / Container)\n///\n/// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height.\n$text-field-container-height: 56px;\n/// md.comp.filled-autocomplete.text-field.disabled.active-indicator.height (Disabled / Active indicator)\n$text-field-disabled-active-indicator-height: 1px;\n/// md.comp.filled-autocomplete.text-field.disabled.active-indicator.opacity (Disabled / Active indicator)\n$text-field-disabled-active-indicator-opacity: 0.38;\n/// md.comp.filled-autocomplete.text-field.disabled.container.opacity (Disabled / Container)\n$text-field-disabled-container-opacity: 0.04;\n/// md.comp.filled-autocomplete.text-field.disabled.input-text.opacity (Disabled / Input text)\n$text-field-disabled-input-text-opacity: 0.38;\n/// md.comp.filled-autocomplete.text-field.disabled.label-text.opacity (Disabled / Label text)\n$text-field-disabled-label-text-opacity: 0.38;\n/// md.comp.filled-autocomplete.text-field.disabled.leading-icon.opacity (Disabled / Leading icon)\n$text-field-disabled-leading-icon-opacity: 0.38;\n/// md.comp.filled-autocomplete.text-field.disabled.supporting-text.opacity (Disabled / Supporting text)\n$text-field-disabled-supporting-text-opacity: 0.38;\n/// md.comp.filled-autocomplete.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.filled-autocomplete.text-field.focus.active-indicator.height (Focused / Active indicator)\n$text-field-focus-active-indicator-height: 2px;\n/// md.comp.filled-autocomplete.text-field.hover.active-indicator.height (Hovered / Active indicator)\n$text-field-hover-active-indicator-height: 1px;\n/// md.comp.filled-autocomplete.text-field.leading-icon.size (Enabled / Leading icon)\n$text-field-leading-icon-size: 20px;\n/// md.comp.filled-autocomplete.text-field.trailing-icon.size (Enabled / Trailing icon)\n$text-field-trailing-icon-size: 24px;\n/// md.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.color (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.menu.container.color (Enabled / Container)\n$menu-container-color: md-sys-color.$surface-container;\n/// md.comp.filled-autocomplete.menu.container.elevation (Enabled / Container)\n$menu-container-elevation: md-sys-elevation.$level2;\n/// md.comp.filled-autocomplete.menu.container.shadow-color (Enabled / Container)\n$menu-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.filled-autocomplete.menu.container.shape (Enabled / Container)\n$menu-container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.filled-autocomplete.menu.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$menu-container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.filled-autocomplete.menu.divider.color (Enabled / Divider)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-divider-color: md-sys-color.$surface-variant;\n/// md.comp.filled-autocomplete.menu.list-item.label-text.color (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.menu.list-item.label-text.font (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.filled-autocomplete.menu.list-item.label-text.line-height (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.filled-autocomplete.menu.list-item.label-text.size (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.filled-autocomplete.menu.list-item.label-text.tracking (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.filled-autocomplete.menu.list-item.label-text.weight (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.filled-autocomplete.menu.list-item.selected.container.color (Enabled / Container)\n///\n/// @deprecated Deprecating per bug b/262592125\n$menu-list-item-selected-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.filled-autocomplete.text-field.active-indicator.color (Enabled / Active indicator)\n$text-field-active-indicator-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.caret.color (Enabled / Caret)\n$text-field-caret-color: md-sys-color.$primary;\n/// md.comp.filled-autocomplete.text-field.container.color (Enabled / Container)\n$text-field-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.filled-autocomplete.text-field.container.shape (Enabled / Container)\n$text-field-container-shape: md-sys-shape.$corner-extra-small-top;\n/// md.comp.filled-autocomplete.text-field.disabled.active-indicator.color (Disabled / Active indicator)\n$text-field-disabled-active-indicator-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.disabled.container.color (Disabled / Container)\n$text-field-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.disabled.input-text.color (Disabled / Input text)\n$text-field-disabled-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.disabled.label-text.color (Disabled / Label text)\n$text-field-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.disabled.leading-icon.color (Disabled / Leading icon)\n$text-field-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.disabled.supporting-text.color (Disabled / Supporting text)\n$text-field-disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.disabled.trailing-icon.color (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.error.active-indicator.color (Error)\n$text-field-error-active-indicator-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.focus.active-indicator.color (Error / Focus)\n$text-field-error-focus-active-indicator-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.focus.caret.color (Error / Focus)\n$text-field-error-focus-caret-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.focus.input-text.color (Error / Focus)\n$text-field-error-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.error.focus.label-text.color (Error / Focus)\n$text-field-error-focus-label-text-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.focus.leading-icon.color (Error / Focus)\n$text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.error.focus.supporting-text.color (Error / Focus)\n$text-field-error-focus-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.focus.trailing-icon.color (Error / Focus)\n$text-field-error-focus-trailing-icon-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.hover.active-indicator.color (Error / Hover)\n$text-field-error-hover-active-indicator-color: md-sys-color.$on-error-container;\n/// md.comp.filled-autocomplete.text-field.error.hover.input-text.color (Error / Hover)\n$text-field-error-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.error.hover.label-text.color (Error / Hover)\n$text-field-error-hover-label-text-color: md-sys-color.$on-error-container;\n/// md.comp.filled-autocomplete.text-field.error.hover.leading-icon.color (Error / Hover)\n$text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.error.hover.state-layer.color (Error / Hover)\n$text-field-error-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.error.hover.state-layer.opacity (Error / Hover)\n$text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-autocomplete.text-field.error.hover.supporting-text.color (Error / Hover)\n$text-field-error-hover-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.hover.trailing-icon.color (Error / Hover)\n$text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container;\n/// md.comp.filled-autocomplete.text-field.error.input-text.color (Error)\n$text-field-error-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.error.label-text.color (Error)\n$text-field-error-label-text-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.leading-icon.color (Error)\n$text-field-error-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.error.supporting-text.color (Error)\n$text-field-error-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.error.trailing-icon.color (Error)\n$text-field-error-trailing-icon-color: md-sys-color.$error;\n/// md.comp.filled-autocomplete.text-field.focus.active-indicator.color (Focused / Active indicator)\n$text-field-focus-active-indicator-color: md-sys-color.$primary;\n/// md.comp.filled-autocomplete.text-field.focus.input-text.color (Focused / Input text)\n$text-field-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.focus.label-text.color (Focused / Label text)\n$text-field-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.filled-autocomplete.text-field.focus.leading-icon.color (Focused / Leading icon)\n$text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.focus.supporting-text.color (Focused / Supporting text)\n$text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.focus.trailing-icon.color (Focused / Trailing icon)\n$text-field-focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.hover.active-indicator.color (Hovered / Active indicator)\n$text-field-hover-active-indicator-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.hover.input-text.color (Hovered / Input text)\n$text-field-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.hover.label-text.color (Hovered / Label text)\n$text-field-hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.hover.leading-icon.color (Hovered / Leading icon)\n$text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.hover.state-layer.color (Hovered / State layer)\n$text-field-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.hover.state-layer.opacity (Hovered / State layer)\n$text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-autocomplete.text-field.hover.supporting-text.color (Hovered / Supporting text)\n$text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.hover.trailing-icon.color (Hovered / Trailing icon)\n$text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.input-text.color (Enabled / Input text)\n$text-field-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-autocomplete.text-field.input-text.font (Enabled / Input text)\n$text-field-input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.filled-autocomplete.text-field.input-text.line-height (Enabled / Input text)\n$text-field-input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.filled-autocomplete.text-field.input-text.size (Enabled / Input text)\n$text-field-input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.filled-autocomplete.text-field.input-text.tracking (Enabled / Input text)\n$text-field-input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.filled-autocomplete.text-field.input-text.weight (Enabled / Input text)\n$text-field-input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.filled-autocomplete.text-field.label-text.color (Enabled / Label text)\n$text-field-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.label-text.font (Enabled / Label text)\n$text-field-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.filled-autocomplete.text-field.label-text.line-height (Enabled / Label text)\n$text-field-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.filled-autocomplete.text-field.label-text.populated.line-height (Enabled / Label text)\n$text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.filled-autocomplete.text-field.label-text.populated.size (Enabled / Label text)\n$text-field-label-text-populated-size: md-sys-typescale.$body-small-size;\n/// md.comp.filled-autocomplete.text-field.label-text.size (Enabled / Label text)\n$text-field-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.filled-autocomplete.text-field.label-text.tracking (Enabled / Label text)\n$text-field-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.filled-autocomplete.text-field.label-text.weight (Enabled / Label text)\n$text-field-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.filled-autocomplete.text-field.leading-icon.color (Enabled / Leading icon)\n$text-field-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.supporting-text.color (Enabled / Supporting text)\n$text-field-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.text-field.supporting-text.font (Enabled / Supporting text)\n$text-field-supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.filled-autocomplete.text-field.supporting-text.line-height (Enabled / Supporting text)\n$text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.filled-autocomplete.text-field.supporting-text.size (Enabled / Supporting text)\n$text-field-supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.filled-autocomplete.text-field.supporting-text.tracking (Enabled / Supporting text)\n$text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.filled-autocomplete.text-field.supporting-text.weight (Enabled / Supporting text)\n$text-field-supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.filled-autocomplete.text-field.trailing-icon.color (Enabled / Trailing icon)\n$text-field-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-autocomplete.menu.list-item.label-text.type (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n@mixin menu-list-item-label-text-type {\n  font-family: $menu-list-item-label-text-font;\n  font-size: $menu-list-item-label-text-size;\n  font-weight: $menu-list-item-label-text-weight;\n  letter-spacing: $menu-list-item-label-text-tracking;\n  line-height: $menu-list-item-label-text-line-height;\n}\n/// md.comp.filled-autocomplete.text-field.input-text.type (Enabled / Input text)\n@mixin text-field-input-text-type {\n  font-family: $text-field-input-text-font;\n  font-size: $text-field-input-text-size;\n  font-weight: $text-field-input-text-weight;\n  letter-spacing: $text-field-input-text-tracking;\n  line-height: $text-field-input-text-line-height;\n}\n/// md.comp.filled-autocomplete.text-field.label-text.type (Enabled / Label text)\n@mixin text-field-label-text-type {\n  font-family: $text-field-label-text-font;\n  font-size: $text-field-label-text-size;\n  font-weight: $text-field-label-text-weight;\n  letter-spacing: $text-field-label-text-tracking;\n  line-height: $text-field-label-text-line-height;\n}\n/// md.comp.filled-autocomplete.text-field.supporting-text.type (Enabled / Supporting text)\n@mixin text-field-supporting-text-type {\n  font-family: $text-field-supporting-text-font;\n  font-size: $text-field-supporting-text-size;\n  font-weight: $text-field-supporting-text-weight;\n  letter-spacing: $text-field-supporting-text-tracking;\n  line-height: $text-field-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.filled-button.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.filled-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-opacity: 0.12;\n/// md.comp.filled-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.filled-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.filled-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.filled-button.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$primary;\n/// md.comp.filled-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-button.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.filled-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.filled-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-button.disabled.container.elevation ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-button.dragged.container.elevation ([Deprecated] Dragged / [Deprecated] Container)\n///\n/// @deprecated Bug fix. Filled buttons do not provide a dragged state.\n$dragged-container-elevation: md-sys-elevation.$level3;\n/// md.comp.filled-button.dragged.label-text.color ([Deprecated] Dragged / [Deprecated] Label text)\n///\n/// @deprecated Bug fix. Filled buttons do not provide a dragged state.\n$dragged-label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.dragged.state-layer.color ([Deprecated] Dragged / [Deprecated] State layer)\n///\n/// @deprecated Bug fix. Filled buttons do not provide a dragged state.\n$dragged-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.dragged.state-layer.opacity ([Deprecated] Dragged / [Deprecated] State layer)\n///\n/// @deprecated Bug fix. Filled buttons do not provide a dragged state.\n$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.filled-button.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.filled-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.filled-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filled-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n$focus-label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filled-button.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filled-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n$hover-label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.filled-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.filled-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.filled-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.filled-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.filled-button.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text)\n$pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.filled-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-button.with-icon.dragged.icon.color ([Deprecated] Dragged / [Deprecated] Icon)\n///\n/// @deprecated Bug fix. Filled buttons do not provide a dragged state.\n$with-icon-dragged-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$with-icon-focus-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$with-icon-hover-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$with-icon-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-card.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.filled-card.disabled.container.opacity (Disabled / Container)\n$disabled-container-opacity: 0.38;\n/// md.comp.filled-card.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.filled-card.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-highest;\n/// md.comp.filled-card.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-card.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.filled-card.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-medium;\n/// md.comp.filled-card.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Bug fix. Removing surface-tint token, since the tint does not apply to components using surface-variant as container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.filled-card.disabled.container.color (Disabled / Container)\n$disabled-container-color: md-sys-color.$surface-variant;\n/// md.comp.filled-card.disabled.container.elevation (Disabled / Container)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-card.dragged.container.elevation (Dragged / Container)\n$dragged-container-elevation: md-sys-elevation.$level3;\n/// md.comp.filled-card.dragged.state-layer.color (Dragged / State layer)\n$dragged-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-card.dragged.state-layer.opacity (Dragged / State layer)\n$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.filled-card.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-card.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.filled-card.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.filled-card.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filled-card.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-card.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filled-card.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filled-card.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-card.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-card.icon.color (Enabled / Icon)\n$icon-color: md-sys-color.$primary;\n/// md.comp.filled-card.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-card.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-card.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-icon-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.filled-icon-button.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.filled-icon-button.container.size ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecating in place of width and height tokens\n$container-size: 40px;\n/// md.comp.filled-icon-button.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 40px;\n/// md.comp.filled-icon-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-opacity: 0.12;\n/// md.comp.filled-icon-button.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)\n$disabled-icon-opacity: 0.38;\n/// md.comp.filled-icon-button.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 24px;\n/// md.comp.filled-icon-button.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.filled-icon-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-icon-button.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-icon-button.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.filled-icon-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.filled-icon-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filled-icon-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filled-icon-button.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-icon-button.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.filled-icon-button.selected.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$selected-container-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.toggle.selected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$toggle-selected-focus-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.toggle.selected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$toggle-selected-focus-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.toggle.selected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$toggle-selected-hover-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.toggle.selected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$toggle-selected-hover-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.toggle.selected.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$toggle-selected-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.toggle.selected.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$toggle-selected-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.toggle.selected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$toggle-selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-icon-button.toggle.unselected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$toggle-unselected-focus-icon-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.toggle.unselected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$toggle-unselected-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.toggle.unselected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$toggle-unselected-hover-icon-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.toggle.unselected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$toggle-unselected-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.toggle.unselected.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$toggle-unselected-icon-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.toggle.unselected.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$toggle-unselected-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.toggle.unselected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$toggle-unselected-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.filled-icon-button.unselected.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$unselected-container-color: md-sys-color.$surface-container-highest;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-menu-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.filled-menu-button.container.height (Enabled / Container)\n$container-height: 40px;\n/// md.comp.filled-menu-button.disabled.container.opacity (Disabled / Container)\n$disabled-container-opacity: 0.12;\n/// md.comp.filled-menu-button.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.filled-menu-button.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$disabled-trailing-icon-opacity: 0.38;\n/// md.comp.filled-menu-button.trailing-icon.size (Enabled / Trailing icon)\n$trailing-icon-size: 18px;\n/// md.comp.filled-menu-button.with-icon.disabled.leading-icon.opacity (Disabled / Leading icon)\n$with-icon-disabled-leading-icon-opacity: 0.38;\n/// md.comp.filled-menu-button.with-icon.leading-icon.size (Enabled / Leading icon)\n$with-icon-leading-icon-size: 18px;\n/// md.comp.filled-menu-button.container.color (Enabled / Container)\n$container-color: md-sys-color.$primary;\n/// md.comp.filled-menu-button.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-menu-button.disabled.container.color (Disabled / Container)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-menu-button.disabled.container.elevation (Disabled / Container)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-menu-button.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-menu-button.disabled.trailing-icon.color (Disabled / Trailing icon)\n$disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-menu-button.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-menu-button.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.filled-menu-button.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.filled-menu-button.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filled-menu-button.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filled-menu-button.focus.trailing-icon.color (Focused / Trailing icon)\n$focus-trailing-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filled-menu-button.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-menu-button.hover.trailing-icon.color (Hovered / Trailing icon)\n$hover-trailing-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.filled-menu-button.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.filled-menu-button.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.filled-menu-button.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.filled-menu-button.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.filled-menu-button.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filled-menu-button.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)\n$pressed-trailing-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.shape (Enabled / Container)\n$shape: md-sys-shape.$corner-full;\n/// md.comp.filled-menu-button.trailing-icon.color (Enabled / Trailing icon)\n$trailing-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.with-icon.disabled.leading-icon.color (Disabled / Leading icon)\n$with-icon-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-menu-button.with-icon.focus.leading-icon.color (Focused / Leading icon)\n$with-icon-focus-leading-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.with-icon.hover.leading-icon.color (Hovered / Leading icon)\n$with-icon-hover-leading-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.with-icon.leading-icon.color (Enabled / Leading icon)\n$with-icon-leading-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.with-icon.pressed.leading-icon.color (Pressed (ripple) / Leading icon)\n$with-icon-pressed-leading-icon-color: md-sys-color.$on-primary;\n/// md.comp.filled-menu-button.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-select.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.filled-select.menu.cascading-menu-indicator.icon.size (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-size: 24px;\n/// md.comp.filled-select.menu.divider.height (Enabled / Divider)\n$menu-divider-height: 1px;\n/// md.comp.filled-select.menu.list-item.container.height (Enabled / Container)\n$menu-list-item-container-height: 48px;\n/// md.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.size (Enabled / Leading icon)\n$menu-list-item-with-leading-icon-leading-icon-size: 24px;\n/// md.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon)\n$menu-list-item-with-trailing-icon-trailing-icon-size: 24px;\n/// md.comp.filled-select.text-field.active-indicator.height (Enabled / Active indicator)\n$text-field-active-indicator-height: 1px;\n/// md.comp.filled-select.text-field.container.height (Enabled / Container)\n///\n/// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height.\n$text-field-container-height: 56px;\n/// md.comp.filled-select.text-field.disabled.active-indicator.height (Disabled / Active indicator)\n$text-field-disabled-active-indicator-height: 1px;\n/// md.comp.filled-select.text-field.disabled.active-indicator.opacity (Disabled / Active indicator)\n$text-field-disabled-active-indicator-opacity: 0.38;\n/// md.comp.filled-select.text-field.disabled.container.opacity (Disabled / Container)\n$text-field-disabled-container-opacity: 0.04;\n/// md.comp.filled-select.text-field.disabled.input-text.opacity (Disabled / Input text)\n$text-field-disabled-input-text-opacity: 0.38;\n/// md.comp.filled-select.text-field.disabled.label-text.opacity (Disabled / Label text)\n$text-field-disabled-label-text-opacity: 0.38;\n/// md.comp.filled-select.text-field.disabled.leading-icon.opacity (Disabled / Leading icon)\n$text-field-disabled-leading-icon-opacity: 0.38;\n/// md.comp.filled-select.text-field.disabled.supporting-text.opacity (Disabled / Supporting text)\n$text-field-disabled-supporting-text-opacity: 0.38;\n/// md.comp.filled-select.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.filled-select.text-field.focus.active-indicator.height (Focused / Active indicator)\n$text-field-focus-active-indicator-height: 2px;\n/// md.comp.filled-select.text-field.hover.active-indicator.height (Hovered / Active indicator)\n$text-field-hover-active-indicator-height: 1px;\n/// md.comp.filled-select.text-field.leading-icon.size (Enabled / Leading icon)\n$text-field-leading-icon-size: 24px;\n/// md.comp.filled-select.text-field.trailing-icon.size (Enabled / Trailing icon)\n$text-field-trailing-icon-size: 24px;\n/// md.comp.filled-select.menu.cascading-menu-indicator.icon.color (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.menu.container.color (Enabled / Container)\n$menu-container-color: md-sys-color.$surface-container;\n/// md.comp.filled-select.menu.container.elevation (Enabled / Container)\n$menu-container-elevation: md-sys-elevation.$level2;\n/// md.comp.filled-select.menu.container.shadow-color (Enabled / Container)\n$menu-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.filled-select.menu.container.shape (Enabled / Container)\n$menu-container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.filled-select.menu.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$menu-container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.filled-select.menu.divider.color (Enabled / Divider)\n$menu-divider-color: md-sys-color.$surface-variant;\n/// md.comp.filled-select.menu.list-item.label-text.color (Enabled / Label text)\n$menu-list-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.menu.list-item.label-text.font (Enabled / Label text)\n$menu-list-item-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.filled-select.menu.list-item.label-text.line-height (Enabled / Label text)\n$menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.filled-select.menu.list-item.label-text.size (Enabled / Label text)\n$menu-list-item-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.filled-select.menu.list-item.label-text.tracking (Enabled / Label text)\n$menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.filled-select.menu.list-item.label-text.weight (Enabled / Label text)\n$menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.filled-select.menu.list-item.selected.container.color (Enabled / Container)\n$menu-list-item-selected-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.color (Enabled / Leading icon)\n$menu-list-item-with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon)\n$menu-list-item-with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.active-indicator.color (Enabled / Active indicator)\n$text-field-active-indicator-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.caret.color (Enabled / Caret)\n///\n/// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text.\n$text-field-caret-color: md-sys-color.$primary;\n/// md.comp.filled-select.text-field.container.color (Enabled / Container)\n$text-field-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.filled-select.text-field.container.shape (Enabled / Container)\n$text-field-container-shape: md-sys-shape.$corner-extra-small-top;\n/// md.comp.filled-select.text-field.disabled.active-indicator.color (Disabled / Active indicator)\n$text-field-disabled-active-indicator-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.disabled.container.color (Disabled / Container)\n$text-field-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.disabled.input-text.color (Disabled / Input text)\n$text-field-disabled-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.disabled.label-text.color (Disabled / Label text)\n$text-field-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.disabled.leading-icon.color (Disabled / Leading icon)\n$text-field-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.disabled.supporting-text.color (Disabled / Supporting text)\n$text-field-disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.disabled.trailing-icon.color (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.error.active-indicator.color (Error)\n$text-field-error-active-indicator-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.focus.active-indicator.color (Error / Focus)\n$text-field-error-focus-active-indicator-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.focus.caret.color (Error / Focus)\n///\n/// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text.\n$text-field-error-focus-caret-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.focus.input-text.color (Error / Focus)\n$text-field-error-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.error.focus.label-text.color (Error / Focus)\n$text-field-error-focus-label-text-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.focus.leading-icon.color (Error / Focus)\n$text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.error.focus.supporting-text.color (Error / Focus)\n$text-field-error-focus-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.focus.trailing-icon.color (Error / Focus)\n$text-field-error-focus-trailing-icon-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.hover.active-indicator.color (Error / Hover)\n$text-field-error-hover-active-indicator-color: md-sys-color.$on-error-container;\n/// md.comp.filled-select.text-field.error.hover.input-text.color (Error / Hover)\n$text-field-error-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.error.hover.label-text.color (Error / Hover)\n$text-field-error-hover-label-text-color: md-sys-color.$on-error-container;\n/// md.comp.filled-select.text-field.error.hover.leading-icon.color (Error / Hover)\n$text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.error.hover.state-layer.color (Error / Hover)\n$text-field-error-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.error.hover.state-layer.opacity (Error / Hover)\n$text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-select.text-field.error.hover.supporting-text.color (Error / Hover)\n$text-field-error-hover-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.hover.trailing-icon.color (Error / Hover)\n$text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container;\n/// md.comp.filled-select.text-field.error.input-text.color (Error)\n$text-field-error-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.error.label-text.color (Error)\n$text-field-error-label-text-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.leading-icon.color (Error)\n$text-field-error-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.error.supporting-text.color (Error)\n$text-field-error-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.error.trailing-icon.color (Error)\n$text-field-error-trailing-icon-color: md-sys-color.$error;\n/// md.comp.filled-select.text-field.focus.active-indicator.color (Focused / Active indicator)\n$text-field-focus-active-indicator-color: md-sys-color.$primary;\n/// md.comp.filled-select.text-field.focus.input-text.color (Focused / Input text)\n$text-field-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.focus.label-text.color (Focused / Label text)\n$text-field-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.filled-select.text-field.focus.leading-icon.color (Focused / Leading icon)\n$text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.focus.supporting-text.color (Focused / Supporting text)\n$text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.focus.trailing-icon.color (Focused / Trailing icon)\n$text-field-focus-trailing-icon-color: md-sys-color.$primary;\n/// md.comp.filled-select.text-field.hover.active-indicator.color (Hovered / Active indicator)\n$text-field-hover-active-indicator-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.hover.input-text.color (Hovered / Input text)\n$text-field-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.hover.label-text.color (Hovered / Label text)\n$text-field-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.hover.leading-icon.color (Hovered / Leading icon)\n$text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.hover.state-layer.color (Hovered / State layer)\n$text-field-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.hover.state-layer.opacity (Hovered / State layer)\n$text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-select.text-field.hover.supporting-text.color (Hovered / Supporting text)\n$text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.hover.trailing-icon.color (Hovered / Trailing icon)\n$text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.input-text.color (Enabled / Input text)\n$text-field-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-select.text-field.input-text.font (Enabled / Input text)\n$text-field-input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.filled-select.text-field.input-text.line-height (Enabled / Input text)\n$text-field-input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.filled-select.text-field.input-text.size (Enabled / Input text)\n$text-field-input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.filled-select.text-field.input-text.tracking (Enabled / Input text)\n$text-field-input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.filled-select.text-field.input-text.weight (Enabled / Input text)\n$text-field-input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.filled-select.text-field.label-text.color (Enabled / Label text)\n$text-field-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.label-text.font (Enabled / Label text)\n$text-field-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.filled-select.text-field.label-text.line-height (Enabled / Label text)\n$text-field-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.filled-select.text-field.label-text.populated.line-height (Enabled / Label text)\n$text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.filled-select.text-field.label-text.populated.size (Enabled / Label text)\n$text-field-label-text-populated-size: md-sys-typescale.$body-small-size;\n/// md.comp.filled-select.text-field.label-text.size (Enabled / Label text)\n$text-field-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.filled-select.text-field.label-text.tracking (Enabled / Label text)\n$text-field-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.filled-select.text-field.label-text.weight (Enabled / Label text)\n$text-field-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.filled-select.text-field.leading-icon.color (Enabled / Leading icon)\n$text-field-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.supporting-text.color (Enabled / Supporting text)\n$text-field-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.text-field.supporting-text.font (Enabled / Supporting text)\n$text-field-supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.filled-select.text-field.supporting-text.line-height (Enabled / Supporting text)\n$text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.filled-select.text-field.supporting-text.size (Enabled / Supporting text)\n$text-field-supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.filled-select.text-field.supporting-text.tracking (Enabled / Supporting text)\n$text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.filled-select.text-field.supporting-text.weight (Enabled / Supporting text)\n$text-field-supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.filled-select.text-field.trailing-icon.color (Enabled / Trailing icon)\n$text-field-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-select.menu.list-item.label-text.type (Enabled / Label text)\n@mixin menu-list-item-label-text-type {\n  font-family: $menu-list-item-label-text-font;\n  font-size: $menu-list-item-label-text-size;\n  font-weight: $menu-list-item-label-text-weight;\n  letter-spacing: $menu-list-item-label-text-tracking;\n  line-height: $menu-list-item-label-text-line-height;\n}\n/// md.comp.filled-select.text-field.input-text.type (Enabled / Input text)\n@mixin text-field-input-text-type {\n  font-family: $text-field-input-text-font;\n  font-size: $text-field-input-text-size;\n  font-weight: $text-field-input-text-weight;\n  letter-spacing: $text-field-input-text-tracking;\n  line-height: $text-field-input-text-line-height;\n}\n/// md.comp.filled-select.text-field.label-text.type (Enabled / Label text)\n@mixin text-field-label-text-type {\n  font-family: $text-field-label-text-font;\n  font-size: $text-field-label-text-size;\n  font-weight: $text-field-label-text-weight;\n  letter-spacing: $text-field-label-text-tracking;\n  line-height: $text-field-label-text-line-height;\n}\n/// md.comp.filled-select.text-field.supporting-text.type (Enabled / Supporting text)\n@mixin text-field-supporting-text-type {\n  font-family: $text-field-supporting-text-font;\n  font-size: $text-field-supporting-text-size;\n  font-weight: $text-field-supporting-text-weight;\n  letter-spacing: $text-field-supporting-text-tracking;\n  line-height: $text-field-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-text-field.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.filled-text-field.active-indicator.height (Enabled / Active indicator)\n$active-indicator-height: 1px;\n/// md.comp.filled-text-field.container.height (Enabled / Container)\n///\n/// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height.\n$container-height: 56px;\n/// md.comp.filled-text-field.disabled.active-indicator.height (Disabled / Active indicator)\n$disabled-active-indicator-height: 1px;\n/// md.comp.filled-text-field.disabled.active-indicator.opacity (Disabled / Active indicator)\n$disabled-active-indicator-opacity: 0.38;\n/// md.comp.filled-text-field.disabled.container.opacity (Disabled / Container)\n$disabled-container-opacity: 0.04;\n/// md.comp.filled-text-field.disabled.input-text.opacity (Disabled / Input text)\n$disabled-input-text-opacity: 0.38;\n/// md.comp.filled-text-field.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.filled-text-field.disabled.leading-icon.opacity (Disabled / Leading icon)\n$disabled-leading-icon-opacity: 0.38;\n/// md.comp.filled-text-field.disabled.supporting-text.opacity (Disabled / Supporting text)\n$disabled-supporting-text-opacity: 0.38;\n/// md.comp.filled-text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$disabled-trailing-icon-opacity: 0.38;\n/// md.comp.filled-text-field.focus.active-indicator.height (Focused / Active indicator)\n$focus-active-indicator-height: 2px;\n/// md.comp.filled-text-field.hover.active-indicator.height (Hovered / Active indicator)\n$hover-active-indicator-height: 1px;\n/// md.comp.filled-text-field.leading-icon.size (Enabled / Leading icon)\n$leading-icon-size: 24px;\n/// md.comp.filled-text-field.trailing-icon.size (Enabled / Trailing icon)\n$trailing-icon-size: 24px;\n/// md.comp.filled-text-field.active-indicator.color (Enabled / Active indicator)\n$active-indicator-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.caret.color (Enabled / Caret)\n$caret-color: md-sys-color.$primary;\n/// md.comp.filled-text-field.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-highest;\n/// md.comp.filled-text-field.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-small-top;\n/// md.comp.filled-text-field.disabled.active-indicator.color (Disabled / Active indicator)\n$disabled-active-indicator-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.disabled.container.color (Disabled / Container)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.disabled.input-text.color (Disabled / Input text)\n$disabled-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.disabled.leading-icon.color (Disabled / Leading icon)\n$disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.disabled.supporting-text.color (Disabled / Supporting text)\n$disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.disabled.trailing-icon.color (Disabled / Trailing icon)\n$disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.error.active-indicator.color (Error)\n$error-active-indicator-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.focus.active-indicator.color (Error / Focus)\n$error-focus-active-indicator-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.focus.caret.color (Error / Focus)\n$error-focus-caret-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.focus.input-text.color (Error / Focus)\n$error-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.error.focus.label-text.color (Error / Focus)\n$error-focus-label-text-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.focus.leading-icon.color (Error / Focus)\n$error-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.error.focus.supporting-text.color (Error / Focus)\n$error-focus-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.focus.trailing-icon.color (Error / Focus)\n$error-focus-trailing-icon-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.hover.active-indicator.color (Error / Hover)\n$error-hover-active-indicator-color: md-sys-color.$on-error-container;\n/// md.comp.filled-text-field.error.hover.input-text.color (Error / Hover)\n$error-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.error.hover.label-text.color (Error / Hover)\n$error-hover-label-text-color: md-sys-color.$on-error-container;\n/// md.comp.filled-text-field.error.hover.leading-icon.color (Error / Hover)\n$error-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.error.hover.state-layer.color (Error / Hover)\n$error-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.error.hover.state-layer.opacity (Error / Hover)\n$error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-text-field.error.hover.supporting-text.color (Error / Hover)\n$error-hover-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.hover.trailing-icon.color (Error / Hover)\n$error-hover-trailing-icon-color: md-sys-color.$on-error-container;\n/// md.comp.filled-text-field.error.input-text.color (Error)\n$error-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.error.label-text.color (Error)\n$error-label-text-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.leading-icon.color (Error)\n$error-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.error.supporting-text.color (Error)\n$error-supporting-text-color: md-sys-color.$error;\n/// md.comp.filled-text-field.error.trailing-icon.color (Error)\n$error-trailing-icon-color: md-sys-color.$error;\n/// md.comp.filled-text-field.focus.active-indicator.color (Focused / Active indicator)\n$focus-active-indicator-color: md-sys-color.$primary;\n/// md.comp.filled-text-field.focus.active-indicator.thickness (Focused / Active indicator)\n$focus-active-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filled-text-field.focus.input-text.color (Focused / Input text)\n$focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.filled-text-field.focus.leading-icon.color (Focused / Leading icon)\n$focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.focus.supporting-text.color (Focused / Supporting text)\n$focus-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.focus.trailing-icon.color (Focused / Trailing icon)\n$focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.hover.active-indicator.color (Hovered / Active indicator)\n$hover-active-indicator-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.hover.input-text.color (Hovered / Input text)\n$hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.hover.leading-icon.color (Hovered / Leading icon)\n$hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-text-field.hover.supporting-text.color (Hovered / Supporting text)\n$hover-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.hover.trailing-icon.color (Hovered / Trailing icon)\n$hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.input-text.color (Enabled / Input text)\n$input-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-text-field.input-text.font (Enabled / Input text)\n$input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.filled-text-field.input-text.line-height (Enabled / Input text)\n$input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.filled-text-field.input-text.placeholder.color (Enabled / Input text)\n$input-text-placeholder-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.input-text.prefix.color (Enabled / Input text)\n$input-text-prefix-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.input-text.size (Enabled / Input text)\n$input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.filled-text-field.input-text.suffix.color (Enabled / Input text)\n$input-text-suffix-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.input-text.tracking (Enabled / Input text)\n$input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.filled-text-field.input-text.weight (Enabled / Input text)\n$input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.filled-text-field.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.filled-text-field.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.filled-text-field.label-text.populated.line-height (Enabled / Label text)\n$label-text-populated-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.filled-text-field.label-text.populated.size (Enabled / Label text)\n$label-text-populated-size: md-sys-typescale.$body-small-size;\n/// md.comp.filled-text-field.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.filled-text-field.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.filled-text-field.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.filled-text-field.leading-icon.color (Enabled / Leading icon)\n$leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.filled-text-field.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.filled-text-field.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.filled-text-field.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.filled-text-field.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.filled-text-field.trailing-icon.color (Enabled / Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-text-field.input-text.type (Enabled / Input text)\n@mixin input-text-type {\n  font-family: $input-text-font;\n  font-size: $input-text-size;\n  font-weight: $input-text-weight;\n  letter-spacing: $input-text-tracking;\n  line-height: $input-text-line-height;\n}\n/// md.comp.filled-text-field.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n/// md.comp.filled-text-field.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-tonal-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.filled-tonal-button.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.filled-tonal-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-opacity: 0.12;\n/// md.comp.filled-tonal-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.filled-tonal-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.filled-tonal-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.filled-tonal-button.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.filled-tonal-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-tonal-button.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.filled-tonal-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.filled-tonal-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-tonal-button.disabled.container.elevation ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-tonal-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filled-tonal-button.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)\n$focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-tonal-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.filled-tonal-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.filled-tonal-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filled-tonal-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n$focus-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filled-tonal-button.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)\n$hover-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filled-tonal-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n$hover-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-tonal-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.filled-tonal-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.filled-tonal-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.filled-tonal-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.filled-tonal-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.filled-tonal-button.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filled-tonal-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text)\n$pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.filled-tonal-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-tonal-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$with-icon-focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$with-icon-hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$with-icon-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filled-tonal-icon-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.filled-tonal-icon-button.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.filled-tonal-icon-button.container.size ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecating in place of width and height tokens\n$container-size: 40px;\n/// md.comp.filled-tonal-icon-button.container.width ([Deprecated] Enabled / [Deprecated] Container)\n$container-width: 40px;\n/// md.comp.filled-tonal-icon-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-opacity: 0.12;\n/// md.comp.filled-tonal-icon-button.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)\n$disabled-icon-opacity: 0.38;\n/// md.comp.filled-tonal-icon-button.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-size: 24px;\n/// md.comp.filled-tonal-icon-button.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.filled-tonal-icon-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.filled-tonal-icon-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filled-tonal-icon-button.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.filled-tonal-icon-button.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.filled-tonal-icon-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.filled-tonal-icon-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filled-tonal-icon-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filled-tonal-icon-button.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filled-tonal-icon-button.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon)\n$pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.filled-tonal-icon-button.selected.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$selected-container-color: md-sys-color.$secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.selected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$toggle-selected-focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.selected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$toggle-selected-focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.selected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$toggle-selected-hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.selected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$toggle-selected-hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.selected.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$toggle-selected-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.selected.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon)\n$toggle-selected-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.selected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$toggle-selected-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filled-tonal-icon-button.toggle.unselected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$toggle-unselected-focus-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-tonal-icon-button.toggle.unselected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$toggle-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-tonal-icon-button.toggle.unselected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$toggle-unselected-hover-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-tonal-icon-button.toggle.unselected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$toggle-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-tonal-icon-button.toggle.unselected.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$toggle-unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-tonal-icon-button.toggle.unselected.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon)\n$toggle-unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$toggle-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.filled-tonal-icon-button.unselected.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$unselected-container-color: md-sys-color.$surface-container-highest;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-filter-chip.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.filter-chip.container.height (Enabled / Container)\n$container-height: 32px;\n/// md.comp.filter-chip.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.filter-chip.elevated.disabled.container.opacity (Disabled / Container)\n$elevated-disabled-container-opacity: 0.12;\n/// md.comp.filter-chip.flat.disabled.selected.container.opacity (Disabled / Container)\n$flat-disabled-selected-container-opacity: 0.12;\n/// md.comp.filter-chip.flat.disabled.unselected.outline.opacity (Disabled / Container)\n$flat-disabled-unselected-outline-opacity: 0.12;\n/// md.comp.filter-chip.flat.selected.outline.width (Enabled / Container)\n$flat-selected-outline-width: 0px;\n/// md.comp.filter-chip.flat.unselected.outline.width (Enabled / Container)\n$flat-unselected-outline-width: 1px;\n/// md.comp.filter-chip.with-icon.disabled.icon.opacity (Disabled / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.filter-chip.with-icon.icon.size (Enabled / Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.filter-chip.with-leading-icon.disabled.leading-icon.opacity (Disabled / Icon)\n$with-leading-icon-disabled-leading-icon-opacity: 0.38;\n/// md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.opacity (Disabled / Icon)\n$with-trailing-icon-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.filter-chip.container.shadow-color (Enabled / Container)\n///\n/// @deprecated Replaced with new token md.comp.filter-chip.elevated.container.shadow-color to include the \"elevated\" designation in the token name.\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.filter-chip.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-small;\n/// md.comp.filter-chip.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.filter-chip.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.filter-chip.dragged.container.elevation (Dragged / Container)\n$dragged-container-elevation: md-sys-elevation.$level4;\n/// md.comp.filter-chip.elevated.container.elevation (Enabled / Container)\n$elevated-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filter-chip.elevated.container.shadow-color (Enabled / Container)\n$elevated-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.filter-chip.elevated.disabled.container.color (Disabled / Container)\n$elevated-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.filter-chip.elevated.disabled.container.elevation (Disabled / Container)\n$elevated-disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filter-chip.elevated.focus.container.elevation (Focused / Container)\n$elevated-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filter-chip.elevated.hover.container.elevation (Hovered / Container)\n$elevated-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.filter-chip.elevated.pressed.container.elevation (Pressed (ripple) / Container)\n$elevated-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filter-chip.elevated.selected.container.color (Enabled / Container)\n$elevated-selected-container-color: md-sys-color.$secondary-container;\n/// md.comp.filter-chip.elevated.unselected.container.color (Enabled / Container)\n$elevated-unselected-container-color: md-sys-color.$surface-container-low;\n/// md.comp.filter-chip.flat.container.elevation (Enabled / Container)\n$flat-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filter-chip.flat.disabled.selected.container.color (Disabled / Container)\n$flat-disabled-selected-container-color: md-sys-color.$on-surface;\n/// md.comp.filter-chip.flat.disabled.unselected.outline.color (Disabled / Container)\n$flat-disabled-unselected-outline-color: md-sys-color.$on-surface;\n/// md.comp.filter-chip.flat.selected.container.color (Enabled / Container)\n$flat-selected-container-color: md-sys-color.$secondary-container;\n/// md.comp.filter-chip.flat.selected.focus.container.elevation (Focused / Container)\n$flat-selected-focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filter-chip.flat.selected.hover.container.elevation (Hovered / Container)\n$flat-selected-hover-container-elevation: md-sys-elevation.$level1;\n/// md.comp.filter-chip.flat.selected.pressed.container.elevation (Pressed (ripple) / Container)\n$flat-selected-pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filter-chip.flat.unselected.focus.container.elevation (Focused / Container)\n$flat-unselected-focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filter-chip.flat.unselected.focus.outline.color (Focused / Container)\n$flat-unselected-focus-outline-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.flat.unselected.hover.container.elevation (Hovered / Container)\n$flat-unselected-hover-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filter-chip.flat.unselected.outline.color (Enabled / Container)\n$flat-unselected-outline-color: md-sys-color.$outline-variant;\n/// md.comp.filter-chip.flat.unselected.pressed.container.elevation (Pressed (ripple) / Container)\n$flat-unselected-pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.filter-chip.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.filter-chip.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.filter-chip.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.filter-chip.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.filter-chip.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.filter-chip.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.filter-chip.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.filter-chip.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.filter-chip.selected.dragged.label-text.color (Dragged / Label text)\n$selected-dragged-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.dragged.state-layer.color (Dragged / State layer)\n$selected-dragged-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.dragged.state-layer.opacity (Dragged / State layer)\n$selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.filter-chip.selected.focus.label-text.color (Focused / Label text)\n$selected-focus-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.focus.state-layer.color (Focused / State layer)\n$selected-focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.focus.state-layer.opacity (Focused / State layer)\n$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filter-chip.selected.hover.label-text.color (Hovered / Label text)\n$selected-hover-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.hover.state-layer.color (Hovered / State layer)\n$selected-hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.hover.state-layer.opacity (Hovered / State layer)\n$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filter-chip.selected.label-text.color (Enabled / Label text)\n$selected-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.pressed.label-text.color (Pressed (ripple) / Label text)\n$selected-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.filter-chip.unselected.dragged.label-text.color (Dragged / Label text)\n$unselected-dragged-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.dragged.state-layer.color (Dragged / State layer)\n$unselected-dragged-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.dragged.state-layer.opacity (Dragged / State layer)\n$unselected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.filter-chip.unselected.focus.label-text.color (Focused / Label text)\n$unselected-focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.focus.state-layer.color (Focused / State layer)\n$unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.focus.state-layer.opacity (Focused / State layer)\n$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.filter-chip.unselected.hover.label-text.color (Hovered / Label text)\n$unselected-hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.hover.state-layer.color (Hovered / State layer)\n$unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.hover.state-layer.opacity (Hovered / State layer)\n$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.filter-chip.unselected.label-text.color (Enabled / Label text)\n$unselected-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.pressed.label-text.color (Pressed (ripple) / Label text)\n$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.filter-chip.with-icon.disabled.icon.color (Disabled / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.filter-chip.with-icon.selected.dragged.icon.color (Dragged / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-selected-dragged-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-icon.selected.focus.icon.color (Focused / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-selected-focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-icon.selected.hover.icon.color (Hovered / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-selected-hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-icon.selected.icon.color (Enabled / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-selected-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-icon.selected.pressed.icon.color (Pressed (ripple) / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-selected-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-icon.unselected.dragged.icon.color (Dragged / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-unselected-dragged-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-icon.unselected.focus.icon.color (Focused / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-unselected-focus-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-icon.unselected.hover.icon.color (Hovered / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-unselected-hover-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-icon.unselected.icon.color (Enabled / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-icon.unselected.pressed.icon.color (Pressed (ripple) / Icon)\n///\n/// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead.\n$with-icon-unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color (Disabled / Icon)\n$with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.filter-chip.with-leading-icon.leading-icon.unselected.color (Enabled / Icon)\n///\n/// @deprecated Wrongly named token. Please use this token instead: md.comp.filter-chip.with-leading-icon.selected.leading-icon.color\n$with-leading-icon-leading-icon-unselected-color: md-sys-color.$primary;\n/// md.comp.filter-chip.with-leading-icon.selected.dragged.leading-icon.color (Dragged / Icon)\n$with-leading-icon-selected-dragged-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-leading-icon.selected.focus.leading-icon.color (Focused / Icon)\n$with-leading-icon-selected-focus-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-leading-icon.selected.hover.leading-icon.color (Hovered / Icon)\n$with-leading-icon-selected-hover-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-leading-icon.selected.leading-icon.color (Enabled / Icon)\n$with-leading-icon-selected-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-leading-icon.selected.pressed.leading-icon.color (Pressed (ripple) / Icon)\n$with-leading-icon-selected-pressed-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-leading-icon.unselected.dragged.leading-icon.color (Dragged / Icon)\n$with-leading-icon-unselected-dragged-leading-icon-color: md-sys-color.$primary;\n/// md.comp.filter-chip.with-leading-icon.unselected.focus.leading-icon.color (Focused / Icon)\n$with-leading-icon-unselected-focus-leading-icon-color: md-sys-color.$primary;\n/// md.comp.filter-chip.with-leading-icon.unselected.hover.leading-icon.color (Hovered / Icon)\n$with-leading-icon-unselected-hover-leading-icon-color: md-sys-color.$primary;\n/// md.comp.filter-chip.with-leading-icon.unselected.leading-icon.color (Enabled / Icon)\n$with-leading-icon-unselected-leading-icon-color: md-sys-color.$primary;\n/// md.comp.filter-chip.with-leading-icon.unselected.pressed.leading-icon.color (Pressed (ripple) / Icon)\n$with-leading-icon-unselected-pressed-leading-icon-color: md-sys-color.$primary;\n/// md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color (Disabled / Icon)\n$with-trailing-icon-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.filter-chip.with-trailing-icon.selected.dragged.trailing-icon.color (Dragged / Icon)\n$with-trailing-icon-selected-dragged-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-trailing-icon.selected.focus.trailing-icon.color (Focused / Icon)\n$with-trailing-icon-selected-focus-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-trailing-icon.selected.hover.trailing-icon.color (Hovered / Icon)\n$with-trailing-icon-selected-hover-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-trailing-icon.selected.pressed.trailing-icon.color (Pressed (ripple) / Icon)\n$with-trailing-icon-selected-pressed-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color (Enabled / Icon)\n$with-trailing-icon-selected-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.filter-chip.with-trailing-icon.trailing-icon.unselected.color (Enabled / Icon)\n///\n/// @deprecated Wrongly named token. Please use this token instead: md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color\n$with-trailing-icon-trailing-icon-unselected-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-trailing-icon.unselected.dragged.trailing-icon.color (Dragged / Icon)\n$with-trailing-icon-unselected-dragged-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-trailing-icon.unselected.focus.trailing-icon.color (Focused / Icon)\n$with-trailing-icon-unselected-focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-trailing-icon.unselected.hover.trailing-icon.color (Hovered / Icon)\n$with-trailing-icon-unselected-hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-trailing-icon.unselected.pressed.trailing-icon.color (Pressed (ripple) / Icon)\n$with-trailing-icon-unselected-pressed-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color (Enabled / Icon)\n$with-trailing-icon-unselected-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.filter-chip.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-full-screen-dialog.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.full-screen-dialog.action-bar.container.height (Enabled / Container)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-container-height: 56px;\n/// md.comp.full-screen-dialog.header.container.height (Enabled / Container)\n$header-container-height: 56px;\n/// md.comp.full-screen-dialog.header.icon.size (Enabled / Icon)\n$header-icon-size: 24px;\n/// md.comp.full-screen-dialog.with-divider.divider.height (Enabled / Divider)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement\n$with-divider-divider-height: 1px;\n/// md.comp.full-screen-dialog.action-bar.container.color (Enabled / Container)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-container-color: md-sys-color.$surface;\n/// md.comp.full-screen-dialog.action-bar.container.elevation (Enabled / Container)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-container-elevation: md-sys-elevation.$level0;\n/// md.comp.full-screen-dialog.action-bar.focus.label-text.color (Focused / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.action-bar.focus.state-layer.color (Focused / State layer)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.action-bar.focus.state-layer.opacity (Focused / State layer)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.full-screen-dialog.action-bar.hover.label-text.color (Hovered / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-hover-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.action-bar.hover.state-layer.color (Hovered / State layer)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.action-bar.hover.state-layer.opacity (Hovered / State layer)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.full-screen-dialog.action-bar.label-text.color (Enabled / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.action-bar.label-text.font (Enabled / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.full-screen-dialog.action-bar.label-text.line-height (Enabled / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.full-screen-dialog.action-bar.label-text.size (Enabled / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.full-screen-dialog.action-bar.label-text.tracking (Enabled / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.full-screen-dialog.action-bar.label-text.weight (Enabled / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.full-screen-dialog.action-bar.on-scroll.container.elevation (Enabled / Container)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-on-scroll-container-elevation: md-sys-elevation.$level2;\n/// md.comp.full-screen-dialog.action-bar.pressed.label-text.color (Pressed (ripple) / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.action-bar.pressed.state-layer.color (Pressed (ripple) / State layer)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.action-bar.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n$action-bar-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.full-screen-dialog.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.full-screen-dialog.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.full-screen-dialog.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.full-screen-dialog.header.action.focus.label-text.color (Focused / Label text)\n$header-action-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.header.action.focus.state-layer.color (Focused / State layer)\n$header-action-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.header.action.focus.state-layer.opacity (Focused / State layer)\n$header-action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.full-screen-dialog.header.action.hover.label-text.color (Hovered / Label text)\n$header-action-hover-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.header.action.hover.state-layer.color (Hovered / State layer)\n$header-action-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.header.action.hover.state-layer.opacity (Hovered / State layer)\n$header-action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.full-screen-dialog.header.action.label-text.color (Enabled / Label text)\n$header-action-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.header.action.label-text.font (Enabled / Label text)\n$header-action-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.full-screen-dialog.header.action.label-text.line-height (Enabled / Label text)\n$header-action-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.full-screen-dialog.header.action.label-text.size (Enabled / Label text)\n$header-action-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.full-screen-dialog.header.action.label-text.tracking (Enabled / Label text)\n$header-action-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.full-screen-dialog.header.action.label-text.weight (Enabled / Label text)\n$header-action-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.full-screen-dialog.header.action.pressed.label-text.color (Pressed (ripple) / Label text)\n$header-action-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.header.action.pressed.state-layer.color (Pressed (ripple) / State layer)\n$header-action-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.full-screen-dialog.header.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$header-action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.full-screen-dialog.header.container.color (Enabled / Container)\n$header-container-color: md-sys-color.$surface;\n/// md.comp.full-screen-dialog.header.container.elevation (Enabled / Container)\n$header-container-elevation: md-sys-elevation.$level0;\n/// md.comp.full-screen-dialog.header.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$header-container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.full-screen-dialog.header.headline.color (Enabled / Headline)\n$header-headline-color: md-sys-color.$on-surface;\n/// md.comp.full-screen-dialog.header.headline.font (Enabled / Headline)\n$header-headline-font: md-sys-typescale.$title-large-font;\n/// md.comp.full-screen-dialog.header.headline.line-height (Enabled / Headline)\n$header-headline-line-height: md-sys-typescale.$title-large-line-height;\n/// md.comp.full-screen-dialog.header.headline.size (Enabled / Headline)\n$header-headline-size: md-sys-typescale.$title-large-size;\n/// md.comp.full-screen-dialog.header.headline.tracking (Enabled / Headline)\n$header-headline-tracking: md-sys-typescale.$title-large-tracking;\n/// md.comp.full-screen-dialog.header.headline.weight (Enabled / Headline)\n$header-headline-weight: md-sys-typescale.$title-large-weight;\n/// md.comp.full-screen-dialog.header.icon.color (Enabled / Icon)\n$header-icon-color: md-sys-color.$on-surface;\n/// md.comp.full-screen-dialog.header.on-scroll.container.color (Enabled / Container)\n$header-on-scroll-container-color: md-sys-color.$surface-container;\n/// md.comp.full-screen-dialog.header.on-scroll.container.elevation (Enabled / Container)\n$header-on-scroll-container-elevation: md-sys-elevation.$level2;\n/// md.comp.full-screen-dialog.with-divider.divider.color (Enabled / Divider)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement\n$with-divider-divider-color: md-sys-color.$surface-variant;\n/// md.comp.full-screen-dialog.action-bar.label-text.type (Enabled / Label text)\n///\n/// @deprecated Bug: should not have been created. If needed, copy to your own tokens.\n@mixin action-bar-label-text-type {\n  font-family: $action-bar-label-text-font;\n  font-size: $action-bar-label-text-size;\n  font-weight: $action-bar-label-text-weight;\n  letter-spacing: $action-bar-label-text-tracking;\n  line-height: $action-bar-label-text-line-height;\n}\n/// md.comp.full-screen-dialog.header.action.label-text.type (Enabled / Label text)\n@mixin header-action-label-text-type {\n  font-family: $header-action-label-text-font;\n  font-size: $header-action-label-text-size;\n  font-weight: $header-action-label-text-weight;\n  letter-spacing: $header-action-label-text-tracking;\n  line-height: $header-action-label-text-line-height;\n}\n/// md.comp.full-screen-dialog.header.headline.type (Enabled / Headline)\n@mixin header-headline-type {\n  font-family: $header-headline-font;\n  font-size: $header-headline-size;\n  font-weight: $header-headline-weight;\n  letter-spacing: $header-headline-tracking;\n  line-height: $header-headline-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-filled.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.icon-button.filled.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.icon-button.filled.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.icon-button.filled.container.color (Enabled)\n$container-color: md-sys-color.$primary;\n/// md.comp.icon-button.filled.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.filled.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.filled.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.icon-button.filled.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.icon-button.filled.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.icon-button.filled.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$primary;\n/// md.comp.icon-button.filled.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.filled.unselected.container.color (Enabled)\n$unselected-container-color: md-sys-color.$surface-container;\n/// md.comp.icon-button.filled.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.filled.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.filled.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.filled.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.filled.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.filled.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.filled.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n\n/// md.comp.icon-button.large.container.height\n$container-height: 96px;\n/// md.comp.icon-button.large.default.leading-space\n$default-leading-space: 32px;\n/// md.comp.icon-button.large.default.trailing-space\n$default-trailing-space: 32px;\n/// md.comp.icon-button.large.icon.size\n$icon-size: 32px;\n/// md.comp.icon-button.large.narrow.leading-space\n$narrow-leading-space: 16px;\n/// md.comp.icon-button.large.narrow.trailing-space\n$narrow-trailing-space: 16px;\n/// md.comp.icon-button.large.outlined.outline.width\n$outlined-outline-width: 2px;\n/// md.comp.icon-button.large.wide.leading-space\n$wide-leading-space: 48px;\n/// md.comp.icon-button.large.wide.trailing-space\n$wide-trailing-space: 48px;\n/// md.comp.icon-button.large.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.icon-button.large.container.shape.square\n$container-shape-square: md-sys-shape.$corner-extra-large;\n/// md.comp.icon-button.large.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.icon-button.large.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.icon-button.large.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-large;\n/// md.comp.icon-button.large.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-extra-large;\n/// md.comp.icon-button.large.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n\n/// md.comp.icon-button.medium.container.height\n$container-height: 56px;\n/// md.comp.icon-button.medium.default.leading-space\n$default-leading-space: 16px;\n/// md.comp.icon-button.medium.default.trailing-space\n$default-trailing-space: 16px;\n/// md.comp.icon-button.medium.icon.size\n$icon-size: 24px;\n/// md.comp.icon-button.medium.narrow.leading-space\n$narrow-leading-space: 12px;\n/// md.comp.icon-button.medium.narrow.trailing-space\n$narrow-trailing-space: 12px;\n/// md.comp.icon-button.medium.outlined.outline.width\n$outlined-outline-width: 1px;\n/// md.comp.icon-button.medium.wide.leading-space\n$wide-leading-space: 24px;\n/// md.comp.icon-button.medium.wide.trailing-space\n$wide-trailing-space: 24px;\n/// md.comp.icon-button.medium.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.icon-button.medium.container.shape.square\n$container-shape-square: md-sys-shape.$corner-large;\n/// md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.icon-button.medium.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-medium;\n/// md.comp.icon-button.medium.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-large;\n/// md.comp.icon-button.medium.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-outlined.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.icon-button.outlined.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.icon-button.outlined.selected.disabled.container.opacity (Disabled)\n$selected-disabled-container-opacity: 0.1;\n/// md.comp.icon-button.outlined.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.outlined.disabled.outline.color (Disabled)\n$disabled-outline-color: md-sys-color.$outline-variant;\n/// md.comp.icon-button.outlined.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.icon-button.outlined.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.icon-button.outlined.icon.color (Enabled)\n$icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.outline.color (Enabled)\n$outline-color: md-sys-color.$outline-variant;\n/// md.comp.icon-button.outlined.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.icon-button.outlined.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$inverse-surface;\n/// md.comp.icon-button.outlined.selected.disabled.container.color (Disabled)\n$selected-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.outlined.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.icon-button.outlined.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.icon-button.outlined.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.icon-button.outlined.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.icon-button.outlined.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.icon-button.outlined.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.icon-button.outlined.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.icon-button.outlined.unselected.disabled.outline.color (Disabled)\n$unselected-disabled-outline-color: md-sys-color.$outline-variant;\n/// md.comp.icon-button.outlined.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.unselected.outline.color (Enabled)\n$unselected-outline-color: md-sys-color.$outline-variant;\n/// md.comp.icon-button.outlined.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.outlined.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n\n/// md.comp.icon-button.small.container.height\n$container-height: 40px;\n/// md.comp.icon-button.small.default.leading-space\n$default-leading-space: 8px;\n/// md.comp.icon-button.small.default.trailing-space\n$default-trailing-space: 8px;\n/// md.comp.icon-button.small.icon.size\n$icon-size: 24px;\n/// md.comp.icon-button.small.narrow.leading-space\n$narrow-leading-space: 4px;\n/// md.comp.icon-button.small.narrow.trailing-space\n$narrow-trailing-space: 4px;\n/// md.comp.icon-button.small.outlined.outline.width\n$outlined-outline-width: 1px;\n/// md.comp.icon-button.small.wide.leading-space\n$wide-leading-space: 14px;\n/// md.comp.icon-button.small.wide.trailing-space\n$wide-trailing-space: 14px;\n/// md.comp.icon-button.small.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.icon-button.small.container.shape.square\n$container-shape-square: md-sys-shape.$corner-medium;\n/// md.comp.icon-button.small.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.icon-button.small.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.icon-button.small.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-small;\n/// md.comp.icon-button.small.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-medium;\n/// md.comp.icon-button.small.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-standard.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.icon-button.standard.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.icon-button.standard.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.standard.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.icon-button.standard.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.icon-button.standard.icon.color (Enabled)\n$icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.icon-button.standard.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$primary;\n/// md.comp.icon-button.standard.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$primary;\n/// md.comp.icon-button.standard.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$primary;\n/// md.comp.icon-button.standard.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$primary;\n/// md.comp.icon-button.standard.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$primary;\n/// md.comp.icon-button.standard.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.icon-button.standard.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.icon-button.standard.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.standard.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-tonal.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.icon-button.tonal.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.icon-button.tonal.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.icon-button.tonal.container.color (Enabled)\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.icon-button.tonal.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.tonal.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.tonal.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.icon-button.tonal.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.icon-button.tonal.icon.color (Enabled)\n$icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.icon-button.tonal.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$secondary;\n/// md.comp.icon-button.tonal.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-secondary;\n/// md.comp.icon-button.tonal.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.icon-button.tonal.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-secondary;\n/// md.comp.icon-button.tonal.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.icon-button.tonal.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-secondary;\n/// md.comp.icon-button.tonal.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-secondary;\n/// md.comp.icon-button.tonal.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-secondary;\n/// md.comp.icon-button.tonal.unselected.container.color (Enabled)\n$unselected-container-color: md-sys-color.$secondary-container;\n/// md.comp.icon-button.tonal.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.icon-button.tonal.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-xlarge.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n\n/// md.comp.icon-button.xlarge.container.height\n$container-height: 136px;\n/// md.comp.icon-button.xlarge.default.leading-space\n$default-leading-space: 48px;\n/// md.comp.icon-button.xlarge.default.trailing-space\n$default-trailing-space: 48px;\n/// md.comp.icon-button.xlarge.icon.size\n$icon-size: 40px;\n/// md.comp.icon-button.xlarge.narrow.leading-space\n$narrow-leading-space: 32px;\n/// md.comp.icon-button.xlarge.narrow.trailing-space\n$narrow-trailing-space: 32px;\n/// md.comp.icon-button.xlarge.outlined.outline.width\n$outlined-outline-width: 3px;\n/// md.comp.icon-button.xlarge.wide.leading-space\n$wide-leading-space: 72px;\n/// md.comp.icon-button.xlarge.wide.trailing-space\n$wide-trailing-space: 72px;\n/// md.comp.icon-button.xlarge.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.icon-button.xlarge.container.shape.square\n$container-shape-square: md-sys-shape.$corner-extra-large;\n/// md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.icon-button.xlarge.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-large;\n/// md.comp.icon-button.xlarge.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-extra-large;\n/// md.comp.icon-button.xlarge.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button-xsmall.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n\n/// md.comp.icon-button.xsmall.container.height\n$container-height: 32px;\n/// md.comp.icon-button.xsmall.default.leading-space\n$default-leading-space: 6px;\n/// md.comp.icon-button.xsmall.default.trailing-space\n$default-trailing-space: 6px;\n/// md.comp.icon-button.xsmall.icon.size\n$icon-size: 20px;\n/// md.comp.icon-button.xsmall.narrow.leading-space\n$narrow-leading-space: 4px;\n/// md.comp.icon-button.xsmall.narrow.trailing-space\n$narrow-trailing-space: 4px;\n/// md.comp.icon-button.xsmall.outlined.outline.width\n$outlined-outline-width: 1px;\n/// md.comp.icon-button.xsmall.wide.leading-space\n$wide-leading-space: 10px;\n/// md.comp.icon-button.xsmall.wide.trailing-space\n$wide-trailing-space: 10px;\n/// md.comp.icon-button.xsmall.container.shape.round\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.icon-button.xsmall.container.shape.square\n$container-shape-square: md-sys-shape.$corner-medium;\n/// md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.damping\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.stiffness\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.icon-button.xsmall.pressed.container.shape\n$pressed-container-shape: md-sys-shape.$corner-small;\n/// md.comp.icon-button.xsmall.selected.container.shape.round\n$selected-container-shape-round: md-sys-shape.$corner-medium;\n/// md.comp.icon-button.xsmall.selected.container.shape.square\n$selected-container-shape-square: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-icon-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-motion';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.icon-button.container.height (Enabled)\n$container-height: 40px;\n/// md.comp.icon-button.default.leading-space (Enabled)\n$default-leading-space: 8px;\n/// md.comp.icon-button.default.trailing-space (Enabled)\n$default-trailing-space: 8px;\n/// md.comp.icon-button.disabled.container.opacity (Disabled)\n$disabled-container-opacity: 0.1;\n/// md.comp.icon-button.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.icon-button.icon.size (Enabled)\n$icon-size: 24px;\n/// md.comp.icon-button.narrow.leading-space (Enabled)\n$narrow-leading-space: 4px;\n/// md.comp.icon-button.narrow.trailing-space (Enabled)\n$narrow-trailing-space: 4px;\n/// md.comp.icon-button.state-layer.height ([Deprecated] Enabled / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$state-layer-height: 40px;\n/// md.comp.icon-button.state-layer.size ([Deprecated] Enabled / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$state-layer-size: 40px;\n/// md.comp.icon-button.state-layer.width ([Deprecated] Enabled / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$state-layer-width: 40px;\n/// md.comp.icon-button.wide.leading-space (Enabled)\n$wide-leading-space: 14px;\n/// md.comp.icon-button.wide.trailing-space (Enabled)\n$wide-trailing-space: 14px;\n/// md.comp.icon-button.container.color (Enabled)\n$container-color: md-sys-color.$primary;\n/// md.comp.icon-button.container.shape.round (Enabled)\n$container-shape-round: md-sys-shape.$corner-full;\n/// md.comp.icon-button.container.shape.square (Enabled)\n$container-shape-square: md-sys-shape.$corner-medium;\n/// md.comp.icon-button.disabled.container.color (Disabled)\n$disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.icon-button.focus.indicator.color (Enabled)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.icon-button.focus.indicator.outline.offset (Enabled)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.icon-button.focus.indicator.thickness (Enabled)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.icon-button.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.icon-button.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.icon-button.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.pressed.container.corner-size.motion.spring.damping (Enabled)\n$pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping;\n/// md.comp.icon-button.pressed.container.corner-size.motion.spring.stiffness (Enabled)\n$pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness;\n/// md.comp.icon-button.pressed.container.shape (Enabled)\n$pressed-container-shape: md-sys-shape.$corner-small;\n/// md.comp.icon-button.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.icon-button.selected.container.color (Enabled)\n$selected-container-color: md-sys-color.$primary;\n/// md.comp.icon-button.selected.container.shape.round (Enabled)\n$selected-container-shape-round: md-sys-shape.$corner-medium;\n/// md.comp.icon-button.selected.container.shape.square (Enabled)\n$selected-container-shape-square: md-sys-shape.$corner-full;\n/// md.comp.icon-button.selected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$selected-focus-icon-color: md-sys-color.$primary;\n/// md.comp.icon-button.selected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$selected-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.icon-button.selected.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.icon-button.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.selected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$selected-hover-icon-color: md-sys-color.$primary;\n/// md.comp.icon-button.selected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$selected-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.icon-button.selected.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.icon-button.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.icon-button.selected.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.icon-button.state-layer.shape ([Deprecated] Enabled / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$state-layer-shape: md-sys-shape.$corner-full;\n/// md.comp.icon-button.unselected.container.color (Enabled)\n$unselected-container-color: md-sys-color.$surface-container;\n/// md.comp.icon-button.unselected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$unselected-focus-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.icon-button.unselected.focused.icon.color (Focused)\n$unselected-focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.focused.state-layer.color (Focused)\n$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n///\n/// @deprecated Token is deprecated.\n$unselected-hover-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.icon-button.unselected.hovered.icon.color (Hovered)\n$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.hovered.state-layer.color (Hovered)\n$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.icon.color (Enabled)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.pressed.icon.color (Pressed)\n$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.pressed.state-layer.color (Pressed)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.icon-button.unselected.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n///\n/// @deprecated Token is deprecated.\n$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-input-chip.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.input-chip.container.height (Enabled / Container)\n$container-height: 32px;\n/// md.comp.input-chip.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.input-chip.disabled.outline.opacity (Disabled / Container)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$disabled-outline-opacity: 0.12;\n/// md.comp.input-chip.disabled.selected.container.opacity (Disabled / Container)\n$disabled-selected-container-opacity: 0.12;\n/// md.comp.input-chip.disabled.unselected.outline.opacity (Disabled / Container)\n$disabled-unselected-outline-opacity: 0.12;\n/// md.comp.input-chip.outline.width (Enabled / Container)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$outline-width: 1px;\n/// md.comp.input-chip.selected.outline.width (Enabled / Container)\n$selected-outline-width: 0px;\n/// md.comp.input-chip.unselected.outline.width (Enabled / Container)\n$unselected-outline-width: 1px;\n/// md.comp.input-chip.with-avatar.avatar.size (Enabled / Avatar)\n$with-avatar-avatar-size: 24px;\n/// md.comp.input-chip.with-avatar.disabled.avatar.opacity (Disabled / Avatar)\n$with-avatar-disabled-avatar-opacity: 0.38;\n/// md.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity (Disabled / Leading icon)\n$with-leading-icon-disabled-leading-icon-opacity: 0.38;\n/// md.comp.input-chip.with-leading-icon.leading-icon.size (Enabled / Leading icon)\n$with-leading-icon-leading-icon-size: 18px;\n/// md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$with-trailing-icon-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.input-chip.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon)\n$with-trailing-icon-trailing-icon-size: 18px;\n/// md.comp.input-chip.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.input-chip.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-small;\n/// md.comp.input-chip.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.input-chip.disabled.outline.color (Disabled / Container)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.input-chip.disabled.selected.container.color (Disabled / Container)\n$disabled-selected-container-color: md-sys-color.$on-surface;\n/// md.comp.input-chip.disabled.unselected.outline.color (Disabled / Container)\n$disabled-unselected-outline-color: md-sys-color.$on-surface;\n/// md.comp.input-chip.dragged.container.elevation (Dragged / Container)\n$dragged-container-elevation: md-sys-elevation.$level4;\n/// md.comp.input-chip.dragged.label-text.color (Dragged / Label text)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$dragged-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.dragged.state-layer.color (Dragged / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$dragged-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.dragged.state-layer.opacity (Dragged / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.input-chip.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.input-chip.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.input-chip.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.input-chip.focus.label-text.color (Focused / Label text)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.focus.outline.color (Focused / Container)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$focus-outline-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.focus.state-layer.color (Focused / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.focus.state-layer.opacity (Focused / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.input-chip.hover.label-text.color (Hovered / Label text)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.hover.state-layer.color (Hovered / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.hover.state-layer.opacity (Hovered / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.input-chip.label-text.color (Enabled / Label text)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.input-chip.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.input-chip.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.input-chip.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.input-chip.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.input-chip.outline.color (Enabled / Container)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$outline-color: md-sys-color.$outline;\n/// md.comp.input-chip.pressed.label-text.color (Pressed (ripple) / Label text)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.pressed.state-layer.color (Pressed (ripple) / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.selected.…\" or \"md.comp.input-chip.unselected.…\" tokens depending on component status.\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.input-chip.selected.container.color (Enabled / Container)\n$selected-container-color: md-sys-color.$secondary-container;\n/// md.comp.input-chip.selected.dragged.label-text.color (Dragged / Label text)\n$selected-dragged-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.dragged.state-layer.color (Dragged / State layer)\n$selected-dragged-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.dragged.state-layer.opacity (Dragged / State layer)\n$selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.input-chip.selected.focus.label-text.color (Focused / Label text)\n$selected-focus-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.focus.state-layer.color (Focused / State layer)\n$selected-focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.focus.state-layer.opacity (Focused / State layer)\n$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.input-chip.selected.hover.label-text.color (Hovered / Label text)\n$selected-hover-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.hover.state-layer.color (Hovered / State layer)\n$selected-hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.hover.state-layer.opacity (Hovered / State layer)\n$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.input-chip.selected.label-text.color (Enabled / Label text)\n$selected-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.pressed.label-text.color (Pressed (ripple) / Label text)\n$selected-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.input-chip.unselected.dragged.label-text.color (Dragged / Label text)\n$unselected-dragged-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.dragged.state-layer.color (Dragged / State layer)\n$unselected-dragged-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.dragged.state-layer.opacity (Dragged / State layer)\n$unselected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.input-chip.unselected.focus.label-text.color (Focused / Label text)\n$unselected-focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.focus.outline.color (Focused / Container)\n$unselected-focus-outline-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.focus.state-layer.color (Focused / State layer)\n$unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.focus.state-layer.opacity (Focused / State layer)\n$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.input-chip.unselected.hover.label-text.color (Hovered / Label text)\n$unselected-hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.hover.state-layer.color (Hovered / State layer)\n$unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.hover.state-layer.opacity (Hovered / State layer)\n$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.input-chip.unselected.label-text.color (Enabled / Label text)\n$unselected-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.outline.color (Enabled / Container)\n$unselected-outline-color: md-sys-color.$outline-variant;\n/// md.comp.input-chip.unselected.pressed.label-text.color (Pressed (ripple) / Label text)\n$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.input-chip.with-avatar.avatar.shape (Enabled / Avatar)\n$with-avatar-avatar-shape: md-sys-shape.$corner-full;\n/// md.comp.input-chip.with-leading-icon.disabled.leading-icon.color (Disabled / Leading icon)\n$with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.input-chip.with-leading-icon.dragged.leading-icon.color (Dragged / Leading icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-leading-icon.selected.…\" or \"md.comp.input-chip.with-leading-icon.unselected.…\" tokens depending on component status.\n$with-leading-icon-dragged-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-leading-icon.focus.leading-icon.color (Focused / Leading icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-leading-icon.selected.…\" or \"md.comp.input-chip.with-leading-icon.unselected.…\" tokens depending on component status.\n$with-leading-icon-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-leading-icon.hover.leading-icon.color (Hovered / Leading icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-leading-icon.selected.…\" or \"md.comp.input-chip.with-leading-icon.unselected.…\" tokens depending on component status.\n$with-leading-icon-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-leading-icon.leading-icon.color (Enabled / Leading icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-leading-icon.selected.…\" or \"md.comp.input-chip.with-leading-icon.unselected.…\" tokens depending on component status.\n$with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-leading-icon.pressed.leading-icon.color (Pressed (ripple) / Leading icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-leading-icon.selected.…\" or \"md.comp.input-chip.with-leading-icon.unselected.…\" tokens depending on component status.\n$with-leading-icon-pressed-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color (Dragged / Leading icon)\n$with-leading-icon-selected-dragged-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color (Focused / Leading icon)\n$with-leading-icon-selected-focus-leading-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color (Hovered / Leading icon)\n$with-leading-icon-selected-hover-leading-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-leading-icon.selected.leading-icon.color (Enabled / Leading icon)\n$with-leading-icon-selected-leading-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color (Pressed (ripple) / Leading icon)\n$with-leading-icon-selected-pressed-leading-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color (Dragged / Leading icon)\n$with-leading-icon-unselected-dragged-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color (Focused / Leading icon)\n$with-leading-icon-unselected-focus-leading-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color (Hovered / Leading icon)\n$with-leading-icon-unselected-hover-leading-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-leading-icon.unselected.leading-icon.color (Enabled / Leading icon)\n$with-leading-icon-unselected-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color (Pressed (ripple) / Leading icon)\n$with-leading-icon-unselected-pressed-leading-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color (Disabled / Trailing icon)\n$with-trailing-icon-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color (Dragged / Trailing icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-trailing-icon.selected.…\" or \"md.comp.input-chip.with-trailing-icon.unselected.…\" tokens depending on component status.\n$with-trailing-icon-dragged-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.focus.trailing-icon.color (Focused / Trailing icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-trailing-icon.selected.…\" or \"md.comp.input-chip.with-trailing-icon.unselected.…\" tokens depending on component status.\n$with-trailing-icon-focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.hover.trailing-icon.color (Hovered / Trailing icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-trailing-icon.selected.…\" or \"md.comp.input-chip.with-trailing-icon.unselected.…\" tokens depending on component status.\n$with-trailing-icon-hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-trailing-icon.selected.…\" or \"md.comp.input-chip.with-trailing-icon.unselected.…\" tokens depending on component status.\n$with-trailing-icon-pressed-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color (Dragged / Trailing icon)\n$with-trailing-icon-selected-dragged-trailing-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color (Focused / Trailing icon)\n$with-trailing-icon-selected-focus-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color (Hovered / Trailing icon)\n$with-trailing-icon-selected-hover-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)\n$with-trailing-icon-selected-pressed-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color (Enabled / Trailing icon)\n$with-trailing-icon-selected-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.input-chip.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon)\n///\n/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent \"md.comp.input-chip.with-trailing-icon.selected.…\" or \"md.comp.input-chip.with-trailing-icon.unselected.…\" tokens depending on component status.\n$with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color (Dragged / Trailing icon)\n$with-trailing-icon-unselected-dragged-trailing-icon-color: md-sys-color.$primary;\n/// md.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color (Focused / Trailing icon)\n$with-trailing-icon-unselected-focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color (Hovered / Trailing icon)\n$with-trailing-icon-unselected-hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)\n$with-trailing-icon-unselected-pressed-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color (Enabled / Trailing icon)\n$with-trailing-icon-unselected-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.input-chip.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-linear-progress-indicator.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n\n/// md.comp.linear-progress-indicator.active-indicator.height ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$active-indicator-height: 4px;\n/// md.comp.linear-progress-indicator.track.height ([Deprecated] Enabled / [Deprecated] Track)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$track-height: 4px;\n/// md.comp.linear-progress-indicator.active-indicator.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$active-indicator-color: md-sys-color.$primary;\n/// md.comp.linear-progress-indicator.active-indicator.shape ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$active-indicator-shape: md-sys-shape.$corner-none;\n/// md.comp.linear-progress-indicator.four-color.active-indicator.four.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-four-color: md-sys-color.$tertiary-container;\n/// md.comp.linear-progress-indicator.four-color.active-indicator.one.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-one-color: md-sys-color.$primary;\n/// md.comp.linear-progress-indicator.four-color.active-indicator.three.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-three-color: md-sys-color.$tertiary;\n/// md.comp.linear-progress-indicator.four-color.active-indicator.two.color ([Deprecated] Enabled / [Deprecated] Active indicator)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$four-color-active-indicator-two-color: md-sys-color.$primary-container;\n/// md.comp.linear-progress-indicator.track.color ([Deprecated] Enabled / [Deprecated] Track)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$track-color: md-sys-color.$surface-container-highest;\n/// md.comp.linear-progress-indicator.track.shape ([Deprecated] Enabled / [Deprecated] Track)\n///\n/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use \"md.com.progress-indicator\" tokens instead.\n$track-shape: md-sys-shape.$corner-none;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-list-expand.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n\n/// md.comp.list.expand.collapsed.list-item.trailing-icon.container.color (Color)\n$collapsed-list-item-trailing-icon-container-color: md-sys-color.$surface;\n/// md.comp.list.expand.collapsed.list-item.trailing-icon.icon.color (Color)\n$collapsed-list-item-trailing-icon-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.expand.container.shape (Shape)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.list.expand.expanded.list-item.container.color (Color)\n$expanded-list-item-container-color: md-sys-color.$surface;\n/// md.comp.list.expand.expanded.list-item.segmented.container.color (Color)\n$expanded-list-item-segmented-container-color: md-sys-color.$surface;\n/// md.comp.list.expand.expanded.list-item.trailing-icon.container.color (Color)\n$expanded-list-item-trailing-icon-container-color: md-sys-color.$surface-container;\n/// md.comp.list.expand.expanded.list-item.trailing-icon.icon.color (Color)\n$expanded-list-item-trailing-icon-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.expand.trailing-icon.shape (Shape)\n$trailing-icon-shape: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-list-reorder.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n\n/// md.comp.list.reorder.list-item.container.color (Color)\n$list-item-container-color: md-sys-color.$tertiary-container;\n/// md.comp.list.reorder.list-item.drop-zone.color (Color)\n$list-item-drop-zone-color: md-sys-color.$surface-container-low;\n/// md.comp.list.reorder.list-item.label-text.color (Color)\n$list-item-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.list.reorder.list-item.leading-icon.color (Color)\n$list-item-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.list.reorder.list-item.overline.color (Color)\n$list-item-overline-color: md-sys-color.$on-tertiary-container;\n/// md.comp.list.reorder.list-item.shadow-color (Color)\n$list-item-shadow-color: md-sys-color.$shadow;\n/// md.comp.list.reorder.list-item.shape (Shape)\n$list-item-shape: md-sys-shape.$corner-large;\n/// md.comp.list.reorder.list-item.state-layer.color (Color)\n$list-item-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.list.reorder.list-item.state-layer.opacity (Color)\n$list-item-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.list.reorder.list-item.supporting-text.color (Color)\n$list-item-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.list.reorder.list-item.trailing-icon.color (Color)\n$list-item-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.list.reorder.list-item.trailing-supporting-text.color (Color)\n$list-item-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-list-reveal.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n\n/// md.comp.list.reveal.list-item.action.icon-button.container.color (Color / Swipe action)\n$list-item-action-icon-button-container-color: md-sys-color.$primary;\n/// md.comp.list.reveal.list-item.action.icon-button.focused.state-layer.color (Color / Swipe action)\n$list-item-action-icon-button-focused-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.list.reveal.list-item.action.icon-button.hovered.state-layer.color (Color / Swipe action)\n$list-item-action-icon-button-hovered-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.list.reveal.list-item.action.icon-button.icon.color (Color / Swipe action)\n$list-item-action-icon-button-icon-color: md-sys-color.$on-primary;\n/// md.comp.list.reveal.list-item.action.icon-button.pressed.state-layer.color (Color / Swipe action)\n$list-item-action-icon-button-pressed-state-layer-color: md-sys-color.$on-primary;\n/// md.comp.list.reveal.list-item.container.color (Color)\n$list-item-container-color: md-sys-color.$surface;\n/// md.comp.list.reveal.list-item.container.shape (Shape)\n$list-item-container-shape: md-sys-shape.$corner-large;\n/// md.comp.list.reveal.list-item.icon-button.action.container.shape (Shape)\n$list-item-icon-button-action-container-shape: md-sys-shape.$corner-large;\n/// md.comp.list.reveal.list-item.icon-button.container.color (Color / Revealed icon)\n$list-item-icon-button-container-color: md-sys-color.$secondary-container;\n/// md.comp.list.reveal.list-item.icon-button.container.shape (Shape)\n$list-item-icon-button-container-shape: md-sys-shape.$corner-full;\n/// md.comp.list.reveal.list-item.icon-button.focused.state-layer.color (Color / Revealed icon)\n$list-item-icon-button-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.reveal.list-item.icon-button.hovered.state-layer.color (Color / Revealed icon)\n$list-item-icon-button-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.reveal.list-item.icon-button.icon.color (Color / Revealed icon)\n$list-item-icon-button-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.reveal.list-item.icon-button.pressed.state-layer.color (Color / Revealed icon)\n$list-item-icon-button-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.reveal.list-item.segmented.container.shape (Shape)\n$list-item-segmented-container-shape: md-sys-shape.$corner-large;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-list.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.list.divider.bottom-space (Spacing)\n$divider-bottom-space: 0px;\n/// md.comp.list.divider.height (Color / Enabled)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement\n$divider-height: 1px;\n/// md.comp.list.divider.leading-space (Spacing)\n$divider-leading-space: 16px;\n/// md.comp.list.divider.top-space (Spacing)\n$divider-top-space: 0px;\n/// md.comp.list.divider.trailing-space (Spacing)\n$divider-trailing-space: 16px;\n/// md.comp.list.list-item.between-space (Spacing)\n$list-item-between-space: 12px;\n/// md.comp.list.list-item.bottom-space (Spacing)\n$list-item-bottom-space: 10px;\n/// md.comp.list.list-item.container.height (Color / Enabled)\n///\n/// @deprecated Removing single height value in favor of distinct height values for 1, 2, or 3 line list items.\n$list-item-container-height: 56px;\n/// md.comp.list.list-item.disabled.label-text.opacity (Color / Disabled)\n$list-item-disabled-label-text-opacity: 0.38;\n/// md.comp.list.list-item.disabled.leading-icon.opacity (Color / Disabled)\n$list-item-disabled-leading-icon-opacity: 0.38;\n/// md.comp.list.list-item.disabled.overline.opacity (Color / Disabled)\n$list-item-disabled-overline-opacity: 0.38;\n/// md.comp.list.list-item.disabled.state-layer.opacity (Color / Disabled)\n$list-item-disabled-state-layer-opacity: 0.1;\n/// md.comp.list.list-item.disabled.supporting-text.opacity (Color / Disabled)\n$list-item-disabled-supporting-text-opacity: 0.38;\n/// md.comp.list.list-item.disabled.trailing-icon.opacity (Color / Disabled)\n$list-item-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.list.list-item.large.leading-video.height (Size and typography)\n$list-item-large-leading-video-height: 64px;\n/// md.comp.list.list-item.large.leading-video.width (Size and typography)\n$list-item-large-leading-video-width: 114px;\n/// md.comp.list.list-item.leading-avatar.size (Size and typography)\n$list-item-leading-avatar-size: 40px;\n/// md.comp.list.list-item.leading-icon.expressive.size (Size and typography)\n$list-item-leading-icon-expressive-size: 20px;\n/// md.comp.list.list-item.leading-icon.size (Size and typography)\n$list-item-leading-icon-size: 24px;\n/// md.comp.list.list-item.leading-image.height (Size and typography)\n$list-item-leading-image-height: 56px;\n/// md.comp.list.list-item.leading-image.width (Size and typography)\n$list-item-leading-image-width: 56px;\n/// md.comp.list.list-item.leading-space (Spacing)\n$list-item-leading-space: 16px;\n/// md.comp.list.list-item.leading-video.width (Size and typography)\n$list-item-leading-video-width: 100px;\n/// md.comp.list.list-item.one-line.container.height (Size and typography)\n$list-item-one-line-container-height: 56px;\n/// md.comp.list.list-item.selected.disabled.container.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-container-opacity: 0.38;\n/// md.comp.list.list-item.selected.disabled.label-text.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-label-text-opacity: 0.38;\n/// md.comp.list.list-item.selected.disabled.leading-icon.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-leading-icon-opacity: 0.38;\n/// md.comp.list.list-item.selected.disabled.overline.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-overline-opacity: 0.38;\n/// md.comp.list.list-item.selected.disabled.state-layer.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-state-layer-opacity: 0.1;\n/// md.comp.list.list-item.selected.disabled.supporting-text.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-supporting-text-opacity: 0.38;\n/// md.comp.list.list-item.selected.disabled.trailing-icon.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.list.list-item.selected.disabled.trailing-supporting-text.opacity (Color / Disabled - Selected)\n$list-item-selected-disabled-trailing-supporting-text-opacity: 0.38;\n/// md.comp.list.list-item.small.leading-video.height (Size and typography)\n$list-item-small-leading-video-height: 56px;\n/// md.comp.list.list-item.small.leading-video.width (Size and typography)\n$list-item-small-leading-video-width: 100px;\n/// md.comp.list.list-item.three-line.container.height (Size and typography)\n$list-item-three-line-container-height: 88px;\n/// md.comp.list.list-item.top-space (Spacing)\n$list-item-top-space: 10px;\n/// md.comp.list.list-item.trailing-icon.expressive.size (Size and typography)\n$list-item-trailing-icon-expressive-size: 20px;\n/// md.comp.list.list-item.trailing-icon.size (Size and typography)\n$list-item-trailing-icon-size: 24px;\n/// md.comp.list.list-item.trailing-space (Spacing)\n$list-item-trailing-space: 16px;\n/// md.comp.list.list-item.two-line.container.height (Size and typography)\n$list-item-two-line-container-height: 72px;\n/// md.comp.list.md.comp.list.list-item.one-line.container.height (Color / Enabled)\n///\n/// @deprecated Typo in token name. Please use `md.comp.list.list-item.one-line.container.height `.\n$md-comp-list-list-item-one-line-container-height: 56px;\n/// md.comp.list.md.comp.list.list-item.three-line.container.height (Color / Enabled)\n///\n/// @deprecated Typo in token name. Please use `md.comp.list.list-item.three-line.container.height`.\n$md-comp-list-list-item-three-line-container-height: 88px;\n/// md.comp.list.md.comp.list.list-item.two-line.container.height (Color / Enabled)\n///\n/// @deprecated Typo in token name. Please use `md.comp.list.md.comp.list.list-item.two-line.container.height`.\n$md-comp-list-list-item-two-line-container-height: 72px;\n/// md.comp.list.segmented.gap (Spacing)\n$segmented-gap: 2px;\n/// md.comp.list.container.shape (Shape)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.list.divider.color (Color / Enabled)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement\n$divider-color: md-sys-color.$outline;\n/// md.comp.list.focus.indicator.color (Color / Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.list.focus.indicator.outline.offset (Color / Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;\n/// md.comp.list.focus.indicator.thickness (Color / Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.list.list-item.container.color (Color / Enabled)\n$list-item-container-color: md-sys-color.$surface;\n/// md.comp.list.list-item.container.elevation (Color / Enabled)\n$list-item-container-elevation: md-sys-elevation.$level0;\n/// md.comp.list.list-item.container.expressive.shape (Shape)\n$list-item-container-expressive-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.list.list-item.container.shape (Shape)\n$list-item-container-shape: md-sys-shape.$corner-none;\n/// md.comp.list.list-item.disabled.container.expressive.shape (Shape)\n$list-item-disabled-container-expressive-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.list.list-item.disabled.label-text.color (Color / Disabled)\n$list-item-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.disabled.leading-icon.color (Color / Disabled)\n$list-item-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.disabled.overline.color (Color / Disabled)\n$list-item-disabled-overline-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.disabled.state-layer.color (Color / Disabled)\n$list-item-disabled-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.disabled.supporting-text.color (Color / Disabled)\n$list-item-disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.disabled.trailing-icon.color (Color / Disabled)\n$list-item-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.dragged.container.elevation (Color / Dragged (baseline only))\n$list-item-dragged-container-elevation: md-sys-elevation.$level4;\n/// md.comp.list.list-item.dragged.container.expressive.shape (Shape)\n$list-item-dragged-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.dragged.label-text.color (Color / Dragged (baseline only))\n$list-item-dragged-label-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.dragged.leading-icon.icon.color (Color / Dragged (baseline only))\n$list-item-dragged-leading-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.dragged.state-layer.color (Color / Dragged (baseline only))\n$list-item-dragged-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.dragged.state-layer.opacity (Color / Dragged (baseline only))\n$list-item-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.list.list-item.dragged.trailing-icon.icon.color (Color / Dragged (baseline only))\n$list-item-dragged-trailing-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.focus.label-text.color (Color / Focused)\n$list-item-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.focus.leading-icon.icon.color (Color / Focused)\n$list-item-focus-leading-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.focus.state-layer.color (Color / Focused)\n$list-item-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.focus.state-layer.opacity (Color / Focused)\n$list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.list.list-item.focus.trailing-icon.icon.color (Color / Focused)\n$list-item-focus-trailing-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.focused.container.expressive.shape (Shape)\n$list-item-focused-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.hover.label-text.color (Color / Hovered)\n$list-item-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.hover.leading-icon.icon.color (Color / Hovered)\n$list-item-hover-leading-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.hover.state-layer.color (Color / Hovered)\n$list-item-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.hover.state-layer.opacity (Color / Hovered)\n$list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.list.list-item.hover.trailing-icon.icon.color (Color / Hovered)\n$list-item-hover-trailing-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.hovered.container.expressive.shape (Shape)\n$list-item-hovered-container-expressive-shape: md-sys-shape.$corner-medium;\n/// md.comp.list.list-item.label-text.color (Color / Enabled)\n$list-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.label-text.font (Size and typography)\n$list-item-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.list.list-item.label-text.line-height (Size and typography)\n$list-item-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.list.list-item.label-text.size (Size and typography)\n$list-item-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.list.list-item.label-text.tracking (Size and typography)\n$list-item-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.list.list-item.label-text.weight (Size and typography)\n$list-item-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.list.list-item.leading-avatar-label.color (Color / Enabled)\n$list-item-leading-avatar-label-color: md-sys-color.$on-primary-container;\n/// md.comp.list.list-item.leading-avatar-label.font (Size and typography)\n$list-item-leading-avatar-label-font: md-sys-typescale.$title-medium-font;\n/// md.comp.list.list-item.leading-avatar-label.line-height (Size and typography)\n$list-item-leading-avatar-label-line-height: md-sys-typescale.$title-medium-line-height;\n/// md.comp.list.list-item.leading-avatar-label.size (Size and typography)\n$list-item-leading-avatar-label-size: md-sys-typescale.$title-medium-size;\n/// md.comp.list.list-item.leading-avatar-label.tracking (Size and typography)\n$list-item-leading-avatar-label-tracking: md-sys-typescale.$title-medium-tracking;\n/// md.comp.list.list-item.leading-avatar-label.weight (Size and typography)\n$list-item-leading-avatar-label-weight: md-sys-typescale.$title-medium-weight;\n/// md.comp.list.list-item.leading-avatar.color (Color / Enabled)\n$list-item-leading-avatar-color: md-sys-color.$primary-container;\n/// md.comp.list.list-item.leading-avatar.shape (Shape)\n$list-item-leading-avatar-shape: md-sys-shape.$corner-full;\n/// md.comp.list.list-item.leading-icon.color (Color / Enabled)\n$list-item-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.leading-image.expressive.shape (Shape)\n$list-item-leading-image-expressive-shape: md-sys-shape.$corner-small;\n/// md.comp.list.list-item.leading-image.shape (Shape)\n$list-item-leading-image-shape: md-sys-shape.$corner-none;\n/// md.comp.list.list-item.leading-video.shape (Shape)\n$list-item-leading-video-shape: md-sys-shape.$corner-small;\n/// md.comp.list.list-item.overline.color (Color / Enabled)\n$list-item-overline-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.overline.font (Size and typography)\n$list-item-overline-font: md-sys-typescale.$label-small-font;\n/// md.comp.list.list-item.overline.line-height (Size and typography)\n$list-item-overline-line-height: md-sys-typescale.$label-small-line-height;\n/// md.comp.list.list-item.overline.size (Size and typography)\n$list-item-overline-size: md-sys-typescale.$label-small-size;\n/// md.comp.list.list-item.overline.tracking (Size and typography)\n$list-item-overline-tracking: md-sys-typescale.$label-small-tracking;\n/// md.comp.list.list-item.overline.weight (Size and typography)\n$list-item-overline-weight: md-sys-typescale.$label-small-weight;\n/// md.comp.list.list-item.pressed.container.expressive.shape (Shape)\n$list-item-pressed-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.pressed.label-text.color (Color / Pressed (ripple))\n$list-item-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.pressed.leading-icon.icon.color (Color / Pressed (ripple))\n$list-item-pressed-leading-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.pressed.state-layer.color (Color / Pressed (ripple))\n$list-item-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.pressed.state-layer.opacity (Color / Pressed (ripple))\n$list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.list.list-item.pressed.trailing-icon.icon.color (Color / Pressed (ripple))\n$list-item-pressed-trailing-icon-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.segmented.container.color (Color / Enabled)\n$list-item-segmented-container-color: md-sys-color.$surface;\n/// md.comp.list.list-item.selected.container.color (Color / Enabled - Selected)\n$list-item-selected-container-color: md-sys-color.$secondary-container;\n/// md.comp.list.list-item.selected.container.expressive.shape (Shape)\n$list-item-selected-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.selected.container.shape (Shape)\n$list-item-selected-container-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.selected.disabled.container.color (Color / Disabled - Selected)\n$list-item-selected-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.disabled.container.expressive.shape (Shape)\n$list-item-selected-disabled-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.selected.disabled.label-text.color (Color / Disabled - Selected)\n$list-item-selected-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.disabled.leading-icon.color (Color / Disabled - Selected)\n$list-item-selected-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.disabled.overline.color (Color / Disabled - Selected)\n$list-item-selected-disabled-overline-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.disabled.state-layer.color (Color / Disabled - Selected)\n$list-item-selected-disabled-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.disabled.supporting-text.color (Color / Disabled - Selected)\n$list-item-selected-disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.disabled.trailing-icon.color (Color / Disabled - Selected)\n$list-item-selected-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.disabled.trailing-supporting-text.color (Color / Disabled - Selected)\n$list-item-selected-disabled-trailing-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.dragged.container.expressive.shape (Shape)\n$list-item-selected-dragged-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.selected.dragged.label-text.color (Color / Dragged (baseline only))\n$list-item-selected-dragged-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.dragged.leading-icon.color (Color / Dragged (baseline only))\n$list-item-selected-dragged-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.dragged.state-layer.color (Color / Dragged (baseline only))\n$list-item-selected-dragged-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.dragged.state-layer.opacity (Color / Dragged (baseline only))\n$list-item-selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.list.list-item.selected.dragged.trailing-icon.color (Color / Dragged (baseline only))\n$list-item-selected-dragged-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.focus.label-text.color (Color / Focused - Selected)\n$list-item-selected-focus-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.focus.leading-icon.color (Color / Focused - Selected)\n$list-item-selected-focus-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.focus.state-layer.color (Color / Focused - Selected)\n$list-item-selected-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.focus.state-layer.opacity (Color / Focused - Selected)\n$list-item-selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.list.list-item.selected.focus.trailing-icon.color (Color / Focused - Selected)\n$list-item-selected-focus-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.focused.container.expressive.shape (Shape)\n$list-item-selected-focused-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.selected.hover.label-text.color (Color / Hovered - Selected)\n$list-item-selected-hover-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.hover.leading-icon.color (Color / Hovered - Selected)\n$list-item-selected-hover-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.hover.state-layer.color (Color / Hovered - Selected)\n$list-item-selected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.hover.state-layer.opacity (Color / Hovered - Selected)\n$list-item-selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.list.list-item.selected.hover.trailing-icon.color (Color / Hovered - Selected)\n$list-item-selected-hover-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.hovered.container.expressive.shape (Shape)\n$list-item-selected-hovered-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.selected.label-text.color (Color / Enabled - Selected)\n$list-item-selected-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.leading-icon.color (Color / Enabled - Selected)\n$list-item-selected-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.overline.color (Color / Enabled - Selected)\n$list-item-selected-overline-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.pressed.container.expressive.shape (Shape)\n$list-item-selected-pressed-container-expressive-shape: md-sys-shape.$corner-large;\n/// md.comp.list.list-item.selected.pressed.label-text.color (Color / Pressed - Selected)\n$list-item-selected-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.pressed.leading-icon.color (Color / Pressed - Selected)\n$list-item-selected-pressed-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.pressed.state-layer.color (Color / Pressed - Selected)\n$list-item-selected-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.pressed.state-layer.opacity (Color / Pressed - Selected)\n$list-item-selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.list.list-item.selected.pressed.trailing-icon.color (Color / Pressed - Selected)\n$list-item-selected-pressed-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.selected.supporting-text.color (Color / Enabled - Selected)\n$list-item-selected-supporting-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.trailing-icon.color (Color / Enabled - Selected)\n$list-item-selected-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.selected.trailing-supporting-text.color (Color / Enabled - Selected)\n$list-item-selected-trailing-supporting-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.list.list-item.supporting-text.color (Color / Enabled)\n$list-item-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.supporting-text.font (Size and typography)\n$list-item-supporting-text-font: md-sys-typescale.$body-medium-font;\n/// md.comp.list.list-item.supporting-text.line-height (Size and typography)\n$list-item-supporting-text-line-height: md-sys-typescale.$body-medium-line-height;\n/// md.comp.list.list-item.supporting-text.size (Size and typography)\n$list-item-supporting-text-size: md-sys-typescale.$body-medium-size;\n/// md.comp.list.list-item.supporting-text.tracking (Size and typography)\n$list-item-supporting-text-tracking: md-sys-typescale.$body-medium-tracking;\n/// md.comp.list.list-item.supporting-text.weight (Size and typography)\n$list-item-supporting-text-weight: md-sys-typescale.$body-medium-weight;\n/// md.comp.list.list-item.trailing-icon.color (Color / Enabled)\n$list-item-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.trailing-supporting-text.color (Color / Enabled)\n$list-item-trailing-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.list.list-item.trailing-supporting-text.font (Size and typography)\n$list-item-trailing-supporting-text-font: md-sys-typescale.$label-small-font;\n/// md.comp.list.list-item.trailing-supporting-text.line-height (Size and typography)\n$list-item-trailing-supporting-text-line-height: md-sys-typescale.$label-small-line-height;\n/// md.comp.list.list-item.trailing-supporting-text.size (Size and typography)\n$list-item-trailing-supporting-text-size: md-sys-typescale.$label-small-size;\n/// md.comp.list.list-item.trailing-supporting-text.tracking (Size and typography)\n$list-item-trailing-supporting-text-tracking: md-sys-typescale.$label-small-tracking;\n/// md.comp.list.list-item.trailing-supporting-text.weight (Size and typography)\n$list-item-trailing-supporting-text-weight: md-sys-typescale.$label-small-weight;\n/// md.comp.list.list-item.unselected.trailing-icon.color (Color / Enabled)\n$list-item-unselected-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.list.list-item.label-text.type (Size and typography)\n@mixin list-item-label-text-type {\n  font-family: $list-item-label-text-font;\n  font-size: $list-item-label-text-size;\n  font-weight: $list-item-label-text-weight;\n  letter-spacing: $list-item-label-text-tracking;\n  line-height: $list-item-label-text-line-height;\n}\n/// md.comp.list.list-item.leading-avatar-label.type (Size and typography)\n@mixin list-item-leading-avatar-label-type {\n  font-family: $list-item-leading-avatar-label-font;\n  font-size: $list-item-leading-avatar-label-size;\n  font-weight: $list-item-leading-avatar-label-weight;\n  letter-spacing: $list-item-leading-avatar-label-tracking;\n  line-height: $list-item-leading-avatar-label-line-height;\n}\n/// md.comp.list.list-item.overline.type (Size and typography)\n@mixin list-item-overline-type {\n  font-family: $list-item-overline-font;\n  font-size: $list-item-overline-size;\n  font-weight: $list-item-overline-weight;\n  letter-spacing: $list-item-overline-tracking;\n  line-height: $list-item-overline-line-height;\n}\n/// md.comp.list.list-item.supporting-text.type (Size and typography)\n@mixin list-item-supporting-text-type {\n  font-family: $list-item-supporting-text-font;\n  font-size: $list-item-supporting-text-size;\n  font-weight: $list-item-supporting-text-weight;\n  letter-spacing: $list-item-supporting-text-tracking;\n  line-height: $list-item-supporting-text-line-height;\n}\n/// md.comp.list.list-item.trailing-supporting-text.type (Size and typography)\n@mixin list-item-trailing-supporting-text-type {\n  font-family: $list-item-trailing-supporting-text-font;\n  font-size: $list-item-trailing-supporting-text-size;\n  font-weight: $list-item-trailing-supporting-text-weight;\n  letter-spacing: $list-item-trailing-supporting-text-tracking;\n  line-height: $list-item-trailing-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-loading-indicator.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n\n/// md.comp.loading-indicator.active-indicator.size (Size)\n$active-indicator-size: 38px;\n/// md.comp.loading-indicator.container.height (Size)\n$container-height: 48px;\n/// md.comp.loading-indicator.container.width (Size)\n$container-width: 48px;\n/// md.comp.loading-indicator.active-indicator.color (Color)\n$active-indicator-color: md-sys-color.$primary;\n/// md.comp.loading-indicator.contained.active-indicator.color (Color)\n$contained-active-indicator-color: md-sys-color.$on-primary-container;\n/// md.comp.loading-indicator.contained.container.color (Color)\n$contained-container-color: md-sys-color.$primary-container;\n/// md.comp.loading-indicator.container.color (Color)\n///\n/// @deprecated Deprecated in favor of a distinct variant which uses a different color mapping with, and without container.\n$container-color: md-sys-color.$secondary-container;\n/// md.comp.loading-indicator.container.shape (Shape)\n$container-shape: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-menu.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.menu.cascading-menu-indicator.icon.size (Enabled / Icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$cascading-menu-indicator-icon-size: 24px;\n/// md.comp.menu.divider.height (Enabled / Divider)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement\n$divider-height: 1px;\n/// md.comp.menu.list-item.container.height (Enabled / Container)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-container-height: 48px;\n/// md.comp.menu.list-item.disabled.label-text.opacity (Disabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-disabled-label-text-opacity: 0.38;\n/// md.comp.menu.list-item.with-leading-icon.disabled.leading-icon.opacity (Disabled / Leading icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-leading-icon-disabled-leading-icon-opacity: 0.38;\n/// md.comp.menu.list-item.with-leading-icon.leading-icon.size (Enabled / Leading icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-leading-icon-leading-icon-size: 24px;\n/// md.comp.menu.list-item.with-trailing-icon.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-trailing-icon-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.menu.list-item.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-trailing-icon-trailing-icon-size: 24px;\n/// md.comp.menu.cascading-menu-indicator.icon.color (Enabled / Icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.container.color (Enabled)\n$container-color: md-sys-color.$surface-container;\n/// md.comp.menu.container.elevation (Enabled)\n$container-elevation: md-sys-elevation.$level2;\n/// md.comp.menu.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.menu.container.shape (Enabled)\n$container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.menu.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.menu.divider.color (Enabled / Divider)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement\n$divider-color: md-sys-color.$surface-variant;\n/// md.comp.menu.focus.indicator.color (Focus indicator)\n///\n/// @deprecated Updating to include menu item\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.menu.focus.indicator.outline.offset (Focus indicator)\n///\n/// @deprecated Updating to include menu item\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;\n/// md.comp.menu.focus.indicator.thickness (Focus indicator)\n///\n/// @deprecated Updating to include menu item\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.menu.list-item.disabled.label-text.color (Disabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.focus.label-text.color (Focus / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.focus.state-layer.color (Focus / State layer)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.focus.state-layer.opacity (Focus / State layer)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.menu.list-item.hover.label-text.color (Hover / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.hover.state-layer.color (Hover / State layer)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.hover.state-layer.opacity (Hover / State layer)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.menu.list-item.label-text.color (Enabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.label-text.font (Enabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.menu.list-item.label-text.line-height (Enabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.menu.list-item.label-text.size (Enabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.menu.list-item.label-text.tracking (Enabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.menu.list-item.label-text.weight (Enabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.menu.list-item.pressed.label-text.color (Pressed / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.pressed.state-layer.color (Pressed / State layer)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.pressed.state-layer.opacity (Pressed / State layer)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.menu.list-item.selected.container.color (Enabled / Container)\n///\n/// @deprecated Deprecated to remove nested tokens\n$list-item-selected-container-color: md-sys-color.$secondary-container;\n/// md.comp.menu.list-item.selected.label-text.color (Enabled / Container)\n///\n/// @deprecated Deprecated to remove nested tokens\n$list-item-selected-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.menu.list-item.selected.with-leading-icon.leading-icon.color (Enabled / Container)\n///\n/// @deprecated Deprecated to remove nested tokens\n$list-item-selected-with-leading-icon-leading-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.menu.list-item.selected.with-leading-icon.trailing-icon.color (Enabled / Container)\n///\n/// @deprecated Deprecated to remove nested tokens\n$list-item-selected-with-leading-icon-trailing-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.menu.list-item.with-leading-icon.disabled.leading-icon.color (Disabled / Leading icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.with-leading-icon.focus.icon.color (Focus / Leading icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-with-leading-icon-focus-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.with-leading-icon.hover.icon.color (Hover / Leading icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-leading-icon-hover-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.with-leading-icon.leading-icon.color (Enabled / Leading icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.with-leading-icon.pressed.icon.color (Pressed / Leading icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-with-leading-icon-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.with-trailing-icon.disabled.trailing-icon.color (Disabled / Trailing icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-trailing-icon-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.menu.list-item.with-trailing-icon.focus.icon.color (Focus / Trailing icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-with-trailing-icon-focus-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.with-trailing-icon.hover.icon.color (Hover / Trailing icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-trailing-icon-hover-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.with-trailing-icon.pressed.icon.color (Pressed / Trailing icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead\n$list-item-with-trailing-icon-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n$list-item-with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menu.list-item.label-text.type (Enabled / Label text)\n///\n/// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead.\n@mixin list-item-label-text-type {\n  font-family: $list-item-label-text-font;\n  font-size: $list-item-label-text-size;\n  font-weight: $list-item-label-text-weight;\n  letter-spacing: $list-item-label-text-tracking;\n  line-height: $list-item-label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-menus-standard.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.menus.standard.menu-item.disabled.label-text.opacity (Disabled)\n$menu-item-disabled-label-text-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.disabled.leading-icon.opacity (Disabled)\n$menu-item-disabled-leading-icon-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.disabled.supporting-text.opacity (Disabled)\n$menu-item-disabled-supporting-text-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.disabled.trailing-icon.opacity (Disabled)\n$menu-item-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.disabled.trailing-supporting-text.opacity (Disabled)\n$menu-item-disabled-trailing-supporting-text-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.selected.disabled.container.opacity (Disabled, Selected)\n$menu-item-selected-disabled-container-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.selected.disabled.label-text.opacity (Disabled, Selected)\n$menu-item-selected-disabled-label-text-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.selected.disabled.leading-icon.opacity (Disabled, Selected)\n$menu-item-selected-disabled-leading-icon-opacity: 0.38;\n/// md.comp.menus.standard.menu-item.selected.disabled.trailing-icon.opacity (Disabled, Selected)\n$menu-item-selected-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.menus.standard.container.color (Enabled)\n$container-color: md-sys-color.$surface-container-low;\n/// md.comp.menus.standard.container.shadow-color (Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.menus.standard.disabled.icon-button.icon.color (Disabled)\n$disabled-icon-button-icon-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.icon-button.container.color (Enabled)\n$icon-button-container-color: md-sys-color.$surface-container-low;\n/// md.comp.menus.standard.icon-button.disabled.icon.color (Disabled, Selected)\n$icon-button-disabled-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.icon-button.focused.state-layer.color (Focused)\n$icon-button-focused-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.icon-button.hovered.state-layer.color (Hovered)\n$icon-button-hovered-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.icon-button.icon.color (Enabled)\n$icon-button-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.icon-button.pressed.state-layer.color (Pressed)\n$icon-button-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.icon-button.selected.container.color (Enabled, Selected)\n$icon-button-selected-container-color: md-sys-color.$tertiary-container;\n/// md.comp.menus.standard.icon-button.selected.focused.state-layer.color (Focused, Selected)\n$icon-button-selected-focused-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.icon-button.selected.hovered.state-layer.color (Hovered, Selected)\n$icon-button-selected-hovered-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.icon-button.selected.icon.color (Enabled, Selected)\n$icon-button-selected-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.icon-button.selected.pressed.state-layer.color (Pressed, Selected)\n$icon-button-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.active.state-layer.color (Enabled, Active)\n$menu-item-active-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.active.state-layer.opacity (Enabled, Active)\n$menu-item-active-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.menus.standard.menu-item.container.color (Enabled)\n$menu-item-container-color: md-sys-color.$surface-container-low;\n/// md.comp.menus.standard.menu-item.disabled.label-text.color (Disabled)\n$menu-item-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.disabled.leading-icon.color (Disabled)\n$menu-item-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.disabled.supporting-text.color (Disabled)\n$menu-item-disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.disabled.trailing-icon.color (Disabled)\n$menu-item-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.disabled.trailing-supporting-text.color (Disabled)\n$menu-item-disabled-trailing-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.focused.label-text.color (Focused)\n$menu-item-focused-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.focused.leading-icon.color (Focused)\n$menu-item-focused-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.focused.state-layer.color (Focused)\n$menu-item-focused-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.focused.state-layer.opacity (Focused)\n$menu-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.menus.standard.menu-item.focused.trailing-icon.color (Focused)\n$menu-item-focused-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.hovered.label-text.color (Hovered)\n$menu-item-hovered-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.hovered.leading-icon.color (Hovered)\n$menu-item-hovered-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.hovered.state-layer.color (Hovered)\n$menu-item-hovered-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.hovered.state-layer.opacity (Hovered)\n$menu-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.menus.standard.menu-item.hovered.trailing-icon.color (Hovered)\n$menu-item-hovered-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.label-text.color (Enabled)\n$menu-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.leading-icon.color (Enabled)\n$menu-item-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.pressed.label-text.color (Pressed)\n$menu-item-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.pressed.leading-icon.color (Pressed)\n$menu-item-pressed-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.pressed.state-layer.color (Pressed)\n$menu-item-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.menus.standard.menu-item.pressed.state-layer.opacity (Pressed)\n$menu-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.menus.standard.menu-item.pressed.trailing-icon.color (Pressed)\n$menu-item-pressed-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.selected.container.color (Enabled, Selected)\n$menu-item-selected-container-color: md-sys-color.$tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.disabled.container.color (Disabled, Selected)\n$menu-item-selected-disabled-container-color: md-sys-color.$tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.disabled.label-text.color (Disabled, Selected)\n$menu-item-selected-disabled-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.disabled.leading-icon.color (Disabled, Selected)\n$menu-item-selected-disabled-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.disabled.trailing-icon.color (Disabled, Selected)\n$menu-item-selected-disabled-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.disabled.trailing-supporting-text.color (Disabled, Selected)\n$menu-item-selected-disabled-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.focused.label-text.color (Focused, Selected)\n$menu-item-selected-focused-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.focused.leading-icon.color (Focused, Selected)\n$menu-item-selected-focused-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.focused.state-layer.color (Focused, Selected)\n$menu-item-selected-focused-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.focused.state-layer.opacity (Focused, Selected)\n$menu-item-selected-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.menus.standard.menu-item.selected.focused.supporting-text.color (Focused, Selected)\n$menu-item-selected-focused-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.focused.trailing-icon.color (Focused, Selected)\n$menu-item-selected-focused-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.focused.trailing-supporting-text.color (Focused, Selected)\n$menu-item-selected-focused-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.hovered.label-text.color (Hovered, Selected)\n$menu-item-selected-hovered-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.hovered.leading-icon.color (Hovered, Selected)\n$menu-item-selected-hovered-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.hovered.state-layer.color (Hovered, Selected)\n$menu-item-selected-hovered-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.hovered.state-layer.opacity (Hovered, Selected)\n$menu-item-selected-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.menus.standard.menu-item.selected.hovered.supporting-text.color (Hovered, Selected)\n$menu-item-selected-hovered-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.hovered.trailing-icon.color (Hovered, Selected)\n$menu-item-selected-hovered-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.hovered.trailing-supporting-text.color (Hovered, Selected)\n$menu-item-selected-hovered-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.label-text.color (Enabled, Selected)\n$menu-item-selected-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.leading-icon.color (Enabled, Selected)\n$menu-item-selected-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.pressed.label-text.color (Pressed, Selected)\n$menu-item-selected-pressed-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.pressed.leading-icon.color (Pressed, Selected)\n$menu-item-selected-pressed-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.pressed.state-layer.color (Pressed, Selected)\n$menu-item-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.pressed.state-layer.opacity (Pressed, Selected)\n$menu-item-selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.menus.standard.menu-item.selected.pressed.supporting-text.color (Pressed, Selected)\n$menu-item-selected-pressed-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.pressed.trailing-icon.color (Pressed, Selected)\n$menu-item-selected-pressed-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.pressed.trailing-supporting-text.color (Pressed, Selected)\n$menu-item-selected-pressed-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.supporting-text.color (Enabled, Selected)\n$menu-item-selected-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.trailing-icon.color (Enabled, Selected)\n$menu-item-selected-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.selected.trailing-supporting-text.color (Enabled, Selected)\n$menu-item-selected-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.standard.menu-item.supporting-text.color (Enabled)\n$menu-item-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.trailing-icon.color (Enabled)\n$menu-item-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.menu-item.trailing-supporting-text.color (Enabled)\n$menu-item-trailing-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.menus.standard.section-label-text.color (Enabled)\n$section-label-text-color: md-sys-color.$on-surface-variant;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-menus-vibrant.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.menus.vibrant.menu-item.disabled.label-text.opacity (Disabled)\n$menu-item-disabled-label-text-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.disabled.leading-icon.opacity (Disabled)\n$menu-item-disabled-leading-icon-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.disabled.supporting-text.opacity (Disabled)\n$menu-item-disabled-supporting-text-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.disabled.trailing-icon.opacity (Disabled)\n$menu-item-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.disabled.trailing-supporting-text.opacity (Disabled)\n$menu-item-disabled-trailing-supporting-text-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.selected.disabled.label-text.opacity (Disabled, Selected)\n$menu-item-selected-disabled-label-text-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.selected.disabled.leading-icon.opacity (Disabled, Selected)\n$menu-item-selected-disabled-leading-icon-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.selected.disabled.supporting-text.opacity (Disabled, Selected)\n$menu-item-selected-disabled-supporting-text-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.selected.disabled.trailing-icon.opacity (Disabled, Selected)\n$menu-item-selected-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.menus.vibrant.menu-item.selected.disabled.trailing-supporting-text.opacity (Disabled, Selected)\n$menu-item-selected-disabled-trailing-supporting-text-opacity: 0.38;\n/// md.comp.menus.vibrant.container.color (Enabled)\n$container-color: md-sys-color.$tertiary-container;\n/// md.comp.menus.vibrant.icon-button.container.color (Enabled)\n$icon-button-container-color: md-sys-color.$tertiary-container;\n/// md.comp.menus.vibrant.icon-button.disabled.icon.color (Disabled)\n$icon-button-disabled-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.icon-button.focused.state-layer.color (Focused)\n$icon-button-focused-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.icon-button.hovered.state-layer.color (Hovered)\n$icon-button-hovered-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.icon-button.icon.color (Enabled)\n$icon-button-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.icon-button.pressed.state-layer.color (Pressed)\n$icon-button-pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.icon-button.selected.container.color (Enabled, Selected)\n$icon-button-selected-container-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.icon-button.selected.disabled.icon.color (Disabled, Selected)\n$icon-button-selected-disabled-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.icon-button.selected.icon.color (Enabled, Selected)\n$icon-button-selected-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.active.state-layer.color (Enabled, Active)\n$menu-item-active-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.active.state-layer.opacity (Enabled, Active)\n$menu-item-active-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.menus.vibrant.menu-item.color (Enabled)\n$menu-item-color: md-sys-color.$tertiary-container;\n/// md.comp.menus.vibrant.menu-item.disabled.label-text.color (Disabled)\n$menu-item-disabled-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.disabled.leading-icon.color (Disabled)\n$menu-item-disabled-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.disabled.supporting-text.color (Disabled)\n$menu-item-disabled-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.disabled.trailing-icon.color (Disabled)\n$menu-item-disabled-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.disabled.trailing-supporting-text.color (Disabled)\n$menu-item-disabled-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.focused.label-text.color (Focused)\n$menu-item-focused-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.focused.leading-icon.color (Focused)\n$menu-item-focused-leading-icon-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.menu-item.focused.state-layer.color (Focused)\n$menu-item-focused-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.focused.state-layer.opacity (Focused)\n$menu-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.menus.vibrant.menu-item.focused.supporting-text.color (Focused)\n$menu-item-focused-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.focused.trailing-icon.color (Focused)\n$menu-item-focused-trailing-icon-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.menu-item.focused.trailing-supporting-text.color (Focused)\n$menu-item-focused-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.hovered.label-text.color (Hovered)\n$menu-item-hovered-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.hovered.leading-icon.color (Hovered)\n$menu-item-hovered-leading-icon-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.menu-item.hovered.state-layer.color (Hovered)\n$menu-item-hovered-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.hovered.state-layer.opacity (Hovered)\n$menu-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.menus.vibrant.menu-item.hovered.supporting-text.color (Hovered)\n$menu-item-hovered-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.hovered.trailing-icon.color (Hovered)\n$menu-item-hovered-trailing-icon-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.menu-item.hovered.trailing-supporting-text.color (Hovered)\n$menu-item-hovered-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.label-text.color (Enabled)\n$menu-item-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.leading-icon.color (Enabled)\n$menu-item-leading-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.pressed.label-text.color (Pressed)\n$menu-item-pressed-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.pressed.leading-icon.color (Pressed)\n$menu-item-pressed-leading-icon-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.menu-item.pressed.state-layer.color (Pressed)\n$menu-item-pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.pressed.state-layer.opacity (Pressed)\n$menu-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.menus.vibrant.menu-item.pressed.supporting-text.color (Pressed)\n$menu-item-pressed-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.pressed.trailing-icon.color (Pressed)\n$menu-item-pressed-trailing-icon-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.menu-item.pressed.trailing-supporting-text.color (Pressed)\n$menu-item-pressed-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.selected.container.color (Enabled, Selected)\n$menu-item-selected-container-color: md-sys-color.$tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.focused.label-text.color (Focused, Selected)\n$menu-item-selected-focused-label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.focused.state-layer.color (Focused, Selected)\n$menu-item-selected-focused-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.focused.state-layer.opacity (Focused, Selected)\n$menu-item-selected-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.menus.vibrant.menu-item.selected.hovered.label-text.color (Hovered, Selected)\n$menu-item-selected-hovered-label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.hovered.state-layer.color (Hovered, Selected)\n$menu-item-selected-hovered-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.hovered.state-layer.opacity (Hovered, Selected)\n$menu-item-selected-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.menus.vibrant.menu-item.selected.label-text.color (Enabled, Selected)\n$menu-item-selected-label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.leading-icon.color (Enabled, Selected)\n$menu-item-selected-leading-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.pressed.label-text.color (Pressed, Selected)\n$menu-item-selected-pressed-label-text-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.pressed.state-layer.color (Pressed, Selected)\n$menu-item-selected-pressed-state-layer-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.pressed.state-layer.opacity (Pressed, Selected)\n$menu-item-selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.menus.vibrant.menu-item.selected.supporting-text.color (Enabled, Selected)\n$menu-item-selected-supporting-text-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.trailing-icon.color (Enabled, Selected)\n$menu-item-selected-trailing-icon-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.selected.trailing-supporting-text.color (Enabled, Selected)\n$menu-item-selected-trailing-supporting-text-color: md-sys-color.$on-tertiary;\n/// md.comp.menus.vibrant.menu-item.supporting-text.color (Enabled)\n$menu-item-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.trailing-icon.color (Enabled)\n$menu-item-trailing-icon-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.menu-item.trailing-supporting-text.color (Enabled)\n$menu-item-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.menus.vibrant.section-label-text.color (Enabled)\n$section-label-text-color: md-sys-color.$on-tertiary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-menus.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.menus.gap (Layout / Default)\n$gap: 2px;\n/// md.comp.menus.group.padding (Layout / Default)\n$group-padding: 2px;\n/// md.comp.menus.horizontal.container.bottom-space (Layout / Horizontal)\n$horizontal-container-bottom-space: 8px;\n/// md.comp.menus.horizontal.container.top-space (Layout / Horizontal)\n$horizontal-container-top-space: 8px;\n/// md.comp.menus.horizontal.icon-only.gap (Layout / Horizontal icon-only)\n$horizontal-icon-only-gap: 4px;\n/// md.comp.menus.horizontal.icon-only.menu-item.bottom-space (Layout / Horizontal icon-only)\n$horizontal-icon-only-menu-item-bottom-space: 16px;\n/// md.comp.menus.horizontal.icon-only.menu-item.leading-space (Layout / Horizontal icon-only)\n$horizontal-icon-only-menu-item-leading-space: 16px;\n/// md.comp.menus.horizontal.icon-only.menu-item.top-space (Layout / Horizontal icon-only)\n$horizontal-icon-only-menu-item-top-space: 16px;\n/// md.comp.menus.horizontal.icon-only.menu-item.trailing-space (Layout / Horizontal icon-only)\n$horizontal-icon-only-menu-item-trailing-space: 16px;\n/// md.comp.menus.horizontal.menu-item.between-space (Layout / Horizontal)\n$horizontal-menu-item-between-space: 12px;\n/// md.comp.menus.horizontal.menu-item.bottom-space (Layout / Horizontal)\n$horizontal-menu-item-bottom-space: 6px;\n/// md.comp.menus.horizontal.menu-item.leading-space (Layout / Horizontal)\n$horizontal-menu-item-leading-space: 12px;\n/// md.comp.menus.horizontal.menu-item.top-space (Layout / Horizontal)\n$horizontal-menu-item-top-space: 6px;\n/// md.comp.menus.horizontal.menu-item.trailing-space (Layout / Horizontal)\n$horizontal-menu-item-trailing-space: 12px;\n/// md.comp.menus.menu-item.between-space (Layout / Default)\n$menu-item-between-space: 12px;\n/// md.comp.menus.menu-item.bottom-space (Layout / Default)\n$menu-item-bottom-space: 8px;\n/// md.comp.menus.menu-item.height (Layout / Default)\n$menu-item-height: 44px;\n/// md.comp.menus.menu-item.leading-icon.size (Layout / Default)\n$menu-item-leading-icon-size: 20px;\n/// md.comp.menus.menu-item.leading-space (Layout / Default)\n$menu-item-leading-space: 16px;\n/// md.comp.menus.menu-item.top-space (Layout / Default)\n$menu-item-top-space: 8px;\n/// md.comp.menus.menu-item.trailing-icon.size (Layout / Default)\n$menu-item-trailing-icon-size: 20px;\n/// md.comp.menus.menu-item.trailing-space (Layout / Default)\n$menu-item-trailing-space: 16px;\n/// md.comp.menus.active.container.shape (Shape / Default)\n$active-container-shape: md-sys-shape.$corner-large;\n/// md.comp.menus.container.elevation (Layout / Default)\n$container-elevation: md-sys-elevation.$level2;\n/// md.comp.menus.container.shape (Shape / Default)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.menus.group.shape (Shape / Default)\n$group-shape: md-sys-shape.$corner-small;\n/// md.comp.menus.horizontal.container.shape (Shape / Horizontal, Default)\n$horizontal-container-shape: md-sys-shape.$corner-full;\n/// md.comp.menus.horizontal.icon-only.menu-item.selected.shape (Shape / Horizontal icon-only, selected)\n$horizontal-icon-only-menu-item-selected-shape: md-sys-shape.$corner-full;\n/// md.comp.menus.horizontal.menu-item.focused.shape (Shape / Horizontal, Default)\n$horizontal-menu-item-focused-shape: md-sys-shape.$corner-medium;\n/// md.comp.menus.horizontal.menu-item.hovered.shape (Shape / Horizontal, Default)\n$horizontal-menu-item-hovered-shape: md-sys-shape.$corner-medium;\n/// md.comp.menus.horizontal.menu-item.pressed.shape (Shape / Horizontal, Default)\n$horizontal-menu-item-pressed-shape: md-sys-shape.$corner-medium;\n/// md.comp.menus.horizontal.menu-item.selected.focused.shape (Shape / Horizontal, Selected)\n$horizontal-menu-item-selected-focused-shape: md-sys-shape.$corner-full;\n/// md.comp.menus.horizontal.menu-item.selected.hovered.shape (Shape / Horizontal, Selected)\n$horizontal-menu-item-selected-hovered-shape: md-sys-shape.$corner-full;\n/// md.comp.menus.horizontal.menu-item.selected.pressed.shape (Shape / Horizontal, Selected)\n$horizontal-menu-item-selected-pressed-shape: md-sys-shape.$corner-full;\n/// md.comp.menus.inactive.container.shape (Shape / Default)\n$inactive-container-shape: md-sys-shape.$corner-small;\n/// md.comp.menus.menu-item.first-child.inner-corner.corner-size (Shape / Default)\n$menu-item-first-child-inner-corner-corner-size: md-sys-shape.$corner-extra-small;\n/// md.comp.menus.menu-item.first-child.shape (Shape / Default)\n$menu-item-first-child-shape: md-sys-shape.$corner-medium;\n/// md.comp.menus.menu-item.focus.indicator.color (Focus ring)\n$menu-item-focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.menus.menu-item.focus.indicator.outline.offset (Focus ring)\n$menu-item-focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;\n/// md.comp.menus.menu-item.focus.indicator.thickness (Focus ring)\n$menu-item-focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.menus.menu-item.label-text.font (Typography)\n$menu-item-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.menus.menu-item.label-text.line-height (Typography)\n$menu-item-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.menus.menu-item.label-text.size (Typography)\n$menu-item-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.menus.menu-item.label-text.tracking (Typography)\n$menu-item-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.menus.menu-item.label-text.weight (Typography)\n$menu-item-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.menus.menu-item.last-child.inner-corner.corner-size (Shape / Default)\n$menu-item-last-child-inner-corner-corner-size: md-sys-shape.$corner-extra-small;\n/// md.comp.menus.menu-item.last-child.shape (Shape / Default)\n$menu-item-last-child-shape: md-sys-shape.$corner-medium;\n/// md.comp.menus.menu-item.selected.shape (Shape / Selected)\n$menu-item-selected-shape: md-sys-shape.$corner-medium;\n/// md.comp.menus.menu-item.shape (Shape / Default)\n$menu-item-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.menus.menu-item.supporting-text.font (Typography)\n$menu-item-supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.menus.menu-item.supporting-text.line-height (Typography)\n$menu-item-supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.menus.menu-item.supporting-text.size (Typography)\n$menu-item-supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.menus.menu-item.supporting-text.tracking (Typography)\n$menu-item-supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.menus.menu-item.supporting-text.weight (Typography)\n$menu-item-supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.menus.menu-item.trailing-supporting-text.font (Typography)\n$menu-item-trailing-supporting-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.menus.menu-item.trailing-supporting-text.line-height (Typography)\n$menu-item-trailing-supporting-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.menus.menu-item.trailing-supporting-text.size (Typography)\n$menu-item-trailing-supporting-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.menus.menu-item.trailing-supporting-text.tracking (Typography)\n$menu-item-trailing-supporting-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.menus.menu-item.trailing-supporting-text.weight (Typography)\n$menu-item-trailing-supporting-text-weight: md-sys-typescale.$label-large-weight;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-bar-item-horizontal.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.nav-bar.item.horizontal.active-indicator.height\n$active-indicator-height: 40px;\n/// md.comp.nav-bar.item.horizontal.active-indicator.icon-label-space\n$active-indicator-icon-label-space: 4px;\n/// md.comp.nav-bar.item.horizontal.active-indicator.leading-space\n$active-indicator-leading-space: 16px;\n/// md.comp.nav-bar.item.horizontal.active-indicator.trailing-space\n$active-indicator-trailing-space: 16px;\n/// md.comp.nav-bar.item.horizontal.label-text.font\n@mixin label-text-font {\n  @include md-sys-typescale.label-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-bar-item-vertical.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.nav-bar.item.vertical.active-indicator.height\n$active-indicator-height: 32px;\n/// md.comp.nav-bar.item.vertical.active-indicator.icon-label-space\n$active-indicator-icon-label-space: 4px;\n/// md.comp.nav-bar.item.vertical.active-indicator.width\n$active-indicator-width: 56px;\n/// md.comp.nav-bar.item.vertical.container.between-space\n$container-between-space: 6px;\n/// md.comp.nav-bar.item.vertical.label-text.font\n@mixin label-text-font {\n  @include md-sys-typescale.label-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-bar.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n\n/// md.comp.nav-bar.container.height (Container)\n$container-height: 64px;\n/// md.comp.nav-bar.item.active-indicator.icon-label-space (Nav item)\n$item-active-indicator-icon-label-space: 4px;\n/// md.comp.nav-bar.item.between-space (Nav item)\n$item-between-space: 0px;\n/// md.comp.nav-bar.item.icon.size (Nav item)\n$item-icon-size: 24px;\n/// md.comp.nav-bar.container.color (Color / Enabled)\n$container-color: md-sys-color.$surface-container;\n/// md.comp.nav-bar.container.elevation (Color / Enabled)\n$container-elevation: md-sys-elevation.$level2;\n/// md.comp.nav-bar.container.shadow-color (Color / Enabled)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.nav-bar.container.shape (Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.nav-bar.item.active-indicator.shape (Nav item)\n$item-active-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.nav-bar.item.active.focused.state-layer.color (Color / Focused)\n$item-active-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-bar.item.active.focused.state-layer.opacity (Color / Focused)\n$item-active-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.nav-bar.item.active.hovered.state-layer.color (Color / Hovered)\n$item-active-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-bar.item.active.hovered.state-layer.opacity (Color / Hovered)\n$item-active-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.nav-bar.item.active.icon.color (Color / Enabled)\n$item-active-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-bar.item.active.indicator.color (Color / Enabled)\n$item-active-indicator-color: md-sys-color.$secondary-container;\n/// md.comp.nav-bar.item.active.label-text.color (Color / Enabled)\n$item-active-label-text-color: md-sys-color.$secondary;\n/// md.comp.nav-bar.item.active.pressed.state-layer.color (Color / Pressed)\n$item-active-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-bar.item.active.pressed.state-layer.opacity (Color / Pressed)\n$item-active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.nav-bar.item.inactive.focused.state-layer.color (Color / Focused)\n$item-inactive-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-bar.item.inactive.hovered.state-layer.color (Color / Hovered)\n$item-inactive-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-bar.item.inactive.icon.color (Color / Enabled)\n$item-inactive-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.nav-bar.item.inactive.label-text.color (Color / Enabled)\n$item-inactive-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.nav-bar.item.inactive.pressed.state-layer.color (Color / Pressed)\n$item-inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-rail-collapsed.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n\n/// md.comp.nav-rail.collapsed.container.width\n$container-width: 96px;\n/// md.comp.nav-rail.collapsed.item.vertical-space\n$item-vertical-space: 4px;\n/// md.comp.nav-rail.collapsed.narrow.container.width\n$narrow-container-width: 80px;\n/// md.comp.nav-rail.collapsed.top-space\n$top-space: 44px;\n/// md.comp.nav-rail.collapsed.container.color\n$container-color: md-sys-color.$surface;\n/// md.comp.nav-rail.collapsed.container.elevation\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.nav-rail.collapsed.container.shape\n$container-shape: md-sys-shape.$corner-none;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-rail-expanded.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n\n/// md.comp.nav-rail.expanded.between-item-space\n///\n/// @deprecated Token not needed as value is \"0dp\"\n$between-item-space: 0px;\n/// md.comp.nav-rail.expanded.container.width.maximum\n$container-width-maximum: 360px;\n/// md.comp.nav-rail.expanded.container.width.minimum\n$container-width-minimum: 220px;\n/// md.comp.nav-rail.expanded.top-space\n$top-space: 44px;\n/// md.comp.nav-rail.expanded.vertical.trailing-space\n///\n/// @deprecated Token moved to nav rail item horizontal set\n$vertical-trailing-space: 20px;\n/// md.comp.nav-rail.expanded.container.color\n$container-color: md-sys-color.$surface;\n/// md.comp.nav-rail.expanded.container.elevation\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.nav-rail.expanded.container.shape\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.nav-rail.expanded.modal.container.color\n$modal-container-color: md-sys-color.$surface-container;\n/// md.comp.nav-rail.expanded.modal.container.elevation\n$modal-container-elevation: md-sys-elevation.$level2;\n/// md.comp.nav-rail.expanded.modal.container.shape\n$modal-container-shape: md-sys-shape.$corner-large;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-rail-item-horizontal.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.nav-rail.item.horizontal.active-indicator.height\n$active-indicator-height: 56px;\n/// md.comp.nav-rail.item.horizontal.full-width.leading-space\n$full-width-leading-space: 16px;\n/// md.comp.nav-rail.item.horizontal.full-width.trailing-space\n$full-width-trailing-space: 16px;\n/// md.comp.nav-rail.item.horizontal.icon-label-space\n$icon-label-space: 8px;\n/// md.comp.nav-rail.item.horizontal.label-text.font\n@mixin label-text-font {\n  @include md-sys-typescale.label-large;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-rail-item-vertical.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-typescale';\n\n/// md.comp.nav-rail.item.vertical.active-indicator.height\n$active-indicator-height: 32px;\n/// md.comp.nav-rail.item.vertical.active-indicator.width\n$active-indicator-width: 56px;\n/// md.comp.nav-rail.item.vertical.icon-label-space\n$icon-label-space: 4px;\n/// md.comp.nav-rail.item.vertical.leading-space\n$leading-space: 16px;\n/// md.comp.nav-rail.item.vertical.trailing-space\n$trailing-space: 16px;\n/// md.comp.nav-rail.item.vertical.label-text.font\n@mixin label-text-font {\n  @include md-sys-typescale.label-medium;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-rail-item.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.nav-rail.item.active-indicator.icon-label-space\n$active-indicator-icon-label-space: 8px;\n/// md.comp.nav-rail.item.active-indicator.leading-space\n$active-indicator-leading-space: 16px;\n/// md.comp.nav-rail.item.active-indicator.trailing-space\n$active-indicator-trailing-space: 16px;\n/// md.comp.nav-rail.item.container.height\n$container-height: 64px;\n/// md.comp.nav-rail.item.container.vertical-space\n$container-vertical-space: 6px;\n/// md.comp.nav-rail.item.header-space-minimum\n$header-space-minimum: 40px;\n/// md.comp.nav-rail.item.icon.size\n$icon-size: 24px;\n/// md.comp.nav-rail.item.short.container.height\n$short-container-height: 56px;\n/// md.comp.nav-rail.item.active-indicator.shape\n$active-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.nav-rail.item.container.shape\n$container-shape: md-sys-shape.$corner-none;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-nav-rail.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.nav-rail.item.active.focused.state-layer.color (Focused)\n$item-active-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-rail.item.active.focused.state-layer.opacity (Focused)\n$item-active-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.nav-rail.item.active.hovered.state-layer.color (Hovered)\n$item-active-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-rail.item.active.hovered.state-layer.opacity (Hovered)\n$item-active-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.nav-rail.item.active.icon.color (Enabled)\n$item-active-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-rail.item.active.indicator.color (Enabled)\n$item-active-indicator-color: md-sys-color.$secondary-container;\n/// md.comp.nav-rail.item.active.label-text.color (Enabled)\n$item-active-label-text-color: md-sys-color.$secondary;\n/// md.comp.nav-rail.item.active.pressed.state-layer.color (Pressed)\n$item-active-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-rail.item.active.pressed.state-layer.opacity (Pressed)\n$item-active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.nav-rail.item.inactive.focused.state-layer.color (Focused)\n$item-inactive-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-rail.item.inactive.hovered.state-layer.color (Hovered)\n$item-inactive-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.nav-rail.item.inactive.icon.color (Enabled)\n$item-inactive-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.nav-rail.item.inactive.label-text.color (Enabled)\n$item-inactive-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.nav-rail.item.inactive.pressed.state-layer.color (Pressed)\n$item-inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-navigation-bar.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.navigation-bar.active-indicator.height (Enabled / Active indicator)\n$active-indicator-height: 32px;\n/// md.comp.navigation-bar.active-indicator.width (Enabled / Active indicator)\n$active-indicator-width: 64px;\n/// md.comp.navigation-bar.badge.shape (Enabled / [Deprecated] Badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.\n$badge-shape: 3px;\n/// md.comp.navigation-bar.badge.size (Enabled / [Deprecated] Badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.\n$badge-size: 6px;\n/// md.comp.navigation-bar.container.height (Enabled / Container)\n$container-height: 80px;\n/// md.comp.navigation-bar.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.navigation-bar.large-badge.shape (Enabled / [Deprecated] Large badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-shape: 8px;\n/// md.comp.navigation-bar.large-badge.size (Enabled / [Deprecated] Large badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-size: 16px;\n/// md.comp.navigation-bar.active-indicator.color (Enabled / Active indicator)\n$active-indicator-color: md-sys-color.$secondary-container;\n/// md.comp.navigation-bar.active-indicator.shape (Enabled / Active indicator)\n$active-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.navigation-bar.active.focus.icon.color (Enabled / Icon)\n$active-focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-bar.active.focus.label-text.color (Enabled / Label text)\n$active-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.active.focus.state-layer.color (Enabled / State layer)\n$active-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.active.hover.icon.color (Enabled / Icon)\n$active-hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-bar.active.hover.label-text.color (Enabled / Label text)\n$active-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.active.hover.state-layer.color (Enabled / State layer)\n$active-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.active.icon.color (Enabled / Icon)\n$active-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-bar.active.label-text.color (Enabled / Label text)\n$active-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.active.label-text.weight (Enabled / Label text)\n$active-label-text-weight: md-sys-typescale.$label-medium-weight-prominent;\n/// md.comp.navigation-bar.active.pressed.icon.color (Enabled / Icon)\n$active-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-bar.active.pressed.label-text.color (Enabled / Label text)\n$active-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.active.pressed.state-layer.color (Enabled / State layer)\n$active-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.badge.color (Enabled / [Deprecated] Badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.\n$badge-color: md-sys-color.$error;\n/// md.comp.navigation-bar.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container;\n/// md.comp.navigation-bar.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level2;\n/// md.comp.navigation-bar.container.shadow-color (Enabled / Container)\n///\n/// @deprecated Bug: should not have been created. Remove any shadows on navigation bars.\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.navigation-bar.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.navigation-bar.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.navigation-bar.focus.indicator.color (Enabled / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.navigation-bar.focus.indicator.outline.offset (Enabled / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;\n/// md.comp.navigation-bar.focus.indicator.thickness (Enabled / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.navigation-bar.focus.state-layer.opacity (Enabled / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.navigation-bar.hover.state-layer.opacity (Enabled / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.navigation-bar.inactive.focus.icon.color (Enabled / Icon)\n$inactive-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.focus.label-text.color (Enabled / Label text)\n$inactive-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.focus.state-layer.color (Enabled / State layer)\n$inactive-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.hover.icon.color (Enabled / Icon)\n$inactive-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.hover.label-text.color (Enabled / Label text)\n$inactive-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.hover.state-layer.color (Enabled / State layer)\n$inactive-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.icon.color (Enabled / Icon)\n$inactive-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-bar.inactive.label-text.color (Enabled / Label text)\n$inactive-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-bar.inactive.pressed.icon.color (Enabled / Icon)\n$inactive-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.pressed.label-text.color (Enabled / Label text)\n$inactive-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.inactive.pressed.state-layer.color (Enabled / State layer)\n$inactive-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-bar.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-medium-font;\n/// md.comp.navigation-bar.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-medium-line-height;\n/// md.comp.navigation-bar.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-medium-size;\n/// md.comp.navigation-bar.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-medium-tracking;\n/// md.comp.navigation-bar.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-medium-weight;\n/// md.comp.navigation-bar.large-badge.color (Enabled / [Deprecated] Large badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-color: md-sys-color.$error;\n/// md.comp.navigation-bar.pressed.state-layer.opacity (Enabled / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.navigation-bar.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-navigation-drawer.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-palette';\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.navigation-drawer.active-indicator.height (Enabled / Active indicator)\n$active-indicator-height: 56px;\n/// md.comp.navigation-drawer.active-indicator.width (Enabled / Active indicator)\n$active-indicator-width: 336px;\n/// md.comp.navigation-drawer.container.height (Enabled / Container)\n$container-height: 100%;\n/// md.comp.navigation-drawer.container.width (Enabled / Container)\n$container-width: 360px;\n/// md.comp.navigation-drawer.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.navigation-drawer.scrim.opacity (Enabled / [Deprecated] Scrim)\n///\n/// @deprecated Bug fix. Token does not represent M3 design intent. Use Neutral-Variant10 at 50% for scrims instead.\n$scrim-opacity: 0.4;\n/// md.comp.navigation-drawer.active-indicator.color (Enabled / Active indicator)\n$active-indicator-color: md-sys-color.$secondary-container;\n/// md.comp.navigation-drawer.active-indicator.shape (Enabled / Active indicator)\n$active-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.navigation-drawer.active.focus.icon.color (Focused / Icon)\n$active-focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.focus.label-text.color (Focused / Label text)\n$active-focus-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.focus.state-layer.color (Focused / State layer)\n$active-focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.hover.icon.color (Hovered / Icon)\n$active-hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.hover.label-text.color (Hovered / Label text)\n$active-hover-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.hover.state-layer.color (Hovered / State layer)\n$active-hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.icon.color (Enabled / Icon)\n$active-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.label-text.color (Enabled / Label text)\n$active-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.label-text.weight (Enabled / Label text)\n$active-label-text-weight: md-sys-typescale.$label-large-weight-prominent;\n/// md.comp.navigation-drawer.active.pressed.icon.color (Pressed (ripple) / Icon)\n$active-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.pressed.label-text.color (Pressed (ripple) / Label text)\n$active-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.active.pressed.state-layer.color (Pressed (ripple) / State layer)\n$active-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.bottom.container.shape (Enabled / Container)\n$bottom-container-shape: md-sys-shape.$corner-large-top;\n/// md.comp.navigation-drawer.container.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Use \"md.comp.navigation-drawer.modal.container.color\" or \"md.comp.navigation-drawer.standard.container.color\" instead depending on desired configuration.\n$container-color: md-sys-color.$surface;\n/// md.comp.navigation-drawer.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-large-end;\n/// md.comp.navigation-drawer.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.navigation-drawer.divider.color (Enabled / Divider)\n///\n/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement\n$divider-color: md-sys-color.$outline;\n/// md.comp.navigation-drawer.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.navigation-drawer.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;\n/// md.comp.navigation-drawer.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.navigation-drawer.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.navigation-drawer.headline.color (Enabled / Headline)\n$headline-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-drawer.headline.font (Enabled / Headline)\n$headline-font: md-sys-typescale.$title-small-font;\n/// md.comp.navigation-drawer.headline.line-height (Enabled / Headline)\n$headline-line-height: md-sys-typescale.$title-small-line-height;\n/// md.comp.navigation-drawer.headline.size (Enabled / Headline)\n$headline-size: md-sys-typescale.$title-small-size;\n/// md.comp.navigation-drawer.headline.tracking (Enabled / Headline)\n$headline-tracking: md-sys-typescale.$title-small-tracking;\n/// md.comp.navigation-drawer.headline.weight (Enabled / Headline)\n$headline-weight: md-sys-typescale.$title-small-weight;\n/// md.comp.navigation-drawer.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.navigation-drawer.inactive.focus.icon.color (Focused / Icon)\n$inactive-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.focus.label-text.color (Focused / Label text)\n$inactive-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.focus.state-layer.color (Focused / State layer)\n$inactive-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.hover.icon.color (Hovered / Icon)\n$inactive-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.hover.label-text.color (Hovered / Label text)\n$inactive-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.hover.state-layer.color (Hovered / State layer)\n$inactive-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.icon.color (Enabled / Icon)\n$inactive-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-drawer.inactive.label-text.color (Enabled / Label text)\n$inactive-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-drawer.inactive.pressed.icon.color (Pressed (ripple) / Icon)\n$inactive-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.pressed.label-text.color (Pressed (ripple) / Label text)\n$inactive-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-drawer.inactive.pressed.state-layer.color (Pressed (ripple) / State layer)\n$inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-drawer.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.navigation-drawer.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.navigation-drawer.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.navigation-drawer.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.navigation-drawer.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.navigation-drawer.large-badge-label.color (Enabled / Large badge label)\n$large-badge-label-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-drawer.large-badge-label.font (Enabled / Large badge label)\n$large-badge-label-font: md-sys-typescale.$label-large-font;\n/// md.comp.navigation-drawer.large-badge-label.line-height (Enabled / Large badge label)\n$large-badge-label-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.navigation-drawer.large-badge-label.size (Enabled / Large badge label)\n$large-badge-label-size: md-sys-typescale.$label-large-size;\n/// md.comp.navigation-drawer.large-badge-label.tracking (Enabled / Large badge label)\n$large-badge-label-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.navigation-drawer.large-badge-label.weight (Enabled / Large badge label)\n$large-badge-label-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.navigation-drawer.modal.container.color (Enabled / Container)\n$modal-container-color: md-sys-color.$surface-container-low;\n/// md.comp.navigation-drawer.modal.container.elevation (Enabled / Container)\n$modal-container-elevation: md-sys-elevation.$level1;\n/// md.comp.navigation-drawer.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.navigation-drawer.scrim.color (Enabled / [Deprecated] Scrim)\n///\n/// @deprecated Bug fix. Token does not represent M3 design intent. Use Neutral-Variant10 at 50% for scrims instead.\n$scrim-color: md-ref-palette.$neutral-variant20;\n/// md.comp.navigation-drawer.standard.container.color (Enabled / Container)\n$standard-container-color: md-sys-color.$surface;\n/// md.comp.navigation-drawer.standard.container.elevation (Enabled / Container)\n$standard-container-elevation: md-sys-elevation.$level0;\n/// md.comp.navigation-drawer.headline.type (Enabled / Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n/// md.comp.navigation-drawer.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n/// md.comp.navigation-drawer.large-badge-label.type (Enabled / Large badge label)\n@mixin large-badge-label-type {\n  font-family: $large-badge-label-font;\n  font-size: $large-badge-label-size;\n  font-weight: $large-badge-label-weight;\n  letter-spacing: $large-badge-label-tracking;\n  line-height: $large-badge-label-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-navigation-rail.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.navigation-rail.active-indicator.height (Enabled / Active indicator)\n$active-indicator-height: 32px;\n/// md.comp.navigation-rail.active-indicator.width (Enabled / Active indicator)\n$active-indicator-width: 56px;\n/// md.comp.navigation-rail.badge.shape (Enabled / [Deprecated] Badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.\n$badge-shape: 3px;\n/// md.comp.navigation-rail.badge.size (Enabled / [Deprecated] Badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.\n$badge-size: 6px;\n/// md.comp.navigation-rail.container.width (Enabled / Container)\n$container-width: 80px;\n/// md.comp.navigation-rail.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.navigation-rail.large-badge.shape (Enabled / [Deprecated] Large badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-shape: 8px;\n/// md.comp.navigation-rail.large-badge.size (Enabled / [Deprecated] Large badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-size: 16px;\n/// md.comp.navigation-rail.menu.icon.size (Enabled / Icon)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-icon-size: 24px;\n/// md.comp.navigation-rail.no-label.active-indicator.height (Enabled / Active indicator)\n$no-label-active-indicator-height: 56px;\n/// md.comp.navigation-rail.active-indicator.color (Enabled / Active indicator)\n$active-indicator-color: md-sys-color.$secondary-container;\n/// md.comp.navigation-rail.active-indicator.shape (Enabled / Active indicator)\n$active-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.navigation-rail.active.focus.icon.color (Focused / Icon)\n$active-focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-rail.active.focus.label-text.color (Focused / Label text)\n$active-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.active.focus.state-layer.color (Focused / State layer)\n$active-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.active.hover.icon.color (Hovered / Icon)\n$active-hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-rail.active.hover.label-text.color (Hovered / Label text)\n$active-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.active.hover.state-layer.color (Hovered / State layer)\n$active-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.active.icon.color (Enabled / Icon)\n$active-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-rail.active.label-text.color (Enabled / Label text)\n$active-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.active.label-text.weight (Enabled / Label text)\n$active-label-text-weight: md-sys-typescale.$label-medium-weight-prominent;\n/// md.comp.navigation-rail.active.pressed.icon.color (Pressed (ripple) / Icon)\n$active-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.navigation-rail.active.pressed.label-text.color (Pressed (ripple) / Label text)\n$active-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.active.pressed.state-layer.color (Pressed (ripple) / State layer)\n$active-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.badge.color (Enabled / [Deprecated] Badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.\n$badge-color: md-sys-color.$error;\n/// md.comp.navigation-rail.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.navigation-rail.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.navigation-rail.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.navigation-rail.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.navigation-rail.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.navigation-rail.inactive.focus.icon.color (Focused / Icon)\n$inactive-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.focus.label-text.color (Focused / Label text)\n$inactive-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.focus.state-layer.color (Focused / State layer)\n$inactive-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.hover.icon.color (Hovered / Icon)\n$inactive-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.hover.label-text.color (Hovered / Label text)\n$inactive-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.hover.state-layer.color (Hovered / State layer)\n$inactive-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.icon.color (Enabled / Icon)\n$inactive-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-rail.inactive.label-text.color (Enabled / Label text)\n$inactive-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-rail.inactive.pressed.icon.color (Pressed (ripple) / Icon)\n$inactive-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.pressed.label-text.color (Pressed (ripple) / Label text)\n$inactive-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.inactive.pressed.state-layer.color (Pressed (ripple) / State layer)\n$inactive-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-medium-font;\n/// md.comp.navigation-rail.label-text.font-family (Enabled / Label text)\n///\n/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.\n$label-text-font-family: md-sys-typescale.$label-medium-font;\n/// md.comp.navigation-rail.label-text.font-size (Enabled / Label text)\n///\n/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.\n$label-text-font-size: md-sys-typescale.$label-medium-size;\n/// md.comp.navigation-rail.label-text.letter-spacing (Enabled / Label text)\n///\n/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.\n$label-text-letter-spacing: md-sys-typescale.$label-medium-tracking;\n/// md.comp.navigation-rail.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-medium-line-height;\n/// md.comp.navigation-rail.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-medium-size;\n/// md.comp.navigation-rail.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-medium-tracking;\n/// md.comp.navigation-rail.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-medium-weight;\n/// md.comp.navigation-rail.large-badge-label.color (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-label-color: md-sys-color.$on-error;\n/// md.comp.navigation-rail.large-badge-label.font (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-label-font: md-sys-typescale.$label-small-font;\n/// md.comp.navigation-rail.large-badge-label.font-family (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.\n$large-badge-label-font-family: md-sys-typescale.$label-small-font;\n/// md.comp.navigation-rail.large-badge-label.line-height (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-label-line-height: md-sys-typescale.$label-small-line-height;\n/// md.comp.navigation-rail.large-badge-label.size (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-label-size: md-sys-typescale.$label-small-size;\n/// md.comp.navigation-rail.large-badge-label.tracking (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-label-tracking: md-sys-typescale.$label-small-tracking;\n/// md.comp.navigation-rail.large-badge-label.weight (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-label-weight: md-sys-typescale.$label-small-weight;\n/// md.comp.navigation-rail.large-badge.color (Enabled / [Deprecated] Large badge)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n$large-badge-color: md-sys-color.$error;\n/// md.comp.navigation-rail.menu.focus.icon.color (Focused / Icon)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.menu.focus.state-layer.color (Focused / State layer)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.menu.focus.state-layer.opacity (Focused / State layer)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.navigation-rail.menu.hover.icon.color (Hovered / Icon)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.menu.hover.state-layer.color (Hovered / State layer)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.menu.hover.state-layer.opacity (Hovered / State layer)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.navigation-rail.menu.icon.color (Enabled / Icon)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.navigation-rail.menu.pressed.icon.color (Pressed (ripple) / Icon)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.menu.pressed.state-layer.color (Pressed (ripple) / State layer)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.navigation-rail.menu.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n///\n/// @deprecated Using menu button token instead, this token no longer needed.\n$menu-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.navigation-rail.no-label.active-indicator.shape (Enabled / Active indicator)\n$no-label-active-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.navigation-rail.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.navigation-rail.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n/// md.comp.navigation-rail.large-badge-label.type (Enabled / [Deprecated] Large badge label)\n///\n/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.\n@mixin large-badge-label-type {\n  font-family: $large-badge-label-font;\n  font-size: $large-badge-label-size;\n  font-weight: $large-badge-label-weight;\n  letter-spacing: $large-badge-label-tracking;\n  line-height: $large-badge-label-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-outlined-autocomplete.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.size (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-size: 24px;\n/// md.comp.outlined-autocomplete.menu.divider.height (Enabled / Divider)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-divider-height: 1px;\n/// md.comp.outlined-autocomplete.menu.list-item.container.height (Enabled / Container)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-container-height: 48px;\n/// md.comp.outlined-autocomplete.text-field.container.height (Enabled / Container)\n///\n/// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height.\n$text-field-container-height: 56px;\n/// md.comp.outlined-autocomplete.text-field.disabled.input-text.opacity (Disabled / Input text)\n$text-field-disabled-input-text-opacity: 0.38;\n/// md.comp.outlined-autocomplete.text-field.disabled.label-text.opacity (Disabled / Label text)\n$text-field-disabled-label-text-opacity: 0.38;\n/// md.comp.outlined-autocomplete.text-field.disabled.leading-icon.opacity (Disabled / Leading icon)\n$text-field-disabled-leading-icon-opacity: 0.38;\n/// md.comp.outlined-autocomplete.text-field.disabled.outline.opacity (Disabled / Container)\n$text-field-disabled-outline-opacity: 0.12;\n/// md.comp.outlined-autocomplete.text-field.disabled.outline.width (Disabled / Container)\n$text-field-disabled-outline-width: 1px;\n/// md.comp.outlined-autocomplete.text-field.disabled.supporting-text.opacity (Disabled / Supporting text)\n$text-field-disabled-supporting-text-opacity: 0.38;\n/// md.comp.outlined-autocomplete.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.outlined-autocomplete.text-field.focus.outline.width (Focused / Container)\n$text-field-focus-outline-width: 2px;\n/// md.comp.outlined-autocomplete.text-field.hover.outline.width (Hovered / Container)\n$text-field-hover-outline-width: 1px;\n/// md.comp.outlined-autocomplete.text-field.leading-icon.size (Enabled / Leading icon)\n$text-field-leading-icon-size: 24px;\n/// md.comp.outlined-autocomplete.text-field.outline.width (Enabled / Container)\n$text-field-outline-width: 1px;\n/// md.comp.outlined-autocomplete.text-field.trailing-icon.size (Enabled / Trailing icon)\n$text-field-trailing-icon-size: 24px;\n/// md.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.color (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.menu.container.color (Enabled / Container)\n$menu-container-color: md-sys-color.$surface-container;\n/// md.comp.outlined-autocomplete.menu.container.elevation (Enabled / Container)\n$menu-container-elevation: md-sys-elevation.$level2;\n/// md.comp.outlined-autocomplete.menu.container.shadow-color (Enabled / Container)\n$menu-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.outlined-autocomplete.menu.container.shape (Enabled / Container)\n$menu-container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.outlined-autocomplete.menu.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$menu-container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.outlined-autocomplete.menu.divider.color (Enabled / Divider)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-divider-color: md-sys-color.$surface-variant;\n/// md.comp.outlined-autocomplete.menu.list-item.label-text.color (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.menu.list-item.label-text.font (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.outlined-autocomplete.menu.list-item.label-text.line-height (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.outlined-autocomplete.menu.list-item.label-text.size (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.outlined-autocomplete.menu.list-item.label-text.tracking (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.outlined-autocomplete.menu.list-item.label-text.weight (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.outlined-autocomplete.menu.list-item.selected.container.color (Enabled / Container)\n///\n/// @deprecated Deprecating per b/262592125\n$menu-list-item-selected-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.outlined-autocomplete.text-field.caret.color (Enabled / Caret)\n$text-field-caret-color: md-sys-color.$primary;\n/// md.comp.outlined-autocomplete.text-field.container.color (Enabled / Container)\n$text-field-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.outlined-autocomplete.text-field.container.shape (Enabled / Container)\n$text-field-container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.outlined-autocomplete.text-field.disabled.input-text.color (Disabled / Input text)\n$text-field-disabled-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.disabled.label-text.color (Disabled / Label text)\n$text-field-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.disabled.leading-icon.color (Disabled / Leading icon)\n$text-field-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.disabled.outline.color (Disabled / Container)\n$text-field-disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.disabled.supporting-text.color (Disabled / Supporting text)\n$text-field-disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.disabled.trailing-icon.color (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.error.focus.caret.color (Error / Focus)\n$text-field-error-focus-caret-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.focus.input-text.color (Error / Focus)\n$text-field-error-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.error.focus.label-text.color (Error / Focus)\n$text-field-error-focus-label-text-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.focus.leading-icon.color (Error / Focus)\n$text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.error.focus.outline.color (Error / Focus)\n$text-field-error-focus-outline-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.focus.supporting-text.color (Error / Focus)\n$text-field-error-focus-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.focus.trailing-icon.color (Error / Focus)\n$text-field-error-focus-trailing-icon-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.hover.input-text.color (Error / Hover)\n$text-field-error-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.error.hover.label-text.color (Error / Hover)\n$text-field-error-hover-label-text-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-autocomplete.text-field.error.hover.leading-icon.color (Error / Hover)\n$text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.error.hover.outline.color (Error / Hover)\n$text-field-error-hover-outline-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-autocomplete.text-field.error.hover.state-layer.color (Error / Hover)\n$text-field-error-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.error.hover.state-layer.opacity (Error / Hover)\n$text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-autocomplete.text-field.error.hover.supporting-text.color (Error / Hover)\n$text-field-error-hover-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.hover.trailing-icon.color (Error / Hover)\n$text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-autocomplete.text-field.error.input-text.color (Error)\n$text-field-error-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.error.label-text.color (Error)\n$text-field-error-label-text-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.leading-icon.color (Error)\n$text-field-error-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.error.outline.color (Error)\n$text-field-error-outline-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.supporting-text.color (Error)\n$text-field-error-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.error.trailing-icon.color (Error)\n$text-field-error-trailing-icon-color: md-sys-color.$error;\n/// md.comp.outlined-autocomplete.text-field.focus.input-text.color (Focused / Input text)\n$text-field-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.focus.label-text.color (Focused / Label text)\n$text-field-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-autocomplete.text-field.focus.leading-icon.color (Focused / Leading icon)\n$text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.focus.outline.color (Focused / Container)\n$text-field-focus-outline-color: md-sys-color.$primary;\n/// md.comp.outlined-autocomplete.text-field.focus.supporting-text.color (Focused / Supporting text)\n$text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.focus.trailing-icon.color (Focused / Trailing icon)\n$text-field-focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.hover.input-text.color (Hovered / Input text)\n$text-field-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.hover.label-text.color (Hovered / Label text)\n$text-field-hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.hover.leading-icon.color (Hovered / Leading icon)\n$text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.hover.outline.color (Hovered / Container)\n$text-field-hover-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.hover.state-layer.color (Hovered / State layer)\n$text-field-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.hover.state-layer.opacity (Hovered / State layer)\n$text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-autocomplete.text-field.hover.supporting-text.color (Hovered / Supporting text)\n$text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.hover.trailing-icon.color (Hovered / Trailing icon)\n$text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.input-text.color (Enabled / Input text)\n$text-field-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-autocomplete.text-field.input-text.font (Enabled / Input text)\n$text-field-input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.outlined-autocomplete.text-field.input-text.line-height (Enabled / Input text)\n$text-field-input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.outlined-autocomplete.text-field.input-text.size (Enabled / Input text)\n$text-field-input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.outlined-autocomplete.text-field.input-text.tracking (Enabled / Input text)\n$text-field-input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.outlined-autocomplete.text-field.input-text.weight (Enabled / Input text)\n$text-field-input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.outlined-autocomplete.text-field.label-text.color (Enabled / Label text)\n$text-field-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.label-text.font (Enabled / Label text)\n$text-field-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.outlined-autocomplete.text-field.label-text.line-height (Enabled / Label text)\n$text-field-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.outlined-autocomplete.text-field.label-text.populated.line-height (Enabled / Label text)\n$text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.outlined-autocomplete.text-field.label-text.populated.size (Enabled / Label text)\n$text-field-label-text-populated-size: md-sys-typescale.$body-small-size;\n/// md.comp.outlined-autocomplete.text-field.label-text.size (Enabled / Label text)\n$text-field-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.outlined-autocomplete.text-field.label-text.tracking (Enabled / Label text)\n$text-field-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.outlined-autocomplete.text-field.label-text.weight (Enabled / Label text)\n$text-field-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.outlined-autocomplete.text-field.leading-icon.color (Enabled / Leading icon)\n$text-field-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.outline.color (Enabled / Container)\n$text-field-outline-color: md-sys-color.$outline;\n/// md.comp.outlined-autocomplete.text-field.supporting-text.color (Enabled / Supporting text)\n$text-field-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.text-field.supporting-text.font (Enabled / Supporting text)\n$text-field-supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.outlined-autocomplete.text-field.supporting-text.line-height (Enabled / Supporting text)\n$text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.outlined-autocomplete.text-field.supporting-text.size (Enabled / Supporting text)\n$text-field-supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.outlined-autocomplete.text-field.supporting-text.tracking (Enabled / Supporting text)\n$text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.outlined-autocomplete.text-field.supporting-text.weight (Enabled / Supporting text)\n$text-field-supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.outlined-autocomplete.text-field.trailing-icon.color (Enabled / Trailing icon)\n$text-field-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-autocomplete.menu.list-item.label-text.type (Enabled / Label text)\n///\n/// @deprecated Deprecating per b/262592125\n@mixin menu-list-item-label-text-type {\n  font-family: $menu-list-item-label-text-font;\n  font-size: $menu-list-item-label-text-size;\n  font-weight: $menu-list-item-label-text-weight;\n  letter-spacing: $menu-list-item-label-text-tracking;\n  line-height: $menu-list-item-label-text-line-height;\n}\n/// md.comp.outlined-autocomplete.text-field.input-text.type (Enabled / Input text)\n@mixin text-field-input-text-type {\n  font-family: $text-field-input-text-font;\n  font-size: $text-field-input-text-size;\n  font-weight: $text-field-input-text-weight;\n  letter-spacing: $text-field-input-text-tracking;\n  line-height: $text-field-input-text-line-height;\n}\n/// md.comp.outlined-autocomplete.text-field.label-text.type (Enabled / Label text)\n@mixin text-field-label-text-type {\n  font-family: $text-field-label-text-font;\n  font-size: $text-field-label-text-size;\n  font-weight: $text-field-label-text-weight;\n  letter-spacing: $text-field-label-text-tracking;\n  line-height: $text-field-label-text-line-height;\n}\n/// md.comp.outlined-autocomplete.text-field.supporting-text.type (Enabled / Supporting text)\n@mixin text-field-supporting-text-type {\n  font-family: $text-field-supporting-text-font;\n  font-size: $text-field-supporting-text-size;\n  font-weight: $text-field-supporting-text-weight;\n  letter-spacing: $text-field-supporting-text-tracking;\n  line-height: $text-field-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-outlined-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.outlined-button.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.outlined-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.outlined-button.disabled.outline.opacity ([Deprecated] Disabled / [Deprecated] Outline)\n$disabled-outline-opacity: 0.12;\n/// md.comp.outlined-button.outline.width ([Deprecated] Enabled / [Deprecated] Outline)\n$outline-width: 1px;\n/// md.comp.outlined-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.outlined-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.outlined-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Reduced redundency in the system by eliminating tokens that duplicate the default value of zero. Replace usage with the default value of zero.\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.outlined-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.outlined-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-button.disabled.outline.color ([Deprecated] Disabled / [Deprecated] Outline)\n$disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.outlined-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.outlined-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.outlined-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-button.focus.outline.color ([Deprecated] Focused / [Deprecated] Outline)\n$focus-outline-color: md-sys-color.$primary;\n/// md.comp.outlined-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.outlined-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.outlined-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n$hover-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-button.hover.outline.color ([Deprecated] Hovered / [Deprecated] Outline)\n$hover-outline-color: md-sys-color.$outline;\n/// md.comp.outlined-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.outlined-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.outlined-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.outlined-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.outlined-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.outlined-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.outlined-button.outline.color ([Deprecated] Enabled / [Deprecated] Outline)\n$outline-color: md-sys-color.$outline;\n/// md.comp.outlined-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-button.pressed.outline.color ([Deprecated] Pressed (ripple) / [Deprecated] Outline)\n$pressed-outline-color: md-sys-color.$outline;\n/// md.comp.outlined-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.outlined-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.outlined-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$with-icon-focus-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$with-icon-hover-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$with-icon-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-outlined-card.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.outlined-card.disabled.outline.opacity (Disabled / Outline)\n$disabled-outline-opacity: 0.12;\n/// md.comp.outlined-card.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.outlined-card.outline.width (Enabled / Outline)\n$outline-width: 1px;\n/// md.comp.outlined-card.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.outlined-card.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.outlined-card.container.shadow-color (Enabled / Outline)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.outlined-card.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-medium;\n/// md.comp.outlined-card.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.outlined-card.disabled.container.elevation (Disabled / Container)\n$disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.outlined-card.disabled.outline.color (Disabled / Outline)\n$disabled-outline-color: md-sys-color.$outline;\n/// md.comp.outlined-card.dragged.container.elevation (Dragged / Container)\n$dragged-container-elevation: md-sys-elevation.$level3;\n/// md.comp.outlined-card.dragged.outline.color (Dragged / Outline)\n$dragged-outline-color: md-sys-color.$outline-variant;\n/// md.comp.outlined-card.dragged.state-layer.color (Dragged / State layer)\n$dragged-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-card.dragged.state-layer.opacity (Dragged / State layer)\n$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.outlined-card.focus.container.elevation (Focused / Container)\n$focus-container-elevation: md-sys-elevation.$level0;\n/// md.comp.outlined-card.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.outlined-card.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.outlined-card.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.outlined-card.focus.outline.color (Focused / Outline)\n$focus-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-card.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-card.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.outlined-card.hover.container.elevation (Hovered / Container)\n$hover-container-elevation: md-sys-elevation.$level1;\n/// md.comp.outlined-card.hover.outline.color (Hovered / Outline)\n$hover-outline-color: md-sys-color.$outline-variant;\n/// md.comp.outlined-card.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-card.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-card.icon.color (Enabled / Icon)\n$icon-color: md-sys-color.$primary;\n/// md.comp.outlined-card.outline.color (Enabled / Outline)\n$outline-color: md-sys-color.$outline-variant;\n/// md.comp.outlined-card.pressed.container.elevation (Pressed (ripple) / Container)\n$pressed-container-elevation: md-sys-elevation.$level0;\n/// md.comp.outlined-card.pressed.outline.color (Pressed (ripple) / Outline)\n$pressed-outline-color: md-sys-color.$outline-variant;\n/// md.comp.outlined-card.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-card.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-outlined-menu-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.outlined-menu-button.container.height (Enabled / Container)\n$container-height: 40px;\n/// md.comp.outlined-menu-button.disabled.container.opacity (Disabled / Container)\n$disabled-container-opacity: 0.12;\n/// md.comp.outlined-menu-button.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.outlined-menu-button.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$disabled-trailing-icon-opacity: 0.38;\n/// md.comp.outlined-menu-button.outline.width (Enabled / Container)\n$outline-width: 1px;\n/// md.comp.outlined-menu-button.trailing-icon.size (Enabled / Trailing icon)\n$trailing-icon-size: 18px;\n/// md.comp.outlined-menu-button.with-icon.disabled.icon.opacity (Disabled / Icon)\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.outlined-menu-button.with-icon.leading-icon.size (Enabled / Leading icon)\n$with-icon-leading-icon-size: 18px;\n/// md.comp.outlined-menu-button.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-menu-button.disabled.outline.color (Disabled / Container)\n$disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-menu-button.disabled.trailing-icon.color (Disabled / Trailing icon)\n$disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-menu-button.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.outlined-menu-button.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.outlined-menu-button.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.outlined-menu-button.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.focus.outline.color (Focused / Container)\n$focus-outline-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.outlined-menu-button.focus.trailing-icon.color (Focused / Trailing icon)\n$focus-trailing-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.hover.outline.color (Hovered / Container)\n$hover-outline-color: md-sys-color.$outline;\n/// md.comp.outlined-menu-button.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-menu-button.hover.trailing-icon.color (Hovered / Trailing icon)\n$hover-trailing-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.outlined-menu-button.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.outlined-menu-button.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.outlined-menu-button.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.outlined-menu-button.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.outlined-menu-button.outline.color (Enabled / Container)\n$outline-color: md-sys-color.$outline;\n/// md.comp.outlined-menu-button.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.pressed.outline.color (Pressed (ripple) / Container)\n$pressed-outline-color: md-sys-color.$outline;\n/// md.comp.outlined-menu-button.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.outlined-menu-button.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)\n$pressed-trailing-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.shape (Enabled / Container)\n$shape: md-sys-shape.$corner-full;\n/// md.comp.outlined-menu-button.trailing-icon.color (Enabled / Trailing icon)\n$trailing-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.with-icon.disabled.icon.color (Disabled / Icon)\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-menu-button.with-icon.focus.leading-icon.color (Focused / Leading icon)\n$with-icon-focus-leading-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.with-icon.hover.leading-icon.color (Hovered / Leading icon)\n$with-icon-hover-leading-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.with-icon.leading-icon.color (Enabled / Leading icon)\n$with-icon-leading-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.with-icon.pressed.leading-icon.color (Pressed (ripple) / Leading icon)\n$with-icon-pressed-leading-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-menu-button.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-outlined-segmented-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.outlined-segmented-button.container.height (Enabled / Container)\n$container-height: 40px;\n/// md.comp.outlined-segmented-button.disabled.icon.opacity (Disabled / Icon)\n$disabled-icon-opacity: 0.38;\n/// md.comp.outlined-segmented-button.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.outlined-segmented-button.disabled.outline.opacity (Disabled / Container)\n$disabled-outline-opacity: 0.12;\n/// md.comp.outlined-segmented-button.outline.width (Enabled / Container)\n$outline-width: 1px;\n/// md.comp.outlined-segmented-button.with-icon.icon.size (Enabled / Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.outlined-segmented-button.disabled.icon.color (Disabled / Icon)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.disabled.outline.color (Disabled / Container)\n$disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.outlined-segmented-button.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.outlined-segmented-button.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.outlined-segmented-button.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.outlined-segmented-button.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-segmented-button.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.outlined-segmented-button.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.outlined-segmented-button.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.outlined-segmented-button.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.outlined-segmented-button.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.outlined-segmented-button.outline.color (Enabled / Container)\n$outline-color: md-sys-color.$outline;\n/// md.comp.outlined-segmented-button.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.outlined-segmented-button.selected.container.color (Enabled / Container)\n$selected-container-color: md-sys-color.$secondary-container;\n/// md.comp.outlined-segmented-button.selected.focus.icon.color (Focused / Icon)\n$selected-focus-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.focus.label-text.color (Focused / Label text)\n$selected-focus-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.focus.state-layer.color (Focused / State layer)\n$selected-focus-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.hover.icon.color (Hovered / Icon)\n$selected-hover-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.hover.label-text.color (Hovered / Label text)\n$selected-hover-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.hover.state-layer.color (Hovered / State layer)\n$selected-hover-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.label-text.color (Enabled / Label text)\n$selected-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.pressed.icon.color (Pressed (ripple) / Icon)\n$selected-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.pressed.label-text.color (Pressed (ripple) / Label text)\n$selected-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.selected.with-icon.icon.color (Enabled / Icon)\n$selected-with-icon-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.outlined-segmented-button.shape (Enabled / Container)\n$shape: md-sys-shape.$corner-full;\n/// md.comp.outlined-segmented-button.unselected.focus.icon.color (Focused / Icon)\n$unselected-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.focus.label-text.color (Focused / Label text)\n$unselected-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.focus.state-layer.color (Focused / State layer)\n$unselected-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.hover.icon.color (Hovered / Icon)\n$unselected-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.hover.label-text.color (Hovered / Label text)\n$unselected-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.hover.state-layer.color (Hovered / State layer)\n$unselected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.label-text.color (Enabled / Label text)\n$unselected-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.pressed.icon.color (Pressed (ripple) / Icon)\n$unselected-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.pressed.label-text.color (Pressed (ripple) / Label text)\n$unselected-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.unselected.with-icon.icon.color (Enabled / Icon)\n$unselected-with-icon-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-segmented-button.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-outlined-select.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.outlined-select.menu.cascading-menu-indicator.icon.size (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-size: 24px;\n/// md.comp.outlined-select.menu.divider.height (Enabled / Divider)\n$menu-divider-height: 1px;\n/// md.comp.outlined-select.menu.list-item.container.height (Enabled / Container)\n$menu-list-item-container-height: 48px;\n/// md.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.size (Enabled / Leading icon)\n$menu-list-item-with-leading-icon-leading-icon-size: 24px;\n/// md.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon)\n$menu-list-item-with-trailing-icon-trailing-icon-size: 24px;\n/// md.comp.outlined-select.text-field.container.height (Enabled / Container)\n///\n/// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height.\n$text-field-container-height: 56px;\n/// md.comp.outlined-select.text-field.disabled.input-text.opacity (Disabled / Input text)\n$text-field-disabled-input-text-opacity: 0.38;\n/// md.comp.outlined-select.text-field.disabled.label-text.opacity (Disabled / Label text)\n$text-field-disabled-label-text-opacity: 0.38;\n/// md.comp.outlined-select.text-field.disabled.leading-icon.opacity (Disabled / Leading icon)\n$text-field-disabled-leading-icon-opacity: 0.38;\n/// md.comp.outlined-select.text-field.disabled.outline.opacity (Disabled / Container)\n$text-field-disabled-outline-opacity: 0.12;\n/// md.comp.outlined-select.text-field.disabled.outline.width (Disabled / Container)\n$text-field-disabled-outline-width: 1px;\n/// md.comp.outlined-select.text-field.disabled.supporting-text.opacity (Disabled / Supporting text)\n$text-field-disabled-supporting-text-opacity: 0.38;\n/// md.comp.outlined-select.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-opacity: 0.38;\n/// md.comp.outlined-select.text-field.hover.outline.width (Hovered / Container)\n$text-field-hover-outline-width: 1px;\n/// md.comp.outlined-select.text-field.leading-icon.size (Enabled / Leading icon)\n$text-field-leading-icon-size: 24px;\n/// md.comp.outlined-select.text-field.outline.width (Enabled / Container)\n$text-field-outline-width: 1px;\n/// md.comp.outlined-select.text-field.trailing-icon.size (Enabled / Trailing icon)\n$text-field-trailing-icon-size: 24px;\n/// md.comp.outlined-select.menu.cascading-menu-indicator.icon.color (Enabled / Icon)\n$menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.menu.container.color (Enabled / Container)\n$menu-container-color: md-sys-color.$surface-container;\n/// md.comp.outlined-select.menu.container.elevation (Enabled / Container)\n$menu-container-elevation: md-sys-elevation.$level2;\n/// md.comp.outlined-select.menu.container.shadow-color (Enabled / Container)\n$menu-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.outlined-select.menu.container.shape (Enabled / Container)\n$menu-container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.outlined-select.menu.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$menu-container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.outlined-select.menu.divider.color (Enabled / Divider)\n$menu-divider-color: md-sys-color.$surface-variant;\n/// md.comp.outlined-select.menu.list-item.label-text.color (Enabled / Label text)\n$menu-list-item-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.menu.list-item.label-text.font (Enabled / Label text)\n$menu-list-item-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.outlined-select.menu.list-item.label-text.line-height (Enabled / Label text)\n$menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.outlined-select.menu.list-item.label-text.size (Enabled / Label text)\n$menu-list-item-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.outlined-select.menu.list-item.label-text.tracking (Enabled / Label text)\n$menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.outlined-select.menu.list-item.label-text.weight (Enabled / Label text)\n$menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.outlined-select.menu.list-item.selected.container.color (Enabled / Container)\n$menu-list-item-selected-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.color (Enabled / Leading icon)\n$menu-list-item-with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon)\n$menu-list-item-with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.caret.color (Enabled / Caret)\n///\n/// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text.\n$text-field-caret-color: md-sys-color.$primary;\n/// md.comp.outlined-select.text-field.container.color (Enabled / Container)\n$text-field-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.outlined-select.text-field.container.shape (Enabled / Container)\n$text-field-container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.outlined-select.text-field.disabled.input-text.color (Disabled / Input text)\n$text-field-disabled-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.disabled.label-text.color (Disabled / Label text)\n$text-field-disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.disabled.leading-icon.color (Disabled / Leading icon)\n$text-field-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.disabled.outline.color (Disabled / Container)\n$text-field-disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.disabled.supporting-text.color (Disabled / Supporting text)\n$text-field-disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.disabled.trailing-icon.color (Disabled / Trailing icon)\n$text-field-disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.error.focus.caret.color (Error / Focus)\n///\n/// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text.\n$text-field-error-focus-caret-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.focus.input-text.color (Error / Focus)\n$text-field-error-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.error.focus.label-text.color (Error / Focus)\n$text-field-error-focus-label-text-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.focus.leading-icon.color (Error / Focus)\n$text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.error.focus.outline.color (Error / Focus)\n$text-field-error-focus-outline-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.focus.supporting-text.color (Error / Focus)\n$text-field-error-focus-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.focus.trailing-icon.color (Error / Focus)\n$text-field-error-focus-trailing-icon-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.hover.input-text.color (Error / Hover)\n$text-field-error-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.error.hover.label-text.color (Error / Hover)\n$text-field-error-hover-label-text-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-select.text-field.error.hover.leading-icon.color (Error / Hover)\n$text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.error.hover.outline.color (Error / Hover)\n$text-field-error-hover-outline-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-select.text-field.error.hover.state-layer.color (Error / Hover)\n$text-field-error-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.error.hover.state-layer.opacity (Error / Hover)\n$text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-select.text-field.error.hover.supporting-text.color (Error / Hover)\n$text-field-error-hover-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.hover.trailing-icon.color (Error / Hover)\n$text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-select.text-field.error.input-text.color (Error)\n$text-field-error-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.error.label-text.color (Error)\n$text-field-error-label-text-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.leading-icon.color (Error)\n$text-field-error-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.error.outline.color (Error)\n$text-field-error-outline-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.supporting-text.color (Error)\n$text-field-error-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.error.trailing-icon.color (Error)\n$text-field-error-trailing-icon-color: md-sys-color.$error;\n/// md.comp.outlined-select.text-field.focus.input-text.color (Focused / Input text)\n$text-field-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.focus.label-text.color (Focused / Label text)\n$text-field-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-select.text-field.focus.leading-icon.color (Focused / Leading icon)\n$text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.focus.outline.color (Focused / Container)\n$text-field-focus-outline-color: md-sys-color.$primary;\n/// md.comp.outlined-select.text-field.focus.outline.width (Focused / Container)\n$text-field-focus-outline-width: md-sys-state-focus-indicator.$thickness;\n/// md.comp.outlined-select.text-field.focus.supporting-text.color (Focused / Supporting text)\n$text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.focus.trailing-icon.color (Focused / Trailing icon)\n$text-field-focus-trailing-icon-color: md-sys-color.$primary;\n/// md.comp.outlined-select.text-field.hover.input-text.color (Hovered / Input text)\n$text-field-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.hover.label-text.color (Hovered / Label text)\n$text-field-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.hover.leading-icon.color (Hovered / Leading icon)\n$text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.hover.outline.color (Hovered / Container)\n$text-field-hover-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.hover.state-layer.color (Hovered / State layer)\n$text-field-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.hover.state-layer.opacity (Hovered / State layer)\n$text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.outlined-select.text-field.hover.supporting-text.color (Hovered / Supporting text)\n$text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.hover.trailing-icon.color (Hovered / Trailing icon)\n$text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.input-text.color (Enabled / Input text)\n$text-field-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-select.text-field.input-text.font (Enabled / Input text)\n$text-field-input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.outlined-select.text-field.input-text.line-height (Enabled / Input text)\n$text-field-input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.outlined-select.text-field.input-text.size (Enabled / Input text)\n$text-field-input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.outlined-select.text-field.input-text.tracking (Enabled / Input text)\n$text-field-input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.outlined-select.text-field.input-text.weight (Enabled / Input text)\n$text-field-input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.outlined-select.text-field.label-text.color (Enabled / Label text)\n$text-field-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.label-text.font (Enabled / Label text)\n$text-field-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.outlined-select.text-field.label-text.line-height (Enabled / Label text)\n$text-field-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.outlined-select.text-field.label-text.populated.line-height (Enabled / Label text)\n$text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.outlined-select.text-field.label-text.populated.size (Enabled / Label text)\n$text-field-label-text-populated-size: md-sys-typescale.$body-small-size;\n/// md.comp.outlined-select.text-field.label-text.size (Enabled / Label text)\n$text-field-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.outlined-select.text-field.label-text.tracking (Enabled / Label text)\n$text-field-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.outlined-select.text-field.label-text.weight (Enabled / Label text)\n$text-field-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.outlined-select.text-field.leading-icon.color (Enabled / Leading icon)\n$text-field-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.outline.color (Enabled / Container)\n$text-field-outline-color: md-sys-color.$outline;\n/// md.comp.outlined-select.text-field.supporting-text.color (Enabled / Supporting text)\n$text-field-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.text-field.supporting-text.font (Enabled / Supporting text)\n$text-field-supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.outlined-select.text-field.supporting-text.line-height (Enabled / Supporting text)\n$text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.outlined-select.text-field.supporting-text.size (Enabled / Supporting text)\n$text-field-supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.outlined-select.text-field.supporting-text.tracking (Enabled / Supporting text)\n$text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.outlined-select.text-field.supporting-text.weight (Enabled / Supporting text)\n$text-field-supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.outlined-select.text-field.trailing-icon.color (Enabled / Trailing icon)\n$text-field-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-select.menu.list-item.label-text.type (Enabled / Label text)\n@mixin menu-list-item-label-text-type {\n  font-family: $menu-list-item-label-text-font;\n  font-size: $menu-list-item-label-text-size;\n  font-weight: $menu-list-item-label-text-weight;\n  letter-spacing: $menu-list-item-label-text-tracking;\n  line-height: $menu-list-item-label-text-line-height;\n}\n/// md.comp.outlined-select.text-field.input-text.type (Enabled / Input text)\n@mixin text-field-input-text-type {\n  font-family: $text-field-input-text-font;\n  font-size: $text-field-input-text-size;\n  font-weight: $text-field-input-text-weight;\n  letter-spacing: $text-field-input-text-tracking;\n  line-height: $text-field-input-text-line-height;\n}\n/// md.comp.outlined-select.text-field.label-text.type (Enabled / Label text)\n@mixin text-field-label-text-type {\n  font-family: $text-field-label-text-font;\n  font-size: $text-field-label-text-size;\n  font-weight: $text-field-label-text-weight;\n  letter-spacing: $text-field-label-text-tracking;\n  line-height: $text-field-label-text-line-height;\n}\n/// md.comp.outlined-select.text-field.supporting-text.type (Enabled / Supporting text)\n@mixin text-field-supporting-text-type {\n  font-family: $text-field-supporting-text-font;\n  font-size: $text-field-supporting-text-size;\n  font-weight: $text-field-supporting-text-weight;\n  letter-spacing: $text-field-supporting-text-tracking;\n  line-height: $text-field-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-outlined-text-field.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.outlined-text-field.container.height (Enabled / Container)\n///\n/// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height.\n$container-height: 56px;\n/// md.comp.outlined-text-field.disabled.input-text.opacity (Disabled / Input text)\n$disabled-input-text-opacity: 0.38;\n/// md.comp.outlined-text-field.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.outlined-text-field.disabled.leading-icon.opacity (Disabled / Leading icon)\n$disabled-leading-icon-opacity: 0.38;\n/// md.comp.outlined-text-field.disabled.outline.opacity (Disabled / Outline)\n$disabled-outline-opacity: 0.12;\n/// md.comp.outlined-text-field.disabled.outline.width (Disabled / Outline)\n$disabled-outline-width: 1px;\n/// md.comp.outlined-text-field.disabled.supporting-text.opacity (Disabled / Supporting text)\n$disabled-supporting-text-opacity: 0.38;\n/// md.comp.outlined-text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$disabled-trailing-icon-opacity: 0.38;\n/// md.comp.outlined-text-field.focus.outline.width (Focused / Outline)\n$focus-outline-width: 3px;\n/// md.comp.outlined-text-field.hover.outline.width (Hovered / Outline)\n$hover-outline-width: 1px;\n/// md.comp.outlined-text-field.leading-icon.size (Enabled / Leading icon)\n$leading-icon-size: 24px;\n/// md.comp.outlined-text-field.outline.width (Enabled / Outline)\n$outline-width: 1px;\n/// md.comp.outlined-text-field.trailing-icon.size (Enabled / Trailing icon)\n$trailing-icon-size: 24px;\n/// md.comp.outlined-text-field.caret.color (Enabled / Caret)\n$caret-color: md-sys-color.$primary;\n/// md.comp.outlined-text-field.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.outlined-text-field.disabled.input-text.color (Disabled / Input text)\n$disabled-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.disabled.leading-icon.color (Disabled / Leading icon)\n$disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.disabled.outline.color (Disabled / Outline)\n$disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.disabled.supporting-text.color (Disabled / Supporting text)\n$disabled-supporting-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.disabled.trailing-icon.color (Disabled / Trailing icon)\n$disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.error.focus.caret.color (Enabled / Caret)\n$error-focus-caret-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.focus.indicator.outline.color (Focused / Focus indicator)\n///\n/// @deprecated Deprecating - instead use focus outline tokens\n$error-focus-indicator-outline-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.focus.input-text.color (Error / Focus)\n$error-focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.error.focus.label-text.color (Error / Focus)\n$error-focus-label-text-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.focus.leading-icon.color (Error / Focus)\n$error-focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.error.focus.outline.color (Error / Focus)\n$error-focus-outline-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.focus.supporting-text.color (Error / Focus)\n$error-focus-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.focus.trailing-icon.color (Error / Focus)\n$error-focus-trailing-icon-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.hover.input-text.color (Error / Hover)\n$error-hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.error.hover.label-text.color (Error / Hover)\n$error-hover-label-text-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-text-field.error.hover.leading-icon.color (Error / Hover)\n$error-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.error.hover.outline.color (Error / Hover)\n$error-hover-outline-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-text-field.error.hover.supporting-text.color (Error / Hover)\n$error-hover-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.hover.trailing-icon.color (Error / Hover)\n$error-hover-trailing-icon-color: md-sys-color.$on-error-container;\n/// md.comp.outlined-text-field.error.input-text.color (Error)\n$error-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.error.label-text.color (Error)\n$error-label-text-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.leading-icon.color (Error)\n$error-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.error.outline.color (Error)\n$error-outline-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.supporting-text.color (Error)\n$error-supporting-text-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.error.trailing-icon.color (Error)\n$error-trailing-icon-color: md-sys-color.$error;\n/// md.comp.outlined-text-field.focus.indicator.outline.color (Focused / Focus indicator)\n///\n/// @deprecated Deprecating - instead use focus outline tokens\n$focus-indicator-outline-color: md-sys-color.$secondary;\n/// md.comp.outlined-text-field.focus.indicator.outline.thickness (Focused / Focus indicator)\n///\n/// @deprecated Deprecating - instead use focus outline tokens\n$focus-indicator-outline-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.outlined-text-field.focus.input-text.color (Focused / Input text)\n$focus-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.outlined-text-field.focus.leading-icon.color (Focused / Leading icon)\n$focus-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.focus.outline.color (Focused / Outline)\n$focus-outline-color: md-sys-color.$primary;\n/// md.comp.outlined-text-field.focus.supporting-text.color (Focused / Supporting text)\n$focus-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.focus.trailing-icon.color (Focused / Trailing icon)\n$focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.hover.input-text.color (Hovered / Input text)\n$hover-input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.hover.leading-icon.color (Hovered / Leading icon)\n$hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.hover.outline.color (Hovered / Outline)\n$hover-outline-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.hover.supporting-text.color (Hovered / Supporting text)\n$hover-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.hover.trailing-icon.color (Hovered / Trailing icon)\n$hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.input-text.color (Enabled / Input text)\n$input-text-color: md-sys-color.$on-surface;\n/// md.comp.outlined-text-field.input-text.font (Enabled / Input text)\n$input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.outlined-text-field.input-text.line-height (Enabled / Input text)\n$input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.outlined-text-field.input-text.placeholder.color (Enabled / Input text)\n$input-text-placeholder-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.input-text.prefix.color (Enabled / Input text)\n$input-text-prefix-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.input-text.size (Enabled / Input text)\n$input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.outlined-text-field.input-text.suffix.color (Enabled / Input text)\n$input-text-suffix-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.input-text.tracking (Enabled / Input text)\n$input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.outlined-text-field.input-text.weight (Enabled / Input text)\n$input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.outlined-text-field.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.outlined-text-field.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.outlined-text-field.label-text.populated.line-height (Enabled / Label text)\n$label-text-populated-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.outlined-text-field.label-text.populated.size (Enabled / Label text)\n$label-text-populated-size: md-sys-typescale.$body-small-size;\n/// md.comp.outlined-text-field.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.outlined-text-field.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.outlined-text-field.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.outlined-text-field.leading-icon.color (Enabled / Leading icon)\n$leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.outline.color (Enabled / Outline)\n$outline-color: md-sys-color.$outline;\n/// md.comp.outlined-text-field.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.outlined-text-field.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.outlined-text-field.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.outlined-text-field.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.outlined-text-field.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.outlined-text-field.trailing-icon.color (Enabled / Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.outlined-text-field.input-text.type (Enabled / Input text)\n@mixin input-text-type {\n  font-family: $input-text-font;\n  font-size: $input-text-size;\n  font-weight: $input-text-weight;\n  letter-spacing: $input-text-tracking;\n  line-height: $input-text-line-height;\n}\n/// md.comp.outlined-text-field.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n/// md.comp.outlined-text-field.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-plain-tooltip.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.plain-tooltip.container.color (Enabled / Container)\n$container-color: md-sys-color.$inverse-surface;\n/// md.comp.plain-tooltip.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.plain-tooltip.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.plain-tooltip.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.plain-tooltip.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.plain-tooltip.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.plain-tooltip.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.plain-tooltip.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.plain-tooltip.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-primary-navigation-tab.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.primary-navigation-tab.active-indicator.height (Enabled / Active indicator)\n$active-indicator-height: 3px;\n/// md.comp.primary-navigation-tab.active-indicator.shape (Enabled / Active indicator)\n$active-indicator-shape: 3px 3px 0px 0px;\n/// md.comp.primary-navigation-tab.container.height (Enabled / Container)\n$container-height: 48px;\n/// md.comp.primary-navigation-tab.divider.height (Enabled / Divider)\n///\n/// @deprecated Use standalone divider component instead of nested tokens.\n$divider-height: 1px;\n/// md.comp.primary-navigation-tab.with-icon-and-label-text.container.height (Enabled / Container)\n$with-icon-and-label-text-container-height: 64px;\n/// md.comp.primary-navigation-tab.with-icon.icon.size (Enabled / Icon)\n$with-icon-icon-size: 24px;\n/// md.comp.primary-navigation-tab.active-indicator.color (Enabled / Active indicator)\n$active-indicator-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.active.focus.state-layer.color (Focused / State layer)\n$active-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.active.focus.state-layer.opacity (Focused / State layer)\n$active-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.primary-navigation-tab.active.hover.state-layer.color (Hovered / State layer)\n$active-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.active.hover.state-layer.opacity (Hovered / State layer)\n$active-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.primary-navigation-tab.active.pressed.state-layer.color (Pressed (ripple) / State layer)\n$active-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.active.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.primary-navigation-tab.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.primary-navigation-tab.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.primary-navigation-tab.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.primary-navigation-tab.divider.color (Enabled / Divider)\n///\n/// @deprecated Use standalone divider component instead of nested tokens.\n$divider-color: md-sys-color.$surface-variant;\n/// md.comp.primary-navigation-tab.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.primary-navigation-tab.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;\n/// md.comp.primary-navigation-tab.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.primary-navigation-tab.inactive.focus.state-layer.color (Focused / State layer)\n$inactive-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.inactive.focus.state-layer.opacity (Focused / State layer)\n$inactive-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.primary-navigation-tab.inactive.hover.state-layer.color (Hovered / State layer)\n$inactive-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.inactive.hover.state-layer.opacity (Hovered / State layer)\n$inactive-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.primary-navigation-tab.inactive.pressed.state-layer.color (Pressed (ripple) / State layer)\n$inactive-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.inactive.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$inactive-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.primary-navigation-tab.with-icon.active.focus.icon.color (Focused / Icon)\n$with-icon-active-focus-icon-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-icon.active.hover.icon.color (Hovered / Icon)\n$with-icon-active-hover-icon-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-icon.active.icon.color (Enabled / Icon)\n$with-icon-active-icon-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-icon.active.pressed.icon.color (Pressed (ripple) / Icon)\n$with-icon-active-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-icon.inactive.focus.icon.color (Focused / Icon)\n$with-icon-inactive-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.with-icon.inactive.hover.icon.color (Hovered / Icon)\n$with-icon-inactive-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.with-icon.inactive.icon.color (Enabled / Icon)\n$with-icon-inactive-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.primary-navigation-tab.with-icon.inactive.pressed.icon.color (Pressed (ripple) / Icon)\n$with-icon-inactive-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.with-label-text.active.focus.label-text.color (Focused / Label text)\n$with-label-text-active-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-label-text.active.hover.label-text.color (Hovered / Label text)\n$with-label-text-active-hover-label-text-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-label-text.active.label-text.color (Enabled / Label text)\n$with-label-text-active-label-text-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-label-text.active.pressed.label-text.color (Pressed (ripple) / Label text)\n$with-label-text-active-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.primary-navigation-tab.with-label-text.inactive.focus.label-text.color (Focused / Label text)\n$with-label-text-inactive-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.with-label-text.inactive.hover.label-text.color (Hovered / Label text)\n$with-label-text-inactive-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.with-label-text.inactive.label-text.color (Enabled / Label text)\n$with-label-text-inactive-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.primary-navigation-tab.with-label-text.inactive.pressed.label-text.color (Pressed (ripple) / Label text)\n$with-label-text-inactive-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.primary-navigation-tab.with-label-text.label-text.font (Enabled / Label text)\n$with-label-text-label-text-font: md-sys-typescale.$title-small-font;\n/// md.comp.primary-navigation-tab.with-label-text.label-text.line-height (Enabled / Label text)\n$with-label-text-label-text-line-height: md-sys-typescale.$title-small-line-height;\n/// md.comp.primary-navigation-tab.with-label-text.label-text.size (Enabled / Label text)\n$with-label-text-label-text-size: md-sys-typescale.$title-small-size;\n/// md.comp.primary-navigation-tab.with-label-text.label-text.tracking (Enabled / Label text)\n$with-label-text-label-text-tracking: md-sys-typescale.$title-small-tracking;\n/// md.comp.primary-navigation-tab.with-label-text.label-text.weight (Enabled / Label text)\n$with-label-text-label-text-weight: md-sys-typescale.$title-small-weight;\n/// md.comp.primary-navigation-tab.with-label-text.label-text.type (Enabled / Label text)\n@mixin with-label-text-label-text-type {\n  font-family: $with-label-text-label-text-font;\n  font-size: $with-label-text-label-text-size;\n  font-weight: $with-label-text-label-text-weight;\n  letter-spacing: $with-label-text-label-text-tracking;\n  line-height: $with-label-text-label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-progress-indicator-circular.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.comp.progress-indicator.circular.active-indicator.thickness (Circular - baseline)\n$active-indicator-thickness: 4px;\n/// md.comp.progress-indicator.circular.active-indicator.wave.amplitude (Circular - baseline)\n$active-indicator-wave-amplitude: 1.6px;\n/// md.comp.progress-indicator.circular.active-indicator.wave.wavelength (Circular - baseline)\n$active-indicator-wave-wavelength: 15px;\n/// md.comp.progress-indicator.circular.size (Circular - baseline)\n$size: 40px;\n/// md.comp.progress-indicator.circular.thick.active-indicator.thickness ([Deprecated] Circular - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-active-indicator-thickness: 8px;\n/// md.comp.progress-indicator.circular.thick.size ([Deprecated] Circular - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-size: 52px;\n/// md.comp.progress-indicator.circular.thick.track-active-indicator-space ([Deprecated] Circular - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-track-active-indicator-space: 4px;\n/// md.comp.progress-indicator.circular.thick.track.thickness ([Deprecated] Circular - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-track-thickness: 8px;\n/// md.comp.progress-indicator.circular.track-active-indicator-space (Circular - baseline)\n$track-active-indicator-space: 4px;\n/// md.comp.progress-indicator.circular.track.thickness (Circular - baseline)\n$track-thickness: 4px;\n/// md.comp.progress-indicator.circular.with-wave.size (Circular - baseline)\n$with-wave-size: 48px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-progress-indicator-linear.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.comp.progress-indicator.linear.active-indicator.thickness (Linear - baseline)\n$active-indicator-thickness: 4px;\n/// md.comp.progress-indicator.linear.active-indicator.wave.amplitude (Linear - baseline)\n$active-indicator-wave-amplitude: 3px;\n/// md.comp.progress-indicator.linear.active-indicator.wave.wavelength (Linear - baseline)\n$active-indicator-wave-wavelength: 40px;\n/// md.comp.progress-indicator.linear.height (Linear - baseline)\n$height: 4px;\n/// md.comp.progress-indicator.linear.indeterminate.active-indicator.wave.wavelength (Linear - baseline)\n$indeterminate-active-indicator-wave-wavelength: 20px;\n/// md.comp.progress-indicator.linear.stop-indicator.size (Linear - baseline)\n$stop-indicator-size: 4px;\n/// md.comp.progress-indicator.linear.stop-indicator.trailing-space (Linear - baseline)\n$stop-indicator-trailing-space: 0px;\n/// md.comp.progress-indicator.linear.thick.active-indicator.thickness ([Deprecated] Linear - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-active-indicator-thickness: 8px;\n/// md.comp.progress-indicator.linear.thick.height ([Deprecated] Linear - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-height: 8px;\n/// md.comp.progress-indicator.linear.thick.stop-indicator.size ([Deprecated] Linear - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-stop-indicator-size: 4px;\n/// md.comp.progress-indicator.linear.thick.stop-indicator.trailing-space ([Deprecated] Linear - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-stop-indicator-trailing-space: 2px;\n/// md.comp.progress-indicator.linear.thick.track-active-indicator-space ([Deprecated] Linear - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-track-active-indicator-space: 4px;\n/// md.comp.progress-indicator.linear.thick.track.thickness ([Deprecated] Linear - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-track-thickness: 8px;\n/// md.comp.progress-indicator.linear.thick.with-wave.height ([Deprecated] Linear - thick)\n///\n/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code\n$thick-with-wave-height: 14px;\n/// md.comp.progress-indicator.linear.track-active-indicator-space (Linear - baseline)\n$track-active-indicator-space: 4px;\n/// md.comp.progress-indicator.linear.track.thickness (Linear - baseline)\n$track-thickness: 4px;\n/// md.comp.progress-indicator.linear.with-wave.height (Linear - baseline)\n$with-wave-height: 10px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-progress-indicator.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n\n/// md.comp.progress-indicator.active-indicator-track-space ([Deprecated] Enabled / [Deprecated] Spacing)\n///\n/// @deprecated Token is deprecated.\n$active-indicator-track-space: 4px;\n/// md.comp.progress-indicator.active-indicator.thickness ([Deprecated] Enabled / [Deprecated] Active Indicator)\n///\n/// @deprecated Token is deprecated.\n$active-indicator-thickness: 4px;\n/// md.comp.progress-indicator.stop-indicator.size ([Deprecated] Enabled / [Deprecated] Stop indicator)\n///\n/// @deprecated Token is deprecated.\n$stop-indicator-size: 4px;\n/// md.comp.progress-indicator.track.thickness ([Deprecated] Enabled / [Deprecated] Track)\n///\n/// @deprecated Token is deprecated.\n$track-thickness: 4px;\n/// md.comp.progress-indicator.active-indicator.color (Color)\n$active-indicator-color: md-sys-color.$primary;\n/// md.comp.progress-indicator.active-indicator.shape (Shape)\n$active-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.progress-indicator.stop-indicator.color (Color)\n$stop-indicator-color: md-sys-color.$primary;\n/// md.comp.progress-indicator.stop-indicator.shape (Shape)\n$stop-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.progress-indicator.track.color (Color)\n$track-color: md-sys-color.$secondary-container;\n/// md.comp.progress-indicator.track.shape (Shape)\n$track-shape: md-sys-shape.$corner-full;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-radio-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-state';\n\n/// md.comp.radio-button.disabled.selected.icon.opacity (Disabled / Icon)\n$disabled-selected-icon-opacity: 0.38;\n/// md.comp.radio-button.disabled.unselected.icon.opacity (Disabled / Icon)\n$disabled-unselected-icon-opacity: 0.38;\n/// md.comp.radio-button.icon.size (Enabled / Icon)\n$icon-size: 20px;\n/// md.comp.radio-button.state-layer.size (Enabled / State layer)\n$state-layer-size: 40px;\n/// md.comp.radio-button.disabled.selected.icon.color (Disabled / Icon)\n$disabled-selected-icon-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.disabled.unselected.icon.color (Disabled / Icon)\n$disabled-unselected-icon-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.selected.focus.icon.color (Focused / Icon)\n$selected-focus-icon-color: md-sys-color.$primary;\n/// md.comp.radio-button.selected.focus.state-layer.color (Focused / State layer)\n$selected-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.radio-button.selected.focus.state-layer.opacity (Focused / State layer)\n$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.radio-button.selected.hover.icon.color (Hovered / Icon)\n$selected-hover-icon-color: md-sys-color.$primary;\n/// md.comp.radio-button.selected.hover.state-layer.color (Hovered / State layer)\n$selected-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.radio-button.selected.hover.state-layer.opacity (Hovered / State layer)\n$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.radio-button.selected.icon.color (Enabled / Icon)\n$selected-icon-color: md-sys-color.$primary;\n/// md.comp.radio-button.selected.pressed.icon.color (Pressed (ripple) / Icon)\n$selected-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.radio-button.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.radio-button.unselected.focus.icon.color (Focused / Icon)\n$unselected-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.unselected.focus.state-layer.color (Focused / State layer)\n$unselected-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.unselected.focus.state-layer.opacity (Focused / State layer)\n$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.radio-button.unselected.hover.icon.color (Hovered / Icon)\n$unselected-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.unselected.hover.state-layer.color (Hovered / State layer)\n$unselected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.unselected.hover.state-layer.opacity (Hovered / State layer)\n$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.radio-button.unselected.icon.color (Enabled / Icon)\n$unselected-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.radio-button.unselected.pressed.icon.color (Pressed (ripple) / Icon)\n$unselected-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.radio-button.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.radio-button.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-rich-tooltip.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.rich-tooltip.action.focus.label-text.color (Focused / Label text)\n$action-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.rich-tooltip.action.focus.state-layer.color (Focused / State layer)\n$action-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.rich-tooltip.action.focus.state-layer.opacity (Focused / State layer)\n$action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.rich-tooltip.action.hover.label-text.color (Hovered / Label text)\n$action-hover-label-text-color: md-sys-color.$primary;\n/// md.comp.rich-tooltip.action.hover.state-layer.color (Hovered / State layer)\n$action-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.rich-tooltip.action.hover.state-layer.opacity (Hovered / State layer)\n$action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.rich-tooltip.action.label-text.color (Enabled / Label text)\n$action-label-text-color: md-sys-color.$primary;\n/// md.comp.rich-tooltip.action.label-text.font (Enabled / Label text)\n$action-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.rich-tooltip.action.label-text.line-height (Enabled / Label text)\n$action-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.rich-tooltip.action.label-text.size (Enabled / Label text)\n$action-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.rich-tooltip.action.label-text.tracking (Enabled / Label text)\n$action-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.rich-tooltip.action.label-text.weight (Enabled / Label text)\n$action-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.rich-tooltip.action.pressed.label-text.color (Pressed (ripple) / Label text)\n$action-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.rich-tooltip.action.pressed.state-layer.color (Pressed (ripple) / State layer)\n$action-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.rich-tooltip.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.rich-tooltip.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container;\n/// md.comp.rich-tooltip.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level2;\n/// md.comp.rich-tooltip.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.rich-tooltip.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-medium;\n/// md.comp.rich-tooltip.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.rich-tooltip.subhead.color (Enabled / Subhead)\n$subhead-color: md-sys-color.$on-surface-variant;\n/// md.comp.rich-tooltip.subhead.font (Enabled / Subhead)\n$subhead-font: md-sys-typescale.$title-small-font;\n/// md.comp.rich-tooltip.subhead.line-height (Enabled / Subhead)\n$subhead-line-height: md-sys-typescale.$title-small-line-height;\n/// md.comp.rich-tooltip.subhead.size (Enabled / Subhead)\n$subhead-size: md-sys-typescale.$title-small-size;\n/// md.comp.rich-tooltip.subhead.tracking (Enabled / Subhead)\n$subhead-tracking: md-sys-typescale.$title-small-tracking;\n/// md.comp.rich-tooltip.subhead.weight (Enabled / Subhead)\n$subhead-weight: md-sys-typescale.$title-small-weight;\n/// md.comp.rich-tooltip.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.rich-tooltip.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-medium-font;\n/// md.comp.rich-tooltip.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-medium-line-height;\n/// md.comp.rich-tooltip.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-medium-size;\n/// md.comp.rich-tooltip.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-medium-tracking;\n/// md.comp.rich-tooltip.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-medium-weight;\n/// md.comp.rich-tooltip.action.label-text.type (Enabled / Label text)\n@mixin action-label-text-type {\n  font-family: $action-label-text-font;\n  font-size: $action-label-text-size;\n  font-weight: $action-label-text-weight;\n  letter-spacing: $action-label-text-tracking;\n  line-height: $action-label-text-line-height;\n}\n/// md.comp.rich-tooltip.subhead.type (Enabled / Subhead)\n@mixin subhead-type {\n  font-family: $subhead-font;\n  font-size: $subhead-size;\n  font-weight: $subhead-weight;\n  letter-spacing: $subhead-tracking;\n  line-height: $subhead-line-height;\n}\n/// md.comp.rich-tooltip.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-scrim.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n\n/// md.comp.scrim.container.opacity\n$container-opacity: 0.32;\n/// md.comp.scrim.container.color\n$container-color: md-sys-color.$scrim;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-search-bar.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.search-bar.avatar.size (Enabled / Avatar)\n$avatar-size: 30px;\n/// md.comp.search-bar.container.height (Enabled / Container)\n$container-height: 56px;\n/// md.comp.search-bar.avatar.shape (Enabled / Avatar)\n$avatar-shape: md-sys-shape.$corner-full;\n/// md.comp.search-bar.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.search-bar.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.search-bar.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.search-bar.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.search-bar.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.search-bar.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.search-bar.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.search-bar.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.search-bar.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.search-bar.hover.supporting-text.color (Hovered / Supporting text)\n$hover-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.search-bar.input-text.color (Enabled / Input text)\n$input-text-color: md-sys-color.$on-surface;\n/// md.comp.search-bar.input-text.font (Enabled / Input text)\n$input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.search-bar.input-text.line-height (Enabled / Input text)\n$input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.search-bar.input-text.size (Enabled / Input text)\n$input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.search-bar.input-text.tracking (Enabled / Input text)\n$input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.search-bar.input-text.weight (Enabled / Input text)\n$input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.search-bar.leading-icon.color (Enabled / Leading icon)\n$leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.search-bar.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.search-bar.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.search-bar.pressed.supporting-text.color (Pressed (ripple) / Supporting text)\n$pressed-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.search-bar.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.search-bar.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.search-bar.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.search-bar.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.search-bar.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.search-bar.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.search-bar.trailing-icon.color (Enabled / Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.search-bar.input-text.type (Enabled / Input text)\n@mixin input-text-type {\n  font-family: $input-text-font;\n  font-size: $input-text-size;\n  font-weight: $input-text-weight;\n  letter-spacing: $input-text-tracking;\n  line-height: $input-text-line-height;\n}\n/// md.comp.search-bar.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-search-view.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.search-view.docked.header.container.height (Enabled / Container)\n$docked-header-container-height: 56px;\n/// md.comp.search-view.full-screen.header.container.height (Enabled / Container)\n$full-screen-header-container-height: 72px;\n/// md.comp.search-view.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.search-view.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.search-view.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.search-view.divider.color (Enabled / Divider)\n$divider-color: md-sys-color.$outline;\n/// md.comp.search-view.docked.container.shape (Enabled / Container)\n$docked-container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.search-view.full-screen.container.shape (Enabled / Container)\n$full-screen-container-shape: md-sys-shape.$corner-none;\n/// md.comp.search-view.header.input-text.color (Enabled / Input text)\n$header-input-text-color: md-sys-color.$on-surface;\n/// md.comp.search-view.header.input-text.font (Enabled / Input text)\n$header-input-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.search-view.header.input-text.line-height (Enabled / Input text)\n$header-input-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.search-view.header.input-text.size (Enabled / Input text)\n$header-input-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.search-view.header.input-text.tracking (Enabled / Input text)\n$header-input-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.search-view.header.input-text.weight (Enabled / Input text)\n$header-input-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.search-view.header.leading-icon.color (Enabled / Leading icon)\n$header-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.search-view.header.supporting-text.color (Enabled / Supporting text)\n$header-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.search-view.header.supporting-text.font (Enabled / Supporting text)\n$header-supporting-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.search-view.header.supporting-text.line-height (Enabled / Supporting text)\n$header-supporting-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.search-view.header.supporting-text.size (Enabled / Supporting text)\n$header-supporting-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.search-view.header.supporting-text.tracking (Enabled / Supporting text)\n$header-supporting-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.search-view.header.supporting-text.weight (Enabled / Supporting text)\n$header-supporting-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.search-view.header.trailing-icon.color (Enabled / Trailing icon)\n$header-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.search-view.header.input-text.type (Enabled / Input text)\n@mixin header-input-text-type {\n  font-family: $header-input-text-font;\n  font-size: $header-input-text-size;\n  font-weight: $header-input-text-weight;\n  letter-spacing: $header-input-text-tracking;\n  line-height: $header-input-text-line-height;\n}\n/// md.comp.search-view.header.supporting-text.type (Enabled / Supporting text)\n@mixin header-supporting-text-type {\n  font-family: $header-supporting-text-font;\n  font-size: $header-supporting-text-size;\n  font-weight: $header-supporting-text-weight;\n  letter-spacing: $header-supporting-text-tracking;\n  line-height: $header-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-secondary-navigation-tab.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.secondary-navigation-tab.active-indicator.height (Enabled / Active indicator)\n$active-indicator-height: 2px;\n/// md.comp.secondary-navigation-tab.container.height (Enabled / Container)\n$container-height: 48px;\n/// md.comp.secondary-navigation-tab.divider.height (Enabled / Divider)\n///\n/// @deprecated Please use standalone divider component tokens instead\n$divider-height: 1px;\n/// md.comp.secondary-navigation-tab.with-icon.icon.size (Enabled / Icon)\n$with-icon-icon-size: 24px;\n/// md.comp.secondary-navigation-tab.active-indicator.color (Enabled / Active indicator)\n$active-indicator-color: md-sys-color.$primary;\n/// md.comp.secondary-navigation-tab.active.label-text.color (Enabled / Label text)\n$active-label-text-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.secondary-navigation-tab.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.secondary-navigation-tab.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.secondary-navigation-tab.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.secondary-navigation-tab.divider.color (Enabled / Divider)\n///\n/// @deprecated Please use standalone divider component tokens instead\n$divider-color: md-sys-color.$surface-variant;\n/// md.comp.secondary-navigation-tab.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.secondary-navigation-tab.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;\n/// md.comp.secondary-navigation-tab.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.secondary-navigation-tab.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.secondary-navigation-tab.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.secondary-navigation-tab.inactive.label-text.color (Enabled / Label text)\n$inactive-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.secondary-navigation-tab.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$title-small-font;\n/// md.comp.secondary-navigation-tab.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$title-small-line-height;\n/// md.comp.secondary-navigation-tab.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$title-small-size;\n/// md.comp.secondary-navigation-tab.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$title-small-tracking;\n/// md.comp.secondary-navigation-tab.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$title-small-weight;\n/// md.comp.secondary-navigation-tab.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.secondary-navigation-tab.with-icon.active.icon.color (Enabled / Icon)\n$with-icon-active-icon-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.with-icon.focus.icon.color (Focused / Icon)\n$with-icon-focus-icon-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.with-icon.hover.icon.color (Hovered / Icon)\n$with-icon-hover-icon-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.with-icon.inactive.icon.color (Enabled / Icon)\n$with-icon-inactive-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.secondary-navigation-tab.with-icon.pressed.icon.color (Pressed (ripple) / Icon)\n$with-icon-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.secondary-navigation-tab.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-sheet-bottom.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.sheet.bottom.docked.drag-handle.height (Enabled / Drag handle)\n$docked-drag-handle-height: 4px;\n/// md.comp.sheet.bottom.docked.drag-handle.opacity (Enabled / Drag handle)\n///\n/// @deprecated Deprecated per b/278783477\n$docked-drag-handle-opacity: 0.4;\n/// md.comp.sheet.bottom.docked.drag-handle.width (Enabled / Drag handle)\n$docked-drag-handle-width: 32px;\n/// md.comp.sheet.bottom.docked.container.color (Enabled / Container)\n$docked-container-color: md-sys-color.$surface-container-low;\n/// md.comp.sheet.bottom.docked.container.shape (Enabled / Container)\n$docked-container-shape: md-sys-shape.$corner-extra-large-top;\n/// md.comp.sheet.bottom.docked.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$docked-container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.sheet.bottom.docked.drag-handle.color (Enabled / Drag handle)\n$docked-drag-handle-color: md-sys-color.$on-surface-variant;\n/// md.comp.sheet.bottom.docked.minimized.container.shape (Enabled / Container)\n$docked-minimized-container-shape: md-sys-shape.$corner-none;\n/// md.comp.sheet.bottom.docked.modal.container.elevation (Enabled / Container)\n$docked-modal-container-elevation: md-sys-elevation.$level1;\n/// md.comp.sheet.bottom.docked.standard.container.elevation (Enabled / Container)\n$docked-standard-container-elevation: md-sys-elevation.$level1;\n/// md.comp.sheet.bottom.focus.indicator.color (Enabled / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.sheet.bottom.focus.indicator.outline.offset (Enabled / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.sheet.bottom.focus.indicator.thickness (Enabled / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-sheet-floating.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n\n/// md.comp.sheet.floating.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-low;\n/// md.comp.sheet.floating.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level1;\n/// md.comp.sheet.floating.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.sheet.floating.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-sheet-side.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.sheet.side.docked.container.height (Enabled / Container)\n$docked-container-height: 100%;\n/// md.comp.sheet.side.docked.container.width (Enabled / Container)\n$docked-container-width: 256px;\n/// md.comp.sheet.side.detached.container.shape (Enabled / Container)\n$detached-container-shape: md-sys-shape.$corner-large;\n/// md.comp.sheet.side.docked.action.focus.label-text.color (Focused / Label text)\n$docked-action-focus-label-text-color: md-sys-color.$primary;\n/// md.comp.sheet.side.docked.action.focus.state-layer.color (Focused / State layer)\n$docked-action-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.sheet.side.docked.action.focus.state-layer.opacity (Focused / State layer)\n$docked-action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.sheet.side.docked.action.hover.label-text.color (Hovered / Label text)\n$docked-action-hover-label-text-color: md-sys-color.$primary;\n/// md.comp.sheet.side.docked.action.hover.state-layer.color (Hovered / State layer)\n$docked-action-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.sheet.side.docked.action.hover.state-layer.opacity (Hovered / State layer)\n$docked-action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.sheet.side.docked.action.pressed.label-text.color (Pressed (ripple) / Label text)\n$docked-action-pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.sheet.side.docked.action.pressed.state-layer.color (Pressed (ripple) / State layer)\n$docked-action-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.sheet.side.docked.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$docked-action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.sheet.side.docked.container.color (Enabled / Container)\n///\n/// @deprecated  Deprecated as part of the update from opacity based surfaces to tonal surfaces. Use “md.comp.sheet.side.docked.modal.container.color” or “md.comp.sheet.side.docked.standard.container.color” depending on intended configuration.\n$docked-container-color: md-sys-color.$surface;\n/// md.comp.sheet.side.docked.container.shape (Enabled / Container)\n$docked-container-shape: md-sys-shape.$corner-none;\n/// md.comp.sheet.side.docked.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$docked-container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.sheet.side.docked.divider.color (Enabled / Divider)\n$docked-divider-color: md-sys-color.$outline;\n/// md.comp.sheet.side.docked.focus.indicator.color (Focused / Focus indicator)\n$docked-focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.sheet.side.docked.focus.indicator.outline.offset (Focused / Focus indicator)\n$docked-focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.sheet.side.docked.focus.indicator.thickness (Focused / Focus indicator)\n$docked-focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.sheet.side.docked.headline.color (Enabled / Headline)\n$docked-headline-color: md-sys-color.$on-surface-variant;\n/// md.comp.sheet.side.docked.headline.font (Enabled / Headline)\n$docked-headline-font: md-sys-typescale.$title-large-font;\n/// md.comp.sheet.side.docked.headline.line-height (Enabled / Headline)\n$docked-headline-line-height: md-sys-typescale.$title-large-line-height;\n/// md.comp.sheet.side.docked.headline.size (Enabled / Headline)\n$docked-headline-size: md-sys-typescale.$title-large-size;\n/// md.comp.sheet.side.docked.headline.tracking (Enabled / Headline)\n$docked-headline-tracking: md-sys-typescale.$title-large-tracking;\n/// md.comp.sheet.side.docked.headline.weight (Enabled / Headline)\n$docked-headline-weight: md-sys-typescale.$title-large-weight;\n/// md.comp.sheet.side.docked.modal.container.color (Enabled / Container)\n$docked-modal-container-color: md-sys-color.$surface-container-low;\n/// md.comp.sheet.side.docked.modal.container.elevation (Enabled / Container)\n$docked-modal-container-elevation: md-sys-elevation.$level1;\n/// md.comp.sheet.side.docked.modal.container.shape (Enabled / Container)\n$docked-modal-container-shape: md-sys-shape.$corner-large-start;\n/// md.comp.sheet.side.docked.standard.container.color (Enabled / Container)\n$docked-standard-container-color: md-sys-color.$surface;\n/// md.comp.sheet.side.docked.standard.container.elevation (Enabled / Container)\n$docked-standard-container-elevation: md-sys-elevation.$level0;\n/// md.comp.sheet.side.docked.headline.type (Enabled / Headline)\n@mixin docked-headline-type {\n  font-family: $docked-headline-font;\n  font-size: $docked-headline-size;\n  font-weight: $docked-headline-weight;\n  letter-spacing: $docked-headline-tracking;\n  line-height: $docked-headline-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-slider-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.comp.slider.large.active.handle.height (Handle)\n$active-handle-height: 68px;\n/// md.comp.slider.large.active.track.height (Active track)\n$active-track-height: 56px;\n/// md.comp.slider.large.active.track.shape.leading (Active track)\n$active-track-shape-leading: 16px;\n/// md.comp.slider.large.icon.padding (Icon)\n$icon-padding: 6px;\n/// md.comp.slider.large.icon.size (Icon)\n$icon-size: 24px;\n/// md.comp.slider.large.inactive.track.height (Inactive track)\n$inactive-track-height: 56px;\n/// md.comp.slider.large.inactive.track.shape.trailing (Inactive track)\n$inactive-track-shape-trailing: 16px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-slider-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.comp.slider.medium.active.handle.height (Handle)\n$active-handle-height: 44px;\n/// md.comp.slider.medium.active.track.height (Active track)\n$active-track-height: 40px;\n/// md.comp.slider.medium.active.track.shape.leading (Active track)\n$active-track-shape-leading: 12px;\n/// md.comp.slider.medium.icon.padding (Icon)\n$icon-padding: 6px;\n/// md.comp.slider.medium.icon.size (Icon)\n$icon-size: 24px;\n/// md.comp.slider.medium.inactive.track.height (Inactive track)\n$inactive-track-height: 40px;\n/// md.comp.slider.medium.inactive.track.shape.trailing (Inactive track)\n$inactive-track-shape-trailing: 12px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-slider-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.comp.slider.small.active.handle.height (Handle)\n$active-handle-height: 44px;\n/// md.comp.slider.small.active.track.height (Active track)\n$active-track-height: 24px;\n/// md.comp.slider.small.active.track.shape.leading (Active track)\n$active-track-shape-leading: 8px;\n/// md.comp.slider.small.inactive.track.height (Inactive track)\n$inactive-track-height: 24px;\n/// md.comp.slider.small.inactive.track.shape.trailing (Inactive track)\n$inactive-track-shape-trailing: 8px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-slider-xlarge.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.comp.slider.xlarge.active.handle.height (Handle)\n$active-handle-height: 108px;\n/// md.comp.slider.xlarge.active.track.height (Active track)\n$active-track-height: 96px;\n/// md.comp.slider.xlarge.active.track.shape.leading (Active track)\n$active-track-shape-leading: 28px;\n/// md.comp.slider.xlarge.icon.padding (Icon)\n$icon-padding: 8px;\n/// md.comp.slider.xlarge.icon.size (Icon)\n$icon-size: 32px;\n/// md.comp.slider.xlarge.inactive.track.height (Inactive track)\n$inactive-track-height: 96px;\n/// md.comp.slider.xlarge.inactive.track.shape.trailing (Inactive track)\n$inactive-track-shape-trailing: 28px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-slider-xsmall.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.comp.slider.xsmall.active.handle.height (Handle)\n$active-handle-height: 44px;\n/// md.comp.slider.xsmall.active.track.height (Active track)\n$active-track-height: 16px;\n/// md.comp.slider.xsmall.active.track.shape.leading (Active track)\n$active-track-shape-leading: 8px;\n/// md.comp.slider.xsmall.inactive.track.height (Inactive track)\n$inactive-track-height: 16px;\n/// md.comp.slider.xsmall.inactive.track.shape.trailing (Inactive track)\n$inactive-track-shape-trailing: 8px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-slider.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.slider.active.container.opacity (Enabled / Container)\n///\n/// @deprecated Deprecate per NTC update\n$active-container-opacity: 1;\n/// md.comp.slider.active.handle.height (Enabled / Handle)\n$active-handle-height: 44px;\n/// md.comp.slider.active.handle.leading-space (Enabled / Handle)\n$active-handle-leading-space: 6px;\n/// md.comp.slider.active.handle.padding (Enabled / Handle)\n$active-handle-padding: 6px;\n/// md.comp.slider.active.handle.trailing-space (Enabled / Handle)\n$active-handle-trailing-space: 6px;\n/// md.comp.slider.active.handle.width (Enabled / Handle)\n$active-handle-width: 4px;\n/// md.comp.slider.active.stop-indicator.container.opacity (Enabled / Container)\n$active-stop-indicator-container-opacity: 1;\n/// md.comp.slider.active.track.height (Enabled / Track)\n$active-track-height: 16px;\n/// md.comp.slider.active.track.inner-corner.corner-size (Enabled / Track)\n$active-track-inner-corner-corner-size: 0 2px 2px 0;\n/// md.comp.slider.disabled.active.track.opacity (Disabled / Track)\n$disabled-active-track-opacity: 0.38;\n/// md.comp.slider.disabled.handle.opacity (Disabled / Handle)\n$disabled-handle-opacity: 0.38;\n/// md.comp.slider.disabled.handle.width (Disabled / Handle)\n$disabled-handle-width: 4px;\n/// md.comp.slider.disabled.inactive.track.opacity (Disabled / Track)\n$disabled-inactive-track-opacity: 0.12;\n/// md.comp.slider.disabled.stop-indicator.container.opacity (Disabled / [Deprecated] Container)\n///\n/// @deprecated Replacing with 2 tokens active and inactive stop indicator color\n$disabled-stop-indicator-container-opacity: 0.38;\n/// md.comp.slider.focus.handle.width (Focused / Handle)\n$focus-handle-width: 2px;\n/// md.comp.slider.handle.height (Enabled / Handle)\n$handle-height: 44px;\n/// md.comp.slider.handle.width (Enabled / Handle)\n$handle-width: 4px;\n/// md.comp.slider.hover.handle.width (Hovered / Handle)\n$hover-handle-width: 4px;\n/// md.comp.slider.inactive.container.opacity (Enabled / Container)\n///\n/// @deprecated Deprecate per NTC update\n$inactive-container-opacity: 1;\n/// md.comp.slider.inactive.stop-indicator.container.opacity (Enabled / Container)\n$inactive-stop-indicator-container-opacity: 1;\n/// md.comp.slider.inactive.track.height (Enabled / Track)\n$inactive-track-height: 16px;\n/// md.comp.slider.label.container.height (Enabled / Container)\n///\n/// @deprecated Deprecating per b/323475024\n$label-container-height: 28px;\n/// md.comp.slider.pressed.handle.width (Pressed (ripple) / Handle)\n$pressed-handle-width: 2px;\n/// md.comp.slider.state-layer.size (Enabled / [Deprecated] State layer)\n///\n/// @deprecated Deprecating per b/323475024\n$state-layer-size: 40px;\n/// md.comp.slider.stop-indicator.size (Enabled / Stop indicator)\n$stop-indicator-size: 4px;\n/// md.comp.slider.stop-indicator.trailing-space (Enabled / Stop indicator)\n$stop-indicator-trailing-space: 4px;\n/// md.comp.slider.value-indicator.active.bottom-space (Pressed (ripple) / Value indicator)\n$value-indicator-active-bottom-space: 12px;\n/// md.comp.slider.with-overlap.handle.outline.width (Enabled / Handle)\n///\n/// @deprecated Deprecating per b/323475024\n$with-overlap-handle-outline-width: 1px;\n/// md.comp.slider.with-tick-marks.active.container.opacity (Enabled / Container)\n///\n/// @deprecated Deprecated for less confusing token name\n$with-tick-marks-active-container-opacity: 0.38;\n/// md.comp.slider.with-tick-marks.container.size (Enabled / Container)\n///\n/// @deprecated Deprecating per b/323475024\n$with-tick-marks-container-size: 2px;\n/// md.comp.slider.with-tick-marks.disabled.container.opacity (Disabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated for new token with less confusion\n$with-tick-marks-disabled-container-opacity: 0.38;\n/// md.comp.slider.with-tick-marks.inactive.container.opacity (Enabled / Container)\n///\n/// @deprecated Deprecated for less confusing token name\n$with-tick-marks-inactive-container-opacity: 0.38;\n/// md.comp.slider.active.handle.shape (Enabled / Handle)\n$active-handle-shape: md-sys-shape.$corner-full;\n/// md.comp.slider.active.stop-indicator.container.color (Enabled / Container)\n$active-stop-indicator-container-color: md-sys-color.$on-primary;\n/// md.comp.slider.active.track.color (Enabled / Track)\n$active-track-color: md-sys-color.$primary;\n/// md.comp.slider.active.track.outer-corner.corner-size (Enabled / Track)\n$active-track-outer-corner-corner-size: md-sys-shape.$corner-full;\n/// md.comp.slider.active.track.shape (Enabled / Track)\n$active-track-shape: md-sys-shape.$corner-full;\n/// md.comp.slider.disabled.active.stop-indicator.container.color (Disabled / Stop)\n$disabled-active-stop-indicator-container-color: md-sys-color.$inverse-on-surface;\n/// md.comp.slider.disabled.active.track.color (Disabled / Track)\n$disabled-active-track-color: md-sys-color.$on-surface;\n/// md.comp.slider.disabled.handle.color (Disabled / Handle)\n$disabled-handle-color: md-sys-color.$on-surface;\n/// md.comp.slider.disabled.handle.elevation (Disabled / Handle)\n///\n/// @deprecated Deprecating per b/323475024\n$disabled-handle-elevation: md-sys-elevation.$level0;\n/// md.comp.slider.disabled.inactive.stop-indicator.container.color (Disabled / Stop)\n$disabled-inactive-stop-indicator-container-color: md-sys-color.$on-surface;\n/// md.comp.slider.disabled.inactive.track.color (Disabled / Track)\n$disabled-inactive-track-color: md-sys-color.$on-surface;\n/// md.comp.slider.disabled.stop-indicator.color (Disabled / Stop)\n///\n/// @deprecated Replacing with: Slider disabled inactive stop indicator container color\n$disabled-stop-indicator-color: md-sys-color.$on-surface;\n/// md.comp.slider.disabled.stop-indicator.color-selected (Disabled / Stop)\n///\n/// @deprecated Replacing with: Slider disabled active stop indicator container color\n$disabled-stop-indicator-color-selected: md-sys-color.$inverse-on-surface;\n/// md.comp.slider.disabled.stop-indicator.container.color (Disabled / [Deprecated] Container)\n///\n/// @deprecated Replacing with 2 tokens active and inactive stop indicator color\n$disabled-stop-indicator-container-color: md-sys-color.$on-surface;\n/// md.comp.slider.focus.active.track.color (Focused / Track)\n$focus-active-track-color: md-sys-color.$primary;\n/// md.comp.slider.focus.handle.color (Focused / Handle)\n///\n/// @deprecated Deprecating per b/323475024\n$focus-handle-color: md-sys-color.$primary;\n/// md.comp.slider.focus.inactive.track.color (Focused / Track)\n$focus-inactive-track-color: md-sys-color.$secondary-container;\n/// md.comp.slider.focus.state-layer.color (Focused / [Deprecated] State layer)\n///\n/// @deprecated Deprecating per b/323475024\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.slider.focus.state-layer.opacity (Focused / [Deprecated] State layer)\n///\n/// @deprecated Deprecating per b/323475024\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.slider.focus.stop.color (Focused / [Deprecated] Stop)\n///\n/// @deprecated No longer needed\n$focus-stop-color: md-sys-color.$primary;\n/// md.comp.slider.handle.color (Enabled / Handle)\n$handle-color: md-sys-color.$primary;\n/// md.comp.slider.handle.elevation (Enabled / Handle)\n///\n/// @deprecated Deprecating per b/323475024\n$handle-elevation: md-sys-elevation.$level1;\n/// md.comp.slider.handle.shadow-color (Enabled / Handle)\n///\n/// @deprecated Deprecating per b/323475024\n$handle-shadow-color: md-sys-color.$shadow;\n/// md.comp.slider.handle.shape (Enabled / Handle)\n$handle-shape: md-sys-shape.$corner-full;\n/// md.comp.slider.hover.handle.color (Hovered / Handle)\n///\n/// @deprecated Deprecate per NTC update\n$hover-handle-color: md-sys-color.$primary;\n/// md.comp.slider.hover.state-layer.color (Hovered / [Deprecated] State layer)\n///\n/// @deprecated Deprecating per b/323475024\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.slider.hover.state-layer.opacity (Hovered / [Deprecated] State layer)\n///\n/// @deprecated Deprecating per b/323475024\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.slider.hover.stop.color (Hovered / [Deprecated] Stop)\n///\n/// @deprecated Deprecate per NTC update\n$hover-stop-color: md-sys-color.$primary;\n/// md.comp.slider.inactive.stop-indicator.container.color (Enabled / Container)\n$inactive-stop-indicator-container-color: md-sys-color.$on-secondary-container;\n/// md.comp.slider.inactive.track.color (Enabled / Track)\n$inactive-track-color: md-sys-color.$secondary-container;\n/// md.comp.slider.inactive.track.shape (Enabled / Track)\n$inactive-track-shape: md-sys-shape.$corner-full;\n/// md.comp.slider.label.container.color (Enabled / Container)\n///\n/// @deprecated Deprecate per NTC update\n$label-container-color: md-sys-color.$primary;\n/// md.comp.slider.label.container.elevation (Enabled / Container)\n///\n/// @deprecated Deprecating per b/323475024\n$label-container-elevation: md-sys-elevation.$level0;\n/// md.comp.slider.label.label-text.color (Enabled / [Deprecated] Label text)\n///\n/// @deprecated No longer needed\n$label-label-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.slider.label.label-text.font (Enabled / [Deprecated] Label text)\n///\n/// @deprecated Deprecating per b/323475024\n$label-label-text-font: md-sys-typescale.$label-medium-font;\n/// md.comp.slider.label.label-text.font-size (Enabled / [Deprecated] Label text)\n///\n/// @deprecated For consistency, we have standardized on `size` instead of `font-size`. Replace usage with the suggested token.\n$label-label-text-font-size: md-sys-typescale.$label-medium-size;\n/// md.comp.slider.label.label-text.line-height (Enabled / [Deprecated] Label text)\n///\n/// @deprecated Deprecating per b/323475024\n$label-label-text-line-height: md-sys-typescale.$label-medium-line-height;\n/// md.comp.slider.label.label-text.size (Enabled / [Deprecated] Label text)\n///\n/// @deprecated Deprecating per b/323475024\n$label-label-text-size: md-sys-typescale.$label-medium-size;\n/// md.comp.slider.label.label-text.tracking (Enabled / [Deprecated] Label text)\n///\n/// @deprecated Deprecating per b/323475024\n$label-label-text-tracking: md-sys-typescale.$label-medium-tracking;\n/// md.comp.slider.label.label-text.weight (Enabled / [Deprecated] Label text)\n///\n/// @deprecated Deprecating per b/323475024\n$label-label-text-weight: md-sys-typescale.$label-medium-weight;\n/// md.comp.slider.pressed.active.track.color (Pressed (ripple) / Track)\n$pressed-active-track-color: md-sys-color.$primary;\n/// md.comp.slider.pressed.handle.color (Pressed (ripple) / Handle)\n$pressed-handle-color: md-sys-color.$primary;\n/// md.comp.slider.pressed.inactive.track.color (Pressed (ripple) / Track)\n$pressed-inactive-track-color: md-sys-color.$secondary-container;\n/// md.comp.slider.pressed.state-layer.color (Pressed (ripple) / [Deprecated] State layer)\n///\n/// @deprecated Deprecating per b/323475024\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.slider.pressed.state-layer.opacity (Pressed (ripple) / [Deprecated] State layer)\n///\n/// @deprecated Deprecating per b/323475024\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.slider.pressed.stop.color (Pressed (ripple) / [Deprecated] Stop)\n///\n/// @deprecated Deprecating per NTC update\n$pressed-stop-color: md-sys-color.$primary;\n/// md.comp.slider.slider-active-handle-color (Enabled / Handle)\n$slider-active-handle-color: md-sys-color.$primary;\n/// md.comp.slider.stop-indicator.color (Enabled / Stop indicator)\n$stop-indicator-color: md-sys-color.$on-secondary-container;\n/// md.comp.slider.stop-indicator.color-selected (Enabled / Stop indicator)\n$stop-indicator-color-selected: md-sys-color.$on-primary;\n/// md.comp.slider.stop-indicator.shape (Enabled / Stop indicator)\n$stop-indicator-shape: md-sys-shape.$corner-full;\n/// md.comp.slider.track.elevation (Enabled / Track)\n///\n/// @deprecated Deprecating per b/323475024\n$track-elevation: md-sys-elevation.$level0;\n/// md.comp.slider.value-indicator.container.color (Pressed (ripple) / Value indicator)\n$value-indicator-container-color: md-sys-color.$inverse-surface;\n/// md.comp.slider.value-indicator.label.label-text.color (Pressed (ripple) / Value indicator)\n$value-indicator-label-label-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.slider.value-indicator.label.label-text.font (Pressed (ripple) / Value indicator)\n$value-indicator-label-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.slider.value-indicator.label.label-text.line-height (Pressed (ripple) / Value indicator)\n$value-indicator-label-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.slider.value-indicator.label.label-text.size (Pressed (ripple) / Value indicator)\n$value-indicator-label-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.slider.value-indicator.label.label-text.tracking (Pressed (ripple) / Value indicator)\n$value-indicator-label-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.slider.value-indicator.label.label-text.weight (Pressed (ripple) / Value indicator)\n$value-indicator-label-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.slider.with-overlap.handle.outline.color (Enabled / Handle)\n///\n/// @deprecated Deprecating per b/323475024\n$with-overlap-handle-outline-color: md-sys-color.$on-primary;\n/// md.comp.slider.with-tick-marks.active.container.color (Enabled / Container)\n///\n/// @deprecated Deprecated for less confusing token name\n$with-tick-marks-active-container-color: md-sys-color.$on-primary;\n/// md.comp.slider.with-tick-marks.container.shape (Enabled / Container)\n///\n/// @deprecated Deprecating per b/323475024\n$with-tick-marks-container-shape: md-sys-shape.$corner-full;\n/// md.comp.slider.with-tick-marks.disabled.container.color (Disabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated for new token with less confusion\n$with-tick-marks-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.slider.with-tick-marks.inactive.container.color (Enabled / Container)\n///\n/// @deprecated Deprecated for less confusing token name\n$with-tick-marks-inactive-container-color: md-sys-color.$on-surface-variant;\n/// md.comp.slider.label.label-text.type (Enabled / [Deprecated] Subhead)\n///\n/// @deprecated Deprecating per b/298282669\n@mixin label-label-text-type {\n  font-family: $label-label-text-font;\n  font-size: $label-label-text-size;\n  font-weight: $label-label-text-weight;\n  letter-spacing: $label-label-text-tracking;\n  line-height: $label-label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-snackbar.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.snackbar.icon.size (Enabled / Icon)\n$icon-size: 24px;\n/// md.comp.snackbar.with-single-line.container.height (Enabled / Container)\n$with-single-line-container-height: 48px;\n/// md.comp.snackbar.with-two-lines.container.height (Enabled / Container)\n$with-two-lines-container-height: 68px;\n/// md.comp.snackbar.action.focus.label-text.color (Focused / Label text)\n$action-focus-label-text-color: md-sys-color.$inverse-primary;\n/// md.comp.snackbar.action.focus.state-layer.color (Focused / State layer)\n$action-focus-state-layer-color: md-sys-color.$inverse-primary;\n/// md.comp.snackbar.action.focus.state-layer.opacity (Focused / State layer)\n$action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.snackbar.action.hover.label-text.color (Hovered / Label text)\n$action-hover-label-text-color: md-sys-color.$inverse-primary;\n/// md.comp.snackbar.action.hover.state-layer.color (Hovered / State layer)\n$action-hover-state-layer-color: md-sys-color.$inverse-primary;\n/// md.comp.snackbar.action.hover.state-layer.opacity (Hovered / State layer)\n$action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.snackbar.action.label-text.color (Enabled / Label text)\n$action-label-text-color: md-sys-color.$inverse-primary;\n/// md.comp.snackbar.action.label-text.font (Enabled / Label text)\n$action-label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.snackbar.action.label-text.line-height (Enabled / Label text)\n$action-label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.snackbar.action.label-text.size (Enabled / Label text)\n$action-label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.snackbar.action.label-text.tracking (Enabled / Label text)\n$action-label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.snackbar.action.label-text.weight (Enabled / Label text)\n$action-label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.snackbar.action.pressed.label-text.color (Pressed (ripple) / Label text)\n$action-pressed-label-text-color: md-sys-color.$inverse-primary;\n/// md.comp.snackbar.action.pressed.state-layer.color (Pressed (ripple) / State layer)\n$action-pressed-state-layer-color: md-sys-color.$inverse-primary;\n/// md.comp.snackbar.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.snackbar.container.color (Enabled / Container)\n$container-color: md-sys-color.$inverse-surface;\n/// md.comp.snackbar.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.snackbar.container.shadow-color (Enabled / Container)\n$container-shadow-color: md-sys-color.$shadow;\n/// md.comp.snackbar.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-small;\n/// md.comp.snackbar.icon.color (Enabled / Icon)\n$icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.icon.focus.icon.color (Focused / Icon)\n$icon-focus-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.icon.focus.state-layer.color (Focused / State layer)\n$icon-focus-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.icon.focus.state-layer.opacity (Focused / State layer)\n$icon-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.snackbar.icon.hover.icon.color (Hovered / Icon)\n$icon-hover-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.icon.hover.state-layer.color (Hovered / State layer)\n$icon-hover-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.icon.hover.state-layer.opacity (Hovered / State layer)\n$icon-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.snackbar.icon.pressed.icon.color (Pressed (ripple) / Icon)\n$icon-pressed-icon-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.icon.pressed.state-layer.color (Pressed (ripple) / State layer)\n$icon-pressed-state-layer-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.icon.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$icon-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.snackbar.supporting-text.color (Enabled / Supporting text)\n$supporting-text-color: md-sys-color.$inverse-on-surface;\n/// md.comp.snackbar.supporting-text.font (Enabled / Supporting text)\n$supporting-text-font: md-sys-typescale.$body-medium-font;\n/// md.comp.snackbar.supporting-text.line-height (Enabled / Supporting text)\n$supporting-text-line-height: md-sys-typescale.$body-medium-line-height;\n/// md.comp.snackbar.supporting-text.size (Enabled / Supporting text)\n$supporting-text-size: md-sys-typescale.$body-medium-size;\n/// md.comp.snackbar.supporting-text.tracking (Enabled / Supporting text)\n$supporting-text-tracking: md-sys-typescale.$body-medium-tracking;\n/// md.comp.snackbar.supporting-text.weight (Enabled / Supporting text)\n$supporting-text-weight: md-sys-typescale.$body-medium-weight;\n/// md.comp.snackbar.action.label-text.type (Enabled / Label text)\n@mixin action-label-text-type {\n  font-family: $action-label-text-font;\n  font-size: $action-label-text-size;\n  font-weight: $action-label-text-weight;\n  letter-spacing: $action-label-text-tracking;\n  line-height: $action-label-text-line-height;\n}\n/// md.comp.snackbar.supporting-text.type (Enabled / Supporting text)\n@mixin supporting-text-type {\n  font-family: $supporting-text-font;\n  font-size: $supporting-text-size;\n  font-weight: $supporting-text-weight;\n  letter-spacing: $supporting-text-tracking;\n  line-height: $supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-split-button-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.split-button.large.between-space\n$between-space: 2px;\n/// md.comp.split-button.large.container.height\n$container-height: 96px;\n/// md.comp.split-button.large.leading-button.leading-space\n$leading-button-leading-space: 48px;\n/// md.comp.split-button.large.leading-button.trailing-space\n$leading-button-trailing-space: 48px;\n/// md.comp.split-button.large.trailing-button.icon.size\n$trailing-button-icon-size: 38px;\n/// md.comp.split-button.large.trailing-button.inner-corner.selected.corner-size\n$trailing-button-inner-corner-selected-corner-size: 50%;\n/// md.comp.split-button.large.trailing-button.leading-space\n$trailing-button-leading-space: 29px;\n/// md.comp.split-button.large.trailing-button.trailing-space\n$trailing-button-trailing-space: 29px;\n/// md.comp.split-button.large.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.split-button.large.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-small;\n/// md.comp.split-button.large.inner-corner.hovered.corner-size\n$inner-corner-hovered-corner-size: md-sys-shape.$corner-value-large-increased;\n/// md.comp.split-button.large.inner-corner.pressed.corner-size\n$inner-corner-pressed-corner-size: md-sys-shape.$corner-value-large-increased;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-split-button-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.split-button.medium.between-space\n$between-space: 2px;\n/// md.comp.split-button.medium.container.height\n$container-height: 56px;\n/// md.comp.split-button.medium.leading-button.leading-space\n$leading-button-leading-space: 24px;\n/// md.comp.split-button.medium.leading-button.trailing-space\n$leading-button-trailing-space: 24px;\n/// md.comp.split-button.medium.trailing-button.icon.size\n$trailing-button-icon-size: 26px;\n/// md.comp.split-button.medium.trailing-button.inner-corner.selected.corner-size\n$trailing-button-inner-corner-selected-corner-size: 50%;\n/// md.comp.split-button.medium.trailing-button.leading-space\n$trailing-button-leading-space: 15px;\n/// md.comp.split-button.medium.trailing-button.trailing-space\n$trailing-button-trailing-space: 15px;\n/// md.comp.split-button.medium.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.split-button.medium.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;\n/// md.comp.split-button.medium.inner-corner.hovered.corner-size\n$inner-corner-hovered-corner-size: md-sys-shape.$corner-value-medium;\n/// md.comp.split-button.medium.inner-corner.pressed.corner-size\n$inner-corner-pressed-corner-size: md-sys-shape.$corner-value-medium;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-split-button-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.split-button.small.between-space\n$between-space: 2px;\n/// md.comp.split-button.small.container.height\n$container-height: 40px;\n/// md.comp.split-button.small.leading-button.leading-space\n$leading-button-leading-space: 16px;\n/// md.comp.split-button.small.leading-button.trailing-space\n$leading-button-trailing-space: 12px;\n/// md.comp.split-button.small.trailing-button.icon.size\n$trailing-button-icon-size: 22px;\n/// md.comp.split-button.small.trailing-button.inner-corner.selected.corner-size\n$trailing-button-inner-corner-selected-corner-size: 50%;\n/// md.comp.split-button.small.trailing-button.leading-space\n$trailing-button-leading-space: 13px;\n/// md.comp.split-button.small.trailing-button.trailing-space\n$trailing-button-trailing-space: 13px;\n/// md.comp.split-button.small.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.split-button.small.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;\n/// md.comp.split-button.small.inner-corner.hovered.corner-size\n$inner-corner-hovered-corner-size: md-sys-shape.$corner-value-medium;\n/// md.comp.split-button.small.inner-corner.pressed.corner-size\n$inner-corner-pressed-corner-size: md-sys-shape.$corner-value-medium;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-split-button-xlarge.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.split-button.xlarge.between-space\n$between-space: 2px;\n/// md.comp.split-button.xlarge.container.height\n$container-height: 136px;\n/// md.comp.split-button.xlarge.leading-button.leading-space\n$leading-button-leading-space: 64px;\n/// md.comp.split-button.xlarge.leading-button.trailing-space\n$leading-button-trailing-space: 64px;\n/// md.comp.split-button.xlarge.trailing-button.icon.size\n$trailing-button-icon-size: 50px;\n/// md.comp.split-button.xlarge.trailing-button.inner-corner.selected.corner-size\n$trailing-button-inner-corner-selected-corner-size: 50%;\n/// md.comp.split-button.xlarge.trailing-button.leading-space\n$trailing-button-leading-space: 43px;\n/// md.comp.split-button.xlarge.trailing-button.trailing-space\n$trailing-button-trailing-space: 43px;\n/// md.comp.split-button.xlarge.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.split-button.xlarge.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-medium;\n/// md.comp.split-button.xlarge.inner-corner.hovered.corner-size\n$inner-corner-hovered-corner-size: md-sys-shape.$corner-value-large-increased;\n/// md.comp.split-button.xlarge.inner-corner.pressed.corner-size\n$inner-corner-pressed-corner-size: md-sys-shape.$corner-value-large-increased;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-split-button-xsmall.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-shape';\n\n/// md.comp.split-button.xsmall.between-space\n$between-space: 2px;\n/// md.comp.split-button.xsmall.container.height\n$container-height: 32px;\n/// md.comp.split-button.xsmall.leading-button.leading-space\n$leading-button-leading-space: 12px;\n/// md.comp.split-button.xsmall.leading-button.trailing-space\n$leading-button-trailing-space: 10px;\n/// md.comp.split-button.xsmall.outer-corner.corner-size\n$outer-corner-corner-size: 50%;\n/// md.comp.split-button.xsmall.trailing-button.icon.size\n$trailing-button-icon-size: 22px;\n/// md.comp.split-button.xsmall.trailing-button.inner-corner.selected.corner-size\n$trailing-button-inner-corner-selected-corner-size: 50%;\n/// md.comp.split-button.xsmall.trailing-button.leading-space\n$trailing-button-leading-space: 13px;\n/// md.comp.split-button.xsmall.trailing-button.trailing-space\n$trailing-button-trailing-space: 13px;\n/// md.comp.split-button.xsmall.container.shape\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.split-button.xsmall.inner-corner.corner-size\n$inner-corner-corner-size: md-sys-shape.$corner-value-extra-small;\n/// md.comp.split-button.xsmall.inner-corner.hovered.corner-size\n$inner-corner-hovered-corner-size: md-sys-shape.$corner-value-small;\n/// md.comp.split-button.xsmall.inner-corner.pressed.corner-size\n$inner-corner-pressed-corner-size: md-sys-shape.$corner-value-small;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-standard-menu-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.standard-menu-button.container.height (Enabled / Container)\n$container-height: 40px;\n/// md.comp.standard-menu-button.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.standard-menu-button.disabled.trailing-icon.opacity (Disabled / Trailing icon)\n$disabled-trailing-icon-opacity: 0.38;\n/// md.comp.standard-menu-button.trailing-icon.size (Enabled / Trailing icon)\n$trailing-icon-size: 18px;\n/// md.comp.standard-menu-button.with-icon.disabled.leading-icon.opacity (Disabled / Leading icon)\n$with-icon-disabled-leading-icon-opacity: 0.38;\n/// md.comp.standard-menu-button.with-icon.leading-icon.size (Enabled / Leading icon)\n$with-icon-leading-icon-size: 18px;\n/// md.comp.standard-menu-button.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.standard-menu-button.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.standard-menu-button.disabled.trailing-icon.color (Disabled / Trailing icon)\n$disabled-trailing-icon-color: md-sys-color.$on-surface;\n/// md.comp.standard-menu-button.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.standard-menu-button.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.standard-menu-button.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.standard-menu-button.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.standard-menu-button.focus.trailing-icon.color (Focused / Trailing icon)\n$focus-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.standard-menu-button.hover.trailing-icon.color (Hovered / Trailing icon)\n$hover-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.standard-menu-button.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.standard-menu-button.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.standard-menu-button.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.standard-menu-button.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.standard-menu-button.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.standard-menu-button.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)\n$pressed-trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.trailing-icon.color (Enabled / Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.with-icon.disabled.leading-icon.color (Disabled / Leading icon)\n$with-icon-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.standard-menu-button.with-icon.focus.icon.color (Focused / Icon)\n$with-icon-focus-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.with-icon.hover.leading-icon.color (Hovered / Leading icon)\n$with-icon-hover-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.with-icon.leading-icon.color (Enabled / Leading icon)\n$with-icon-leading-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.with-icon.pressed.icon.color (Pressed (ripple) / Icon)\n$with-icon-pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.standard-menu-button.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-suggestion-chip.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.suggestion-chip.container.height (Enabled / Container)\n$container-height: 32px;\n/// md.comp.suggestion-chip.disabled.label-text.opacity (Disabled / Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.suggestion-chip.elevated.disabled.container.opacity (Disabled / Container)\n$elevated-disabled-container-opacity: 0.12;\n/// md.comp.suggestion-chip.flat.disabled.outline.opacity (Disabled / Container)\n$flat-disabled-outline-opacity: 0.12;\n/// md.comp.suggestion-chip.flat.outline.width (Enabled / Container)\n$flat-outline-width: 1px;\n/// md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.opacity (Disabled / Icon)\n$with-leading-icon-disabled-leading-icon-opacity: 0.38;\n/// md.comp.suggestion-chip.with-leading-icon.leading-icon.size (Enabled / Icon)\n$with-leading-icon-leading-icon-size: 18px;\n/// md.comp.suggestion-chip.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-small;\n/// md.comp.suggestion-chip.container.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.suggestion-chip.disabled.label-text.color (Disabled / Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.suggestion-chip.dragged.container.elevation (Dragged / Container)\n$dragged-container-elevation: md-sys-elevation.$level4;\n/// md.comp.suggestion-chip.dragged.label-text.color (Dragged / Label text)\n$dragged-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.dragged.state-layer.color (Dragged / State layer)\n$dragged-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.dragged.state-layer.opacity (Dragged / State layer)\n$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;\n/// md.comp.suggestion-chip.elevated.container.color (Enabled / Container)\n$elevated-container-color: md-sys-color.$surface-container-low;\n/// md.comp.suggestion-chip.elevated.container.elevation (Enabled / Container)\n$elevated-container-elevation: md-sys-elevation.$level1;\n/// md.comp.suggestion-chip.elevated.container.shadow-color (Enabled / Container)\n$elevated-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.suggestion-chip.elevated.disabled.container.color (Disabled / Container)\n$elevated-disabled-container-color: md-sys-color.$on-surface;\n/// md.comp.suggestion-chip.elevated.disabled.container.elevation (Disabled / Container)\n$elevated-disabled-container-elevation: md-sys-elevation.$level0;\n/// md.comp.suggestion-chip.elevated.focus.container.elevation (Focused / Container)\n$elevated-focus-container-elevation: md-sys-elevation.$level1;\n/// md.comp.suggestion-chip.elevated.hover.container.elevation (Hovered / Container)\n$elevated-hover-container-elevation: md-sys-elevation.$level2;\n/// md.comp.suggestion-chip.elevated.pressed.container.elevation (Pressed (ripple) / Container)\n$elevated-pressed-container-elevation: md-sys-elevation.$level1;\n/// md.comp.suggestion-chip.flat.container.elevation (Enabled / Container)\n$flat-container-elevation: md-sys-elevation.$level0;\n/// md.comp.suggestion-chip.flat.disabled.outline.color (Disabled / Container)\n$flat-disabled-outline-color: md-sys-color.$on-surface;\n/// md.comp.suggestion-chip.flat.focus.outline.color (Focused / Container)\n$flat-focus-outline-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.flat.outline.color (Enabled / Container)\n$flat-outline-color: md-sys-color.$outline-variant;\n/// md.comp.suggestion-chip.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.suggestion-chip.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.suggestion-chip.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.suggestion-chip.focus.label-text.color (Focused / Label text)\n$focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.focus.state-layer.color (Focused / State layer)\n$focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.focus.state-layer.opacity (Focused / State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.suggestion-chip.hover.label-text.color (Hovered / Label text)\n$hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.hover.state-layer.color (Hovered / State layer)\n$hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.hover.state-layer.opacity (Hovered / State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.suggestion-chip.label-text.color (Enabled / Label text)\n$label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.label-text.font (Enabled / Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.suggestion-chip.label-text.line-height (Enabled / Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.suggestion-chip.label-text.size (Enabled / Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.suggestion-chip.label-text.tracking (Enabled / Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.suggestion-chip.label-text.weight (Enabled / Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.suggestion-chip.pressed.label-text.color (Pressed (ripple) / Label text)\n$pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.pressed.state-layer.color (Pressed (ripple) / State layer)\n$pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.suggestion-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.color (Disabled / Icon)\n$with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.suggestion-chip.with-leading-icon.dragged.leading-icon.color (Dragged / Icon)\n$with-leading-icon-dragged-leading-icon-color: md-sys-color.$primary;\n/// md.comp.suggestion-chip.with-leading-icon.focus.leading-icon.color (Focused / Icon)\n$with-leading-icon-focus-leading-icon-color: md-sys-color.$primary;\n/// md.comp.suggestion-chip.with-leading-icon.hover.leading-icon.color (Hovered / Icon)\n$with-leading-icon-hover-leading-icon-color: md-sys-color.$primary;\n/// md.comp.suggestion-chip.with-leading-icon.leading-icon.color (Enabled / Icon)\n$with-leading-icon-leading-icon-color: md-sys-color.$primary;\n/// md.comp.suggestion-chip.with-leading-icon.pressed.leading-icon.color (Pressed (ripple) / Icon)\n$with-leading-icon-pressed-leading-icon-color: md-sys-color.$primary;\n/// md.comp.suggestion-chip.label-text.type (Enabled / Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-switch.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n\n/// md.comp.switch.disabled.handle.opacity (Disabled / Handle)\n///\n/// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design\n$disabled-handle-opacity: 0.38;\n/// md.comp.switch.disabled.selected.handle.opacity (Disabled / Handle)\n$disabled-selected-handle-opacity: 1;\n/// md.comp.switch.disabled.selected.icon.opacity (Disabled / Icon)\n$disabled-selected-icon-opacity: 0.38;\n/// md.comp.switch.disabled.track.opacity (Disabled / Track)\n$disabled-track-opacity: 0.12;\n/// md.comp.switch.disabled.unselected.handle.opacity (Disabled / Handle)\n$disabled-unselected-handle-opacity: 0.38;\n/// md.comp.switch.disabled.unselected.icon.opacity (Disabled / Icon)\n$disabled-unselected-icon-opacity: 0.38;\n/// md.comp.switch.handle.height (Enabled / Handle)\n///\n/// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design\n$handle-height: 20px;\n/// md.comp.switch.handle.width (Enabled / Handle)\n///\n/// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design\n$handle-width: 20px;\n/// md.comp.switch.pressed.handle.height (Enabled / Handle)\n$pressed-handle-height: 28px;\n/// md.comp.switch.pressed.handle.width (Enabled / Handle)\n$pressed-handle-width: 28px;\n/// md.comp.switch.selected.handle.height (Enabled / Handle)\n$selected-handle-height: 24px;\n/// md.comp.switch.selected.handle.width (Enabled / Handle)\n$selected-handle-width: 24px;\n/// md.comp.switch.selected.icon.size (Enabled / Icon)\n$selected-icon-size: 16px;\n/// md.comp.switch.state-layer.size (Enabled / State layer)\n$state-layer-size: 40px;\n/// md.comp.switch.track.height (Enabled / Track)\n$track-height: 32px;\n/// md.comp.switch.track.outline.width (Enabled / Track)\n$track-outline-width: 2px;\n/// md.comp.switch.track.width (Enabled / Track)\n$track-width: 52px;\n/// md.comp.switch.unselected.handle.height (Enabled / Handle)\n$unselected-handle-height: 16px;\n/// md.comp.switch.unselected.handle.width (Enabled / Handle)\n$unselected-handle-width: 16px;\n/// md.comp.switch.unselected.icon.size (Enabled / Icon)\n$unselected-icon-size: 16px;\n/// md.comp.switch.with-icon.handle.height (Enabled / Handle)\n$with-icon-handle-height: 24px;\n/// md.comp.switch.with-icon.handle.width (Enabled / Handle)\n$with-icon-handle-width: 24px;\n/// md.comp.switch.disabled.handle.elevation (Disabled / Handle)\n///\n/// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design\n$disabled-handle-elevation: md-sys-elevation.$level0;\n/// md.comp.switch.disabled.selected.handle.color (Disabled / Handle)\n$disabled-selected-handle-color: md-sys-color.$surface;\n/// md.comp.switch.disabled.selected.icon.color (Disabled / Icon)\n$disabled-selected-icon-color: md-sys-color.$on-surface;\n/// md.comp.switch.disabled.selected.track.color (Disabled / Track)\n$disabled-selected-track-color: md-sys-color.$on-surface;\n/// md.comp.switch.disabled.unselected.handle.color (Disabled / Handle)\n$disabled-unselected-handle-color: md-sys-color.$on-surface;\n/// md.comp.switch.disabled.unselected.icon.color (Disabled / Icon)\n$disabled-unselected-icon-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.disabled.unselected.track.color (Disabled / Track)\n$disabled-unselected-track-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.disabled.unselected.track.outline.color (Disabled / Track)\n$disabled-unselected-track-outline-color: md-sys-color.$on-surface;\n/// md.comp.switch.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.switch.focus.indicator.offset (Focused / Focus indicator)\n$focus-indicator-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.switch.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.switch.handle.elevation (Enabled / Handle)\n///\n/// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design\n$handle-elevation: md-sys-elevation.$level1;\n/// md.comp.switch.handle.shadow-color (Enabled / Handle)\n///\n/// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design\n$handle-shadow-color: md-sys-color.$shadow;\n/// md.comp.switch.handle.shape (Enabled / Handle)\n$handle-shape: md-sys-shape.$corner-full;\n/// md.comp.switch.selected.focus.handle.color (Focused / Handle)\n$selected-focus-handle-color: md-sys-color.$primary-container;\n/// md.comp.switch.selected.focus.icon.color (Focused / Icon)\n$selected-focus-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.switch.selected.focus.state-layer.color (Focused / Track)\n$selected-focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.switch.selected.focus.state-layer.opacity (Focused / Track)\n$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.switch.selected.focus.track.color (Focused / Track)\n$selected-focus-track-color: md-sys-color.$primary;\n/// md.comp.switch.selected.handle.color (Enabled / Handle)\n$selected-handle-color: md-sys-color.$on-primary;\n/// md.comp.switch.selected.hover.handle.color (Hovered / Handle)\n$selected-hover-handle-color: md-sys-color.$primary-container;\n/// md.comp.switch.selected.hover.icon.color (Hovered / Icon)\n$selected-hover-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.switch.selected.hover.state-layer.color (Hovered / Track)\n$selected-hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.switch.selected.hover.state-layer.opacity (Hovered / Track)\n$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.switch.selected.hover.track.color (Hovered / Track)\n$selected-hover-track-color: md-sys-color.$primary;\n/// md.comp.switch.selected.icon.color (Enabled / Icon)\n$selected-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.switch.selected.pressed.handle.color (Pressed (ripple) / Handle)\n$selected-pressed-handle-color: md-sys-color.$primary-container;\n/// md.comp.switch.selected.pressed.icon.color (Pressed (ripple) / Icon)\n$selected-pressed-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.switch.selected.pressed.state-layer.color (Pressed (ripple) / Track)\n$selected-pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.switch.selected.pressed.state-layer.opacity (Pressed (ripple) / Track)\n$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.switch.selected.pressed.track.color (Pressed (ripple) / Track)\n$selected-pressed-track-color: md-sys-color.$primary;\n/// md.comp.switch.selected.track.color (Enabled / Track)\n$selected-track-color: md-sys-color.$primary;\n/// md.comp.switch.state-layer.shape (Enabled / State layer)\n$state-layer-shape: md-sys-shape.$corner-full;\n/// md.comp.switch.track.shape (Enabled / Track)\n$track-shape: md-sys-shape.$corner-full;\n/// md.comp.switch.unselected.focus.handle.color (Focused / Handle)\n$unselected-focus-handle-color: md-sys-color.$on-surface-variant;\n/// md.comp.switch.unselected.focus.icon.color (Focused / Icon)\n$unselected-focus-icon-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.focus.state-layer.color (Focused / Track)\n$unselected-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.switch.unselected.focus.state-layer.opacity (Focused / Track)\n$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.switch.unselected.focus.track.color (Focused / Track)\n$unselected-focus-track-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.focus.track.outline.color (Focused / Track)\n$unselected-focus-track-outline-color: md-sys-color.$outline;\n/// md.comp.switch.unselected.handle.color (Enabled / Handle)\n$unselected-handle-color: md-sys-color.$outline;\n/// md.comp.switch.unselected.hover.handle.color (Hovered / Handle)\n$unselected-hover-handle-color: md-sys-color.$on-surface-variant;\n/// md.comp.switch.unselected.hover.icon.color (Hovered / Icon)\n$unselected-hover-icon-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.hover.state-layer.color (Hovered / Track)\n$unselected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.switch.unselected.hover.state-layer.opacity (Hovered / Track)\n$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.switch.unselected.hover.track.color (Hovered / Track)\n$unselected-hover-track-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.hover.track.outline.color (Hovered / Track)\n$unselected-hover-track-outline-color: md-sys-color.$outline;\n/// md.comp.switch.unselected.icon.color (Enabled / Icon)\n$unselected-icon-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.pressed.handle.color (Pressed (ripple) / Handle)\n$unselected-pressed-handle-color: md-sys-color.$on-surface-variant;\n/// md.comp.switch.unselected.pressed.icon.color (Pressed (ripple) / Icon)\n$unselected-pressed-icon-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.pressed.state-layer.color (Pressed (ripple) / Track)\n$unselected-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.switch.unselected.pressed.state-layer.opacity (Pressed (ripple) / Track)\n$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.switch.unselected.pressed.track.color (Pressed (ripple) / Track)\n$unselected-pressed-track-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.pressed.track.outline.color (Pressed (ripple) / Track)\n$unselected-pressed-track-outline-color: md-sys-color.$outline;\n/// md.comp.switch.unselected.track.color (Enabled / Track)\n$unselected-track-color: md-sys-color.$surface-container-highest;\n/// md.comp.switch.unselected.track.outline.color (Enabled / Track)\n$unselected-track-outline-color: md-sys-color.$outline;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-text-button.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.text-button.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 40px;\n/// md.comp.text-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.text-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-opacity: 0.38;\n/// md.comp.text-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-size: 18px;\n/// md.comp.text-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Bug: should not have been created. Remove any shadows on navigation bars.\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.text-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.text-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.text-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.text-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.text-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.text-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)\n$focus-label-text-color: md-sys-color.$primary;\n/// md.comp.text-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-color: md-sys-color.$primary;\n/// md.comp.text-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)\n$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.text-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)\n$hover-label-text-color: md-sys-color.$primary;\n/// md.comp.text-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-color: md-sys-color.$primary;\n/// md.comp.text-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)\n$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.text-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-color: md-sys-color.$primary;\n/// md.comp.text-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-font: md-sys-typescale.$label-large-font;\n/// md.comp.text-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-line-height: md-sys-typescale.$label-large-line-height;\n/// md.comp.text-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-size: md-sys-typescale.$label-large-size;\n/// md.comp.text-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-tracking: md-sys-typescale.$label-large-tracking;\n/// md.comp.text-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)\n$label-text-weight: md-sys-typescale.$label-large-weight;\n/// md.comp.text-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text)\n$pressed-label-text-color: md-sys-color.$primary;\n/// md.comp.text-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-color: md-sys-color.$primary;\n/// md.comp.text-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.text-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)\n$with-icon-disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.text-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)\n$with-icon-focus-icon-color: md-sys-color.$primary;\n/// md.comp.text-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)\n$with-icon-hover-icon-color: md-sys-color.$primary;\n/// md.comp.text-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon)\n$with-icon-icon-color: md-sys-color.$primary;\n/// md.comp.text-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)\n$with-icon-pressed-icon-color: md-sys-color.$primary;\n/// md.comp.text-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)\n@mixin label-text-type {\n  font-family: $label-text-font;\n  font-size: $label-text-size;\n  font-weight: $label-text-weight;\n  letter-spacing: $label-text-tracking;\n  line-height: $label-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-time-input.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-state-focus-indicator';\n@use 'md-sys-typescale';\n\n/// md.comp.time-input.period-selector.container.height (Enabled / Container)\n$period-selector-container-height: 72px;\n/// md.comp.time-input.period-selector.container.width (Enabled / Container)\n$period-selector-container-width: 52px;\n/// md.comp.time-input.period-selector.outline.width (Enabled / Container)\n$period-selector-outline-width: 1px;\n/// md.comp.time-input.time-input-field.container.height (Enabled / Container)\n$time-input-field-container-height: 72px;\n/// md.comp.time-input.time-input-field.container.width (Enabled / Container)\n$time-input-field-container-width: 96px;\n/// md.comp.time-input.time-input-field.focus.outline.width (Focused / Container)\n$time-input-field-focus-outline-width: 2px;\n/// md.comp.time-input.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.time-input.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.time-input.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.time-input.focus.indicator.color (Focused / Focus indicator)\n$focus-indicator-color: md-sys-color.$secondary;\n/// md.comp.time-input.focus.indicator.outline.offset (Focused / Focus indicator)\n$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;\n/// md.comp.time-input.focus.indicator.thickness (Focused / Focus indicator)\n$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;\n/// md.comp.time-input.headline.color (Enabled / Headline)\n$headline-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.headline.font (Enabled / Headline)\n$headline-font: md-sys-typescale.$label-medium-font;\n/// md.comp.time-input.headline.line-height (Enabled / Headline)\n$headline-line-height: md-sys-typescale.$label-medium-line-height;\n/// md.comp.time-input.headline.size (Enabled / Headline)\n$headline-size: md-sys-typescale.$label-medium-size;\n/// md.comp.time-input.headline.tracking (Enabled / Headline)\n$headline-tracking: md-sys-typescale.$label-medium-tracking;\n/// md.comp.time-input.headline.weight (Enabled / Headline)\n$headline-weight: md-sys-typescale.$label-medium-weight;\n/// md.comp.time-input.period-selector.container.shape (Enabled / Container)\n$period-selector-container-shape: md-sys-shape.$corner-small;\n/// md.comp.time-input.period-selector.focus.state-layer.opacity (Focused / State layer)\n$period-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.time-input.period-selector.hover.state-layer.opacity (Hovered / State layer)\n$period-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.time-input.period-selector.label-text.font (Enabled / Label text)\n$period-selector-label-text-font: md-sys-typescale.$title-medium-font;\n/// md.comp.time-input.period-selector.label-text.line-height (Enabled / Label text)\n$period-selector-label-text-line-height: md-sys-typescale.$title-medium-line-height;\n/// md.comp.time-input.period-selector.label-text.size (Enabled / Label text)\n$period-selector-label-text-size: md-sys-typescale.$title-medium-size;\n/// md.comp.time-input.period-selector.label-text.tracking (Enabled / Label text)\n$period-selector-label-text-tracking: md-sys-typescale.$title-medium-tracking;\n/// md.comp.time-input.period-selector.label-text.weight (Enabled / Label text)\n$period-selector-label-text-weight: md-sys-typescale.$title-medium-weight;\n/// md.comp.time-input.period-selector.outline.color (Enabled / Container)\n$period-selector-outline-color: md-sys-color.$outline;\n/// md.comp.time-input.period-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$period-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.time-input.period-selector.selected.container.color (Enabled / Container)\n$period-selector-selected-container-color: md-sys-color.$tertiary-container;\n/// md.comp.time-input.period-selector.selected.focus.label-text.color (Focused / Label text)\n$period-selector-selected-focus-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-input.period-selector.selected.focus.state-layer.color (Focused / State layer)\n$period-selector-selected-focus-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-input.period-selector.selected.hover.label-text.color (Hovered / Label text)\n$period-selector-selected-hover-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-input.period-selector.selected.hover.state-layer.color (Hovered / State layer)\n$period-selector-selected-hover-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-input.period-selector.selected.label-text.color (Enabled / Label text)\n$period-selector-selected-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-input.period-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text)\n$period-selector-selected-pressed-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-input.period-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$period-selector-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-input.period-selector.unselected.focus.label-text.color (Focused / Label text)\n$period-selector-unselected-focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.period-selector.unselected.focus.state-layer.color (Focused / State layer)\n$period-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.period-selector.unselected.hover.label-text.color (Hovered / Label text)\n$period-selector-unselected-hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.period-selector.unselected.hover.state-layer.color (Hovered / State layer)\n$period-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.period-selector.unselected.label-text.color (Enabled / Label text)\n$period-selector-unselected-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.period-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text)\n$period-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.period-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$period-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.time-input.time-input-field.container.color (Enabled / Container)\n$time-input-field-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.time-input.time-input-field.container.shape (Enabled / Container)\n$time-input-field-container-shape: md-sys-shape.$corner-small;\n/// md.comp.time-input.time-input-field.focus.container.color (Focused / Container)\n$time-input-field-focus-container-color: md-sys-color.$primary-container;\n/// md.comp.time-input.time-input-field.focus.label-text.color (Focused / Label text)\n$time-input-field-focus-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.time-input.time-input-field.focus.outline.color (Focused / Container)\n$time-input-field-focus-outline-color: md-sys-color.$primary;\n/// md.comp.time-input.time-input-field.hover.label-text.color (Hovered / Label text)\n$time-input-field-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.time-input.time-input-field.hover.state-layer.color (Hovered / State layer)\n$time-input-field-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.time-input.time-input-field.hover.state-layer.opacity (Hovered / State layer)\n$time-input-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.time-input.time-input-field.label-text.color (Enabled / Label text)\n$time-input-field-label-text-color: md-sys-color.$on-surface;\n/// md.comp.time-input.time-input-field.label-text.font (Enabled / Label text)\n$time-input-field-label-text-font: md-sys-typescale.$display-medium-font;\n/// md.comp.time-input.time-input-field.label-text.line-height (Enabled / Label text)\n$time-input-field-label-text-line-height: md-sys-typescale.$display-medium-line-height;\n/// md.comp.time-input.time-input-field.label-text.size (Enabled / Label text)\n$time-input-field-label-text-size: md-sys-typescale.$display-medium-size;\n/// md.comp.time-input.time-input-field.label-text.tracking (Enabled / Label text)\n$time-input-field-label-text-tracking: md-sys-typescale.$display-medium-tracking;\n/// md.comp.time-input.time-input-field.label-text.weight (Enabled / Label text)\n$time-input-field-label-text-weight: md-sys-typescale.$display-medium-weight;\n/// md.comp.time-input.time-input-field.separator.color (Enabled / Separator)\n$time-input-field-separator-color: md-sys-color.$on-surface;\n/// md.comp.time-input.time-input-field.separator.font (Enabled / Separator)\n$time-input-field-separator-font: md-sys-typescale.$display-large-font;\n/// md.comp.time-input.time-input-field.separator.line-height (Enabled / Separator)\n$time-input-field-separator-line-height: md-sys-typescale.$display-large-line-height;\n/// md.comp.time-input.time-input-field.separator.size (Enabled / Separator)\n$time-input-field-separator-size: md-sys-typescale.$display-large-size;\n/// md.comp.time-input.time-input-field.separator.tracking (Enabled / Separator)\n$time-input-field-separator-tracking: md-sys-typescale.$display-large-tracking;\n/// md.comp.time-input.time-input-field.separator.weight (Enabled / Separator)\n$time-input-field-separator-weight: md-sys-typescale.$display-large-weight;\n/// md.comp.time-input.time-input-field.supporting-text.color (Enabled / Supporting text)\n$time-input-field-supporting-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-input.time-input-field.supporting-text.font (Enabled / Supporting text)\n$time-input-field-supporting-text-font: md-sys-typescale.$body-small-font;\n/// md.comp.time-input.time-input-field.supporting-text.line-height (Enabled / Supporting text)\n$time-input-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height;\n/// md.comp.time-input.time-input-field.supporting-text.size (Enabled / Supporting text)\n$time-input-field-supporting-text-size: md-sys-typescale.$body-small-size;\n/// md.comp.time-input.time-input-field.supporting-text.tracking (Enabled / Supporting text)\n$time-input-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking;\n/// md.comp.time-input.time-input-field.supporting-text.weight (Enabled / Supporting text)\n$time-input-field-supporting-text-weight: md-sys-typescale.$body-small-weight;\n/// md.comp.time-input.headline.type (Enabled / Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n/// md.comp.time-input.period-selector.label-text.type (Enabled / Label text)\n@mixin period-selector-label-text-type {\n  font-family: $period-selector-label-text-font;\n  font-size: $period-selector-label-text-size;\n  font-weight: $period-selector-label-text-weight;\n  letter-spacing: $period-selector-label-text-tracking;\n  line-height: $period-selector-label-text-line-height;\n}\n/// md.comp.time-input.time-input-field.label-text.type (Enabled / Label text)\n@mixin time-input-field-label-text-type {\n  font-family: $time-input-field-label-text-font;\n  font-size: $time-input-field-label-text-size;\n  font-weight: $time-input-field-label-text-weight;\n  letter-spacing: $time-input-field-label-text-tracking;\n  line-height: $time-input-field-label-text-line-height;\n}\n/// md.comp.time-input.time-input-field.separator.type (Enabled / Separator)\n@mixin time-input-field-separator-type {\n  font-family: $time-input-field-separator-font;\n  font-size: $time-input-field-separator-size;\n  font-weight: $time-input-field-separator-weight;\n  letter-spacing: $time-input-field-separator-tracking;\n  line-height: $time-input-field-separator-line-height;\n}\n/// md.comp.time-input.time-input-field.supporting-text.type (Enabled / Supporting text)\n@mixin time-input-field-supporting-text-type {\n  font-family: $time-input-field-supporting-text-font;\n  font-size: $time-input-field-supporting-text-size;\n  font-weight: $time-input-field-supporting-text-weight;\n  letter-spacing: $time-input-field-supporting-text-tracking;\n  line-height: $time-input-field-supporting-text-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-time-picker.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n@use 'md-sys-typescale';\n\n/// md.comp.time-picker.clock-dial.container.size (Enabled / Container)\n$clock-dial-container-size: 256px;\n/// md.comp.time-picker.clock-dial.selector.center.container.size (Enabled / Container)\n$clock-dial-selector-center-container-size: 8px;\n/// md.comp.time-picker.clock-dial.selector.handle.container.size (Enabled / Container)\n$clock-dial-selector-handle-container-size: 48px;\n/// md.comp.time-picker.clock-dial.selector.track.container.width (Enabled / Container)\n$clock-dial-selector-track-container-width: 2px;\n/// md.comp.time-picker.period-selector.horizontal.container.height (Enabled / Container)\n$period-selector-horizontal-container-height: 38px;\n/// md.comp.time-picker.period-selector.horizontal.container.width (Enabled / Container)\n$period-selector-horizontal-container-width: 216px;\n/// md.comp.time-picker.period-selector.outline.width (Enabled / Container)\n$period-selector-outline-width: 1px;\n/// md.comp.time-picker.period-selector.vertical.container.height (Enabled / Container)\n$period-selector-vertical-container-height: 80px;\n/// md.comp.time-picker.period-selector.vertical.container.width (Enabled / Container)\n$period-selector-vertical-container-width: 52px;\n/// md.comp.time-picker.time-selector.24h-vertical.container.width (Enabled / Container)\n$time-selector-24h-vertical-container-width: 114px;\n/// md.comp.time-picker.time-selector.container.height (Enabled / Container)\n$time-selector-container-height: 80px;\n/// md.comp.time-picker.time-selector.container.width (Enabled / Container)\n$time-selector-container-width: 96px;\n/// md.comp.time-picker.clock-dial.color (Enabled / Container)\n$clock-dial-color: md-sys-color.$surface-container-highest;\n/// md.comp.time-picker.clock-dial.color.ignore (Enabled / Container)\n///\n/// @deprecated Deprecating token due to typo in name. Please use md.comp.time-picker.clock-dial.color instead\"\n$clock-dial-color-ignore: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.clock-dial.label-text.font (Enabled / Label text)\n$clock-dial-label-text-font: md-sys-typescale.$body-large-font;\n/// md.comp.time-picker.clock-dial.label-text.line-height (Enabled / Label text)\n$clock-dial-label-text-line-height: md-sys-typescale.$body-large-line-height;\n/// md.comp.time-picker.clock-dial.label-text.size (Enabled / Label text)\n$clock-dial-label-text-size: md-sys-typescale.$body-large-size;\n/// md.comp.time-picker.clock-dial.label-text.tracking (Enabled / Label text)\n$clock-dial-label-text-tracking: md-sys-typescale.$body-large-tracking;\n/// md.comp.time-picker.clock-dial.label-text.weight (Enabled / Label text)\n$clock-dial-label-text-weight: md-sys-typescale.$body-large-weight;\n/// md.comp.time-picker.clock-dial.selected.label-text.color (Enabled / Label text)\n$clock-dial-selected-label-text-color: md-sys-color.$on-primary;\n/// md.comp.time-picker.clock-dial.selector.center.container.color (Enabled / Container)\n$clock-dial-selector-center-container-color: md-sys-color.$primary;\n/// md.comp.time-picker.clock-dial.selector.center.container.shape (Enabled / Container)\n$clock-dial-selector-center-container-shape: md-sys-shape.$corner-full;\n/// md.comp.time-picker.clock-dial.selector.handle.container.color (Enabled / Container)\n$clock-dial-selector-handle-container-color: md-sys-color.$primary;\n/// md.comp.time-picker.clock-dial.selector.handle.container.shape (Enabled / Container)\n$clock-dial-selector-handle-container-shape: md-sys-shape.$corner-full;\n/// md.comp.time-picker.clock-dial.selector.track.container.color (Enabled / Container)\n$clock-dial-selector-track-container-color: md-sys-color.$primary;\n/// md.comp.time-picker.clock-dial.shape (Enabled / Container)\n$clock-dial-shape: md-sys-shape.$corner-full;\n/// md.comp.time-picker.clock-dial.shape.ignore (Enabled / Container)\n///\n/// @deprecated Deprecating token due to typo in name. Please use md.comp.time-picker.clock-dial.shape instead\n$clock-dial-shape-ignore: md-sys-shape.$corner-full;\n/// md.comp.time-picker.clock-dial.unselected.label-text.color (Enabled / Label text)\n$clock-dial-unselected-label-text-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface-container-high;\n/// md.comp.time-picker.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.time-picker.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-extra-large;\n/// md.comp.time-picker.headline.color (Enabled / Headline)\n$headline-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.headline.font (Enabled / Headline)\n$headline-font: md-sys-typescale.$label-medium-font;\n/// md.comp.time-picker.headline.line-height (Enabled / Headline)\n$headline-line-height: md-sys-typescale.$label-medium-line-height;\n/// md.comp.time-picker.headline.size (Enabled / Headline)\n$headline-size: md-sys-typescale.$label-medium-size;\n/// md.comp.time-picker.headline.tracking (Enabled / Headline)\n$headline-tracking: md-sys-typescale.$label-medium-tracking;\n/// md.comp.time-picker.headline.weight (Enabled / Headline)\n$headline-weight: md-sys-typescale.$label-medium-weight;\n/// md.comp.time-picker.period-selector.container.shape (Enabled / Container)\n$period-selector-container-shape: md-sys-shape.$corner-small;\n/// md.comp.time-picker.period-selector.focus.state-layer.opacity (Focused / State layer)\n$period-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.time-picker.period-selector.hover.state-layer.opacity (Hovered / State layer)\n$period-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.time-picker.period-selector.label-text.font (Enabled / Label text)\n$period-selector-label-text-font: md-sys-typescale.$title-medium-font;\n/// md.comp.time-picker.period-selector.label-text.line-height (Enabled / Label text)\n$period-selector-label-text-line-height: md-sys-typescale.$title-medium-line-height;\n/// md.comp.time-picker.period-selector.label-text.size (Enabled / Label text)\n$period-selector-label-text-size: md-sys-typescale.$title-medium-size;\n/// md.comp.time-picker.period-selector.label-text.tracking (Enabled / Label text)\n$period-selector-label-text-tracking: md-sys-typescale.$title-medium-tracking;\n/// md.comp.time-picker.period-selector.label-text.weight (Enabled / Label text)\n$period-selector-label-text-weight: md-sys-typescale.$title-medium-weight;\n/// md.comp.time-picker.period-selector.outline.color (Enabled / Container)\n$period-selector-outline-color: md-sys-color.$outline;\n/// md.comp.time-picker.period-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$period-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.time-picker.period-selector.selected.container.color (Enabled / Container)\n$period-selector-selected-container-color: md-sys-color.$tertiary-container;\n/// md.comp.time-picker.period-selector.selected.focus.label-text.color (Focused / Label text)\n$period-selector-selected-focus-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-picker.period-selector.selected.focus.state-layer.color (Focused / State layer)\n$period-selector-selected-focus-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-picker.period-selector.selected.hover.label-text.color (Hovered / Label text)\n$period-selector-selected-hover-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-picker.period-selector.selected.hover.state-layer.color (Hovered / State layer)\n$period-selector-selected-hover-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-picker.period-selector.selected.label-text.color (Enabled / Label text)\n$period-selector-selected-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-picker.period-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text)\n$period-selector-selected-pressed-label-text-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-picker.period-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$period-selector-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container;\n/// md.comp.time-picker.period-selector.unselected.focus.label-text.color (Focused / Label text)\n$period-selector-unselected-focus-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.period-selector.unselected.focus.state-layer.color (Focused / State layer)\n$period-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.period-selector.unselected.hover.label-text.color (Hovered / Label text)\n$period-selector-unselected-hover-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.period-selector.unselected.hover.state-layer.color (Hovered / State layer)\n$period-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.period-selector.unselected.label-text.color (Enabled / Label text)\n$period-selector-unselected-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.period-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text)\n$period-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.period-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$period-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.time-picker.surface-tint-layer.color (Enabled / Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.time-picker.time-selector.container.shape (Enabled / Container)\n$time-selector-container-shape: md-sys-shape.$corner-small;\n/// md.comp.time-picker.time-selector.focus.state-layer.opacity (Focused / State layer)\n$time-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.time-picker.time-selector.hover.state-layer.opacity (Hovered / State layer)\n$time-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.time-picker.time-selector.label-text.font (Enabled / Label text)\n$time-selector-label-text-font: md-sys-typescale.$display-large-font;\n/// md.comp.time-picker.time-selector.label-text.line-height (Enabled / Label text)\n$time-selector-label-text-line-height: md-sys-typescale.$display-large-line-height;\n/// md.comp.time-picker.time-selector.label-text.size (Enabled / Label text)\n$time-selector-label-text-size: md-sys-typescale.$display-large-size;\n/// md.comp.time-picker.time-selector.label-text.tracking (Enabled / Label text)\n$time-selector-label-text-tracking: md-sys-typescale.$display-large-tracking;\n/// md.comp.time-picker.time-selector.label-text.weight (Enabled / Label text)\n$time-selector-label-text-weight: md-sys-typescale.$display-large-weight;\n/// md.comp.time-picker.time-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer)\n$time-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.time-picker.time-selector.selected.container.color (Enabled / Container)\n$time-selector-selected-container-color: md-sys-color.$primary-container;\n/// md.comp.time-picker.time-selector.selected.focus.label-text.color (Focused / Label text)\n$time-selector-selected-focus-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.time-picker.time-selector.selected.focus.state-layer.color (Focused / State layer)\n$time-selector-selected-focus-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.time-picker.time-selector.selected.hover.label-text.color (Hovered / Label text)\n$time-selector-selected-hover-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.time-picker.time-selector.selected.hover.state-layer.color (Hovered / State layer)\n$time-selector-selected-hover-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.time-picker.time-selector.selected.label-text.color (Enabled / Label text)\n$time-selector-selected-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.time-picker.time-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text)\n$time-selector-selected-pressed-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.time-picker.time-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$time-selector-selected-pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.time-picker.time-selector.separator.color (Enabled / Separator)\n$time-selector-separator-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.time-selector.separator.font (Enabled / Separator)\n$time-selector-separator-font: md-sys-typescale.$display-large-font;\n/// md.comp.time-picker.time-selector.separator.line-height (Enabled / Separator)\n$time-selector-separator-line-height: md-sys-typescale.$display-large-line-height;\n/// md.comp.time-picker.time-selector.separator.size (Enabled / Separator)\n$time-selector-separator-size: md-sys-typescale.$display-large-size;\n/// md.comp.time-picker.time-selector.separator.tracking (Enabled / Separator)\n$time-selector-separator-tracking: md-sys-typescale.$display-large-tracking;\n/// md.comp.time-picker.time-selector.separator.weight (Enabled / Separator)\n$time-selector-separator-weight: md-sys-typescale.$display-large-weight;\n/// md.comp.time-picker.time-selector.unselected.container.color (Enabled / Container)\n$time-selector-unselected-container-color: md-sys-color.$surface-container-highest;\n/// md.comp.time-picker.time-selector.unselected.focus.label-text.color (Focused / Label text)\n$time-selector-unselected-focus-label-text-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.time-selector.unselected.focus.state-layer.color (Focused / State layer)\n$time-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.time-selector.unselected.hover.label-text.color (Hovered / Label text)\n$time-selector-unselected-hover-label-text-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.time-selector.unselected.hover.state-layer.color (Hovered / State layer)\n$time-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.time-selector.unselected.label-text.color (Enabled / Label text)\n$time-selector-unselected-label-text-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.time-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text)\n$time-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.time-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)\n$time-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.time-picker.clock-dial.label-text.type (Enabled / Label text)\n@mixin clock-dial-label-text-type {\n  font-family: $clock-dial-label-text-font;\n  font-size: $clock-dial-label-text-size;\n  font-weight: $clock-dial-label-text-weight;\n  letter-spacing: $clock-dial-label-text-tracking;\n  line-height: $clock-dial-label-text-line-height;\n}\n/// md.comp.time-picker.headline.type (Enabled / Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n/// md.comp.time-picker.period-selector.label-text.type (Enabled / Label text)\n@mixin period-selector-label-text-type {\n  font-family: $period-selector-label-text-font;\n  font-size: $period-selector-label-text-size;\n  font-weight: $period-selector-label-text-weight;\n  letter-spacing: $period-selector-label-text-tracking;\n  line-height: $period-selector-label-text-line-height;\n}\n/// md.comp.time-picker.time-selector.label-text.type (Enabled / Label text)\n@mixin time-selector-label-text-type {\n  font-family: $time-selector-label-text-font;\n  font-size: $time-selector-label-text-size;\n  font-weight: $time-selector-label-text-weight;\n  letter-spacing: $time-selector-label-text-tracking;\n  line-height: $time-selector-label-text-line-height;\n}\n/// md.comp.time-picker.time-selector.separator.type (Enabled / Separator)\n@mixin time-selector-separator-type {\n  font-family: $time-selector-separator-font;\n  font-size: $time-selector-separator-size;\n  font-weight: $time-selector-separator-weight;\n  letter-spacing: $time-selector-separator-tracking;\n  line-height: $time-selector-separator-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-toolbar-docked.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n\n/// md.comp.toolbar.docked.container.height (Size)\n$container-height: 64px;\n/// md.comp.toolbar.docked.container.leading-space (Size)\n$container-leading-space: 16px;\n/// md.comp.toolbar.docked.container.max-spacing (Size)\n$container-max-spacing: 32px;\n/// md.comp.toolbar.docked.container.min-spacing (Size)\n$container-min-spacing: 4px;\n/// md.comp.toolbar.docked.container.trailing-space (Size)\n$container-trailing-space: 16px;\n/// md.comp.toolbar.docked.container.color (Color)\n///\n/// @deprecated Moving this token to the color token set\n$container-color: md-sys-color.$surface-container;\n/// md.comp.toolbar.docked.container.shape (Shape)\n$container-shape: md-sys-shape.$corner-none;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-toolbar-floating-fab.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n\n/// md.comp.toolbar.floating.fab.between-space\n$between-space: 8px;\n/// md.comp.toolbar.floating.fab.container.height (Expanded)\n$container-height: 56px;\n/// md.comp.toolbar.floating.fab.container.width (Expanded)\n$container-width: 56px;\n/// md.comp.toolbar.floating.fab.icon.size (Expanded)\n$icon-size: 24px;\n/// md.comp.toolbar.floating.fab.medium.container.height (Collapsed)\n$medium-container-height: 80px;\n/// md.comp.toolbar.floating.fab.medium.container.width (Collapsed)\n$medium-container-width: 80px;\n/// md.comp.toolbar.floating.fab.medium.icon.size (Collapsed)\n$medium-icon-size: 28px;\n/// md.comp.toolbar.floating.fab.container.elevation (Expanded)\n$container-elevation: md-sys-elevation.$level1;\n/// md.comp.toolbar.floating.fab.container.shape (Expanded)\n$container-shape: md-sys-shape.$corner-large;\n/// md.comp.toolbar.floating.fab.medium.container.elevation (Collapsed)\n$medium-container-elevation: md-sys-elevation.$level2;\n/// md.comp.toolbar.floating.fab.medium.container.shape (Collapsed)\n$medium-container-shape: md-sys-shape.$corner-large-increased;\n/// md.comp.toolbar.floating.fab.standard.container.color\n$standard-container-color: md-sys-color.$secondary-container;\n/// md.comp.toolbar.floating.fab.standard.icon.color\n$standard-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.floating.fab.vibrant.container.color\n$vibrant-container-color: md-sys-color.$tertiary-container;\n/// md.comp.toolbar.floating.fab.vibrant.icon.color\n$vibrant-icon-color: md-sys-color.$on-tertiary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-toolbar-floating.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n\n/// md.comp.toolbar.floating.container.between-space (Size)\n$container-between-space: 4px;\n/// md.comp.toolbar.floating.container.external-padding (Size)\n///\n/// @deprecated Deprecating for a vertical and horizontal option\n$container-external-padding: 16px;\n/// md.comp.toolbar.floating.container.height (Size)\n///\n/// @deprecated Deprecating this for a vertical and horizontal variant\n$container-height: 64px;\n/// md.comp.toolbar.floating.container.leading-space (Size)\n$container-leading-space: 8px;\n/// md.comp.toolbar.floating.container.trailing-space (Size)\n$container-trailing-space: 8px;\n/// md.comp.toolbar.floating.horizontal.container.external-space (Size)\n$horizontal-container-external-space: 16px;\n/// md.comp.toolbar.floating.horizontal.container.height (Size)\n$horizontal-container-height: 64px;\n/// md.comp.toolbar.floating.vertical.container.external-space (Size)\n$vertical-container-external-space: 24px;\n/// md.comp.toolbar.floating.vertical.container.width (Size)\n$vertical-container-width: 64px;\n/// md.comp.toolbar.floating.container.elevation (Elevation)\n$container-elevation: md-sys-elevation.$level3;\n/// md.comp.toolbar.floating.container.shape (Shape)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.toolbar.floating.standard.container.color (Color)\n///\n/// @deprecated Deprecating this token here and putting it into the color token set\n$standard-container-color: md-sys-color.$surface-container;\n/// md.comp.toolbar.floating.vibrant.button.selected.container.color (Color)\n///\n/// @deprecated Deprecating this token here and putting it into the color token set\n$vibrant-button-selected-container-color: md-sys-color.$surface-container;\n/// md.comp.toolbar.floating.vibrant.button.selected.icon.color (Color)\n///\n/// @deprecated Deprecating this token here and putting it into the color token set\n$vibrant-button-selected-icon-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.floating.vibrant.button.selected.text.color (Color)\n///\n/// @deprecated Deprecating this token here and putting it into the color token set\n$vibrant-button-selected-text-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.floating.vibrant.button.unselected.icon.color (Color)\n///\n/// @deprecated Deprecating this token here and putting it into the color token set\n$vibrant-button-unselected-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.floating.vibrant.button.unselected.text.color (Color)\n///\n/// @deprecated Deprecating this token here and putting it into the color token set\n$vibrant-button-unselected-text-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.floating.vibrant.container.color (Color)\n///\n/// @deprecated Deprecating this token here and putting it into the color token set\n$vibrant-container-color: md-sys-color.$primary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-toolbar-standard.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n\n/// md.comp.toolbar.standard.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.toolbar.standard.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.toolbar.standard.button.container.color (Enabled)\n$button-container-color: md-sys-color.$surface-container;\n/// md.comp.toolbar.standard.container.color (Enabled)\n$container-color: md-sys-color.$surface-container;\n/// md.comp.toolbar.standard.container.shape (Enabled)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.toolbar.standard.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.standard.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.standard.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.toolbar.standard.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.toolbar.standard.icon.color (Enabled)\n$icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-surface-variant;\n/// md.comp.toolbar.standard.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.toolbar.standard.selected.button.container.color (Enabled)\n$selected-button-container-color: md-sys-color.$secondary-container;\n/// md.comp.toolbar.standard.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.focused.label-text.color (Focused)\n$selected-focused-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.hovered.label-text.color (Hovered)\n$selected-hovered-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.label-text.color (Enabled)\n$selected-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.pressed.label-text.color (Pressed)\n$selected-pressed-label-text-color: md-sys-color.$on-secondary-container;\n/// md.comp.toolbar.standard.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-secondary-container;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-toolbar-vibrant.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-shape';\n@use 'md-sys-state';\n\n/// md.comp.toolbar.vibrant.disabled.icon.opacity (Disabled)\n$disabled-icon-opacity: 0.38;\n/// md.comp.toolbar.vibrant.disabled.label-text.opacity (Disabled)\n$disabled-label-text-opacity: 0.38;\n/// md.comp.toolbar.vibrant.button.container.color (Enabled)\n$button-container-color: md-sys-color.$primary-container;\n/// md.comp.toolbar.vibrant.container.color (Enabled)\n$container-color: md-sys-color.$primary-container;\n/// md.comp.toolbar.vibrant.container.shape (Enabled)\n$container-shape: md-sys-shape.$corner-full;\n/// md.comp.toolbar.vibrant.disabled.icon.color (Disabled)\n$disabled-icon-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.disabled.label-text.color (Disabled)\n$disabled-label-text-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.focused.icon.color (Focused)\n$focused-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.focused.label-text.color (Focused)\n$focused-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.focused.state-layer.color (Focused)\n$focused-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.focused.state-layer.opacity (Focused)\n$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;\n/// md.comp.toolbar.vibrant.hovered.icon.color (Hovered)\n$hovered-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.hovered.label-text.color (Hovered)\n$hovered-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.hovered.state-layer.color (Hovered)\n$hovered-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.hovered.state-layer.opacity (Hovered)\n$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;\n/// md.comp.toolbar.vibrant.icon.color (Enabled)\n$icon-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.label-text.color (Enabled)\n$label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.pressed.icon.color (Pressed)\n$pressed-icon-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.pressed.label-text.color (Pressed)\n$pressed-label-text-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.pressed.state-layer.color (Pressed)\n$pressed-state-layer-color: md-sys-color.$on-primary-container;\n/// md.comp.toolbar.vibrant.pressed.state-layer.opacity (Pressed)\n$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;\n/// md.comp.toolbar.vibrant.selected.button.container.color (Enabled)\n$selected-button-container-color: md-sys-color.$surface-container;\n/// md.comp.toolbar.vibrant.selected.focused.icon.color (Focused)\n$selected-focused-icon-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.focused.label-text.color (Focused)\n$selected-focused-label-text-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.focused.state-layer.color (Focused)\n$selected-focused-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.hovered.icon.color (Hovered)\n$selected-hovered-icon-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.hovered.label-text.color (Hovered)\n$selected-hovered-label-text-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.hovered.state-layer.color (Hovered)\n$selected-hovered-state-layer-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.icon.color (Enabled)\n$selected-icon-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.label-text.color (Enabled)\n$selected-label-text-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.pressed.icon.color (Pressed)\n$selected-pressed-icon-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.pressed.label-text.color (Pressed)\n$selected-pressed-label-text-color: md-sys-color.$on-surface;\n/// md.comp.toolbar.vibrant.selected.pressed.state-layer.color (Pressed)\n$selected-pressed-state-layer-color: md-sys-color.$on-surface;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-top-app-bar-large.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.top-app-bar.large.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 152px;\n/// md.comp.top-app-bar.large.leading-icon.size ([Deprecated] Enabled / [Deprecated] Leading icon)\n$leading-icon-size: 24px;\n/// md.comp.top-app-bar.large.trailing-icon.size ([Deprecated] Enabled / [Deprecated] Trailing icon)\n$trailing-icon-size: 24px;\n/// md.comp.top-app-bar.large.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.top-app-bar.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.top-app-bar.large.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.top-app-bar.large.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.top-app-bar.large.headline.color ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.large.headline.font ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-font: md-sys-typescale.$headline-medium-font;\n/// md.comp.top-app-bar.large.headline.line-height ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-line-height: md-sys-typescale.$headline-medium-line-height;\n/// md.comp.top-app-bar.large.headline.size ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-size: md-sys-typescale.$headline-medium-size;\n/// md.comp.top-app-bar.large.headline.tracking ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-tracking: md-sys-typescale.$headline-medium-tracking;\n/// md.comp.top-app-bar.large.headline.weight ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-weight: md-sys-typescale.$headline-medium-weight;\n/// md.comp.top-app-bar.large.leading-icon.color ([Deprecated] Enabled / [Deprecated] Leading icon)\n$leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.large.trailing-icon.color ([Deprecated] Enabled / [Deprecated] Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.top-app-bar.large.headline.type ([Deprecated] Enabled / [Deprecated] Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-top-app-bar-medium.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.top-app-bar.medium.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 112px;\n/// md.comp.top-app-bar.medium.leading-icon.size ([Deprecated] Enabled / [Deprecated] Leading icon)\n$leading-icon-size: 24px;\n/// md.comp.top-app-bar.medium.trailing-icon.size ([Deprecated] Enabled / [Deprecated] Trailing icon)\n$trailing-icon-size: 24px;\n/// md.comp.top-app-bar.medium.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.top-app-bar.medium.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.top-app-bar.medium.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.top-app-bar.medium.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.top-app-bar.medium.headline.color ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.medium.headline.font ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-font: md-sys-typescale.$headline-small-font;\n/// md.comp.top-app-bar.medium.headline.line-height ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-line-height: md-sys-typescale.$headline-small-line-height;\n/// md.comp.top-app-bar.medium.headline.size ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-size: md-sys-typescale.$headline-small-size;\n/// md.comp.top-app-bar.medium.headline.tracking ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-tracking: md-sys-typescale.$headline-small-tracking;\n/// md.comp.top-app-bar.medium.headline.weight ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-weight: md-sys-typescale.$headline-small-weight;\n/// md.comp.top-app-bar.medium.leading-icon.color ([Deprecated] Enabled / [Deprecated] Leading icon)\n$leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.medium.trailing-icon.color ([Deprecated] Enabled / [Deprecated] Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.top-app-bar.medium.headline.type ([Deprecated] Enabled / [Deprecated] Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-top-app-bar-small-centered.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.top-app-bar.small.centered.avatar.size (Enabled / Avatar)\n$avatar-size: 30px;\n/// md.comp.top-app-bar.small.centered.container.height (Enabled / Container)\n$container-height: 64px;\n/// md.comp.top-app-bar.small.centered.leading-icon.size (Enabled / Leading icon)\n$leading-icon-size: 24px;\n/// md.comp.top-app-bar.small.centered.trailing-icon.size (Enabled / Trailing icon)\n$trailing-icon-size: 24px;\n/// md.comp.top-app-bar.small.centered.avatar.shape (Enabled / Avatar)\n$avatar-shape: md-sys-shape.$corner-full;\n/// md.comp.top-app-bar.small.centered.container.color (Enabled / Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.top-app-bar.small.centered.container.elevation (Enabled / Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.top-app-bar.small.centered.container.shape (Enabled / Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.top-app-bar.small.centered.container.surface-tint-layer.color (Enabled / Container)\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.top-app-bar.small.centered.headline.color (Enabled / Headline)\n$headline-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.small.centered.headline.font (Enabled / Headline)\n$headline-font: md-sys-typescale.$title-large-font;\n/// md.comp.top-app-bar.small.centered.headline.line-height (Enabled / Headline)\n$headline-line-height: md-sys-typescale.$title-large-line-height;\n/// md.comp.top-app-bar.small.centered.headline.size (Enabled / Headline)\n$headline-size: md-sys-typescale.$title-large-size;\n/// md.comp.top-app-bar.small.centered.headline.tracking (Enabled / Headline)\n$headline-tracking: md-sys-typescale.$title-large-tracking;\n/// md.comp.top-app-bar.small.centered.headline.weight (Enabled / Headline)\n$headline-weight: md-sys-typescale.$title-large-weight;\n/// md.comp.top-app-bar.small.centered.leading-icon.color (Enabled / Leading icon)\n$leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.small.centered.on-scroll.container.color (Enabled / Container)\n$on-scroll-container-color: md-sys-color.$surface-container;\n/// md.comp.top-app-bar.small.centered.on-scroll.container.elevation (Enabled / On scroll)\n$on-scroll-container-elevation: md-sys-elevation.$level2;\n/// md.comp.top-app-bar.small.centered.on-scroll.container.shadow-color (Enabled / Container)\n///\n/// @deprecated Bug: should not have been created. Remove any shadows on navigation bars.\n$on-scroll-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.top-app-bar.small.centered.trailing-icon.color (Enabled / Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.top-app-bar.small.centered.headline.type (Enabled / Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-comp-top-app-bar-small.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n@use 'md-sys-elevation';\n@use 'md-sys-shape';\n@use 'md-sys-typescale';\n\n/// md.comp.top-app-bar.small.container.height ([Deprecated] Enabled / [Deprecated] Container)\n$container-height: 64px;\n/// md.comp.top-app-bar.small.leading-icon.size ([Deprecated] Enabled / [Deprecated] Leading icon)\n$leading-icon-size: 24px;\n/// md.comp.top-app-bar.small.trailing-icon.size ([Deprecated] Enabled / [Deprecated] Trailing icon)\n$trailing-icon-size: 24px;\n/// md.comp.top-app-bar.small.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$container-color: md-sys-color.$surface;\n/// md.comp.top-app-bar.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container)\n$container-elevation: md-sys-elevation.$level0;\n/// md.comp.top-app-bar.small.container.shape ([Deprecated] Enabled / [Deprecated] Container)\n$container-shape: md-sys-shape.$corner-none;\n/// md.comp.top-app-bar.small.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.\n$container-surface-tint-layer-color: md-sys-color.$surface-tint;\n/// md.comp.top-app-bar.small.headline.color ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.small.headline.font ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-font: md-sys-typescale.$title-large-font;\n/// md.comp.top-app-bar.small.headline.line-height ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-line-height: md-sys-typescale.$title-large-line-height;\n/// md.comp.top-app-bar.small.headline.size ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-size: md-sys-typescale.$title-large-size;\n/// md.comp.top-app-bar.small.headline.tracking ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-tracking: md-sys-typescale.$title-large-tracking;\n/// md.comp.top-app-bar.small.headline.weight ([Deprecated] Enabled / [Deprecated] Headline)\n$headline-weight: md-sys-typescale.$title-large-weight;\n/// md.comp.top-app-bar.small.leading-icon.color ([Deprecated] Enabled / [Deprecated] Leading icon)\n$leading-icon-color: md-sys-color.$on-surface;\n/// md.comp.top-app-bar.small.on-scroll.container.color ([Deprecated] Enabled / [Deprecated] Container)\n$on-scroll-container-color: md-sys-color.$surface-container;\n/// md.comp.top-app-bar.small.on-scroll.container.elevation ([Deprecated] Enabled / [Deprecated] On scroll)\n$on-scroll-container-elevation: md-sys-elevation.$level2;\n/// md.comp.top-app-bar.small.on-scroll.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)\n///\n/// @deprecated Bug: should not have been created. Remove any shadows on navigation bars.\n$on-scroll-container-shadow-color: md-sys-color.$shadow;\n/// md.comp.top-app-bar.small.trailing-icon.color ([Deprecated] Enabled / [Deprecated] Trailing icon)\n$trailing-icon-color: md-sys-color.$on-surface-variant;\n/// md.comp.top-app-bar.small.headline.type ([Deprecated] Enabled / [Deprecated] Headline)\n@mixin headline-type {\n  font-family: $headline-font;\n  font-size: $headline-size;\n  font-weight: $headline-weight;\n  letter-spacing: $headline-tracking;\n  line-height: $headline-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-ref-palette.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.ref.palette.black (Static palette / Static – Black white)\n$black: #000;\n/// md.ref.palette.blue-variant0 (Static palette / Static – Blue variant)\n$blue-variant0: #000;\n/// md.ref.palette.blue-variant10 (Static palette / Static – Blue variant)\n$blue-variant10: #001f2d;\n/// md.ref.palette.blue-variant100 (Static palette / Static – Blue variant)\n$blue-variant100: #fff;\n/// md.ref.palette.blue-variant20 (Static palette / Static – Blue variant)\n$blue-variant20: #003549;\n/// md.ref.palette.blue-variant30 (Static palette / Static – Blue variant)\n$blue-variant30: #004d68;\n/// md.ref.palette.blue-variant40 (Static palette / Static – Blue variant)\n$blue-variant40: #006788;\n/// md.ref.palette.blue-variant50 (Static palette / Static – Blue variant)\n$blue-variant50: #0081a8;\n/// md.ref.palette.blue-variant60 (Static palette / Static – Blue variant)\n$blue-variant60: #009dc9;\n/// md.ref.palette.blue-variant70 (Static palette / Static – Blue variant)\n$blue-variant70: #00bbea;\n/// md.ref.palette.blue-variant80 (Static palette / Static – Blue variant)\n$blue-variant80: #67d4ff;\n/// md.ref.palette.blue-variant90 (Static palette / Static – Blue variant)\n$blue-variant90: #bde9ff;\n/// md.ref.palette.blue-variant95 (Static palette / Static – Blue variant)\n$blue-variant95: #e0f4ff;\n/// md.ref.palette.blue-variant98 (Static palette / Static – Blue variant)\n$blue-variant98: #f4faff;\n/// md.ref.palette.blue0 (Static palette / Static – Blue)\n$blue0: #000;\n/// md.ref.palette.blue10 (Static palette / Static – Blue)\n$blue10: #001944;\n/// md.ref.palette.blue100 (Static palette / Static – Blue)\n$blue100: #fff;\n/// md.ref.palette.blue20 (Static palette / Static – Blue)\n$blue20: #012c6f;\n/// md.ref.palette.blue30 (Static palette / Static – Blue)\n$blue30: #04409f;\n/// md.ref.palette.blue40 (Static palette / Static – Blue)\n$blue40: #1157ce;\n/// md.ref.palette.blue50 (Static palette / Static – Blue)\n$blue50: #3271ea;\n/// md.ref.palette.blue60 (Static palette / Static – Blue)\n$blue60: #4e8ff8;\n/// md.ref.palette.blue70 (Static palette / Static – Blue)\n$blue70: #76acff;\n/// md.ref.palette.blue80 (Static palette / Static – Blue)\n$blue80: #a1c9ff;\n/// md.ref.palette.blue90 (Static palette / Static – Blue)\n$blue90: #d0e4ff;\n/// md.ref.palette.blue95 (Static palette / Static – Blue)\n$blue95: #e7f2ff;\n/// md.ref.palette.blue98 (Static palette / Static – Blue)\n$blue98: #f5faff;\n/// md.ref.palette.cyan0 (Static palette / Static – Cyan)\n$cyan0: #000;\n/// md.ref.palette.cyan10 (Static palette / Static – Cyan)\n$cyan10: #001f26;\n/// md.ref.palette.cyan100 (Static palette / Static – Cyan)\n$cyan100: #fff;\n/// md.ref.palette.cyan20 (Static palette / Static – Cyan)\n$cyan20: #003641;\n/// md.ref.palette.cyan30 (Static palette / Static – Cyan)\n$cyan30: #004e5d;\n/// md.ref.palette.cyan40 (Static palette / Static – Cyan)\n$cyan40: #00687c;\n/// md.ref.palette.cyan50 (Static palette / Static – Cyan)\n$cyan50: #00839b;\n/// md.ref.palette.cyan60 (Static palette / Static – Cyan)\n$cyan60: #009ebb;\n/// md.ref.palette.cyan70 (Static palette / Static – Cyan)\n$cyan70: #00bbdf;\n/// md.ref.palette.cyan80 (Static palette / Static – Cyan)\n$cyan80: #60d5f3;\n/// md.ref.palette.cyan90 (Static palette / Static – Cyan)\n$cyan90: #acedff;\n/// md.ref.palette.cyan95 (Static palette / Static – Cyan)\n$cyan95: #d8f6ff;\n/// md.ref.palette.cyan98 (Static palette / Static – Cyan)\n$cyan98: #f0fbff;\n/// md.ref.palette.error0 (Baseline palette / Baseline – Error)\n$error0: #000;\n/// md.ref.palette.error10 (Baseline palette / Baseline – Error)\n$error10: #410e0b;\n/// md.ref.palette.error100 (Baseline palette / Baseline – Error)\n$error100: #fff;\n/// md.ref.palette.error20 (Baseline palette / Baseline – Error)\n$error20: #601410;\n/// md.ref.palette.error30 (Baseline palette / Baseline – Error)\n$error30: #8c1d18;\n/// md.ref.palette.error40 (Baseline palette / Baseline – Error)\n$error40: #b3261e;\n/// md.ref.palette.error50 (Baseline palette / Baseline – Error)\n$error50: #dc362e;\n/// md.ref.palette.error60 (Baseline palette / Baseline – Error)\n$error60: #e46962;\n/// md.ref.palette.error70 (Baseline palette / Baseline – Error)\n$error70: #ec928e;\n/// md.ref.palette.error80 (Baseline palette / Baseline – Error)\n$error80: #f2b8b5;\n/// md.ref.palette.error90 (Baseline palette / Baseline – Error)\n$error90: #f9dedc;\n/// md.ref.palette.error95 (Baseline palette / Baseline – Error)\n$error95: #fceeee;\n/// md.ref.palette.error98 (Baseline palette / Baseline – Error)\n$error98: #fff8f7;\n/// md.ref.palette.error99 (Baseline palette / Baseline – Error)\n$error99: #fffbf9;\n/// md.ref.palette.green0 (Static palette / Static – Green)\n$green0: #000;\n/// md.ref.palette.green10 (Static palette / Static – Green)\n$green10: #002110;\n/// md.ref.palette.green100 (Static palette / Static – Green)\n$green100: #fff;\n/// md.ref.palette.green20 (Static palette / Static – Green)\n$green20: #00381f;\n/// md.ref.palette.green30 (Static palette / Static – Green)\n$green30: #00522c;\n/// md.ref.palette.green40 (Static palette / Static – Green)\n$green40: #006c35;\n/// md.ref.palette.green50 (Static palette / Static – Green)\n$green50: #128937;\n/// md.ref.palette.green60 (Static palette / Static – Green)\n$green60: #1aa64a;\n/// md.ref.palette.green70 (Static palette / Static – Green)\n$green70: #44c265;\n/// md.ref.palette.green80 (Static palette / Static – Green)\n$green80: #80da88;\n/// md.ref.palette.green90 (Static palette / Static – Green)\n$green90: #beefbb;\n/// md.ref.palette.green95 (Static palette / Static – Green)\n$green95: #ddf8d8;\n/// md.ref.palette.green98 (Static palette / Static – Green)\n$green98: #f2fcef;\n/// md.ref.palette.grey-variant0 (Static palette / Static – Grey variant)\n$grey-variant0: #000;\n/// md.ref.palette.grey-variant10 (Static palette / Static – Grey variant)\n$grey-variant10: #191d1c;\n/// md.ref.palette.grey-variant100 (Static palette / Static – Grey variant)\n$grey-variant100: #fff;\n/// md.ref.palette.grey-variant20 (Static palette / Static – Grey variant)\n$grey-variant20: #2d312f;\n/// md.ref.palette.grey-variant30 (Static palette / Static – Grey variant)\n$grey-variant30: #444746;\n/// md.ref.palette.grey-variant40 (Static palette / Static – Grey variant)\n$grey-variant40: #5c5f5e;\n/// md.ref.palette.grey-variant50 (Static palette / Static – Grey variant)\n$grey-variant50: #747775;\n/// md.ref.palette.grey-variant60 (Static palette / Static – Grey variant)\n$grey-variant60: #8e918f;\n/// md.ref.palette.grey-variant70 (Static palette / Static – Grey variant)\n$grey-variant70: #a9acaa;\n/// md.ref.palette.grey-variant80 (Static palette / Static – Grey variant)\n$grey-variant80: #c4c7c5;\n/// md.ref.palette.grey-variant90 (Static palette / Static – Grey variant)\n$grey-variant90: #e1e3e1;\n/// md.ref.palette.grey-variant95 (Static palette / Static – Grey variant)\n$grey-variant95: #eff2ef;\n/// md.ref.palette.grey-variant98 (Static palette / Static – Grey variant)\n$grey-variant98: #f7faf7;\n/// md.ref.palette.grey0 (Static palette / Static – Grey)\n$grey0: #000;\n/// md.ref.palette.grey10 (Static palette / Static – Grey)\n$grey10: #1b1b1c;\n/// md.ref.palette.grey100 (Static palette / Static – Grey)\n$grey100: #fff;\n/// md.ref.palette.grey20 (Static palette / Static – Grey)\n$grey20: #303030;\n/// md.ref.palette.grey30 (Static palette / Static – Grey)\n$grey30: #474747;\n/// md.ref.palette.grey40 (Static palette / Static – Grey)\n$grey40: #5e5e5e;\n/// md.ref.palette.grey50 (Static palette / Static – Grey)\n$grey50: #777;\n/// md.ref.palette.grey60 (Static palette / Static – Grey)\n$grey60: #919191;\n/// md.ref.palette.grey70 (Static palette / Static – Grey)\n$grey70: #ababab;\n/// md.ref.palette.grey80 (Static palette / Static – Grey)\n$grey80: #c7c7c7;\n/// md.ref.palette.grey90 (Static palette / Static – Grey)\n$grey90: #e3e3e3;\n/// md.ref.palette.grey95 (Static palette / Static – Grey)\n$grey95: #f2f2f2;\n/// md.ref.palette.grey98 (Static palette / Static – Grey)\n$grey98: #f9f9f9;\n/// md.ref.palette.neutral-variant0 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant0: #000;\n/// md.ref.palette.neutral-variant10 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant10: #1d1a22;\n/// md.ref.palette.neutral-variant100 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant100: #fff;\n/// md.ref.palette.neutral-variant20 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant20: #322f37;\n/// md.ref.palette.neutral-variant30 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant30: #49454f;\n/// md.ref.palette.neutral-variant40 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant40: #605d66;\n/// md.ref.palette.neutral-variant50 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant50: #79747e;\n/// md.ref.palette.neutral-variant60 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant60: #938f99;\n/// md.ref.palette.neutral-variant70 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant70: #aea9b4;\n/// md.ref.palette.neutral-variant80 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant80: #cac4d0;\n/// md.ref.palette.neutral-variant90 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant90: #e7e0ec;\n/// md.ref.palette.neutral-variant95 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant95: #f5eefa;\n/// md.ref.palette.neutral-variant98 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant98: #fdf7ff;\n/// md.ref.palette.neutral-variant99 (Baseline palette / Baseline – Neutral variant)\n$neutral-variant99: #fffbfe;\n/// md.ref.palette.neutral0 (Baseline palette / Baseline – Neutral)\n$neutral0: #000;\n/// md.ref.palette.neutral10 (Baseline palette / Baseline – Neutral)\n$neutral10: #1d1b20;\n/// md.ref.palette.neutral100 (Baseline palette / Baseline – Neutral)\n$neutral100: #fff;\n/// md.ref.palette.neutral12 (Baseline palette / Baseline – Neutral)\n$neutral12: #211f26;\n/// md.ref.palette.neutral17 (Baseline palette / Baseline – Neutral)\n$neutral17: #2b2930;\n/// md.ref.palette.neutral20 (Baseline palette / Baseline – Neutral)\n$neutral20: #322f35;\n/// md.ref.palette.neutral22 (Baseline palette / Baseline – Neutral)\n$neutral22: #36343b;\n/// md.ref.palette.neutral24 (Baseline palette / Baseline – Neutral)\n$neutral24: #3b383e;\n/// md.ref.palette.neutral30 (Baseline palette / Baseline – Neutral)\n$neutral30: #48464c;\n/// md.ref.palette.neutral4 (Baseline palette / Baseline – Neutral)\n$neutral4: #0f0d13;\n/// md.ref.palette.neutral40 (Baseline palette / Baseline – Neutral)\n$neutral40: #605d64;\n/// md.ref.palette.neutral50 (Baseline palette / Baseline – Neutral)\n$neutral50: #79767d;\n/// md.ref.palette.neutral6 (Baseline palette / Baseline – Neutral)\n$neutral6: #141218;\n/// md.ref.palette.neutral60 (Baseline palette / Baseline – Neutral)\n$neutral60: #938f96;\n/// md.ref.palette.neutral70 (Baseline palette / Baseline – Neutral)\n$neutral70: #aea9b1;\n/// md.ref.palette.neutral80 (Baseline palette / Baseline – Neutral)\n$neutral80: #cac5cd;\n/// md.ref.palette.neutral87 (Baseline palette / Baseline – Neutral)\n$neutral87: #ded8e1;\n/// md.ref.palette.neutral90 (Baseline palette / Baseline – Neutral)\n$neutral90: #e6e0e9;\n/// md.ref.palette.neutral92 (Baseline palette / Baseline – Neutral)\n$neutral92: #ece6f0;\n/// md.ref.palette.neutral94 (Baseline palette / Baseline – Neutral)\n$neutral94: #f3edf7;\n/// md.ref.palette.neutral95 (Baseline palette / Baseline – Neutral)\n$neutral95: #f5eff7;\n/// md.ref.palette.neutral96 (Baseline palette / Baseline – Neutral)\n$neutral96: #f7f2fa;\n/// md.ref.palette.neutral98 (Baseline palette / Baseline – Neutral)\n$neutral98: #fef7ff;\n/// md.ref.palette.neutral99 (Baseline palette / Baseline – Neutral)\n$neutral99: #fffbff;\n/// md.ref.palette.orange0 (Static palette / Static – Orange)\n$orange0: #000;\n/// md.ref.palette.orange10 (Static palette / Static – Orange)\n$orange10: #321200;\n/// md.ref.palette.orange100 (Static palette / Static – Orange)\n$orange100: #fff;\n/// md.ref.palette.orange20 (Static palette / Static – Orange)\n$orange20: #522302;\n/// md.ref.palette.orange30 (Static palette / Static – Orange)\n$orange30: #753403;\n/// md.ref.palette.orange40 (Static palette / Static – Orange)\n$orange40: #9a4600;\n/// md.ref.palette.orange50 (Static palette / Static – Orange)\n$orange50: #c05a01;\n/// md.ref.palette.orange60 (Static palette / Static – Orange)\n$orange60: #e86e00;\n/// md.ref.palette.orange70 (Static palette / Static – Orange)\n$orange70: #ff8d41;\n/// md.ref.palette.orange80 (Static palette / Static – Orange)\n$orange80: #ffb683;\n/// md.ref.palette.orange90 (Static palette / Static – Orange)\n$orange90: #ffdcc3;\n/// md.ref.palette.orange95 (Static palette / Static – Orange)\n$orange95: #ffede1;\n/// md.ref.palette.orange98 (Static palette / Static – Orange)\n$orange98: #fff8f4;\n/// md.ref.palette.pink0 (Static palette / Static – Pink)\n$pink0: #000;\n/// md.ref.palette.pink10 (Static palette / Static – Pink)\n$pink10: #3d0023;\n/// md.ref.palette.pink100 (Static palette / Static – Pink)\n$pink100: #fff;\n/// md.ref.palette.pink20 (Static palette / Static – Pink)\n$pink20: #620438;\n/// md.ref.palette.pink30 (Static palette / Static – Pink)\n$pink30: #8d0053;\n/// md.ref.palette.pink40 (Static palette / Static – Pink)\n$pink40: #b60d6e;\n/// md.ref.palette.pink50 (Static palette / Static – Pink)\n$pink50: #dc258d;\n/// md.ref.palette.pink60 (Static palette / Static – Pink)\n$pink60: #f94aab;\n/// md.ref.palette.pink70 (Static palette / Static – Pink)\n$pink70: #ff7dd2;\n/// md.ref.palette.pink80 (Static palette / Static – Pink)\n$pink80: #ffaee4;\n/// md.ref.palette.pink90 (Static palette / Static – Pink)\n$pink90: #ffd8ef;\n/// md.ref.palette.pink95 (Static palette / Static – Pink)\n$pink95: #ffecf6;\n/// md.ref.palette.pink98 (Static palette / Static – Pink)\n$pink98: #fff7fc;\n/// md.ref.palette.primary0 (Baseline palette / Baseline – Primary)\n$primary0: #000;\n/// md.ref.palette.primary10 (Baseline palette / Baseline – Primary)\n$primary10: #21005d;\n/// md.ref.palette.primary100 (Baseline palette / Baseline – Primary)\n$primary100: #fff;\n/// md.ref.palette.primary20 (Baseline palette / Baseline – Primary)\n$primary20: #381e72;\n/// md.ref.palette.primary30 (Baseline palette / Baseline – Primary)\n$primary30: #4f378b;\n/// md.ref.palette.primary40 (Baseline palette / Baseline – Primary)\n$primary40: #6750a4;\n/// md.ref.palette.primary50 (Baseline palette / Baseline – Primary)\n$primary50: #7f67be;\n/// md.ref.palette.primary60 (Baseline palette / Baseline – Primary)\n$primary60: #9a82db;\n/// md.ref.palette.primary70 (Baseline palette / Baseline – Primary)\n$primary70: #b69df8;\n/// md.ref.palette.primary80 (Baseline palette / Baseline – Primary)\n$primary80: #d0bcff;\n/// md.ref.palette.primary90 (Baseline palette / Baseline – Primary)\n$primary90: #eaddff;\n/// md.ref.palette.primary95 (Baseline palette / Baseline – Primary)\n$primary95: #f6edff;\n/// md.ref.palette.primary98 (Baseline palette / Baseline – Primary)\n$primary98: #fef7ff;\n/// md.ref.palette.primary99 (Baseline palette / Baseline – Primary)\n$primary99: #fffbfe;\n/// md.ref.palette.purple0 (Static palette / Static – Purple)\n$purple0: #000;\n/// md.ref.palette.purple10 (Static palette / Static – Purple)\n$purple10: #280255;\n/// md.ref.palette.purple100 (Static palette / Static – Purple)\n$purple100: #fff;\n/// md.ref.palette.purple20 (Static palette / Static – Purple)\n$purple20: #400b84;\n/// md.ref.palette.purple30 (Static palette / Static – Purple)\n$purple30: #5629a4;\n/// md.ref.palette.purple40 (Static palette / Static – Purple)\n$purple40: #7438d2;\n/// md.ref.palette.purple50 (Static palette / Static – Purple)\n$purple50: #9254ea;\n/// md.ref.palette.purple60 (Static palette / Static – Purple)\n$purple60: #ad72ff;\n/// md.ref.palette.purple70 (Static palette / Static – Purple)\n$purple70: #c597ff;\n/// md.ref.palette.purple80 (Static palette / Static – Purple)\n$purple80: #d9bafd;\n/// md.ref.palette.purple90 (Static palette / Static – Purple)\n$purple90: #eedcfe;\n/// md.ref.palette.purple95 (Static palette / Static – Purple)\n$purple95: #f7ecfe;\n/// md.ref.palette.purple98 (Static palette / Static – Purple)\n$purple98: #fdf8ff;\n/// md.ref.palette.red0 (Static palette / Static – Red)\n$red0: #000;\n/// md.ref.palette.red10 (Static palette / Static – Red)\n$red10: #3a0907;\n/// md.ref.palette.red100 (Static palette / Static – Red)\n$red100: #fff;\n/// md.ref.palette.red20 (Static palette / Static – Red)\n$red20: #60150f;\n/// md.ref.palette.red30 (Static palette / Static – Red)\n$red30: #8a1a16;\n/// md.ref.palette.red40 (Static palette / Static – Red)\n$red40: #b3251e;\n/// md.ref.palette.red50 (Static palette / Static – Red)\n$red50: #db372d;\n/// md.ref.palette.red60 (Static palette / Static – Red)\n$red60: #f55e57;\n/// md.ref.palette.red70 (Static palette / Static – Red)\n$red70: #ff8983;\n/// md.ref.palette.red80 (Static palette / Static – Red)\n$red80: #ffb3ae;\n/// md.ref.palette.red90 (Static palette / Static – Red)\n$red90: #ffdadc;\n/// md.ref.palette.red95 (Static palette / Static – Red)\n$red95: #ffecee;\n/// md.ref.palette.red98 (Static palette / Static – Red)\n$red98: #fff8f8;\n/// md.ref.palette.secondary0 (Baseline palette / Baseline – Secondary)\n$secondary0: #000;\n/// md.ref.palette.secondary10 (Baseline palette / Baseline – Secondary)\n$secondary10: #1d192b;\n/// md.ref.palette.secondary100 (Baseline palette / Baseline – Secondary)\n$secondary100: #fff;\n/// md.ref.palette.secondary20 (Baseline palette / Baseline – Secondary)\n$secondary20: #332d41;\n/// md.ref.palette.secondary30 (Baseline palette / Baseline – Secondary)\n$secondary30: #4a4458;\n/// md.ref.palette.secondary40 (Baseline palette / Baseline – Secondary)\n$secondary40: #625b71;\n/// md.ref.palette.secondary50 (Baseline palette / Baseline – Secondary)\n$secondary50: #7a7289;\n/// md.ref.palette.secondary60 (Baseline palette / Baseline – Secondary)\n$secondary60: #958da5;\n/// md.ref.palette.secondary70 (Baseline palette / Baseline – Secondary)\n$secondary70: #b0a7c0;\n/// md.ref.palette.secondary80 (Baseline palette / Baseline – Secondary)\n$secondary80: #ccc2dc;\n/// md.ref.palette.secondary90 (Baseline palette / Baseline – Secondary)\n$secondary90: #e8def8;\n/// md.ref.palette.secondary95 (Baseline palette / Baseline – Secondary)\n$secondary95: #f6edff;\n/// md.ref.palette.secondary98 (Baseline palette / Baseline – Secondary)\n$secondary98: #fef7ff;\n/// md.ref.palette.secondary99 (Baseline palette / Baseline – Secondary)\n$secondary99: #fffbfe;\n/// md.ref.palette.tertiary0 (Baseline palette / Baseline – Tertiary)\n$tertiary0: #000;\n/// md.ref.palette.tertiary10 (Baseline palette / Baseline – Tertiary)\n$tertiary10: #31111d;\n/// md.ref.palette.tertiary100 (Baseline palette / Baseline – Tertiary)\n$tertiary100: #fff;\n/// md.ref.palette.tertiary20 (Baseline palette / Baseline – Tertiary)\n$tertiary20: #492532;\n/// md.ref.palette.tertiary30 (Baseline palette / Baseline – Tertiary)\n$tertiary30: #633b48;\n/// md.ref.palette.tertiary40 (Baseline palette / Baseline – Tertiary)\n$tertiary40: #7d5260;\n/// md.ref.palette.tertiary50 (Baseline palette / Baseline – Tertiary)\n$tertiary50: #986977;\n/// md.ref.palette.tertiary60 (Baseline palette / Baseline – Tertiary)\n$tertiary60: #b58392;\n/// md.ref.palette.tertiary70 (Baseline palette / Baseline – Tertiary)\n$tertiary70: #d29dac;\n/// md.ref.palette.tertiary80 (Baseline palette / Baseline – Tertiary)\n$tertiary80: #efb8c8;\n/// md.ref.palette.tertiary90 (Baseline palette / Baseline – Tertiary)\n$tertiary90: #ffd8e4;\n/// md.ref.palette.tertiary95 (Baseline palette / Baseline – Tertiary)\n$tertiary95: #ffecf1;\n/// md.ref.palette.tertiary98 (Baseline palette / Baseline – Tertiary)\n$tertiary98: #fff8f8;\n/// md.ref.palette.tertiary99 (Baseline palette / Baseline – Tertiary)\n$tertiary99: #fffbfa;\n/// md.ref.palette.white (Static palette / Static – Black white)\n$white: #fff;\n/// md.ref.palette.yellow0 (Static palette / Static – Yellow)\n$yellow0: #000;\n/// md.ref.palette.yellow10 (Static palette / Static – Yellow)\n$yellow10: #2f1400;\n/// md.ref.palette.yellow100 (Static palette / Static – Yellow)\n$yellow100: #fff;\n/// md.ref.palette.yellow20 (Static palette / Static – Yellow)\n$yellow20: #4d2600;\n/// md.ref.palette.yellow30 (Static palette / Static – Yellow)\n$yellow30: #6d3a01;\n/// md.ref.palette.yellow40 (Static palette / Static – Yellow)\n$yellow40: #8f4e06;\n/// md.ref.palette.yellow50 (Static palette / Static – Yellow)\n$yellow50: #b16300;\n/// md.ref.palette.yellow60 (Static palette / Static – Yellow)\n$yellow60: #d37b00;\n/// md.ref.palette.yellow70 (Static palette / Static – Yellow)\n$yellow70: #ef9800;\n/// md.ref.palette.yellow80 (Static palette / Static – Yellow)\n$yellow80: #fcbd00;\n/// md.ref.palette.yellow90 (Static palette / Static – Yellow)\n$yellow90: #ffe07c;\n/// md.ref.palette.yellow95 (Static palette / Static – Yellow)\n$yellow95: #fff2b4;\n/// md.ref.palette.yellow98 (Static palette / Static – Yellow)\n$yellow98: #fffade;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-ref-typeface.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.ref.typeface.brand (Brand)\n$brand: Roboto;\n/// md.ref.typeface.plain (Plain)\n$plain: Roboto;\n/// md.ref.typeface.weight-bold (Weight)\n$weight-bold: 700;\n/// md.ref.typeface.weight-medium (Weight)\n$weight-medium: 500;\n/// md.ref.typeface.weight-regular (Weight)\n$weight-regular: 400;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-color.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-palette';\n\n/// md.sys.color.background (Add-ons / Add-on surface colors)\n///\n/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.\n$background: md-ref-palette.$neutral98;\n/// md.sys.color.error (Error colors)\n///\n/// Indicates errors, such as invalid input in a date picker\n$error: md-ref-palette.$error40;\n/// md.sys.color.error-container (Error colors)\n///\n/// Container color for error messages and badges\n$error-container: md-ref-palette.$error90;\n/// md.sys.color.inverse-on-surface (Surface colors)\n///\n/// Used for text and icons shown against the inverse surface color\n$inverse-on-surface: md-ref-palette.$neutral95;\n/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)\n///\n/// Displays opposite of the primary color\n$inverse-primary: md-ref-palette.$primary80;\n/// md.sys.color.inverse-surface (Surface colors)\n///\n/// Displays opposite color of the surrounding UI\n$inverse-surface: md-ref-palette.$neutral20;\n/// md.sys.color.on-background (Add-ons / Add-on surface colors)\n///\n/// Used for text and icons shown against the background color\n$on-background: md-ref-palette.$neutral10;\n/// md.sys.color.on-error (Error colors)\n///\n/// Used for text and icons on the error color\n$on-error: md-ref-palette.$error100;\n/// md.sys.color.on-error-container (Error colors)\n///\n/// Used for text and icons on the error-container color\n$on-error-container: md-ref-palette.$error30;\n/// md.sys.color.on-primary (Primary colors)\n///\n/// Text and icons shown against the primary color\n$on-primary: md-ref-palette.$primary100;\n/// md.sys.color.on-primary-container (Primary colors)\n///\n/// Contrast-passing color shown against the primary container\n$on-primary-container: md-ref-palette.$primary30;\n/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Used for text and icons shown against the primary fixed color\n$on-primary-fixed: md-ref-palette.$primary10;\n/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)\n///\n/// Stronger hue variant used for text and icons shown against the primary fixed color\n$on-primary-fixed-variant: md-ref-palette.$primary30;\n/// md.sys.color.on-secondary (Secondary colors)\n///\n/// Text and icons shown against the secondary color\n$on-secondary: md-ref-palette.$secondary100;\n/// md.sys.color.on-secondary-container (Secondary colors)\n///\n/// Contrast-passing color shown against the secondary container\n$on-secondary-container: md-ref-palette.$secondary30;\n/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Used for text and icons shown against the secondary fixed color\n$on-secondary-fixed: md-ref-palette.$secondary10;\n/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)\n///\n/// Stronger hue variant used for text and icons shown against the secondary fixed color\n$on-secondary-fixed-variant: md-ref-palette.$secondary30;\n/// md.sys.color.on-surface (Surface colors)\n///\n/// Text and icons shown against the surface color\n$on-surface: md-ref-palette.$neutral10;\n/// md.sys.color.on-surface-variant (Surface colors)\n///\n/// For text and icons to indicate active or inactive component state\n$on-surface-variant: md-ref-palette.$neutral-variant30;\n/// md.sys.color.on-tertiary (Tertiary colors)\n///\n/// Text and icons shown against the tertiary color\n$on-tertiary: md-ref-palette.$tertiary100;\n/// md.sys.color.on-tertiary-container (Tertiary colors)\n///\n/// Contrast-passing color shown against the tertiary container\n$on-tertiary-container: md-ref-palette.$tertiary30;\n/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed: md-ref-palette.$tertiary10;\n/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)\n///\n/// Stronger hue variant used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed-variant: md-ref-palette.$tertiary30;\n/// md.sys.color.outline (Outline colors)\n///\n/// Subtle color used for boundaries\n$outline: md-ref-palette.$neutral-variant50;\n/// md.sys.color.outline-variant (Outline colors)\n///\n/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.\n$outline-variant: md-ref-palette.$neutral-variant80;\n/// md.sys.color.primary (Primary colors)\n///\n/// Main color used across screens and components\n$primary: md-ref-palette.$primary40;\n/// md.sys.color.primary-container (Primary colors)\n///\n/// Standout container color for key components\n$primary-container: md-ref-palette.$primary90;\n/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Primary color that doesn't change for light or dark theme.\n$primary-fixed: md-ref-palette.$primary90;\n/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)\n///\n/// Dimmer version of primary fixed color that doesn't change for light or dark theme.\n$primary-fixed-dim: md-ref-palette.$primary80;\n/// md.sys.color.scrim (Add-ons / Add-on surface colors)\n///\n/// Used for scrims which help separate floating components from the background.\n$scrim: md-ref-palette.$neutral0;\n/// md.sys.color.secondary (Secondary colors)\n///\n/// Accent color used across screens and components\n$secondary: md-ref-palette.$secondary40;\n/// md.sys.color.secondary-container (Secondary colors)\n///\n/// Less prominent container color, for components like tonal buttons\n$secondary-container: md-ref-palette.$secondary90;\n/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Secondary color that doesn't change for light or dark theme.\n$secondary-fixed: md-ref-palette.$secondary90;\n/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)\n///\n/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.\n$secondary-fixed-dim: md-ref-palette.$secondary80;\n/// md.sys.color.shadow (Add-ons / Add-on surface colors)\n///\n/// For shadows applied to elevated components\n$shadow: md-ref-palette.$neutral0;\n/// md.sys.color.surface (Surface colors)\n///\n/// Surface color for components like cards, sheets, and menus\n$surface: md-ref-palette.$neutral98;\n/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)\n///\n/// Surface that is brighter in both light and dark theme.\n$surface-bright: md-ref-palette.$neutral98;\n/// md.sys.color.surface-container (Surface colors)\n$surface-container: md-ref-palette.$neutral94;\n/// md.sys.color.surface-container-high (Surface colors)\n$surface-container-high: md-ref-palette.$neutral92;\n/// md.sys.color.surface-container-highest (Surface colors)\n$surface-container-highest: md-ref-palette.$neutral90;\n/// md.sys.color.surface-container-low (Surface colors)\n$surface-container-low: md-ref-palette.$neutral96;\n/// md.sys.color.surface-container-lowest (Surface colors)\n$surface-container-lowest: md-ref-palette.$neutral100;\n/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)\n///\n/// Surface that is dimmer in both light and dark theme.\n$surface-dim: md-ref-palette.$neutral87;\n/// md.sys.color.surface-variant (Surface colors)\n///\n/// Alternate surface color, can be used for active states\n$surface-variant: md-ref-palette.$neutral-variant90;\n/// md.sys.color.tertiary (Tertiary colors)\n///\n/// Contrasting accent color used across screens and components\n$tertiary: md-ref-palette.$tertiary40;\n/// md.sys.color.tertiary-container (Tertiary colors)\n///\n/// Contrasting container color, for components like input fields\n$tertiary-container: md-ref-palette.$tertiary90;\n/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Tertiary color that doesn't change for light or dark theme.\n$tertiary-fixed: md-ref-palette.$tertiary90;\n/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)\n///\n/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.\n$tertiary-fixed-dim: md-ref-palette.$tertiary80;\n/// md.sys.color.surface-tint (Surface colors)\n///\n/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors\n$surface-tint: $primary;\n/// md.sys.color.surface-tint-color (Surface colors)\n///\n/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name\n$surface-tint-color: $primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-color__dark.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-palette';\n\n/// md.sys.color.background (Add-ons / Add-on surface colors)\n///\n/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.\n$background: md-ref-palette.$neutral6;\n/// md.sys.color.error (Error colors)\n///\n/// Indicates errors, such as invalid input in a date picker\n$error: md-ref-palette.$error80;\n/// md.sys.color.error-container (Error colors)\n///\n/// Container color for error messages and badges\n$error-container: md-ref-palette.$error30;\n/// md.sys.color.inverse-on-surface (Surface colors)\n///\n/// Used for text and icons shown against the inverse surface color\n$inverse-on-surface: md-ref-palette.$neutral20;\n/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)\n///\n/// Displays opposite of the primary color\n$inverse-primary: md-ref-palette.$primary40;\n/// md.sys.color.inverse-surface (Surface colors)\n///\n/// Displays opposite color of the surrounding UI\n$inverse-surface: md-ref-palette.$neutral90;\n/// md.sys.color.on-background (Add-ons / Add-on surface colors)\n///\n/// Used for text and icons shown against the background color\n$on-background: md-ref-palette.$neutral90;\n/// md.sys.color.on-error (Error colors)\n///\n/// Used for text and icons on the error color\n$on-error: md-ref-palette.$error20;\n/// md.sys.color.on-error-container (Error colors)\n///\n/// Used for text and icons on the error-container color\n$on-error-container: md-ref-palette.$error90;\n/// md.sys.color.on-primary (Primary colors)\n///\n/// Text and icons shown against the primary color\n$on-primary: md-ref-palette.$primary20;\n/// md.sys.color.on-primary-container (Primary colors)\n///\n/// Contrast-passing color shown against the primary container\n$on-primary-container: md-ref-palette.$primary90;\n/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Used for text and icons shown against the primary fixed color\n$on-primary-fixed: md-ref-palette.$primary10;\n/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)\n///\n/// Stronger hue variant used for text and icons shown against the primary fixed color\n$on-primary-fixed-variant: md-ref-palette.$primary30;\n/// md.sys.color.on-secondary (Secondary colors)\n///\n/// Text and icons shown against the secondary color\n$on-secondary: md-ref-palette.$secondary20;\n/// md.sys.color.on-secondary-container (Secondary colors)\n///\n/// Contrast-passing color shown against the secondary container\n$on-secondary-container: md-ref-palette.$secondary90;\n/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Used for text and icons shown against the secondary fixed color\n$on-secondary-fixed: md-ref-palette.$secondary10;\n/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)\n///\n/// Stronger hue variant used for text and icons shown against the secondary fixed color\n$on-secondary-fixed-variant: md-ref-palette.$secondary30;\n/// md.sys.color.on-surface (Surface colors)\n///\n/// Text and icons shown against the surface color\n$on-surface: md-ref-palette.$neutral90;\n/// md.sys.color.on-surface-variant (Surface colors)\n///\n/// For text and icons to indicate active or inactive component state\n$on-surface-variant: md-ref-palette.$neutral-variant80;\n/// md.sys.color.on-tertiary (Tertiary colors)\n///\n/// Text and icons shown against the tertiary color\n$on-tertiary: md-ref-palette.$tertiary20;\n/// md.sys.color.on-tertiary-container (Tertiary colors)\n///\n/// Contrast-passing color shown against the tertiary container\n$on-tertiary-container: md-ref-palette.$tertiary90;\n/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed: md-ref-palette.$tertiary10;\n/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)\n///\n/// Stronger hue variant used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed-variant: md-ref-palette.$tertiary30;\n/// md.sys.color.outline (Outline colors)\n///\n/// Subtle color used for boundaries\n$outline: md-ref-palette.$neutral-variant60;\n/// md.sys.color.outline-variant (Outline colors)\n///\n/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.\n$outline-variant: md-ref-palette.$neutral-variant30;\n/// md.sys.color.primary (Primary colors)\n///\n/// Main color used across screens and components\n$primary: md-ref-palette.$primary80;\n/// md.sys.color.primary-container (Primary colors)\n///\n/// Standout container color for key components\n$primary-container: md-ref-palette.$primary30;\n/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Primary color that doesn't change for light or dark theme.\n$primary-fixed: md-ref-palette.$primary90;\n/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)\n///\n/// Dimmer version of primary fixed color that doesn't change for light or dark theme.\n$primary-fixed-dim: md-ref-palette.$primary80;\n/// md.sys.color.scrim (Add-ons / Add-on surface colors)\n///\n/// Used for scrims which help separate floating components from the background.\n$scrim: md-ref-palette.$neutral0;\n/// md.sys.color.secondary (Secondary colors)\n///\n/// Accent color used across screens and components\n$secondary: md-ref-palette.$secondary80;\n/// md.sys.color.secondary-container (Secondary colors)\n///\n/// Less prominent container color, for components like tonal buttons\n$secondary-container: md-ref-palette.$secondary30;\n/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Secondary color that doesn't change for light or dark theme.\n$secondary-fixed: md-ref-palette.$secondary90;\n/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)\n///\n/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.\n$secondary-fixed-dim: md-ref-palette.$secondary80;\n/// md.sys.color.shadow (Add-ons / Add-on surface colors)\n///\n/// For shadows applied to elevated components\n$shadow: md-ref-palette.$neutral0;\n/// md.sys.color.surface (Surface colors)\n///\n/// Surface color for components like cards, sheets, and menus\n$surface: md-ref-palette.$neutral6;\n/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)\n///\n/// Surface that is brighter in both light and dark theme.\n$surface-bright: md-ref-palette.$neutral24;\n/// md.sys.color.surface-container (Surface colors)\n$surface-container: md-ref-palette.$neutral12;\n/// md.sys.color.surface-container-high (Surface colors)\n$surface-container-high: md-ref-palette.$neutral17;\n/// md.sys.color.surface-container-highest (Surface colors)\n$surface-container-highest: md-ref-palette.$neutral22;\n/// md.sys.color.surface-container-low (Surface colors)\n$surface-container-low: md-ref-palette.$neutral10;\n/// md.sys.color.surface-container-lowest (Surface colors)\n$surface-container-lowest: md-ref-palette.$neutral4;\n/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)\n///\n/// Surface that is dimmer in both light and dark theme.\n$surface-dim: md-ref-palette.$neutral6;\n/// md.sys.color.surface-variant (Surface colors)\n///\n/// Alternate surface color, can be used for active states\n$surface-variant: md-ref-palette.$neutral-variant30;\n/// md.sys.color.tertiary (Tertiary colors)\n///\n/// Contrasting accent color used across screens and components\n$tertiary: md-ref-palette.$tertiary80;\n/// md.sys.color.tertiary-container (Tertiary colors)\n///\n/// Contrasting container color, for components like input fields\n$tertiary-container: md-ref-palette.$tertiary30;\n/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Tertiary color that doesn't change for light or dark theme.\n$tertiary-fixed: md-ref-palette.$tertiary90;\n/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)\n///\n/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.\n$tertiary-fixed-dim: md-ref-palette.$tertiary80;\n/// md.sys.color.surface-tint (Surface colors)\n///\n/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors\n$surface-tint: $primary;\n/// md.sys.color.surface-tint-color (Surface colors)\n///\n/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name\n$surface-tint-color: $primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-color__dark__high-contrast.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-palette';\n\n/// md.sys.color.background (Add-ons / Add-on surface colors)\n///\n/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.\n$background: md-ref-palette.$neutral6;\n/// md.sys.color.error (Error colors)\n///\n/// Indicates errors, such as invalid input in a date picker\n$error: md-ref-palette.$error95;\n/// md.sys.color.error-container (Error colors)\n///\n/// Container color for error messages and badges\n$error-container: md-ref-palette.$error80;\n/// md.sys.color.inverse-on-surface (Surface colors)\n///\n/// Used for text and icons shown against the inverse surface color\n$inverse-on-surface: md-ref-palette.$neutral0;\n/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)\n///\n/// Displays opposite of the primary color\n$inverse-primary: md-ref-palette.$primary20;\n/// md.sys.color.inverse-surface (Surface colors)\n///\n/// Displays opposite color of the surrounding UI\n$inverse-surface: md-ref-palette.$neutral90;\n/// md.sys.color.on-background (Add-ons / Add-on surface colors)\n///\n/// Used for text and icons shown against the background color\n$on-background: md-ref-palette.$neutral100;\n/// md.sys.color.on-error (Error colors)\n///\n/// Used for text and icons on the error color\n$on-error: md-ref-palette.$error0;\n/// md.sys.color.on-error-container (Error colors)\n///\n/// Used for text and icons on the error-container color\n$on-error-container: md-ref-palette.$error0;\n/// md.sys.color.on-primary (Primary colors)\n///\n/// Text and icons shown against the primary color\n$on-primary: md-ref-palette.$primary0;\n/// md.sys.color.on-primary-container (Primary colors)\n///\n/// Contrast-passing color shown against the primary container\n$on-primary-container: md-ref-palette.$primary0;\n/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Used for text and icons shown against the primary fixed color\n$on-primary-fixed: md-ref-palette.$primary0;\n/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)\n///\n/// Stronger hue variant used for text and icons shown against the primary fixed color\n$on-primary-fixed-variant: md-ref-palette.$primary0;\n/// md.sys.color.on-secondary (Secondary colors)\n///\n/// Text and icons shown against the secondary color\n$on-secondary: md-ref-palette.$secondary0;\n/// md.sys.color.on-secondary-container (Secondary colors)\n///\n/// Contrast-passing color shown against the secondary container\n$on-secondary-container: md-ref-palette.$secondary0;\n/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Used for text and icons shown against the secondary fixed color\n$on-secondary-fixed: md-ref-palette.$secondary0;\n/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)\n///\n/// Stronger hue variant used for text and icons shown against the secondary fixed color\n$on-secondary-fixed-variant: md-ref-palette.$secondary0;\n/// md.sys.color.on-surface (Surface colors)\n///\n/// Text and icons shown against the surface color\n$on-surface: md-ref-palette.$neutral100;\n/// md.sys.color.on-surface-variant (Surface colors)\n///\n/// For text and icons to indicate active or inactive component state\n$on-surface-variant: md-ref-palette.$neutral-variant100;\n/// md.sys.color.on-tertiary (Tertiary colors)\n///\n/// Text and icons shown against the tertiary color\n$on-tertiary: md-ref-palette.$tertiary0;\n/// md.sys.color.on-tertiary-container (Tertiary colors)\n///\n/// Contrast-passing color shown against the tertiary container\n$on-tertiary-container: md-ref-palette.$tertiary0;\n/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed: md-ref-palette.$tertiary0;\n/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)\n///\n/// Stronger hue variant used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed-variant: md-ref-palette.$tertiary0;\n/// md.sys.color.outline (Outline colors)\n///\n/// Subtle color used for boundaries\n$outline: md-ref-palette.$neutral-variant95;\n/// md.sys.color.outline-variant (Outline colors)\n///\n/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.\n$outline-variant: md-ref-palette.$neutral-variant80;\n/// md.sys.color.primary (Primary colors)\n///\n/// Main color used across screens and components\n$primary: md-ref-palette.$primary95;\n/// md.sys.color.primary-container (Primary colors)\n///\n/// Standout container color for key components\n$primary-container: md-ref-palette.$primary80;\n/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Primary color that doesn't change for light or dark theme.\n$primary-fixed: md-ref-palette.$primary90;\n/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)\n///\n/// Dimmer version of primary fixed color that doesn't change for light or dark theme.\n$primary-fixed-dim: md-ref-palette.$primary80;\n/// md.sys.color.scrim (Add-ons / Add-on surface colors)\n///\n/// Used for scrims which help separate floating components from the background.\n$scrim: md-ref-palette.$neutral0;\n/// md.sys.color.secondary (Secondary colors)\n///\n/// Accent color used across screens and components\n$secondary: md-ref-palette.$secondary95;\n/// md.sys.color.secondary-container (Secondary colors)\n///\n/// Less prominent container color, for components like tonal buttons\n$secondary-container: md-ref-palette.$secondary80;\n/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Secondary color that doesn't change for light or dark theme.\n$secondary-fixed: md-ref-palette.$secondary90;\n/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)\n///\n/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.\n$secondary-fixed-dim: md-ref-palette.$secondary80;\n/// md.sys.color.shadow (Add-ons / Add-on surface colors)\n///\n/// For shadows applied to elevated components\n$shadow: md-ref-palette.$neutral0;\n/// md.sys.color.surface (Surface colors)\n///\n/// Surface color for components like cards, sheets, and menus\n$surface: md-ref-palette.$neutral6;\n/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)\n///\n/// Surface that is brighter in both light and dark theme.\n$surface-bright: md-ref-palette.$neutral24;\n/// md.sys.color.surface-container (Surface colors)\n$surface-container: md-ref-palette.$neutral12;\n/// md.sys.color.surface-container-high (Surface colors)\n$surface-container-high: md-ref-palette.$neutral17;\n/// md.sys.color.surface-container-highest (Surface colors)\n$surface-container-highest: md-ref-palette.$neutral22;\n/// md.sys.color.surface-container-low (Surface colors)\n$surface-container-low: md-ref-palette.$neutral10;\n/// md.sys.color.surface-container-lowest (Surface colors)\n$surface-container-lowest: md-ref-palette.$neutral4;\n/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)\n///\n/// Surface that is dimmer in both light and dark theme.\n$surface-dim: md-ref-palette.$neutral6;\n/// md.sys.color.surface-variant (Surface colors)\n///\n/// Alternate surface color, can be used for active states\n$surface-variant: md-ref-palette.$neutral-variant30;\n/// md.sys.color.tertiary (Tertiary colors)\n///\n/// Contrasting accent color used across screens and components\n$tertiary: md-ref-palette.$tertiary95;\n/// md.sys.color.tertiary-container (Tertiary colors)\n///\n/// Contrasting container color, for components like input fields\n$tertiary-container: md-ref-palette.$tertiary80;\n/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Tertiary color that doesn't change for light or dark theme.\n$tertiary-fixed: md-ref-palette.$tertiary90;\n/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)\n///\n/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.\n$tertiary-fixed-dim: md-ref-palette.$tertiary80;\n/// md.sys.color.surface-tint (Surface colors)\n///\n/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors\n$surface-tint: $primary;\n/// md.sys.color.surface-tint-color (Surface colors)\n///\n/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name\n$surface-tint-color: $primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-color__dark__medium-contrast.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-palette';\n\n/// md.sys.color.background (Add-ons / Add-on surface colors)\n///\n/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.\n$background: md-ref-palette.$neutral6;\n/// md.sys.color.error (Error colors)\n///\n/// Indicates errors, such as invalid input in a date picker\n$error: md-ref-palette.$error90;\n/// md.sys.color.error-container (Error colors)\n///\n/// Container color for error messages and badges\n$error-container: md-ref-palette.$error60;\n/// md.sys.color.inverse-on-surface (Surface colors)\n///\n/// Used for text and icons shown against the inverse surface color\n$inverse-on-surface: md-ref-palette.$neutral10;\n/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)\n///\n/// Displays opposite of the primary color\n$inverse-primary: md-ref-palette.$primary30;\n/// md.sys.color.inverse-surface (Surface colors)\n///\n/// Displays opposite color of the surrounding UI\n$inverse-surface: md-ref-palette.$neutral90;\n/// md.sys.color.on-background (Add-ons / Add-on surface colors)\n///\n/// Used for text and icons shown against the background color\n$on-background: md-ref-palette.$neutral100;\n/// md.sys.color.on-error (Error colors)\n///\n/// Used for text and icons on the error color\n$on-error: md-ref-palette.$error10;\n/// md.sys.color.on-error-container (Error colors)\n///\n/// Used for text and icons on the error-container color\n$on-error-container: md-ref-palette.$error0;\n/// md.sys.color.on-primary (Primary colors)\n///\n/// Text and icons shown against the primary color\n$on-primary: md-ref-palette.$primary10;\n/// md.sys.color.on-primary-container (Primary colors)\n///\n/// Contrast-passing color shown against the primary container\n$on-primary-container: md-ref-palette.$primary0;\n/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Used for text and icons shown against the primary fixed color\n$on-primary-fixed: md-ref-palette.$primary0;\n/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)\n///\n/// Stronger hue variant used for text and icons shown against the primary fixed color\n$on-primary-fixed-variant: md-ref-palette.$primary20;\n/// md.sys.color.on-secondary (Secondary colors)\n///\n/// Text and icons shown against the secondary color\n$on-secondary: md-ref-palette.$secondary10;\n/// md.sys.color.on-secondary-container (Secondary colors)\n///\n/// Contrast-passing color shown against the secondary container\n$on-secondary-container: md-ref-palette.$secondary0;\n/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Used for text and icons shown against the secondary fixed color\n$on-secondary-fixed: md-ref-palette.$secondary0;\n/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)\n///\n/// Stronger hue variant used for text and icons shown against the secondary fixed color\n$on-secondary-fixed-variant: md-ref-palette.$secondary20;\n/// md.sys.color.on-surface (Surface colors)\n///\n/// Text and icons shown against the surface color\n$on-surface: md-ref-palette.$neutral100;\n/// md.sys.color.on-surface-variant (Surface colors)\n///\n/// For text and icons to indicate active or inactive component state\n$on-surface-variant: md-ref-palette.$neutral-variant90;\n/// md.sys.color.on-tertiary (Tertiary colors)\n///\n/// Text and icons shown against the tertiary color\n$on-tertiary: md-ref-palette.$tertiary10;\n/// md.sys.color.on-tertiary-container (Tertiary colors)\n///\n/// Contrast-passing color shown against the tertiary container\n$on-tertiary-container: md-ref-palette.$tertiary0;\n/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed: md-ref-palette.$tertiary0;\n/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)\n///\n/// Stronger hue variant used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed-variant: md-ref-palette.$tertiary20;\n/// md.sys.color.outline (Outline colors)\n///\n/// Subtle color used for boundaries\n$outline: md-ref-palette.$neutral-variant70;\n/// md.sys.color.outline-variant (Outline colors)\n///\n/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.\n$outline-variant: md-ref-palette.$neutral-variant60;\n/// md.sys.color.primary (Primary colors)\n///\n/// Main color used across screens and components\n$primary: md-ref-palette.$primary90;\n/// md.sys.color.primary-container (Primary colors)\n///\n/// Standout container color for key components\n$primary-container: md-ref-palette.$primary60;\n/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Primary color that doesn't change for light or dark theme.\n$primary-fixed: md-ref-palette.$primary90;\n/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)\n///\n/// Dimmer version of primary fixed color that doesn't change for light or dark theme.\n$primary-fixed-dim: md-ref-palette.$primary80;\n/// md.sys.color.scrim (Add-ons / Add-on surface colors)\n///\n/// Used for scrims which help separate floating components from the background.\n$scrim: md-ref-palette.$neutral0;\n/// md.sys.color.secondary (Secondary colors)\n///\n/// Accent color used across screens and components\n$secondary: md-ref-palette.$secondary90;\n/// md.sys.color.secondary-container (Secondary colors)\n///\n/// Less prominent container color, for components like tonal buttons\n$secondary-container: md-ref-palette.$secondary60;\n/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Secondary color that doesn't change for light or dark theme.\n$secondary-fixed: md-ref-palette.$secondary90;\n/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)\n///\n/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.\n$secondary-fixed-dim: md-ref-palette.$secondary80;\n/// md.sys.color.shadow (Add-ons / Add-on surface colors)\n///\n/// For shadows applied to elevated components\n$shadow: md-ref-palette.$neutral0;\n/// md.sys.color.surface (Surface colors)\n///\n/// Surface color for components like cards, sheets, and menus\n$surface: md-ref-palette.$neutral6;\n/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)\n///\n/// Surface that is brighter in both light and dark theme.\n$surface-bright: md-ref-palette.$neutral24;\n/// md.sys.color.surface-container (Surface colors)\n$surface-container: md-ref-palette.$neutral12;\n/// md.sys.color.surface-container-high (Surface colors)\n$surface-container-high: md-ref-palette.$neutral17;\n/// md.sys.color.surface-container-highest (Surface colors)\n$surface-container-highest: md-ref-palette.$neutral22;\n/// md.sys.color.surface-container-low (Surface colors)\n$surface-container-low: md-ref-palette.$neutral10;\n/// md.sys.color.surface-container-lowest (Surface colors)\n$surface-container-lowest: md-ref-palette.$neutral4;\n/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)\n///\n/// Surface that is dimmer in both light and dark theme.\n$surface-dim: md-ref-palette.$neutral6;\n/// md.sys.color.surface-variant (Surface colors)\n///\n/// Alternate surface color, can be used for active states\n$surface-variant: md-ref-palette.$neutral-variant30;\n/// md.sys.color.tertiary (Tertiary colors)\n///\n/// Contrasting accent color used across screens and components\n$tertiary: md-ref-palette.$tertiary90;\n/// md.sys.color.tertiary-container (Tertiary colors)\n///\n/// Contrasting container color, for components like input fields\n$tertiary-container: md-ref-palette.$tertiary60;\n/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Tertiary color that doesn't change for light or dark theme.\n$tertiary-fixed: md-ref-palette.$tertiary90;\n/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)\n///\n/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.\n$tertiary-fixed-dim: md-ref-palette.$tertiary80;\n/// md.sys.color.surface-tint (Surface colors)\n///\n/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors\n$surface-tint: $primary;\n/// md.sys.color.surface-tint-color (Surface colors)\n///\n/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name\n$surface-tint-color: $primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-color__high-contrast.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-palette';\n\n/// md.sys.color.background (Add-ons / Add-on surface colors)\n///\n/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.\n$background: md-ref-palette.$neutral98;\n/// md.sys.color.error (Error colors)\n///\n/// Indicates errors, such as invalid input in a date picker\n$error: md-ref-palette.$error20;\n/// md.sys.color.error-container (Error colors)\n///\n/// Container color for error messages and badges\n$error-container: md-ref-palette.$error30;\n/// md.sys.color.inverse-on-surface (Surface colors)\n///\n/// Used for text and icons shown against the inverse surface color\n$inverse-on-surface: md-ref-palette.$neutral100;\n/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)\n///\n/// Displays opposite of the primary color\n$inverse-primary: md-ref-palette.$primary80;\n/// md.sys.color.inverse-surface (Surface colors)\n///\n/// Displays opposite color of the surrounding UI\n$inverse-surface: md-ref-palette.$neutral20;\n/// md.sys.color.on-background (Add-ons / Add-on surface colors)\n///\n/// Used for text and icons shown against the background color\n$on-background: md-ref-palette.$neutral0;\n/// md.sys.color.on-error (Error colors)\n///\n/// Used for text and icons on the error color\n$on-error: md-ref-palette.$error100;\n/// md.sys.color.on-error-container (Error colors)\n///\n/// Used for text and icons on the error-container color\n$on-error-container: md-ref-palette.$error100;\n/// md.sys.color.on-primary (Primary colors)\n///\n/// Text and icons shown against the primary color\n$on-primary: md-ref-palette.$primary100;\n/// md.sys.color.on-primary-container (Primary colors)\n///\n/// Contrast-passing color shown against the primary container\n$on-primary-container: md-ref-palette.$primary100;\n/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Used for text and icons shown against the primary fixed color\n$on-primary-fixed: md-ref-palette.$primary100;\n/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)\n///\n/// Stronger hue variant used for text and icons shown against the primary fixed color\n$on-primary-fixed-variant: md-ref-palette.$primary100;\n/// md.sys.color.on-secondary (Secondary colors)\n///\n/// Text and icons shown against the secondary color\n$on-secondary: md-ref-palette.$secondary100;\n/// md.sys.color.on-secondary-container (Secondary colors)\n///\n/// Contrast-passing color shown against the secondary container\n$on-secondary-container: md-ref-palette.$secondary100;\n/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Used for text and icons shown against the secondary fixed color\n$on-secondary-fixed: md-ref-palette.$secondary100;\n/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)\n///\n/// Stronger hue variant used for text and icons shown against the secondary fixed color\n$on-secondary-fixed-variant: md-ref-palette.$secondary100;\n/// md.sys.color.on-surface (Surface colors)\n///\n/// Text and icons shown against the surface color\n$on-surface: md-ref-palette.$neutral0;\n/// md.sys.color.on-surface-variant (Surface colors)\n///\n/// For text and icons to indicate active or inactive component state\n$on-surface-variant: md-ref-palette.$neutral-variant0;\n/// md.sys.color.on-tertiary (Tertiary colors)\n///\n/// Text and icons shown against the tertiary color\n$on-tertiary: md-ref-palette.$tertiary100;\n/// md.sys.color.on-tertiary-container (Tertiary colors)\n///\n/// Contrast-passing color shown against the tertiary container\n$on-tertiary-container: md-ref-palette.$tertiary100;\n/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed: md-ref-palette.$tertiary100;\n/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)\n///\n/// Stronger hue variant used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed-variant: md-ref-palette.$tertiary100;\n/// md.sys.color.outline (Outline colors)\n///\n/// Subtle color used for boundaries\n$outline: md-ref-palette.$neutral-variant20;\n/// md.sys.color.outline-variant (Outline colors)\n///\n/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.\n$outline-variant: md-ref-palette.$neutral-variant30;\n/// md.sys.color.primary (Primary colors)\n///\n/// Main color used across screens and components\n$primary: md-ref-palette.$primary20;\n/// md.sys.color.primary-container (Primary colors)\n///\n/// Standout container color for key components\n$primary-container: md-ref-palette.$primary30;\n/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Primary color that doesn't change for light or dark theme.\n$primary-fixed: md-ref-palette.$primary30;\n/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)\n///\n/// Dimmer version of primary fixed color that doesn't change for light or dark theme.\n$primary-fixed-dim: md-ref-palette.$primary20;\n/// md.sys.color.scrim (Add-ons / Add-on surface colors)\n///\n/// Used for scrims which help separate floating components from the background.\n$scrim: md-ref-palette.$neutral0;\n/// md.sys.color.secondary (Secondary colors)\n///\n/// Accent color used across screens and components\n$secondary: md-ref-palette.$secondary20;\n/// md.sys.color.secondary-container (Secondary colors)\n///\n/// Less prominent container color, for components like tonal buttons\n$secondary-container: md-ref-palette.$secondary30;\n/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Secondary color that doesn't change for light or dark theme.\n$secondary-fixed: md-ref-palette.$secondary30;\n/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)\n///\n/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.\n$secondary-fixed-dim: md-ref-palette.$secondary20;\n/// md.sys.color.shadow (Add-ons / Add-on surface colors)\n///\n/// For shadows applied to elevated components\n$shadow: md-ref-palette.$neutral0;\n/// md.sys.color.surface (Surface colors)\n///\n/// Surface color for components like cards, sheets, and menus\n$surface: md-ref-palette.$neutral98;\n/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)\n///\n/// Surface that is brighter in both light and dark theme.\n$surface-bright: md-ref-palette.$neutral98;\n/// md.sys.color.surface-container (Surface colors)\n$surface-container: md-ref-palette.$neutral94;\n/// md.sys.color.surface-container-high (Surface colors)\n$surface-container-high: md-ref-palette.$neutral92;\n/// md.sys.color.surface-container-highest (Surface colors)\n$surface-container-highest: md-ref-palette.$neutral90;\n/// md.sys.color.surface-container-low (Surface colors)\n$surface-container-low: md-ref-palette.$neutral96;\n/// md.sys.color.surface-container-lowest (Surface colors)\n$surface-container-lowest: md-ref-palette.$neutral100;\n/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)\n///\n/// Surface that is dimmer in both light and dark theme.\n$surface-dim: md-ref-palette.$neutral87;\n/// md.sys.color.surface-variant (Surface colors)\n///\n/// Alternate surface color, can be used for active states\n$surface-variant: md-ref-palette.$neutral-variant90;\n/// md.sys.color.tertiary (Tertiary colors)\n///\n/// Contrasting accent color used across screens and components\n$tertiary: md-ref-palette.$tertiary20;\n/// md.sys.color.tertiary-container (Tertiary colors)\n///\n/// Contrasting container color, for components like input fields\n$tertiary-container: md-ref-palette.$tertiary30;\n/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Tertiary color that doesn't change for light or dark theme.\n$tertiary-fixed: md-ref-palette.$tertiary30;\n/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)\n///\n/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.\n$tertiary-fixed-dim: md-ref-palette.$tertiary20;\n/// md.sys.color.surface-tint (Surface colors)\n///\n/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors\n$surface-tint: $primary;\n/// md.sys.color.surface-tint-color (Surface colors)\n///\n/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name\n$surface-tint-color: $primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-color__medium-contrast.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-palette';\n\n/// md.sys.color.background (Add-ons / Add-on surface colors)\n///\n/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.\n$background: md-ref-palette.$neutral98;\n/// md.sys.color.error (Error colors)\n///\n/// Indicates errors, such as invalid input in a date picker\n$error: md-ref-palette.$error30;\n/// md.sys.color.error-container (Error colors)\n///\n/// Container color for error messages and badges\n$error-container: md-ref-palette.$error40;\n/// md.sys.color.inverse-on-surface (Surface colors)\n///\n/// Used for text and icons shown against the inverse surface color\n$inverse-on-surface: md-ref-palette.$neutral100;\n/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)\n///\n/// Displays opposite of the primary color\n$inverse-primary: md-ref-palette.$primary80;\n/// md.sys.color.inverse-surface (Surface colors)\n///\n/// Displays opposite color of the surrounding UI\n$inverse-surface: md-ref-palette.$neutral20;\n/// md.sys.color.on-background (Add-ons / Add-on surface colors)\n///\n/// Used for text and icons shown against the background color\n$on-background: md-ref-palette.$neutral0;\n/// md.sys.color.on-error (Error colors)\n///\n/// Used for text and icons on the error color\n$on-error: md-ref-palette.$error100;\n/// md.sys.color.on-error-container (Error colors)\n///\n/// Used for text and icons on the error-container color\n$on-error-container: md-ref-palette.$error100;\n/// md.sys.color.on-primary (Primary colors)\n///\n/// Text and icons shown against the primary color\n$on-primary: md-ref-palette.$primary100;\n/// md.sys.color.on-primary-container (Primary colors)\n///\n/// Contrast-passing color shown against the primary container\n$on-primary-container: md-ref-palette.$primary100;\n/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Used for text and icons shown against the primary fixed color\n$on-primary-fixed: md-ref-palette.$primary100;\n/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)\n///\n/// Stronger hue variant used for text and icons shown against the primary fixed color\n$on-primary-fixed-variant: md-ref-palette.$primary100;\n/// md.sys.color.on-secondary (Secondary colors)\n///\n/// Text and icons shown against the secondary color\n$on-secondary: md-ref-palette.$secondary100;\n/// md.sys.color.on-secondary-container (Secondary colors)\n///\n/// Contrast-passing color shown against the secondary container\n$on-secondary-container: md-ref-palette.$secondary100;\n/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Used for text and icons shown against the secondary fixed color\n$on-secondary-fixed: md-ref-palette.$secondary100;\n/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)\n///\n/// Stronger hue variant used for text and icons shown against the secondary fixed color\n$on-secondary-fixed-variant: md-ref-palette.$secondary100;\n/// md.sys.color.on-surface (Surface colors)\n///\n/// Text and icons shown against the surface color\n$on-surface: md-ref-palette.$neutral0;\n/// md.sys.color.on-surface-variant (Surface colors)\n///\n/// For text and icons to indicate active or inactive component state\n$on-surface-variant: md-ref-palette.$neutral-variant20;\n/// md.sys.color.on-tertiary (Tertiary colors)\n///\n/// Text and icons shown against the tertiary color\n$on-tertiary: md-ref-palette.$tertiary100;\n/// md.sys.color.on-tertiary-container (Tertiary colors)\n///\n/// Contrast-passing color shown against the tertiary container\n$on-tertiary-container: md-ref-palette.$tertiary100;\n/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed: md-ref-palette.$tertiary100;\n/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)\n///\n/// Stronger hue variant used for text and icons shown against the tertiary fixed color\n$on-tertiary-fixed-variant: md-ref-palette.$tertiary100;\n/// md.sys.color.outline (Outline colors)\n///\n/// Subtle color used for boundaries\n$outline: md-ref-palette.$neutral-variant30;\n/// md.sys.color.outline-variant (Outline colors)\n///\n/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.\n$outline-variant: md-ref-palette.$neutral-variant50;\n/// md.sys.color.primary (Primary colors)\n///\n/// Main color used across screens and components\n$primary: md-ref-palette.$primary30;\n/// md.sys.color.primary-container (Primary colors)\n///\n/// Standout container color for key components\n$primary-container: md-ref-palette.$primary40;\n/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)\n///\n/// Primary color that doesn't change for light or dark theme.\n$primary-fixed: md-ref-palette.$primary40;\n/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)\n///\n/// Dimmer version of primary fixed color that doesn't change for light or dark theme.\n$primary-fixed-dim: md-ref-palette.$primary30;\n/// md.sys.color.scrim (Add-ons / Add-on surface colors)\n///\n/// Used for scrims which help separate floating components from the background.\n$scrim: md-ref-palette.$neutral0;\n/// md.sys.color.secondary (Secondary colors)\n///\n/// Accent color used across screens and components\n$secondary: md-ref-palette.$secondary30;\n/// md.sys.color.secondary-container (Secondary colors)\n///\n/// Less prominent container color, for components like tonal buttons\n$secondary-container: md-ref-palette.$secondary40;\n/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)\n///\n/// Secondary color that doesn't change for light or dark theme.\n$secondary-fixed: md-ref-palette.$secondary40;\n/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)\n///\n/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.\n$secondary-fixed-dim: md-ref-palette.$secondary30;\n/// md.sys.color.shadow (Add-ons / Add-on surface colors)\n///\n/// For shadows applied to elevated components\n$shadow: md-ref-palette.$neutral0;\n/// md.sys.color.surface (Surface colors)\n///\n/// Surface color for components like cards, sheets, and menus\n$surface: md-ref-palette.$neutral98;\n/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)\n///\n/// Surface that is brighter in both light and dark theme.\n$surface-bright: md-ref-palette.$neutral98;\n/// md.sys.color.surface-container (Surface colors)\n$surface-container: md-ref-palette.$neutral94;\n/// md.sys.color.surface-container-high (Surface colors)\n$surface-container-high: md-ref-palette.$neutral92;\n/// md.sys.color.surface-container-highest (Surface colors)\n$surface-container-highest: md-ref-palette.$neutral90;\n/// md.sys.color.surface-container-low (Surface colors)\n$surface-container-low: md-ref-palette.$neutral96;\n/// md.sys.color.surface-container-lowest (Surface colors)\n$surface-container-lowest: md-ref-palette.$neutral100;\n/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)\n///\n/// Surface that is dimmer in both light and dark theme.\n$surface-dim: md-ref-palette.$neutral87;\n/// md.sys.color.surface-variant (Surface colors)\n///\n/// Alternate surface color, can be used for active states\n$surface-variant: md-ref-palette.$neutral-variant90;\n/// md.sys.color.tertiary (Tertiary colors)\n///\n/// Contrasting accent color used across screens and components\n$tertiary: md-ref-palette.$tertiary30;\n/// md.sys.color.tertiary-container (Tertiary colors)\n///\n/// Contrasting container color, for components like input fields\n$tertiary-container: md-ref-palette.$tertiary40;\n/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)\n///\n/// Tertiary color that doesn't change for light or dark theme.\n$tertiary-fixed: md-ref-palette.$tertiary40;\n/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)\n///\n/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.\n$tertiary-fixed-dim: md-ref-palette.$tertiary30;\n/// md.sys.color.surface-tint (Surface colors)\n///\n/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors\n$surface-tint: $primary;\n/// md.sys.color.surface-tint-color (Surface colors)\n///\n/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name\n$surface-tint-color: $primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-elevation.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-sys-color';\n\n/// md.sys.elevation.level0\n$level0: 0px;\n/// md.sys.elevation.level1\n$level1: 1px;\n/// md.sys.elevation.level2\n$level2: 3px;\n/// md.sys.elevation.level3\n$level3: 6px;\n/// md.sys.elevation.level4\n$level4: 8px;\n/// md.sys.elevation.level5\n$level5: 12px;\n/// md.sys.elevation.surface-tint-color\n///\n/// @deprecated Moved to *.color.*\n$surface-tint-color: md-sys-color.$primary;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-motion.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.sys.motion.duration.extra-long1 (Duration)\n$duration-extra-long1: 700ms;\n/// md.sys.motion.duration.extra-long2 (Duration)\n$duration-extra-long2: 800ms;\n/// md.sys.motion.duration.extra-long3 (Duration)\n$duration-extra-long3: 900ms;\n/// md.sys.motion.duration.extra-long4 (Duration)\n$duration-extra-long4: 1000ms;\n/// md.sys.motion.duration.long1 (Duration)\n$duration-long1: 450ms;\n/// md.sys.motion.duration.long2 (Duration)\n$duration-long2: 500ms;\n/// md.sys.motion.duration.long3 (Duration)\n$duration-long3: 550ms;\n/// md.sys.motion.duration.long4 (Duration)\n$duration-long4: 600ms;\n/// md.sys.motion.duration.medium1 (Duration)\n$duration-medium1: 250ms;\n/// md.sys.motion.duration.medium2 (Duration)\n$duration-medium2: 300ms;\n/// md.sys.motion.duration.medium3 (Duration)\n$duration-medium3: 350ms;\n/// md.sys.motion.duration.medium4 (Duration)\n$duration-medium4: 400ms;\n/// md.sys.motion.duration.short1 (Duration)\n$duration-short1: 50ms;\n/// md.sys.motion.duration.short2 (Duration)\n$duration-short2: 100ms;\n/// md.sys.motion.duration.short3 (Duration)\n$duration-short3: 150ms;\n/// md.sys.motion.duration.short4 (Duration)\n$duration-short4: 200ms;\n/// md.sys.motion.easing.emphasized.accelerate (Easing)\n$easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);\n/// md.sys.motion.easing.emphasized.decelerate (Easing)\n$easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);\n/// md.sys.motion.easing.legacy (Easing)\n$easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);\n/// md.sys.motion.easing.legacy.accelerate (Easing)\n$easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);\n/// md.sys.motion.easing.legacy.decelerate (Easing)\n$easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);\n/// md.sys.motion.easing.linear (Easing)\n$easing-linear: cubic-bezier(0, 0, 1, 1);\n/// md.sys.motion.easing.standard (Easing)\n$easing-standard: cubic-bezier(0.2, 0, 0, 1);\n/// md.sys.motion.easing.standard.accelerate (Easing)\n$easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);\n/// md.sys.motion.easing.standard.decelerate (Easing)\n$easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);\n/// md.sys.motion.path (Style)\n$path: /* Type \"motion_path\" is not supported. */ null;\n/// md.sys.motion.spring.default.effects\n$spring-default-effects: /* Type \"custom_composite\" is not supported. */ null;\n/// md.sys.motion.spring.default.effects.damping (Spring)\n$spring-default-effects-damping: 1;\n/// md.sys.motion.spring.default.effects.stiffness (Spring)\n$spring-default-effects-stiffness: 1600;\n/// md.sys.motion.spring.default.spatial\n$spring-default-spatial: /* Type \"custom_composite\" is not supported. */ null;\n/// md.sys.motion.spring.default.spatial.damping (Spring)\n$spring-default-spatial-damping: 0.9;\n/// md.sys.motion.spring.default.spatial.stiffness (Spring)\n$spring-default-spatial-stiffness: 700;\n/// md.sys.motion.spring.fast.effects\n$spring-fast-effects: /* Type \"custom_composite\" is not supported. */ null;\n/// md.sys.motion.spring.fast.effects.damping (Spring)\n$spring-fast-effects-damping: 1;\n/// md.sys.motion.spring.fast.effects.stiffness (Spring)\n$spring-fast-effects-stiffness: 3800;\n/// md.sys.motion.spring.fast.spatial\n$spring-fast-spatial: /* Type \"custom_composite\" is not supported. */ null;\n/// md.sys.motion.spring.fast.spatial.damping (Spring)\n$spring-fast-spatial-damping: 0.9;\n/// md.sys.motion.spring.fast.spatial.stiffness (Spring)\n$spring-fast-spatial-stiffness: 1400;\n/// md.sys.motion.spring.slow.effects\n$spring-slow-effects: /* Type \"custom_composite\" is not supported. */ null;\n/// md.sys.motion.spring.slow.effects.damping (Spring)\n$spring-slow-effects-damping: 1;\n/// md.sys.motion.spring.slow.effects.stiffness (Spring)\n$spring-slow-effects-stiffness: 800;\n/// md.sys.motion.spring.slow.spatial\n$spring-slow-spatial: /* Type \"custom_composite\" is not supported. */ null;\n/// md.sys.motion.spring.slow.spatial.damping (Spring)\n$spring-slow-spatial-damping: 0.9;\n/// md.sys.motion.spring.slow.spatial.stiffness (Spring)\n$spring-slow-spatial-stiffness: 300;\n/// md.sys.motion.easing.emphasized (Easing)\n$easing-emphasized: $easing-standard;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-shape.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.sys.shape.corner-value.extra-extra-large\n$corner-value-extra-extra-large: 48px;\n/// md.sys.shape.corner-value.extra-large\n$corner-value-extra-large: 28px;\n/// md.sys.shape.corner-value.extra-large-increased\n$corner-value-extra-large-increased: 32px;\n/// md.sys.shape.corner-value.extra-small\n$corner-value-extra-small: 4px;\n/// md.sys.shape.corner-value.large\n$corner-value-large: 16px;\n/// md.sys.shape.corner-value.large-increased\n$corner-value-large-increased: 20px;\n/// md.sys.shape.corner-value.medium\n$corner-value-medium: 12px;\n/// md.sys.shape.corner-value.none\n$corner-value-none: 0px;\n/// md.sys.shape.corner-value.small\n$corner-value-small: 8px;\n/// md.sys.shape.corner.extra-extra-large\n$corner-extra-extra-large: 48px;\n/// md.sys.shape.corner.extra-large\n$corner-extra-large: 28px;\n/// md.sys.shape.corner.extra-large-increased\n$corner-extra-large-increased: 32px;\n/// md.sys.shape.corner.extra-large.top\n$corner-extra-large-top: 28px 28px 0px 0px;\n/// md.sys.shape.corner.extra-small\n$corner-extra-small: 4px;\n/// md.sys.shape.corner.extra-small.top\n$corner-extra-small-top: 4px 4px 0px 0px;\n/// md.sys.shape.corner.full\n///\n/// Use for: Badge, Buttons, Icon buttons, Sliders, Switches, Search bar\n$corner-full: 9999px;\n/// md.sys.shape.corner.large\n$corner-large: 16px;\n/// md.sys.shape.corner.large-increased\n$corner-large-increased: 20px;\n/// md.sys.shape.corner.large.end\n$corner-large-end: 0px 16px 16px 0px;\n/// md.sys.shape.corner.large.start\n$corner-large-start: 16px 0px 0px 16px;\n/// md.sys.shape.corner.large.top\n$corner-large-top: 16px 16px 0px 0px;\n/// md.sys.shape.corner.medium\n$corner-medium: 12px;\n/// md.sys.shape.corner.none\n$corner-none: 0px;\n/// md.sys.shape.corner.small\n$corner-small: 8px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-state-focus-indicator.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.sys.state.focus-indicator.inner-offset\n$inner-offset: -3px;\n/// md.sys.state.focus-indicator.outer-offset\n$outer-offset: 2px;\n/// md.sys.state.focus-indicator.thickness\n$thickness: 3px;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-state.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n/// md.sys.state.disabled.state-layer-opacity\n$disabled-state-layer-opacity: 0.38;\n/// md.sys.state.dragged.state-layer-opacity\n$dragged-state-layer-opacity: 0.16;\n/// md.sys.state.focus.state-layer-opacity\n$focus-state-layer-opacity: 0.1;\n/// md.sys.state.hover.state-layer-opacity\n$hover-state-layer-opacity: 0.08;\n/// md.sys.state.pressed.state-layer-opacity\n$pressed-state-layer-opacity: 0.1;\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-typescale-emphasized.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-typeface';\n\n/// md.sys.typescale.emphasized.body-large.crsv (Emphasized Body styles / Emphasized Body Large)\n$body-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.body-large.fill (Emphasized Body styles / Emphasized Body Large)\n$body-large-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.body-large.grad (Emphasized Body styles / Emphasized Body Large)\n$body-large-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.body-large.hexp (Emphasized Body styles / Emphasized Body Large)\n$body-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.body-large.line-height (Emphasized Body styles / Emphasized Body Large)\n$body-large-line-height: 1.5rem;\n/// md.sys.typescale.emphasized.body-large.opsz (Emphasized Body styles / Emphasized Body Large)\n$body-large-opsz: 'opsz' 16;\n/// md.sys.typescale.emphasized.body-large.rond (Emphasized Body styles / Emphasized Body Large)\n$body-large-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.body-large.size (Emphasized Body styles / Emphasized Body Large)\n$body-large-size: 1rem;\n/// md.sys.typescale.emphasized.body-large.slnt (Emphasized Body styles / Emphasized Body Large)\n$body-large-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.body-large.tracking (Emphasized Body styles / Emphasized Body Large)\n$body-large-tracking: 0.03125rem;\n/// md.sys.typescale.emphasized.body-large.wdth (Emphasized Body styles / Emphasized Body Large)\n$body-large-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.body-large.wght (Emphasized Body styles / Emphasized Body Large)\n$body-large-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.body-medium.crsv (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.body-medium.fill (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.body-medium.grad (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.body-medium.hexp (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.body-medium.line-height (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-line-height: 1.25rem;\n/// md.sys.typescale.emphasized.body-medium.opsz (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-opsz: 'opsz' 14;\n/// md.sys.typescale.emphasized.body-medium.rond (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.body-medium.size (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-size: 0.875rem;\n/// md.sys.typescale.emphasized.body-medium.slnt (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.body-medium.tracking (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-tracking: 0.015625rem;\n/// md.sys.typescale.emphasized.body-medium.wdth (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.body-medium.wght (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.body-small.crsv (Emphasized Body styles / Emphasized Body Small)\n$body-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.body-small.fill (Emphasized Body styles / Emphasized Body Small)\n$body-small-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.body-small.grad (Emphasized Body styles / Emphasized Body Small)\n$body-small-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.body-small.hexp (Emphasized Body styles / Emphasized Body Small)\n$body-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.body-small.line-height (Emphasized Body styles / Emphasized Body Small)\n$body-small-line-height: 1rem;\n/// md.sys.typescale.emphasized.body-small.opsz (Emphasized Body styles / Emphasized Body Small)\n$body-small-opsz: 'opsz' 12;\n/// md.sys.typescale.emphasized.body-small.rond (Emphasized Body styles / Emphasized Body Small)\n$body-small-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.body-small.size (Emphasized Body styles / Emphasized Body Small)\n$body-small-size: 0.75rem;\n/// md.sys.typescale.emphasized.body-small.slnt (Emphasized Body styles / Emphasized Body Small)\n$body-small-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.body-small.tracking (Emphasized Body styles / Emphasized Body Small)\n$body-small-tracking: 0.025rem;\n/// md.sys.typescale.emphasized.body-small.wdth (Emphasized Body styles / Emphasized Body Small)\n$body-small-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.body-small.wght (Emphasized Body styles / Emphasized Body Small)\n$body-small-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.display-large.crsv (Emphasized Display styles / Emphasized Display Large)\n$display-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.display-large.fill (Emphasized Display styles / Emphasized Display Large)\n$display-large-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.display-large.grad (Emphasized Display styles / Emphasized Display Large)\n$display-large-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.display-large.hexp (Emphasized Display styles / Emphasized Display Large)\n$display-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.display-large.line-height (Emphasized Display styles / Emphasized Display Large)\n$display-large-line-height: 4rem;\n/// md.sys.typescale.emphasized.display-large.opsz (Emphasized Display styles / Emphasized Display Large)\n$display-large-opsz: 'opsz' 57;\n/// md.sys.typescale.emphasized.display-large.rond (Emphasized Display styles / Emphasized Display Large)\n$display-large-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.display-large.size (Emphasized Display styles / Emphasized Display Large)\n$display-large-size: 3.5625rem;\n/// md.sys.typescale.emphasized.display-large.slnt (Emphasized Display styles / Emphasized Display Large)\n$display-large-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.display-large.tracking (Emphasized Display styles / Emphasized Display Large)\n$display-large-tracking: -0.015625rem;\n/// md.sys.typescale.emphasized.display-large.wdth (Emphasized Display styles / Emphasized Display Large)\n$display-large-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.display-large.wght (Emphasized Display styles / Emphasized Display Large)\n$display-large-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.display-medium.crsv (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.display-medium.fill (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.display-medium.grad (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.display-medium.hexp (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.display-medium.line-height (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-line-height: 3.25rem;\n/// md.sys.typescale.emphasized.display-medium.opsz (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-opsz: 'opsz' 45;\n/// md.sys.typescale.emphasized.display-medium.rond (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.display-medium.size (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-size: 2.8125rem;\n/// md.sys.typescale.emphasized.display-medium.slnt (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.display-medium.tracking (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-tracking: 0rem;\n/// md.sys.typescale.emphasized.display-medium.wdth (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.display-medium.wght (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.display-small.crsv (Emphasized Display styles / Emphasized Display Small)\n$display-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.display-small.fill (Emphasized Display styles / Emphasized Display Small)\n$display-small-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.display-small.grad (Emphasized Display styles / Emphasized Display Small)\n$display-small-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.display-small.hexp (Emphasized Display styles / Emphasized Display Small)\n$display-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.display-small.line-height (Emphasized Display styles / Emphasized Display Small)\n$display-small-line-height: 2.75rem;\n/// md.sys.typescale.emphasized.display-small.opsz (Emphasized Display styles / Emphasized Display Small)\n$display-small-opsz: 'opsz' 36;\n/// md.sys.typescale.emphasized.display-small.rond (Emphasized Display styles / Emphasized Display Small)\n$display-small-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.display-small.size (Emphasized Display styles / Emphasized Display Small)\n$display-small-size: 2.25rem;\n/// md.sys.typescale.emphasized.display-small.slnt (Emphasized Display styles / Emphasized Display Small)\n$display-small-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.display-small.tracking (Emphasized Display styles / Emphasized Display Small)\n$display-small-tracking: 0rem;\n/// md.sys.typescale.emphasized.display-small.wdth (Emphasized Display styles / Emphasized Display Small)\n$display-small-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.display-small.wght (Emphasized Display styles / Emphasized Display Small)\n$display-small-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.headline-large.crsv (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.headline-large.fill (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.headline-large.grad (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.headline-large.hexp (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.headline-large.line-height (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-line-height: 2.5rem;\n/// md.sys.typescale.emphasized.headline-large.opsz (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-opsz: 'opsz' 32;\n/// md.sys.typescale.emphasized.headline-large.rond (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.headline-large.size (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-size: 2rem;\n/// md.sys.typescale.emphasized.headline-large.slnt (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.headline-large.tracking (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-tracking: 0rem;\n/// md.sys.typescale.emphasized.headline-large.wdth (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.headline-large.wght (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.headline-medium.crsv (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.headline-medium.fill (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.headline-medium.grad (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.headline-medium.hexp (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.headline-medium.line-height (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-line-height: 2.25rem;\n/// md.sys.typescale.emphasized.headline-medium.opsz (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-opsz: 'opsz' 28;\n/// md.sys.typescale.emphasized.headline-medium.rond (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.headline-medium.size (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-size: 1.75rem;\n/// md.sys.typescale.emphasized.headline-medium.slnt (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.headline-medium.tracking (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-tracking: 0rem;\n/// md.sys.typescale.emphasized.headline-medium.wdth (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.headline-medium.wght (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.headline-small.crsv (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.headline-small.fill (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.headline-small.grad (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.headline-small.hexp (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.headline-small.line-height (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-line-height: 2rem;\n/// md.sys.typescale.emphasized.headline-small.opsz (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-opsz: 'opsz' 24;\n/// md.sys.typescale.emphasized.headline-small.rond (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.headline-small.size (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-size: 1.5rem;\n/// md.sys.typescale.emphasized.headline-small.slnt (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.headline-small.tracking (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-tracking: 0rem;\n/// md.sys.typescale.emphasized.headline-small.wdth (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.headline-small.wght (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.label-large.crsv (Emphasized Label styles / Emphasized Label Large)\n$label-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.label-large.fill (Emphasized Label styles / Emphasized Label Large)\n$label-large-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.label-large.grad (Emphasized Label styles / Emphasized Label Large)\n$label-large-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.label-large.hexp (Emphasized Label styles / Emphasized Label Large)\n$label-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.label-large.line-height (Emphasized Label styles / Emphasized Label Large)\n$label-large-line-height: 1.25rem;\n/// md.sys.typescale.emphasized.label-large.opsz (Emphasized Label styles / Emphasized Label Large)\n$label-large-opsz: 'opsz' 14;\n/// md.sys.typescale.emphasized.label-large.rond (Emphasized Label styles / Emphasized Label Large)\n$label-large-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.label-large.size (Emphasized Label styles / Emphasized Label Large)\n$label-large-size: 0.875rem;\n/// md.sys.typescale.emphasized.label-large.slnt (Emphasized Label styles / Emphasized Label Large)\n$label-large-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.label-large.tracking (Emphasized Label styles / Emphasized Label Large)\n$label-large-tracking: 0.00625rem;\n/// md.sys.typescale.emphasized.label-large.wdth (Emphasized Label styles / Emphasized Label Large)\n$label-large-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.label-large.wght (Emphasized Label styles / Emphasized Label Large)\n$label-large-wght: 'wght' 600;\n/// md.sys.typescale.emphasized.label-medium.crsv (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.label-medium.fill (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.label-medium.grad (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.label-medium.hexp (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.label-medium.line-height (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-line-height: 1rem;\n/// md.sys.typescale.emphasized.label-medium.opsz (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-opsz: 'opsz' 12;\n/// md.sys.typescale.emphasized.label-medium.rond (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.label-medium.size (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-size: 0.75rem;\n/// md.sys.typescale.emphasized.label-medium.slnt (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.label-medium.tracking (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-tracking: 0.03125rem;\n/// md.sys.typescale.emphasized.label-medium.wdth (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.label-medium.wght (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-wght: 'wght' 600;\n/// md.sys.typescale.emphasized.label-small.crsv (Emphasized Label styles / Emphasized Label Small)\n$label-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.label-small.fill (Emphasized Label styles / Emphasized Label Small)\n$label-small-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.label-small.grad (Emphasized Label styles / Emphasized Label Small)\n$label-small-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.label-small.hexp (Emphasized Label styles / Emphasized Label Small)\n$label-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.label-small.line-height (Emphasized Label styles / Emphasized Label Small)\n$label-small-line-height: 1rem;\n/// md.sys.typescale.emphasized.label-small.opsz (Emphasized Label styles / Emphasized Label Small)\n$label-small-opsz: 'opsz' 11;\n/// md.sys.typescale.emphasized.label-small.rond (Emphasized Label styles / Emphasized Label Small)\n$label-small-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.label-small.size (Emphasized Label styles / Emphasized Label Small)\n$label-small-size: 0.6875rem;\n/// md.sys.typescale.emphasized.label-small.slnt (Emphasized Label styles / Emphasized Label Small)\n$label-small-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.label-small.tracking (Emphasized Label styles / Emphasized Label Small)\n$label-small-tracking: 0.03125rem;\n/// md.sys.typescale.emphasized.label-small.wdth (Emphasized Label styles / Emphasized Label Small)\n$label-small-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.label-small.wght (Emphasized Label styles / Emphasized Label Small)\n$label-small-wght: 'wght' 600;\n/// md.sys.typescale.emphasized.title-large.crsv (Emphasized Title styles / Emphasized Title Large)\n$title-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.title-large.fill (Emphasized Title styles / Emphasized Title Large)\n$title-large-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.title-large.grad (Emphasized Title styles / Emphasized Title Large)\n$title-large-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.title-large.hexp (Emphasized Title styles / Emphasized Title Large)\n$title-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.title-large.line-height (Emphasized Title styles / Emphasized Title Large)\n$title-large-line-height: 1.75rem;\n/// md.sys.typescale.emphasized.title-large.opsz (Emphasized Title styles / Emphasized Title Large)\n$title-large-opsz: 'opsz' 22;\n/// md.sys.typescale.emphasized.title-large.rond (Emphasized Title styles / Emphasized Title Large)\n$title-large-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.title-large.size (Emphasized Title styles / Emphasized Title Large)\n$title-large-size: 1.375rem;\n/// md.sys.typescale.emphasized.title-large.slnt (Emphasized Title styles / Emphasized Title Large)\n$title-large-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.title-large.tracking (Emphasized Title styles / Emphasized Title Large)\n$title-large-tracking: 0rem;\n/// md.sys.typescale.emphasized.title-large.wdth (Emphasized Title styles / Emphasized Title Large)\n$title-large-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.title-large.wght (Emphasized Title styles / Emphasized Title Large)\n$title-large-wght: 'wght' 500;\n/// md.sys.typescale.emphasized.title-medium.crsv (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.title-medium.fill (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.title-medium.grad (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.title-medium.hexp (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.title-medium.line-height (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-line-height: 1.5rem;\n/// md.sys.typescale.emphasized.title-medium.opsz (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-opsz: 'opsz' 16;\n/// md.sys.typescale.emphasized.title-medium.rond (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.title-medium.size (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-size: 1rem;\n/// md.sys.typescale.emphasized.title-medium.slnt (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.title-medium.tracking (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-tracking: 0.009375rem;\n/// md.sys.typescale.emphasized.title-medium.wdth (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.title-medium.weight (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-weight: 600;\n/// md.sys.typescale.emphasized.title-medium.wght (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-wght: 'wght' 600;\n/// md.sys.typescale.emphasized.title-small.crsv (Emphasized Title styles / Emphasized Title Small)\n$title-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.emphasized.title-small.fill (Emphasized Title styles / Emphasized Title Small)\n$title-small-fill: 'FILL' 0;\n/// md.sys.typescale.emphasized.title-small.grad (Emphasized Title styles / Emphasized Title Small)\n$title-small-grad: 'GRAD' 0;\n/// md.sys.typescale.emphasized.title-small.hexp (Emphasized Title styles / Emphasized Title Small)\n$title-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.emphasized.title-small.line-height (Emphasized Title styles / Emphasized Title Small)\n$title-small-line-height: 1.25rem;\n/// md.sys.typescale.emphasized.title-small.opsz (Emphasized Title styles / Emphasized Title Small)\n$title-small-opsz: 'opsz' 14;\n/// md.sys.typescale.emphasized.title-small.rond (Emphasized Title styles / Emphasized Title Small)\n$title-small-rond: 'ROND' 0;\n/// md.sys.typescale.emphasized.title-small.size (Emphasized Title styles / Emphasized Title Small)\n$title-small-size: 0.875rem;\n/// md.sys.typescale.emphasized.title-small.slnt (Emphasized Title styles / Emphasized Title Small)\n$title-small-slnt: 'slnt' 0;\n/// md.sys.typescale.emphasized.title-small.tracking (Emphasized Title styles / Emphasized Title Small)\n$title-small-tracking: 0.00625rem;\n/// md.sys.typescale.emphasized.title-small.wdth (Emphasized Title styles / Emphasized Title Small)\n$title-small-wdth: 'wdth' 100;\n/// md.sys.typescale.emphasized.title-small.weight (Emphasized Title styles / Emphasized Title Small)\n$title-small-weight: 600;\n/// md.sys.typescale.emphasized.title-small.wght (Emphasized Title styles / Emphasized Title Small)\n$title-small-wght: 'wght' 600;\n/// md.sys.typescale.emphasized.body-large.font (Emphasized Body styles / Emphasized Body Large)\n$body-large-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.body-large.weight (Emphasized Body styles / Emphasized Body Large)\n$body-large-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.body-medium.font (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.body-medium.weight (Emphasized Body styles / Emphasized Body Medium)\n$body-medium-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.body-small.font (Emphasized Body styles / Emphasized Body Small)\n$body-small-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.body-small.weight (Emphasized Body styles / Emphasized Body Small)\n$body-small-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.display-large.font (Emphasized Display styles / Emphasized Display Large)\n$display-large-font: md-ref-typeface.$brand;\n/// md.sys.typescale.emphasized.display-large.weight (Emphasized Display styles / Emphasized Display Large)\n$display-large-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.display-medium.font (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-font: md-ref-typeface.$brand;\n/// md.sys.typescale.emphasized.display-medium.weight (Emphasized Display styles / Emphasized Display Medium)\n$display-medium-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.display-small.font (Emphasized Display styles / Emphasized Display Small)\n$display-small-font: md-ref-typeface.$brand;\n/// md.sys.typescale.emphasized.display-small.weight (Emphasized Display styles / Emphasized Display Small)\n$display-small-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.headline-large.font (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-font: md-ref-typeface.$brand;\n/// md.sys.typescale.emphasized.headline-large.weight (Emphasized Headline styles / Emphasized Headline Large)\n$headline-large-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.headline-medium.font (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-font: md-ref-typeface.$brand;\n/// md.sys.typescale.emphasized.headline-medium.weight (Emphasized Headline styles / Emphasized Headline Medium)\n$headline-medium-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.headline-small.font (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-font: md-ref-typeface.$brand;\n/// md.sys.typescale.emphasized.headline-small.weight (Emphasized Headline styles / Emphasized Headline Small)\n$headline-small-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.label-large.font (Emphasized Label styles / Emphasized Label Large)\n$label-large-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.label-large.weight (Emphasized Label styles / Emphasized Label Large)\n$label-large-weight: md-ref-typeface.$weight-bold;\n/// md.sys.typescale.emphasized.label-medium.font (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.label-medium.weight (Emphasized Label styles / Emphasized Label Medium)\n$label-medium-weight: md-ref-typeface.$weight-bold;\n/// md.sys.typescale.emphasized.label-small.font (Emphasized Label styles / Emphasized Label Small)\n$label-small-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.label-small.weight (Emphasized Label styles / Emphasized Label Small)\n$label-small-weight: md-ref-typeface.$weight-bold;\n/// md.sys.typescale.emphasized.title-large.font (Emphasized Title styles / Emphasized Title Large)\n$title-large-font: md-ref-typeface.$brand;\n/// md.sys.typescale.emphasized.title-large.weight (Emphasized Title styles / Emphasized Title Large)\n$title-large-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.emphasized.title-medium.font (Emphasized Title styles / Emphasized Title Medium)\n$title-medium-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.title-small.font (Emphasized Title styles / Emphasized Title Small)\n$title-small-font: md-ref-typeface.$plain;\n/// md.sys.typescale.emphasized.body-large (Emphasized Body styles / Emphasized Body Large)\n@mixin body-large {\n  font-family: $body-large-font;\n  font-size: $body-large-size;\n  font-weight: $body-large-weight;\n  letter-spacing: $body-large-tracking;\n  line-height: $body-large-line-height;\n}\n/// md.sys.typescale.emphasized.body-medium (Emphasized Body styles / Emphasized Body Medium)\n@mixin body-medium {\n  font-family: $body-medium-font;\n  font-size: $body-medium-size;\n  font-weight: $body-medium-weight;\n  letter-spacing: $body-medium-tracking;\n  line-height: $body-medium-line-height;\n}\n/// md.sys.typescale.emphasized.body-small (Emphasized Body styles / Emphasized Body Small)\n@mixin body-small {\n  font-family: $body-small-font;\n  font-size: $body-small-size;\n  font-weight: $body-small-weight;\n  letter-spacing: $body-small-tracking;\n  line-height: $body-small-line-height;\n}\n/// md.sys.typescale.emphasized.display-large (Emphasized Display styles / Emphasized Display Large)\n@mixin display-large {\n  font-family: $display-large-font;\n  font-size: $display-large-size;\n  font-weight: $display-large-weight;\n  letter-spacing: $display-large-tracking;\n  line-height: $display-large-line-height;\n}\n/// md.sys.typescale.emphasized.display-medium (Emphasized Display styles / Emphasized Display Medium)\n@mixin display-medium {\n  font-family: $display-medium-font;\n  font-size: $display-medium-size;\n  font-weight: $display-medium-weight;\n  letter-spacing: $display-medium-tracking;\n  line-height: $display-medium-line-height;\n}\n/// md.sys.typescale.emphasized.display-small (Emphasized Display styles / Emphasized Display Small)\n@mixin display-small {\n  font-family: $display-small-font;\n  font-size: $display-small-size;\n  font-weight: $display-small-weight;\n  letter-spacing: $display-small-tracking;\n  line-height: $display-small-line-height;\n}\n/// md.sys.typescale.emphasized.headline-large (Emphasized Headline styles / Emphasized Headline Large)\n@mixin headline-large {\n  font-family: $headline-large-font;\n  font-size: $headline-large-size;\n  font-weight: $headline-large-weight;\n  letter-spacing: $headline-large-tracking;\n  line-height: $headline-large-line-height;\n}\n/// md.sys.typescale.emphasized.headline-medium (Emphasized Headline styles / Emphasized Headline Medium)\n@mixin headline-medium {\n  font-family: $headline-medium-font;\n  font-size: $headline-medium-size;\n  font-weight: $headline-medium-weight;\n  letter-spacing: $headline-medium-tracking;\n  line-height: $headline-medium-line-height;\n}\n/// md.sys.typescale.emphasized.headline-small (Emphasized Headline styles / Emphasized Headline Small)\n@mixin headline-small {\n  font-family: $headline-small-font;\n  font-size: $headline-small-size;\n  font-weight: $headline-small-weight;\n  letter-spacing: $headline-small-tracking;\n  line-height: $headline-small-line-height;\n}\n/// md.sys.typescale.emphasized.label-large (Emphasized Label styles / Emphasized Label Large)\n@mixin label-large {\n  font-family: $label-large-font;\n  font-size: $label-large-size;\n  font-weight: $label-large-weight;\n  letter-spacing: $label-large-tracking;\n  line-height: $label-large-line-height;\n}\n/// md.sys.typescale.emphasized.label-medium (Emphasized Label styles / Emphasized Label Medium)\n@mixin label-medium {\n  font-family: $label-medium-font;\n  font-size: $label-medium-size;\n  font-weight: $label-medium-weight;\n  letter-spacing: $label-medium-tracking;\n  line-height: $label-medium-line-height;\n}\n/// md.sys.typescale.emphasized.label-small (Emphasized Label styles / Emphasized Label Small)\n@mixin label-small {\n  font-family: $label-small-font;\n  font-size: $label-small-size;\n  font-weight: $label-small-weight;\n  letter-spacing: $label-small-tracking;\n  line-height: $label-small-line-height;\n}\n/// md.sys.typescale.emphasized.title-large (Emphasized Title styles / Emphasized Title Large)\n@mixin title-large {\n  font-family: $title-large-font;\n  font-size: $title-large-size;\n  font-weight: $title-large-weight;\n  letter-spacing: $title-large-tracking;\n  line-height: $title-large-line-height;\n}\n/// md.sys.typescale.emphasized.title-medium (Emphasized Title styles / Emphasized Title Medium)\n@mixin title-medium {\n  font-family: $title-medium-font;\n  font-size: $title-medium-size;\n  font-weight: $title-medium-weight;\n  letter-spacing: $title-medium-tracking;\n  line-height: $title-medium-line-height;\n}\n/// md.sys.typescale.emphasized.title-small (Emphasized Title styles / Emphasized Title Small)\n@mixin title-small {\n  font-family: $title-small-font;\n  font-size: $title-small-size;\n  font-weight: $title-small-weight;\n  letter-spacing: $title-small-tracking;\n  line-height: $title-small-line-height;\n}\n"
  },
  {
    "path": "tokens/versions/v30_0/sass/_md-sys-typescale.scss",
    "content": "//\n// Copyright 2026 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n// AUTOGENERATED. DO NOT MODIFY.\n// To modify this file, update the source template,\n// or run the compiler: go/carbon-service-code-gen-mwtc.\n// Source template: sassvars/contextualtokenset.scss.tmpl\n\n// Design system: Google Material 3\n// Version: 30.0.14\n// Configured context tags:\n//   audience: 3p\n//   font: static\n//   platform: web\n// Output format: sass_vars\n\n@use 'md-ref-typeface';\n\n/// md.sys.typescale.body-large.crsv (Body styles / Body Large)\n$body-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.body-large.fill (Body styles / Body Large)\n$body-large-fill: 'FILL' 0;\n/// md.sys.typescale.body-large.grad (Body styles / Body Large)\n$body-large-grad: 'GRAD' 0;\n/// md.sys.typescale.body-large.hexp (Body styles / Body Large)\n$body-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.body-large.line-height (Body styles / Body Large)\n$body-large-line-height: 1.5rem;\n/// md.sys.typescale.body-large.opsz (Body styles / Body Large)\n$body-large-opsz: 'opsz' 16;\n/// md.sys.typescale.body-large.rond (Body styles / Body Large)\n$body-large-rond: 'ROND' 0;\n/// md.sys.typescale.body-large.size (Body styles / Body Large)\n$body-large-size: 1rem;\n/// md.sys.typescale.body-large.slnt (Body styles / Body Large)\n$body-large-slnt: 'slnt' 0;\n/// md.sys.typescale.body-large.tracking (Body styles / Body Large)\n$body-large-tracking: 0.03125rem;\n/// md.sys.typescale.body-large.wdth (Body styles / Body Large)\n$body-large-wdth: 'wdth' 100;\n/// md.sys.typescale.body-large.wght (Body styles / Body Large)\n$body-large-wght: 'wght' 400;\n/// md.sys.typescale.body-medium.crsv (Body styles / Body Medium)\n$body-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.body-medium.fill (Body styles / Body Medium)\n$body-medium-fill: 'FILL' 0;\n/// md.sys.typescale.body-medium.grad (Body styles / Body Medium)\n$body-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.body-medium.hexp (Body styles / Body Medium)\n$body-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.body-medium.line-height (Body styles / Body Medium)\n$body-medium-line-height: 1.25rem;\n/// md.sys.typescale.body-medium.opsz (Body styles / Body Medium)\n$body-medium-opsz: 'opsz' 14;\n/// md.sys.typescale.body-medium.rond (Body styles / Body Medium)\n$body-medium-rond: 'ROND' 0;\n/// md.sys.typescale.body-medium.size (Body styles / Body Medium)\n$body-medium-size: 0.875rem;\n/// md.sys.typescale.body-medium.slnt (Body styles / Body Medium)\n$body-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.body-medium.tracking (Body styles / Body Medium)\n$body-medium-tracking: 0.015625rem;\n/// md.sys.typescale.body-medium.wdth (Body styles / Body Medium)\n$body-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.body-medium.wght (Body styles / Body Medium)\n$body-medium-wght: 'wght' 400;\n/// md.sys.typescale.body-small.crsv (Body styles / Body Small)\n$body-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.body-small.fill (Body styles / Body Small)\n$body-small-fill: 'FILL' 0;\n/// md.sys.typescale.body-small.grad (Body styles / Body Small)\n$body-small-grad: 'GRAD' 0;\n/// md.sys.typescale.body-small.hexp (Body styles / Body Small)\n$body-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.body-small.line-height (Body styles / Body Small)\n$body-small-line-height: 1rem;\n/// md.sys.typescale.body-small.opsz (Body styles / Body Small)\n$body-small-opsz: 'opsz' 12;\n/// md.sys.typescale.body-small.rond (Body styles / Body Small)\n$body-small-rond: 'ROND' 0;\n/// md.sys.typescale.body-small.size (Body styles / Body Small)\n$body-small-size: 0.75rem;\n/// md.sys.typescale.body-small.slnt (Body styles / Body Small)\n$body-small-slnt: 'slnt' 0;\n/// md.sys.typescale.body-small.tracking (Body styles / Body Small)\n$body-small-tracking: 0.025rem;\n/// md.sys.typescale.body-small.wdth (Body styles / Body Small)\n$body-small-wdth: 'wdth' 100;\n/// md.sys.typescale.body-small.wght (Body styles / Body Small)\n$body-small-wght: 'wght' 400;\n/// md.sys.typescale.display-large.crsv (Display styles / Display Large)\n$display-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.display-large.fill (Display styles / Display Large)\n$display-large-fill: 'FILL' 0;\n/// md.sys.typescale.display-large.grad (Display styles / Display Large)\n$display-large-grad: 'GRAD' 0;\n/// md.sys.typescale.display-large.hexp (Display styles / Display Large)\n$display-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.display-large.line-height (Display styles / Display Large)\n$display-large-line-height: 4rem;\n/// md.sys.typescale.display-large.opsz (Display styles / Display Large)\n$display-large-opsz: 'opsz' 57;\n/// md.sys.typescale.display-large.rond (Display styles / Display Large)\n$display-large-rond: 'ROND' 0;\n/// md.sys.typescale.display-large.size (Display styles / Display Large)\n$display-large-size: 3.5625rem;\n/// md.sys.typescale.display-large.slnt (Display styles / Display Large)\n$display-large-slnt: 'slnt' 0;\n/// md.sys.typescale.display-large.tracking (Display styles / Display Large)\n$display-large-tracking: -0.015625rem;\n/// md.sys.typescale.display-large.wdth (Display styles / Display Large)\n$display-large-wdth: 'wdth' 100;\n/// md.sys.typescale.display-large.wght (Display styles / Display Large)\n$display-large-wght: 'wght' 400;\n/// md.sys.typescale.display-medium.crsv (Display styles / Display Medium)\n$display-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.display-medium.fill (Display styles / Display Medium)\n$display-medium-fill: 'FILL' 0;\n/// md.sys.typescale.display-medium.grad (Display styles / Display Medium)\n$display-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.display-medium.hexp (Display styles / Display Medium)\n$display-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.display-medium.line-height (Display styles / Display Medium)\n$display-medium-line-height: 3.25rem;\n/// md.sys.typescale.display-medium.opsz (Display styles / Display Medium)\n$display-medium-opsz: 'opsz' 45;\n/// md.sys.typescale.display-medium.rond (Display styles / Display Medium)\n$display-medium-rond: 'ROND' 0;\n/// md.sys.typescale.display-medium.size (Display styles / Display Medium)\n$display-medium-size: 2.8125rem;\n/// md.sys.typescale.display-medium.slnt (Display styles / Display Medium)\n$display-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.display-medium.tracking (Display styles / Display Medium)\n$display-medium-tracking: 0rem;\n/// md.sys.typescale.display-medium.wdth (Display styles / Display Medium)\n$display-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.display-medium.wght (Display styles / Display Medium)\n$display-medium-wght: 'wght' 400;\n/// md.sys.typescale.display-small.crsv (Display styles / Display Small)\n$display-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.display-small.fill (Display styles / Display Small)\n$display-small-fill: 'FILL' 0;\n/// md.sys.typescale.display-small.grad (Display styles / Display Small)\n$display-small-grad: 'GRAD' 0;\n/// md.sys.typescale.display-small.hexp (Display styles / Display Small)\n$display-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.display-small.line-height (Display styles / Display Small)\n$display-small-line-height: 2.75rem;\n/// md.sys.typescale.display-small.opsz (Display styles / Display Small)\n$display-small-opsz: 'opsz' 36;\n/// md.sys.typescale.display-small.rond (Display styles / Display Small)\n$display-small-rond: 'ROND' 0;\n/// md.sys.typescale.display-small.size (Display styles / Display Small)\n$display-small-size: 2.25rem;\n/// md.sys.typescale.display-small.slnt (Display styles / Display Small)\n$display-small-slnt: 'slnt' 0;\n/// md.sys.typescale.display-small.tracking (Display styles / Display Small)\n$display-small-tracking: 0rem;\n/// md.sys.typescale.display-small.wdth (Display styles / Display Small)\n$display-small-wdth: 'wdth' 100;\n/// md.sys.typescale.display-small.wght (Display styles / Display Small)\n$display-small-wght: 'wght' 400;\n/// md.sys.typescale.headline-large.crsv (Headline styles / Headline Large)\n$headline-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.headline-large.fill (Headline styles / Headline Large)\n$headline-large-fill: 'FILL' 0;\n/// md.sys.typescale.headline-large.grad (Headline styles / Headline Large)\n$headline-large-grad: 'GRAD' 0;\n/// md.sys.typescale.headline-large.hexp (Headline styles / Headline Large)\n$headline-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.headline-large.line-height (Headline styles / Headline Large)\n$headline-large-line-height: 2.5rem;\n/// md.sys.typescale.headline-large.opsz (Headline styles / Headline Large)\n$headline-large-opsz: 'opsz' 32;\n/// md.sys.typescale.headline-large.rond (Headline styles / Headline Large)\n$headline-large-rond: 'ROND' 0;\n/// md.sys.typescale.headline-large.size (Headline styles / Headline Large)\n$headline-large-size: 2rem;\n/// md.sys.typescale.headline-large.slnt (Headline styles / Headline Large)\n$headline-large-slnt: 'slnt' 0;\n/// md.sys.typescale.headline-large.tracking (Headline styles / Headline Large)\n$headline-large-tracking: 0rem;\n/// md.sys.typescale.headline-large.wdth (Headline styles / Headline Large)\n$headline-large-wdth: 'wdth' 100;\n/// md.sys.typescale.headline-large.wght (Headline styles / Headline Large)\n$headline-large-wght: 'wght' 400;\n/// md.sys.typescale.headline-medium.crsv (Headline styles / Headline Medium)\n$headline-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.headline-medium.fill (Headline styles / Headline Medium)\n$headline-medium-fill: 'FILL' 0;\n/// md.sys.typescale.headline-medium.grad (Headline styles / Headline Medium)\n$headline-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.headline-medium.hexp (Headline styles / Headline Medium)\n$headline-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.headline-medium.line-height (Headline styles / Headline Medium)\n$headline-medium-line-height: 2.25rem;\n/// md.sys.typescale.headline-medium.opsz (Headline styles / Headline Medium)\n$headline-medium-opsz: 'opsz' 28;\n/// md.sys.typescale.headline-medium.rond (Headline styles / Headline Medium)\n$headline-medium-rond: 'ROND' 0;\n/// md.sys.typescale.headline-medium.size (Headline styles / Headline Medium)\n$headline-medium-size: 1.75rem;\n/// md.sys.typescale.headline-medium.slnt (Headline styles / Headline Medium)\n$headline-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.headline-medium.tracking (Headline styles / Headline Medium)\n$headline-medium-tracking: 0rem;\n/// md.sys.typescale.headline-medium.wdth (Headline styles / Headline Medium)\n$headline-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.headline-medium.wght (Headline styles / Headline Medium)\n$headline-medium-wght: 'wght' 400;\n/// md.sys.typescale.headline-small.crsv (Headline styles / Headline Small)\n$headline-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.headline-small.fill (Headline styles / Headline Small)\n$headline-small-fill: 'FILL' 0;\n/// md.sys.typescale.headline-small.grad (Headline styles / Headline Small)\n$headline-small-grad: 'GRAD' 0;\n/// md.sys.typescale.headline-small.hexp (Headline styles / Headline Small)\n$headline-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.headline-small.line-height (Headline styles / Headline Small)\n$headline-small-line-height: 2rem;\n/// md.sys.typescale.headline-small.opsz (Headline styles / Headline Small)\n$headline-small-opsz: 'opsz' 24;\n/// md.sys.typescale.headline-small.rond (Headline styles / Headline Small)\n$headline-small-rond: 'ROND' 0;\n/// md.sys.typescale.headline-small.size (Headline styles / Headline Small)\n$headline-small-size: 1.5rem;\n/// md.sys.typescale.headline-small.slnt (Headline styles / Headline Small)\n$headline-small-slnt: 'slnt' 0;\n/// md.sys.typescale.headline-small.tracking (Headline styles / Headline Small)\n$headline-small-tracking: 0rem;\n/// md.sys.typescale.headline-small.wdth (Headline styles / Headline Small)\n$headline-small-wdth: 'wdth' 100;\n/// md.sys.typescale.headline-small.wght (Headline styles / Headline Small)\n$headline-small-wght: 'wght' 400;\n/// md.sys.typescale.label-large-fill (Label styles / Label Large)\n$label-large-fill: 'FILL' 0;\n/// md.sys.typescale.label-large.crsv (Label styles / Label Large)\n$label-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.label-large.grad (Label styles / Label Large)\n$label-large-grad: 'GRAD' 0;\n/// md.sys.typescale.label-large.hexp (Label styles / Label Large)\n$label-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.label-large.line-height (Label styles / Label Large)\n$label-large-line-height: 1.25rem;\n/// md.sys.typescale.label-large.opsz (Label styles / Label Large)\n$label-large-opsz: 'opsz' 14;\n/// md.sys.typescale.label-large.rond (Label styles / Label Large)\n$label-large-rond: 'ROND' 0;\n/// md.sys.typescale.label-large.size (Label styles / Label Large)\n$label-large-size: 0.875rem;\n/// md.sys.typescale.label-large.slnt (Label styles / Label Large)\n$label-large-slnt: 'slnt' 0;\n/// md.sys.typescale.label-large.tracking (Label styles / Label Large)\n$label-large-tracking: 0.00625rem;\n/// md.sys.typescale.label-large.wdth (Label styles / Label Large)\n$label-large-wdth: 'wdth' 100;\n/// md.sys.typescale.label-large.wght (Label styles / Label Large)\n$label-large-wght: 'wght' 500;\n/// md.sys.typescale.label-medium.crsv (Label styles / Label Medium)\n$label-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.label-medium.fill (Label styles / Label Medium)\n$label-medium-fill: 'FILL' 0;\n/// md.sys.typescale.label-medium.grad (Label styles / Label Medium)\n$label-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.label-medium.hexp (Label styles / Label Medium)\n$label-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.label-medium.line-height (Label styles / Label Medium)\n$label-medium-line-height: 1rem;\n/// md.sys.typescale.label-medium.opsz (Label styles / Label Medium)\n$label-medium-opsz: 'opsz' 12;\n/// md.sys.typescale.label-medium.rond (Label styles / Label Medium)\n$label-medium-rond: 'ROND' 0;\n/// md.sys.typescale.label-medium.size (Label styles / Label Medium)\n$label-medium-size: 0.75rem;\n/// md.sys.typescale.label-medium.slnt (Label styles / Label Medium)\n$label-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.label-medium.text-transform (Label styles / Label Medium)\n///\n/// @deprecated Token is deprecated.\n$label-medium-text-transform: none;\n/// md.sys.typescale.label-medium.tracking (Label styles / Label Medium)\n$label-medium-tracking: 0.03125rem;\n/// md.sys.typescale.label-medium.wdth (Label styles / Label Medium)\n$label-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.label-medium.wght (Label styles / Label Medium)\n$label-medium-wght: 'wght' 500;\n/// md.sys.typescale.label-small.crsv (Label styles / Label Small)\n$label-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.label-small.fill (Label styles / Label Small)\n$label-small-fill: 'FILL' 0;\n/// md.sys.typescale.label-small.grad (Label styles / Label Small)\n$label-small-grad: 'GRAD' 0;\n/// md.sys.typescale.label-small.hexp (Label styles / Label Small)\n$label-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.label-small.line-height (Label styles / Label Small)\n$label-small-line-height: 1rem;\n/// md.sys.typescale.label-small.opsz (Label styles / Label Small)\n$label-small-opsz: 'opsz' 11;\n/// md.sys.typescale.label-small.rond (Label styles / Label Small)\n$label-small-rond: 'ROND' 0;\n/// md.sys.typescale.label-small.size (Label styles / Label Small)\n$label-small-size: 0.6875rem;\n/// md.sys.typescale.label-small.slnt (Label styles / Label Small)\n$label-small-slnt: 'slnt' 0;\n/// md.sys.typescale.label-small.tracking (Label styles / Label Small)\n$label-small-tracking: 0.03125rem;\n/// md.sys.typescale.label-small.wdth (Label styles / Label Small)\n$label-small-wdth: 'wdth' 100;\n/// md.sys.typescale.label-small.wght (Label styles / Label Small)\n$label-small-wght: 'wght' 500;\n/// md.sys.typescale.title-large.crsv (Title styles / Title Large)\n$title-large-crsv: 'CRSV' 0;\n/// md.sys.typescale.title-large.fill (Title styles / Title Large)\n$title-large-fill: 'FILL' 0;\n/// md.sys.typescale.title-large.grad (Title styles / Title Large)\n$title-large-grad: 'GRAD' 0;\n/// md.sys.typescale.title-large.hexp (Title styles / Title Large)\n$title-large-hexp: 'HEXP' 0;\n/// md.sys.typescale.title-large.line-height (Title styles / Title Large)\n$title-large-line-height: 1.75rem;\n/// md.sys.typescale.title-large.opsz (Title styles / Title Large)\n$title-large-opsz: 'opsz' 22;\n/// md.sys.typescale.title-large.rond (Title styles / Title Large)\n$title-large-rond: 'ROND' 0;\n/// md.sys.typescale.title-large.size (Title styles / Title Large)\n$title-large-size: 1.375rem;\n/// md.sys.typescale.title-large.slnt (Title styles / Title Large)\n$title-large-slnt: 'slnt' 0;\n/// md.sys.typescale.title-large.tracking (Title styles / Title Large)\n$title-large-tracking: 0rem;\n/// md.sys.typescale.title-large.wdth (Title styles / Title Large)\n$title-large-wdth: 'wdth' 100;\n/// md.sys.typescale.title-large.wght (Title styles / Title Large)\n$title-large-wght: 'wght' 400;\n/// md.sys.typescale.title-medium.crsv (Title styles / Title Medium)\n$title-medium-crsv: 'CRSV' 0;\n/// md.sys.typescale.title-medium.fill (Title styles / Title Medium)\n$title-medium-fill: 'FILL' 0;\n/// md.sys.typescale.title-medium.grad (Title styles / Title Medium)\n$title-medium-grad: 'GRAD' 0;\n/// md.sys.typescale.title-medium.hexp (Title styles / Title Medium)\n$title-medium-hexp: 'HEXP' 0;\n/// md.sys.typescale.title-medium.line-height (Title styles / Title Medium)\n$title-medium-line-height: 1.5rem;\n/// md.sys.typescale.title-medium.opsz (Title styles / Title Medium)\n$title-medium-opsz: 'opsz' 16;\n/// md.sys.typescale.title-medium.rond (Title styles / Title Medium)\n$title-medium-rond: 'ROND' 0;\n/// md.sys.typescale.title-medium.size (Title styles / Title Medium)\n$title-medium-size: 1rem;\n/// md.sys.typescale.title-medium.slnt (Title styles / Title Medium)\n$title-medium-slnt: 'slnt' 0;\n/// md.sys.typescale.title-medium.tracking (Title styles / Title Medium)\n$title-medium-tracking: 0.009375rem;\n/// md.sys.typescale.title-medium.wdth (Title styles / Title Medium)\n$title-medium-wdth: 'wdth' 100;\n/// md.sys.typescale.title-medium.wght (Title styles / Title Medium)\n$title-medium-wght: 'wght' 500;\n/// md.sys.typescale.title-small.crsv (Title styles / Title Small)\n$title-small-crsv: 'CRSV' 0;\n/// md.sys.typescale.title-small.fill (Title styles / Title Small)\n$title-small-fill: 'FILL' 0;\n/// md.sys.typescale.title-small.grad (Title styles / Title Small)\n$title-small-grad: 'GRAD' 0;\n/// md.sys.typescale.title-small.hexp (Title styles / Title Small)\n$title-small-hexp: 'HEXP' 0;\n/// md.sys.typescale.title-small.line-height (Title styles / Title Small)\n$title-small-line-height: 1.25rem;\n/// md.sys.typescale.title-small.opsz (Title styles / Title Small)\n$title-small-opsz: 'opsz' 14;\n/// md.sys.typescale.title-small.rond (Title styles / Title Small)\n$title-small-rond: 'ROND' 0;\n/// md.sys.typescale.title-small.size (Title styles / Title Small)\n$title-small-size: 0.875rem;\n/// md.sys.typescale.title-small.slnt (Title styles / Title Small)\n$title-small-slnt: 'slnt' 0;\n/// md.sys.typescale.title-small.tracking (Title styles / Title Small)\n$title-small-tracking: 0.00625rem;\n/// md.sys.typescale.title-small.wdth (Title styles / Title Small)\n$title-small-wdth: 'wdth' 100;\n/// md.sys.typescale.title-small.wght (Title styles / Title Small)\n$title-small-wght: 'wght' 500;\n/// md.sys.typescale.body-large.font (Body styles / Body Large)\n$body-large-font: md-ref-typeface.$plain;\n/// md.sys.typescale.body-large.weight (Body styles / Body Large)\n$body-large-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.body-medium.font (Body styles / Body Medium)\n$body-medium-font: md-ref-typeface.$plain;\n/// md.sys.typescale.body-medium.weight (Body styles / Body Medium)\n$body-medium-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.body-small.font (Body styles / Body Small)\n$body-small-font: md-ref-typeface.$plain;\n/// md.sys.typescale.body-small.weight (Body styles / Body Small)\n$body-small-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.display-large.font (Display styles / Display Large)\n$display-large-font: md-ref-typeface.$brand;\n/// md.sys.typescale.display-large.weight (Display styles / Display Large)\n$display-large-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.display-medium.font (Display styles / Display Medium)\n$display-medium-font: md-ref-typeface.$brand;\n/// md.sys.typescale.display-medium.weight (Display styles / Display Medium)\n$display-medium-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.display-small.font (Display styles / Display Small)\n$display-small-font: md-ref-typeface.$brand;\n/// md.sys.typescale.display-small.weight (Display styles / Display Small)\n$display-small-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.headline-large.font (Headline styles / Headline Large)\n$headline-large-font: md-ref-typeface.$brand;\n/// md.sys.typescale.headline-large.weight (Headline styles / Headline Large)\n$headline-large-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.headline-medium.font (Headline styles / Headline Medium)\n$headline-medium-font: md-ref-typeface.$brand;\n/// md.sys.typescale.headline-medium.weight (Headline styles / Headline Medium)\n$headline-medium-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.headline-small.font (Headline styles / Headline Small)\n$headline-small-font: md-ref-typeface.$brand;\n/// md.sys.typescale.headline-small.weight (Headline styles / Headline Small)\n$headline-small-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.label-large.font (Label styles / Label Large)\n$label-large-font: md-ref-typeface.$plain;\n/// md.sys.typescale.label-large.weight (Label styles / Label Large)\n$label-large-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.label-large.weight.prominent (Label styles / Label Large)\n///\n/// @deprecated No longer in user. Please use emphasized token instead\n$label-large-weight-prominent: md-ref-typeface.$weight-bold;\n/// md.sys.typescale.label-medium.font (Label styles / Label Medium)\n$label-medium-font: md-ref-typeface.$plain;\n/// md.sys.typescale.label-medium.weight (Label styles / Label Medium)\n$label-medium-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.label-medium.weight.prominent (Label styles / Label Medium)\n///\n/// @deprecated No longer in user. Please use emphasized token instead\n$label-medium-weight-prominent: md-ref-typeface.$weight-bold;\n/// md.sys.typescale.label-small.font (Label styles / Label Small)\n$label-small-font: md-ref-typeface.$plain;\n/// md.sys.typescale.label-small.weight (Label styles / Label Small)\n$label-small-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.title-large.font (Title styles / Title Large)\n$title-large-font: md-ref-typeface.$brand;\n/// md.sys.typescale.title-large.weight (Title styles / Title Large)\n$title-large-weight: md-ref-typeface.$weight-regular;\n/// md.sys.typescale.title-medium.font (Title styles / Title Medium)\n$title-medium-font: md-ref-typeface.$plain;\n/// md.sys.typescale.title-medium.weight (Title styles / Title Medium)\n$title-medium-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.title-small.font (Title styles / Title Small)\n$title-small-font: md-ref-typeface.$plain;\n/// md.sys.typescale.title-small.weight (Title styles / Title Small)\n$title-small-weight: md-ref-typeface.$weight-medium;\n/// md.sys.typescale.body-large (Body styles / Body Large)\n@mixin body-large {\n  font-family: $body-large-font;\n  font-size: $body-large-size;\n  font-weight: $body-large-weight;\n  letter-spacing: $body-large-tracking;\n  line-height: $body-large-line-height;\n}\n/// md.sys.typescale.body-medium (Body styles / Body Medium)\n@mixin body-medium {\n  font-family: $body-medium-font;\n  font-size: $body-medium-size;\n  font-weight: $body-medium-weight;\n  letter-spacing: $body-medium-tracking;\n  line-height: $body-medium-line-height;\n}\n/// md.sys.typescale.body-small (Body styles / Body Small)\n@mixin body-small {\n  font-family: $body-small-font;\n  font-size: $body-small-size;\n  font-weight: $body-small-weight;\n  letter-spacing: $body-small-tracking;\n  line-height: $body-small-line-height;\n}\n/// md.sys.typescale.display-large (Display styles / Display Large)\n@mixin display-large {\n  font-family: $display-large-font;\n  font-size: $display-large-size;\n  font-weight: $display-large-weight;\n  letter-spacing: $display-large-tracking;\n  line-height: $display-large-line-height;\n}\n/// md.sys.typescale.display-medium (Display styles / Display Medium)\n@mixin display-medium {\n  font-family: $display-medium-font;\n  font-size: $display-medium-size;\n  font-weight: $display-medium-weight;\n  letter-spacing: $display-medium-tracking;\n  line-height: $display-medium-line-height;\n}\n/// md.sys.typescale.display-small (Display styles / Display Small)\n@mixin display-small {\n  font-family: $display-small-font;\n  font-size: $display-small-size;\n  font-weight: $display-small-weight;\n  letter-spacing: $display-small-tracking;\n  line-height: $display-small-line-height;\n}\n/// md.sys.typescale.headline-large (Headline styles / Headline Large)\n@mixin headline-large {\n  font-family: $headline-large-font;\n  font-size: $headline-large-size;\n  font-weight: $headline-large-weight;\n  letter-spacing: $headline-large-tracking;\n  line-height: $headline-large-line-height;\n}\n/// md.sys.typescale.headline-medium (Headline styles / Headline Medium)\n@mixin headline-medium {\n  font-family: $headline-medium-font;\n  font-size: $headline-medium-size;\n  font-weight: $headline-medium-weight;\n  letter-spacing: $headline-medium-tracking;\n  line-height: $headline-medium-line-height;\n}\n/// md.sys.typescale.headline-small (Headline styles / Headline Small)\n@mixin headline-small {\n  font-family: $headline-small-font;\n  font-size: $headline-small-size;\n  font-weight: $headline-small-weight;\n  letter-spacing: $headline-small-tracking;\n  line-height: $headline-small-line-height;\n}\n/// md.sys.typescale.label-large (Label styles / Label Large)\n@mixin label-large {\n  font-family: $label-large-font;\n  font-size: $label-large-size;\n  font-weight: $label-large-weight;\n  letter-spacing: $label-large-tracking;\n  line-height: $label-large-line-height;\n}\n/// md.sys.typescale.label-medium (Label styles / Label Medium)\n@mixin label-medium {\n  font-family: $label-medium-font;\n  font-size: $label-medium-size;\n  font-weight: $label-medium-weight;\n  letter-spacing: $label-medium-tracking;\n  line-height: $label-medium-line-height;\n}\n/// md.sys.typescale.label-small (Label styles / Label Small)\n@mixin label-small {\n  font-family: $label-small-font;\n  font-size: $label-small-size;\n  font-weight: $label-small-weight;\n  letter-spacing: $label-small-tracking;\n  line-height: $label-small-line-height;\n}\n/// md.sys.typescale.title-large (Title styles / Title Large)\n@mixin title-large {\n  font-family: $title-large-font;\n  font-size: $title-large-size;\n  font-weight: $title-large-weight;\n  letter-spacing: $title-large-tracking;\n  line-height: $title-large-line-height;\n}\n/// md.sys.typescale.title-medium (Title styles / Title Medium)\n@mixin title-medium {\n  font-family: $title-medium-font;\n  font-size: $title-medium-size;\n  font-weight: $title-medium-weight;\n  letter-spacing: $title-medium-tracking;\n  line-height: $title-medium-line-height;\n}\n/// md.sys.typescale.title-small (Title styles / Title Small)\n@mixin title-small {\n  font-family: $title-small-font;\n  font-size: $title-small-size;\n  font-weight: $title-small-weight;\n  letter-spacing: $title-small-tracking;\n  line-height: $title-small-line-height;\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"allowUnreachableCode\": false,\n    \"baseUrl\": \".\",\n    \"declaration\": true,\n    \"declarationMap\": false,\n    \"downlevelIteration\": true,\n    \"experimentalDecorators\": true,\n    \"importHelpers\": true,\n    \"module\": \"es2015\",\n    \"moduleResolution\": \"node\",\n    \"noFallthroughCasesInSwitch\": true,\n    \"noImplicitAny\": true,\n    \"noImplicitOverride\": true,\n    \"noImplicitReturns\": true,\n    \"noImplicitThis\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noUnusedLocals\": true,\n    \"paths\": {\n      \"@material/web/*\": [\"./*\"]\n    },\n    \"sourceMap\": true,\n    \"inlineSources\": true,\n    \"strict\": true,\n    \"strictNullChecks\": false,\n    \"target\": \"es2021\",\n    \"types\": [\"lit\", \"jasmine\"]\n  },\n  \"exclude\": [\n    \"catalog\",\n    \"**/demo\",\n    \"scripts/\"\n  ]\n}\n"
  },
  {
    "path": "typography/_typeface.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../tokens';\n// go/keep-sorted end\n\n/// `typeface.theme()` emits `--md-ref-typeface-*` custom properties for given\n/// font families and weights.\n///\n/// Use this to change the font families or weights for all typescales.\n///\n/// @example scss\n///   @use '@material/web/typography/typeface';\n///\n///   :root {\n///     @include typeface.theme(\n///       'brand': 'Open Sans',\n///       'plain': sans-serif,\n///       'weight-bold': 900,\n///     );\n///   }\n///\n///   /* Generated CSS */\n///   :root {\n///     --md-ref-typeface-brand: 'Open Sans';\n///     --md-ref-typeface-plain: sans-serif;\n///     --md-ref-typeface-weight-bold: 900;\n///   }\n///\n/// @param {Map} $tokens - A Map with `md-ref-typeface` token name keys and\n///     their corresponding font family or weight values.\n/// @output Emits `--md-ref-typeface-*` custom properties.\n@mixin theme($tokens) {\n  @each $token, $value in $tokens {\n    @if list.index(tokens.$md-ref-typeface-supported-tokens, $token) == null {\n      @error 'md-ref-typeface `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-ref-typeface-#{$token}: #{$value};\n    }\n  }\n}\n"
  },
  {
    "path": "typography/_typescale.scss",
    "content": "//\n// Copyright 2023 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use 'sass:list';\n@use 'sass:map';\n// go/keep-sorted end\n// go/keep-sorted start\n@use '../tokens';\n// go/keep-sorted end\n\n/// `typescale.theme()` emits `--md-sys-typescale-*` custom properties for given\n/// typescale tokens.\n///\n/// Use `typeface.theme()` to change font family and weight for all typescales,\n/// rather than individually.\n///\n/// @example scss\n///   @use '@material/web/typography/typescale';\n///\n///   :root {\n///     @include typescale.theme((\n///       'body-medium-size': 1rem,\n///       'body-medium-line-height': 1.5rem,\n///       /* ... */\n///     ));\n///   }\n///\n///   /* Generated CSS */\n///   :root {\n///     --md-sys-typescale-body-medium-size: 1rem;\n///     --md-sys-typescale-body-medium-line-height: 1.5rem;\n///     /* ... */\n///   }\n///\n/// @param {Map} $tokens - A Map with `md-sys-typescale` token name keys and\n///     their corresponding `font` shorthand values.\n/// @output Emits `--md-sys-typescale-*` custom properties for given typescales.\n@mixin theme($tokens) {\n  @each $token, $value in $tokens {\n    @if list.index(tokens.$md-sys-typescale-supported-tokens, $token) == null {\n      @error 'md-sys-typescale `#{$token}` is not a supported token.';\n    }\n\n    @if $value {\n      --md-sys-typescale-#{$token}: #{$value};\n    }\n  }\n}\n\n/// Emits `.md-typescale-*` classes with font styles for each typescale in the\n/// provided `$tokens`.\n///\n/// @example scss\n///   @include typescale.styles(tokens.md-sys-typescale-values());\n///   // Generates the following CSS:\n///   .md-typescale-display-small { font: ...; }\n///   .md-typescale-display-medium { font: ...; }\n///   .md-typescale-display-large { font: ...; }\n///   .md-typescale-body-small { font: ...; }\n///   .md-typescale-body-medium { font: ...; }\n///   .md-typescale-body-large { font: ...; }\n///   // etc...\n///\n/// @param {Map} $tokens - A Map with `md-sys-typescale` token values.\n/// @output Emits `.md-typescale-*` classes for each typescale size.\n@mixin styles($tokens) {\n  $typescale-properties: _tokens-to-typescale-properties-map($tokens);\n\n  // Use the default layer for lowered specificity.\n  @layer {\n    @each $typescale, $properties in $typescale-properties {\n      // $typescale is a scale and size (ex. 'body-medium').\n      // $properties is a Map with 'font', 'size', 'line-height', 'weight', and\n      // an optional 'weight-prominent'.\n      .md-typescale-#{$typescale} {\n        font: map.get($properties, 'weight')\n          map.get($properties, 'size') /\n          map.get($properties, 'line-height')\n          map.get($properties, 'font');\n      }\n\n      .md-typescale-#{$typescale}-prominent {\n        // Inherit the font styles from the non-prominent selector. This adds\n        // another class selector to the regular styles, instead of re-emitting\n        // them.\n        // ```\n        // .md-typescale-label-medium, .md-typescale-label-medium-prominent {\n        //   font: ...;\n        // }\n        // .md-typescale-label-medium-prominent {\n        //   font-weight: ...;\n        // }\n        // ```\n        @extend .md-typescale-#{$typescale};\n\n        // Note: the prominent selector is not emitted by Sass when a\n        // typescale's prominent values are null.\n        font-weight: map.get($properties, 'weight-prominent');\n      }\n    }\n  }\n}\n\n/// Takes a md-sys-typescale token values Map and returns a Map whose keys are\n/// typescale names ('body-medium', 'label-large', etc) and whose values are a\n/// Map of properties for that Typescale ('font', 'size', etc).\n@function _tokens-to-typescale-properties-map($tokens) {\n  $typescale-properties: ();\n  // The keys of $typescale-properties. Each typescale is joined with each size\n  // ('display-small', 'display-medium', 'display-large', 'headline-small'...).\n  $typescales: ('display', 'headline', 'title', 'body', 'label');\n  $sizes: ('small', 'medium', 'large');\n  // The keys to the Map for each scale in $typescale-properties. These\n  // properties are required...\n  $required-properties: ('font', 'line-height', 'size', 'weight');\n  // ...while not all typescales have these properties.\n  $optional-properties: ('weight-prominent');\n  $properties: list.join($required-properties, $optional-properties);\n\n  @each $typescale in $typescales {\n    @each $size in $sizes {\n      $typescale-and-size: #{$typescale}-#{$size};\n\n      @each $property in $properties {\n        $token: '#{$typescale-and-size}-#{$property}';\n        $value: map.get($tokens, $token);\n        @if $value ==\n          null and\n          list.index($required-properties, $property) !=\n          null\n        {\n          @error 'Missing required typescale token `#{$token}`';\n        }\n\n        // Remove token to check if we used them all at the end of the function.\n        $tokens: map.remove($tokens, $token);\n        $typescale-properties: map.set(\n          $typescale-properties,\n          $typescale-and-size,\n          $property,\n          $value\n        );\n      }\n    }\n  }\n\n  $unused-tokens: map.keys($tokens);\n  $unused-token-count: list.length($unused-tokens);\n  @if $unused-token-count > 0 {\n    @error 'Missing styles for #{$unused-token-count} typescale tokens (#{$unused-tokens})';\n  }\n\n  @return $typescale-properties;\n}\n"
  },
  {
    "path": "typography/md-typescale-styles.scss",
    "content": "//\n// Copyright 2024 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n// go/keep-sorted start\n@use '../tokens';\n@use './typescale';\n// go/keep-sorted end\n\n@include typescale.styles(tokens.md-sys-typescale-values());\n"
  },
  {
    "path": "web-test-runner.config.js",
    "content": "/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {playwrightLauncher} from '@web/test-runner-playwright';\nimport {jasmineTestRunnerConfig} from 'web-test-runner-jasmine';\n\nexport default {\n  ...jasmineTestRunnerConfig(),\n  nodeResolve: true,\n  files: ['**/*test.js', '!node_modules/', '!.wireit/'],\n  browsers:\n      [\n        playwrightLauncher({\n          product: 'chromium',\n          // Exclude since Firefox errors with \"Touch is not defined\"\n          // product: 'firefox',\n          // Exclude since Webkit errors with \"Unknown error\"\n          // product: 'webkit',\n        }),\n      ],\n};\n"
  }
]