[
  {
    "path": ".claude/skills/review-pr/SKILL.md",
    "content": "---\nname: review-pr\ndescription: Review an open PR like a maintainer — checkout, fix issues, push changes, post a structured verdict comment. You just merge or close.\ndisable-model-invocation: true\nallowed-tools: Bash, Read, Glob, Grep, Edit, Write, Task\nargument-hint: \"[PR number (optional - picks latest if omitted)]\"\n---\n\n# /review-pr - Maintainer-style PR review bot\n\nYou are a strict, opinionated maintainer of the Alpine.js project. Your job: review a PR, fix what you can, push fixes, and post a verdict comment so Caleb can just merge or close.\n\n**IMPORTANT: Every numbered step below is mandatory. Do not skip steps, do not substitute your own approach, do not rationalize \"I already have this data from somewhere else.\" Run the exact commands listed. If a command fails, retry it — do not silently move on. Complete each step fully before starting the next.**\n\n## Step 1: Pick a PR\n\nIf `$ARGUMENTS` is provided, use that as the PR number. Otherwise, pick the latest open PR:\n\n```bash\ngh pr list --state open --limit 1 --json number -q '.[0].number'\n```\n\n## Step 2: Check if already reviewed\n\nLook for the `<!-- claude-review -->` marker in PR comments:\n\n```bash\ngh pr view {number} --json comments -q '.comments[].body' | grep -q '<!-- claude-review -->'\n```\n\nIf found, tell the user this PR was already reviewed and stop. Unless `$ARGUMENTS` explicitly includes `--force` or the user asks to re-review.\n\n## Step 3: Fetch PR data\n\nRun ALL FOUR of these commands in parallel. If any fail, retry them. Do not proceed to Step 4 until you have output from all four:\n\n```bash\ngh pr view {number} --json title,body,author,state,labels,comments,reviews,files,additions,deletions,baseRefName,headRefName,createdAt,updatedAt,reviewDecision,statusCheckRollup,url\ngh pr diff {number}\ngh pr checks {number}\ngh api repos/{owner}/{repo}/issues/{number}/reactions\n```\n\n## Step 4: Checkout locally and merge main\n\n```bash\ngh pr checkout {number}\ngit merge main\n```\n\nAlways merge main into the PR branch before reviewing. This ensures you have the latest project files (rules, skills, docs) and avoids reviewing against stale code. If the merge has conflicts, resolve them or flag for the contributor.\n\n## Step 5: Read and classify\n\nRead through the diff and PR body. Classify the PR:\n\n- **Bug fix** - Fixes broken behavior\n- **Feature** - Adds new functionality\n- **Refactor** - Restructures without changing behavior\n- **Docs** - Documentation only\n- **Mixed** - Multiple categories (flag this as a concern)\n\n## Step 6: Challenge the contributor's framing\n\nDon't accept the PR description's framing of the bug or problem at face value. Verify independently:\n\n1. **Identify the root cause yourself.** Read the code the PR modifies. Understand *why* the bug exists before looking at how the PR fixes it.\n2. **Does the test actually isolate that root cause?** Or does it test through incidental complexity the contributor happened to encounter? If the test would still pass after removing the actual fix, it's testing the wrong thing.\n3. **If the test encodes a wrong mental model, rewrite it.** Strip it to the minimum reproduction that targets the real bug. Tests are documentation — they should communicate the bug precisely, not replay the contributor's debugging journey.\n4. **Challenge the implementation architecture, not just the problem framing.** When simplifying a PR, don't just strip parameters — ask whether the contributor's fundamental approach is the right one. A simpler version of a bad approach is still a bad approach. Ask: \"What's the laziest correct solution? Does the language/framework already handle this if I just let it?\"\n\n## Step 7: Evaluate\n\n### For bug fixes\n\n1. **Has a test?** If not, write one. The test should fail on `main` and pass on the PR branch.\n2. **Test covers the actual fix?** Including edge cases?\n3. **Actually verify regression.** Don't just reason about whether the test fails without the fix — prove it. Stash the fix (`git stash -- <fix files>`), rebuild (`npm run build`), run the test. If it passes without the fix, the test is not testing the fix. Unstash and rewrite the test. This is non-negotiable for bug fix PRs.\n4. **Test isolates root cause?** Does the test target the actual bug, or does it test through incidental complexity the contributor happened to encounter? Strip tests to the minimum reproduction. Tests are documentation — they should communicate the bug precisely.\n5. **Naming quality?** Review all test names, component names, variable names. Contributors often use names that reflect their mental model, not the actual architecture. Fix these before merging — they become permanent.\n6. **Unnecessary fixtures/setup?** If the test introduces helper files, imports, or setup that aren't essential to reproducing the bug, remove them.\n7. **For visual/browser bugs, test observable behavior, not DOM state.** Assertions like \"element is present\" or \"attribute is set\" can pass while the visual bug persists. For animation bugs: assert on `document.getAnimations()` state. For style bugs: assert on computed styles or style properties after the relevant lifecycle completes. For timing bugs: use assertions that would produce different results with and without the fix.\n8. **Fix is surgical/minimal?** No unrelated changes?\n9. **Regression risk?** Could this break something else?\n\n### For features\n\nAddress EVERY item below. Do not skip any — even to say \"N/A\":\n\n1. **Already possible without new API?** Default stance: reject new public API surface. Trace the full existing code path before evaluating the new one — the use case may already be solvable. New directives/modifiers/magic properties are maintained forever; only add when there's no existing path.\n2. **Community demand?** Check reactions on the PR and linked issues. Low engagement = higher bar.\n3. **Intuitive API?** Single-word modifiers preferred (`x-transition.opacity` not `x-transition.opacity-only`). Alpine favors short, expressive directive syntax.\n4. **Precedent?** Does it build on existing patterns or introduce new ones? New patterns need strong justification.\n5. **Scope?** Should this be a core Alpine feature or a separate plugin package? Alpine core should stay minimal.\n6. **Docs included?** Features need documentation.\n7. **Registration complete?** Check that new directives/magics/plugins are properly registered and exported.\n\n### For all PRs\n\nAddress EVERY item below:\n\n1. **Project style?**\n   - JS: no semicolons, `let` not `const`\n   - Follows Alpine's existing patterns and conventions\n2. **Single responsibility?** Flag PRs doing too many things.\n3. **Security?** Extra scrutiny for: `x-html`, expression evaluation, `Alpine.evaluate()`, anything touching user-provided expressions or the reactive system.\n4. **Built JS assets in diff?** Check the file list from `gh pr diff --name-only` for `dist/` files. These should NOT be committed. Remove them.\n5. **\"No for now\" bias.** When in doubt, lean toward not merging. It's easier to add later than remove.\n6. **Async timing fixes are treacherous.** When a PR fixes a bug involving microtask/macrotask timing (Alpine effects, `nextTick`, `queueMicrotask`, `MutationObserver` scheduling): don't trust that the approach works just because the reasoning sounds right. Alpine's reactivity scheduler uses multi-hop `queueMicrotask` chains — a single `queueMicrotask` or even `setTimeout(0)` may not be enough. If you can't verify the timing empirically, flag it for discussion.\n7. **\"What's the laziest correct solution?\"** Before evaluating the PR's implementation details, independently brainstorm the simplest possible fix. The contributor's approach is often shaped by their discovery path, not by what's optimal.\n\n## Step 8: Run relevant tests only\n\n**NEVER run the full test suite.** Only run tests the PR adds or touches:\n\n```bash\n# Find test files in the diff\ngh pr diff {number} --name-only | grep -E '\\.spec\\.js$'\n```\n\nRun those specific tests:\n\n```bash\n# For Cypress browser tests\nnpx cypress run --spec ./tests/cypress/integration/{test-file}.spec.js\n\n# For Vitest unit tests\nnpx vitest run tests/vitest/{test-file}.spec.js\n```\n\nIf the PR doesn't touch test files but you wrote tests in step 6, run those.\n\nAlso check CI status:\n\n```bash\ngh pr checks {number}\n```\n\n## Step 8b: If the PR has no fix, write one\n\nIf the PR only adds a failing test (or describes a bug without a fix), don't just review the test and stop. **Explore solution paths and try to fix the bug yourself.** This is the most valuable thing you can do.\n\n1. Identify 2-3 possible fix approaches\n2. Evaluate trade-offs of each (surgical vs broad, risk of regressions, etc.)\n3. Present the options to Caleb with a brief explanation of each\n4. Once Caleb picks a direction, implement and test it\n\n## Step 9: Make fixes directly\n\nFix issues you find. Common fixes:\n\n- **Style violations**: Remove semicolons from JS, change `const` to `let`\n- **Built assets in diff**: `git checkout main -- dist/` (or whatever the build output path is)\n- **Missing tests**: Write them\n- **Small refactors**: Simplify overly complex code\n- **Missing registration**: Add to package index files, etc.\n- **Before committing a simplified version of the contributor's code, do a smell test:** Could this be done in fewer lines with a completely different approach? The best code is the code you delete.\n\nStage and commit fixes:\n\n```bash\ngit add -A\ngit commit -m \"Review fixes: [brief description]\n\nCo-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>\"\n```\n\n## Step 10: Push to PR branch\n\nTry to push to the contributor's branch:\n\n```bash\ngit push\n```\n\n### If push fails (fork doesn't allow maintainer edits)\n\n1. Create a new branch from `main`\n2. Cherry-pick the contributor's commits\n3. Apply your fixes on top\n4. Push the new branch\n5. Create a new PR:\n\n```bash\ngh pr create --title \"{original title}\" --body \"$(cat <<'EOF'\nCloses #{original_number}\n\nCherry-picked from #{original_number} by @{author} with review fixes applied.\n\n## Original description\n{original_body}\n\n## Review fixes applied\n{list of fixes}\nEOF\n)\"\n```\n\n6. Comment on the original PR explaining the new PR.\n\n## Step 11: Post verdict comment\n\nPost a structured comment on the PR:\n\n```bash\ngh pr comment {number} --body \"$(cat <<'EOF'\n<!-- claude-review -->\n## PR Review: #{number} — {title}\n\n**Type**: {Bug fix | Feature | Refactor | Docs | Mixed}\n**Verdict**: {Merge | Request changes | Needs discussion | Close}\n\n### What's happening (plain English)\n{Explain the PR like Caleb is a 3-year-old who happens to be an expert in Alpine internals but has zero context on this specific PR. Use a numbered step-by-step walkthrough of the exact sequence that triggers the bug/feature. No jargon beyond what Alpine devs already know. Be crystal clear and concise — this is the most important section.}\n\n### Other approaches considered\n{Briefly list 2-3 alternative ways this could have been solved, with one sentence each on why the PR's approach is better (or worse). If there's only one reasonable approach, say so and explain why. This helps Caleb quickly evaluate whether the chosen path is the right one.}\n\n### Changes Made\n{List of fixups you pushed, or \"No changes made\" if none}\n\n### Test Results\n{Which tests ran, pass/fail status, CI status}\n\n### Code Review\n{Specific feedback with file:line references. What's good, what's concerning.}\n\n### Security\n{Any security considerations, or \"No security concerns identified.\"}\n\n### Verdict\n{Your reasoning for the verdict. Be direct. If it should be merged, say why. If closed, say why kindly but clearly.}\n\n---\n*Reviewed by Claude*\nEOF\n)\"\n```\n\n## Verdict guidelines\n\n- **Merge**: Code is correct, tests pass, style is clean, feature is wanted. You've fixed any minor issues.\n- **Request changes**: Significant issues you can't fix yourself (architectural problems, missing context, needs author input).\n- **Needs discussion**: Feature scope questions, API design debates, core vs plugin questions. Tag these for Caleb.\n- **Close**: PR is stale with no response, duplicates existing functionality, or solves a problem that shouldn't be solved. Be kind.\n\n## Important rules\n\n- NEVER run the full test suite. Only run tests the PR touches or that you wrote.\n- Always use the `<!-- claude-review -->` marker so you can detect previous reviews.\n- Be opinionated. This project has strong conventions — enforce them.\n- Fix what you can. Don't just point out problems if you can solve them.\n- Security is non-negotiable. If you see a security issue, verdict is always \"Request changes\" regardless of everything else.\n- Match the project voice: practical, direct, minimal.\n- Don't accept the contributor's framing of the problem at face value. Verify the root cause independently, then ensure the test targets that root cause — not the contributor's incidental path to discovering it.\n- \"Should this exist?\" before \"Is this correct?\" — Don't get pulled into reviewing implementation details (code quality, edge cases, naming) until you've decided the feature itself is justified. Implementation nits imply acceptance.\n- Tests are documentation. A sloppy test that passes is not good enough — it should precisely communicate what broke and why.\n- Review contributor naming as critically as contributor code. Bad names get merged and become permanent.\n"
  },
  {
    "path": ".claude/skills/summarize-activity/SKILL.md",
    "content": "---\nname: summarize-activity\ndescription: Summarize recent GitHub activity — discussions, PRs, issues, events, traffic — into an actionable report so you can stay on top of the project without reading everything.\ndisable-model-invocation: true\nallowed-tools: Bash, Read, Task\nargument-hint: \"[timeframe: 24h (default), 48h, 7d, 1w]\"\n---\n\n# /summarize-activity - GitHub activity digest\n\nYou generate a concise, actionable summary of recent Alpine.js GitHub activity for Caleb.\n\n**IMPORTANT: Every numbered step below is mandatory. Do not skip steps, do not substitute your own approach. Run the exact commands listed. If a command fails, retry it — do not silently move on. Complete each step fully before starting the next.**\n\n## Step 1: Parse timeframe\n\nParse `$ARGUMENTS` into a cutoff timestamp. Supported formats:\n- `24h`, `48h`, `72h` — hours (default: `24h` if no argument)\n- `7d`, `14d`, `30d` — days\n- `1w`, `2w` — weeks (1w = 7d)\n\nCompute the ISO 8601 cutoff timestamp:\n\n```bash\n# Example for 24h:\ndate -u -v-24H '+%Y-%m-%dT%H:%M:%SZ'\n# Example for 7d:\ndate -u -v-7d '+%Y-%m-%dT%H:%M:%SZ'\n```\n\nStore the cutoff timestamp and the human-readable timeframe label (e.g., \"last 24 hours\", \"last 7 days\") for use in later steps.\n\n## Step 2: Fetch activity in parallel\n\nRun ALL FIVE of these commands in parallel using the Bash tool. If any fail, retry them. Do not proceed to Step 3 until you have output from all five.\n\n**Owner/repo:** `alpinejs/alpine`\n\n### 2a. Discussions (GraphQL)\n\n```bash\ngh api graphql -f query='\n{\n  repository(owner: \"alpinejs\", name: \"alpine\") {\n    discussions(first: 50, orderBy: {field: UPDATED_AT, direction: DESC}) {\n      nodes {\n        title\n        url\n        author { login }\n        category { name }\n        comments { totalCount }\n        body\n        answer { author { login } body createdAt }\n        createdAt\n        updatedAt\n      }\n    }\n  }\n}'\n```\n\n### 2b. Pull Requests\n\n```bash\ngh pr list --repo alpinejs/alpine --state all --limit 50 --json number,title,url,author,state,labels,createdAt,updatedAt,additions,deletions,headRefName,baseRefName,reviewDecision,comments\n```\n\n### 2c. Issues\n\n```bash\ngh issue list --repo alpinejs/alpine --state all --limit 50 --json number,title,url,author,state,labels,createdAt,updatedAt,comments\n```\n\n### 2d. Events\n\n```bash\ngh api repos/alpinejs/alpine/events --paginate --jq '.[] | {type, actor: .actor.login, created_at: .created_at, payload_action: .payload.action, ref: .payload.ref, ref_type: .payload.ref_type}' | head -100\n```\n\n### 2e. Traffic & stars\n\n```bash\ngh api repos/alpinejs/alpine/traffic/views 2>/dev/null; echo \"---SEPARATOR---\"; gh api repos/alpinejs/alpine/traffic/clones 2>/dev/null; echo \"---SEPARATOR---\"; gh api repos/alpinejs/alpine --jq '{stargazers_count, forks_count, open_issues_count, watchers_count}'\n```\n\nNote: Traffic endpoints require push access. If they return 403, skip traffic data and note it in the report.\n\n## Step 3: Fetch comment threads for active items\n\nFor discussions that have comments updated within the timeframe, fetch full comment bodies via GraphQL. Batch up to 10 discussions per query:\n\n```bash\ngh api graphql -f query='\n{\n  repository(owner: \"alpinejs\", name: \"alpine\") {\n    discussion(number: {NUMBER}) {\n      comments(last: 10) {\n        nodes {\n          author { login }\n          body\n          createdAt\n          updatedAt\n        }\n      }\n    }\n  }\n}'\n```\n\nFor the most active PRs and issues (those with comments updated in timeframe), fetch recent comments:\n\n```bash\ngh api repos/alpinejs/alpine/issues/{number}/comments --jq '.[] | select(.updated_at > \"{CUTOFF}\") | {user: .user.login, body: .body, created_at: .created_at}'\n```\n\nOnly fetch threads that are clearly within the timeframe. Don't fetch everything — be selective.\n\n## Step 4: Filter by timeframe\n\nDiscard anything with `updatedAt` / `updated_at` before the cutoff timestamp. Keep items where:\n- The item was created within the timeframe\n- The item received new comments within the timeframe\n- The item changed state (opened, closed, merged) within the timeframe\n\n## Step 5: Analyze and write report\n\nOutput a markdown report with these sections. Be concise — this is a digest, not a novel.\n\n---\n\n### Report format:\n\n```markdown\n# Alpine.js Activity — {timeframe label}\n_{start date} to {end date}_\n\n## TL;DR\n{2-3 sentences. What's the pulse? Any fires? Anything exciting? Give Caleb the vibe in 10 seconds.}\n\n## Needs Your Attention\n{Actionable items only. Each with a recommended next step: reply, merge, close, investigate, etc.}\n\n- **[Title](url)** by @author — {why it needs attention}. **Action:** {specific recommendation}\n\n{If nothing needs attention, say \"Nothing urgent right now.\"}\n\n## Hot Discussions\n{Discussions with the most activity or notable sentiment. Include key quotes if illuminating.}\n\n- **[Title](url)** ({category}) — {N} comments — {brief summary, sentiment note}\n\n{If no notable discussions, say \"Quiet on the discussion front.\"}\n\n## PR Activity\n\n### Opened\n- **[#N Title](url)** by @author — {one-line summary} {+additions/-deletions}\n\n### Merged\n- **[#N Title](url)** by @author — {one-line summary}\n\n### Closed (not merged)\n- **[#N Title](url)** by @author — {one-line summary, why closed if clear}\n\n{Omit empty subsections.}\n\n## Issue Activity\n\n### Opened\n- **[#N Title](url)** by @author — {one-line summary}\n\n### Closed\n- **[#N Title](url)** — {one-line summary}\n\n{Omit empty subsections.}\n\n## Repo Pulse\n| Metric | Value |\n|--------|-------|\n| Stars | {total} |\n| Views (14d) | {count} |\n| Clones (14d) | {count} |\n| Open issues | {count} |\n| PRs opened | {count in timeframe} |\n| PRs merged | {count in timeframe} |\n| PRs closed | {count in timeframe} |\n\n{If traffic data is unavailable (403), omit those rows and note \"Traffic data requires push access.\"}\n```\n\n---\n\n## Important rules\n\n- Every item must include a `[title](url)` link so Caleb can click through.\n- Include @author for attribution.\n- Keep summaries to ONE line per item. This is a digest.\n- The \"Needs Your Attention\" section is the most important. Be opinionated about what deserves Caleb's time.\n- If a discussion or issue has heated sentiment, note it (e.g., \"heated\", \"confused users\", \"strong demand\").\n- Omit empty sections entirely — don't show \"No activity\" headers.\n- For PRs, mention if CI is failing when relevant.\n- Don't editorialize beyond what's helpful for triage. Be practical, not chatty.\n"
  },
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\nindent_size = 4\ntrim_trailing_whitespace = true\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: [calebporzio]\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: false\ncontact_links:\n  - name: Get help or ask a Question\n    url: https://github.com/alpinejs/alpine/discussions/new?category=1-help\n    about: Ask questions or get help from other community members\n\n  - name: Feature Request\n    url: https://github.com/alpinejs/alpine/discussions/new?category=3-feature-ideas\n    about: For ideas or feature requests\n\n  - name: Bug Report\n    url: https://github.com/alpinejs/alpine/discussions/new?category=5-bugs\n    about: Submit a bug report\n\n  - name: Documentation issue\n    url: https://github.com/alpinejs/alpine/pulls\n    about: For documentation issues, please open a pull request\n"
  },
  {
    "path": ".github/SECURITY.md",
    "content": "# Security Policy\n\n**PLEASE DON'T DISCLOSE SECURITY-RELATED ISSUES PUBLICLY.**\n\n## Reporting a Vulnerability\n\nIf you discover a security vulnerability within Alpine.js, please send an email to Caleb Porzio at support@alpinejs.dev. All security vulnerabilities will be promptly addressed.\n"
  },
  {
    "path": ".github/workflows/run-tests.yml",
    "content": "name: Run Tests\non: [push, pull_request]\njobs:\n  build:\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      - run: npm install\n      - run: npm run build\n      - run: npm run test\n      - run: npm run vitest\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\nscratch.md\ndist/\nprompts/\n.env.json\n.idea\n"
  },
  {
    "path": "CLAUDE.md",
    "content": "# Alpine.js Development Guidelines\n\n## Pull Request Evaluation Criteria\n\nWhen evaluating pull requests for Alpine.js, assess the following:\n\n### 1. Tests\n- Are tests provided for the change?\n- Do existing tests still pass?\n- For configuration changes (package.json, build scripts), tests may not be required\n\n### 2. Code Style\n- Does the code match Alpine's existing patterns?\n- Check indentation, naming conventions, and structure\n- For package.json changes, ensure consistency with other packages in the monorepo\n\n### 3. Code Quality\n- Is the code clean and maintainable?\n- Is the change focused and minimal?\n- Are there any unnecessary changes or complexity?\n- Does this PR contain changes that should apply elsewhere?\n\n### 4. Simplicity\n- Is this a simple, focused change?\n- Does it follow Alpine's philosophy of simplicity?\n- Could it be implemented more simply?\n- Are the proposed additions intuitive for users? or do they require extra knowledge that they have to dig for.\n\n### 5. Precedent\n- Does this PR (both public facing additions and internal implementation) follow established precedents in the project\n- Does it use terms that are unfamiliar to the project as of yet?\n\n### 6. Description Quality\n- Is there a clear explanation of what/why/how?\n- Are breaking changes documented?\n- Is backward compatibility addressed?\n\n### 7. Community Engagement\n- Are there comments, reviews, or discussions?\n- Has it been approved by maintainers?\n- Are there any conflicting opinions or unresolved concerns?\n\n### Mergeability Rating\nBased on the above, rate as:\n- **HIGH**: Ready to merge (all criteria met, approved)\n- **MEDIUM**: Needs attention (technically sound but missing reviews/tests)\n- **LOW**: Requires work (has issues or conflicts to resolve)\n\n## Project Structure\n\nAlpine.js is a monorepo with packages in `/packages/`:\n- Each package has its own package.json\n- Build outputs go to `dist/` with `.cjs.js`, `.esm.js`, and `.min.js` versions\n- Browser tests use Cypress, unit tests use Vitest\n- CI runs on GitHub Actions\n\n## Common Commands\n\n```bash\n# Build\nnpm run build                # Build all packages\n\n# Browser tests (Cypress)\nnpm test                     # Run all tests\nnpx cypress run --spec ./tests/cypress/integration/[filename].spec.js  # Run single spec\n\n# Unit tests (Vitest)\nnpx vitest run tests/vitest/[filename].spec.js  # Run single spec\n\n# Review PRs\ngh pr list                   # List open PRs\ngh pr view [number]          # View PR details\ngh pr diff [number]          # View code changes\ngh pr checks [number]        # Check CI status\n```\n\n## Manual Testing\n\n1. Edit `./index.html` at project root\n2. Open in browser at `http://alpine.test/` (assumes local dev server mapped to directory name)\n\n## Summary\n\nAfter assessing the pull request on the above qualities, provide a summary explaining the problem this PR addresses and the fix, and why it's a good or bad fix. Do it in plain language as if you are personally advising me on what the PR is and weather or not I should merge it. And if not, what might need to be addressed first. If things need to be addressed, offer to address them yourself.\n\nPlease use code snippets to establish a starting point and and ending point if helpful. For example, when explaining the problem, it is often easier to provide a brief explanation alongside a code snippet of what is currently problematic, then when explaining the solution, showing what new code will allow a fix if applicable."
  },
  {
    "path": "LICENSE.md",
    "content": "# MIT License\n\nCopyright © 2019-2025 Caleb Porzio and contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Alpine.js\n\nGo to the Alpine docs for most things: [Alpine Docs](https://alpinejs.dev)\n\nYou are welcome to submit updates to the docs by submitting a PR to this repo. Docs are located in the [`/packages/docs`](/packages/docs) directory.\n\nStay here for contribution-related information.\n\n> Looking for V2 docs? [here they are](https://github.com/alpinejs/alpine/tree/v2.8.2)\n\n<p align=\"center\"><a href=\"https://alpinejs.dev/patterns\"><img src=\"/hero.jpg\" alt=\"Alpine Component Patterns\"></a></p>\n\n## Contribution Guide:\n\n### Quickstart\n\n* clone this repo locally\n* run `npm install` & `npm run build`\n* Include the `/packages/alpinejs/dist/cdn.js` file from a `<script>` tag on a webpage and you're good to go!\n\n### Brief Tour\nYou can get everything installed with: `npm install` in the root directory of this repo after cloning it locally.\n\nThis repo is a \"mono-repo\" using npm workspaces for managing the packages. Each package has its own folder in the `/packages` directory.\n\nRather than having to run separate builds for each package, all package bundles are handled with the same command: `npm run build`\n\nHere's a brief look at each package in this repo:\n\nPackage | Description\n--- | ---\n[alpinejs](packages/alpinejs) | The main Alpine repo with all of Alpine's core\n[collapse](packages/collapse) | A plugin for expanding and collapsing elements using smooth animations\n[csp](packages/csp) | A repo to provide a \"CSP safe\" build of Alpine\n[docs](packages/docs) | The Alpine documentation\n[focus](packages/focus) | A plugin that allows you to manage focus inside an element\n[history](packages/history) | A plugin for binding data to query string parameters using the history API (name is likely to change)\n[intersect](packages/intersect) | A plugin for triggering JS expressions based on elements intersecting with the viewport\n[mask](packages/mask) | A plugin for automatically formatting a text input field as a user types\n[morph](packages/morph) | A plugin for morphing HTML (like morphdom) inside the page intelligently\n[persist](packages/persist) | A plugin for persisting Alpine state across page loads\n\nThe compiled JS files (as a result of running `npm run [build/watch]`) to be included as a `<script>` tag for example are stored in each package's `packages/[package]/dist` directory.\n\nEach package should at least have: a \"cdn\" build that is self-initializing and can be included using the `src` attribute in a `<script defer>` tag, and a `module.[esm/cjs].js` file that is used for importing as a JS module (cjs for node, esm for everything else).\n\nThe bundling for Alpine V3 is handled exclusively by ESBuild. All of the configuration for these builds is stored in the `scripts/build.js` file.\n\n### Testing\nThere are 2 different testing tools used in this repo: Cypress (for integration tests), and Vitest (for unit tests).\n\nAll tests are stored inside the `/tests` folder under `/tests/cypress` and `/tests/vitest`.\n\nIf you wish to only run Cypress and open it's user interface (recommended during development), you can run: `npm run cypress`\n\nIf you wish to only run Vitest tests, you can run `npm run vitest` like normal and target specific tests.\n"
  },
  {
    "path": "benchmarks/giant.html",
    "content": "<!--\n    This page is just the copied source of a random GitHub page.\n    The idea is to test mutation observer performance against\n    a giant, real-life HTML page.\n\n    I've annotated benchmarking additions to this page with \"@goto\"\n    for easy searching\n -->\n<!DOCTYPE html>\n<html lang=\"en\" data-color-mode=\"light\" data-light-theme=\"light\" data-dark-theme=\"dark\">\n<head>\n    <!-- @goto -->\n    <script>\n        function walk(el, callback) {\n            if (el instanceof ShadowRoot) {\n                Array.from(el.children).forEach(el => walk(el, callback))\n\n                return\n            }\n\n            let skip = false\n\n            callback(el, () => skip = true)\n\n            if (skip) return\n\n            let node = el.firstElementChild\n\n            while (node) {\n                walk(node, callback, false)\n\n                node = node.nextElementSibling\n            }\n        }\n\n    </script>\n\n    <script>\n\n\n        document.addEventListener('DOMContentLoaded', () => {\n            setTimeout(() => {\n                console.time();\n\n                let observer = new MutationObserver(mutations => {\n                    console.log(mutations);\n                })\n\n                observer.observe(document.body, { characterData: true, childList: true, subtree: true, attributes: true })\n\n                // walk(document.body, el => {\n                //     for (let index = 0; index < el.attributes; index++) {\n                //         let attr = el.attributes[index]\n\n                //     }\n                // })\n\n                console.timeEnd();\n            }, 1000)\n        })\n    </script>\n\n    <meta charset=\"utf-8\">\n    <link rel=\"dns-prefetch\" href=\"https://github.githubassets.com\">\n    <link rel=\"dns-prefetch\" href=\"https://avatars.githubusercontent.com\">\n    <link rel=\"dns-prefetch\" href=\"https://github-cloud.s3.amazonaws.com\">\n    <link rel=\"dns-prefetch\" href=\"https://user-images.githubusercontent.com/\">\n\n    <link crossorigin=\"anonymous\" media=\"all\"\n        integrity=\"sha512-7KjiGvJiLLy6LJPGf3m67ejAdgQsgDdnxZYoaI6+Agd0ZxHKTCjoKZgaf3PgUjURCcVceAwySJJJWgitRskDiA==\"\n        rel=\"stylesheet\"\n        href=\"https://github.githubassets.com/assets/frameworks-eca8e21af2622cbcba2c93c67f79baed.css\" />\n    <link crossorigin=\"anonymous\" media=\"all\"\n        integrity=\"sha512-ZS0ILXChK0v6MFarr5VP2Qq916nqPSByfcud8IEvgXav8xbAAafFHX22IuZOi5/ZkKbLgOmqFkezGZVyANnFrQ==\"\n        rel=\"stylesheet\" href=\"https://github.githubassets.com/assets/behaviors-652d082d70a12b4bfa3056abaf954fd9.css\" />\n\n    <link crossorigin=\"anonymous\" media=\"all\"\n        integrity=\"sha512-ec37dkdwRxMnZ+C8WVJL5fX0MDw39MbZDqmjBB3JFemYXHZrq3E3F25pcbYUEmuB29eH0L5f+KOgO+FQNEFTgw==\"\n        rel=\"stylesheet\" href=\"https://github.githubassets.com/assets/github-79cdfb76477047132767e0bc59524be5.css\" />\n\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-CzeY4A6TiG4fGZSWZU8FxmzFFmcQFoPpArF0hkH0/J/S7UL4eed/LKEXMQXfTwiG5yEJBI+9BdKG8KQJNbhcIQ==\"\n        type=\"application/javascript\" src=\"https://github.githubassets.com/assets/environment-0b3798e0.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-ahOZvzpz/+SYFONmTAqBCwF04p4zvYweAHl7o69sVAwf0oxqMEyVZa//FnA859IbgU9lzj55LagjePKStkjwpw==\"\n        type=\"application/javascript\"\n        src=\"https://github.githubassets.com/assets/chunk-frameworks-6a1399bf.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-+1BN8W3XvQeL2HiktoDjb/NDm2W8tp9hDUb+NL4vabH/tvhdLZIdE9tYL3xRh6HDsc7JpvlTmu2m7CllRB+QYA==\"\n        type=\"application/javascript\" src=\"https://github.githubassets.com/assets/chunk-vendor-fb504df1.js\"></script>\n\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-HdN9wL816nmT1eI4oHE0w/OlqibUShYhoSQOg7jXRAnvoTDhsaLyludbOMoRvKFzN1vkhe+TxQTEplKkZSlSiw==\"\n        type=\"application/javascript\" src=\"https://github.githubassets.com/assets/behaviors-1dd37dc0.js\"></script>\n\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-tjuNQcwhEIXGvVIG4XM/Aj4z+Od+NBRkbgWNwEMjGL3nsnAmdoBdbzsn/WTvl3hk+TPt1D0BvBLHLBPgiwvT2w==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-animate-on-scroll.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-animate-on-scroll-b63b8d41.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-+BKEtK9JkmJ52jKSoX6+SBrGV6kJxB8J/iAPkFQ/oeq8YekNcz7IZlJgM5Tddyx1RrkL3+sdG0tAy3YuFbYqfA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-codemirror.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-codemirror-f81284b4.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-EKOvqJ9uTatAt87WxU+OSS4mi7gMUszFbGo4aPErQkjpWLXnrPSeZvK5ngU8OYoIoiVOq+v8dA3C6MF/z2d/kA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-color-modes.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-color-modes-10a3afa8.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-zkYZSjUFqSifB+Lt76jclFMrfqpcPqevT801RZcoBNCZHRTBKcFrW9OyJoPOzKFv+fZVDRnqdqGsuIv5KOIgZg==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-contributions-spider-graph.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-contributions-spider-graph-ce46194a.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-6j/oSF+kbW+yetNPvI684VzAu9pzug6Vj2h+3u1LdCuRhR4jnuiHZfeQKls3nxcT/S3H+oIt7FtigE/aeoj+gg==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-drag-drop.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-drag-drop-ea3fe848.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-N+ziqJjVMfWiqeVHdayDHpNRlG5HsF+cgV+pFnMDoTJuvBzgw+ndsepe4NcKAxIS3WMvzMaQcYmd2vrIaoAJVg==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-edit.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-edit-37ece2a8.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-aiqMIGGZGo8AQMjcoImKPMTsZVVRl6htCSY7BpRmpGPG/AF+Wq+P/Oj/dthWQOIk9cCNMPEas7O2zAR6oqn0tA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-emoji-picker-element.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-emoji-picker-element-6a2a8c20.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-G3/1Wo8nza2llJz848q++KJXUpeUuHcSDvXLcJzqQZDBLXm/PaOchsesQlyxX/3bXdasUpOE217R8Ln6vTqMHA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-filter-input.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-filter-input-1b7ff55a.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-XwuQdORq1W9Z+a/i72pH+NfR1rhwlGdxIlaIBbTciscGc/+McxMNLixGBp8e6Td4W1zzHvQ1Jyryl5gUfEr76g==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-insights-graph.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-insights-graph-5f0b9074.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-cdGVmQXhZYV6/Qj5QsArM/LjCG6qatgnsAE6W5y9UOHI+J2NdRU7l3IPlxh1zKNwgt5FWXnvrpyEIL7pc3aihg==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-jump-to.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-jump-to-71d19599.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-supZkxo+OPYLNtLXxI+e1dkCqVySu4FOWX1fiVVFs2ZggygppNsEz4F9wVp4YtH2TjFsZW8r/75uDUhPneO2sA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-notification-list-focus.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-notification-list-focus-b2ea5993.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-ma0OOy3nj0c1cqBx0BkcmIFsLqcSZ+MIukQxyEFM/OWTzZpG+QMgOoWPAHZz43M6fyjAUG1jH6c/6LPiiKPCyw==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-profile-pins-element.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-profile-pins-element-99ad0e3b.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-zh+tYYvd4W00us1O4PkhmKsl/CzInIyrdoMqV2xqC7XPu06UEHfEMJfOiwidJ5f80SwrdGWogWFuJzLHwRbRgA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-ref-selector.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-ref-selector-ce1fad61.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-Zii9oRdZ6q2QDNjL5A+me7jwJjMLvs1NiQNHmajUZnn4t9shcBDb4F8l/PQZW26eYfe5065oM7lIOSmbMinA7Q==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-responsive-underlinenav.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-responsive-underlinenav-6628bda1.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-9WNXtB07IyWypiPmkuucspwog4mme9q5GKGMSgd7FI0DPimmg/pEw+aaAofFV1vuWMt9I8H5QpsVtlbHGg1YBA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-runner-groups.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-runner-groups-f56357b4.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-fIq9Mn7jY/bHQXnsmh+VejpDnaO+d/FDxsp+4CuZtdNLrLuO+dQCjh+m6Yd8GCYD2Cy6DWbCEyM+mH2dkB2H9A==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-sortable-behavior.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-sortable-behavior-7c8abd32.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-WK8VXw3lfUQ/VRW0zlgKPhcMUqH0uTnB/KzePUPdZhCm/HpxfXXHKTGvj5C0Oex7+zbIM2ECzULbtTCT4ug3yg==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-toast.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-toast-58af155f.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-vgHJEmEJxNmHucGbVY8bEUoOYo5/ZwpQ69rU8Dld89daWJ54uad9lNptxq32F8pnbHhdngw9lohNEbMbjmj5AQ==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-tweetsodium.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-tweetsodium-be01c912.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-aSxfTHAZj9wv7n08DxgAKkNg7jhiTo4yKKbDqLGxcDxUk/al571Y2ZSsOmLJ0Vh8cuAL8tW+JgX1t0JeKfyfaA==\"\n        type=\"application/javascript\" data-module-id=\"./chunk-user-status-submit.js\"\n        data-src=\"https://github.githubassets.com/assets/chunk-user-status-submit-692c5f4c.js\"></script>\n\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-7Ui55K2N4e8NB585f61+PoRWvxizndh3immaY43j3lT6Gx42PT0ux4+JQ0v9YOG8v+241ud6X8azfl04BX9pEA==\"\n        type=\"application/javascript\" src=\"https://github.githubassets.com/assets/diffs-ed48b9e4.js\"></script>\n    <script crossorigin=\"anonymous\" defer=\"defer\"\n        integrity=\"sha512-Gk2IWkCrXWEuB+/njsWEN2NIj7LKHjhSSZaVGVTGxcc00MlHtZovfnGeKQBR+VrfduEl/nymFTaytnWHJk+I9w==\"\n        type=\"application/javascript\" src=\"https://github.githubassets.com/assets/repositories-1a4d885a.js\"></script>\n\n    <meta name=\"viewport\" content=\"width=device-width\">\n\n    <title>Comparing v2.4.0...master · livewire/livewire</title>\n    <meta name=\"description\"\n        content=\"A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire\">\n    <link rel=\"search\" type=\"application/opensearchdescription+xml\" href=\"/opensearch.xml\" title=\"GitHub\">\n    <link rel=\"fluid-icon\" href=\"https://github.com/fluidicon.png\" title=\"GitHub\">\n    <meta property=\"fb:app_id\" content=\"1401488693436528\">\n    <meta name=\"apple-itunes-app\" content=\"app-id=1477376905\" />\n    <meta name=\"twitter:image:src\"\n        content=\"https://opengraph.githubassets.com/2c3bdb8f8e974e29270f0871c5109550250d88e6f15e78f9e76ee5c9402e7943/livewire/livewire\" />\n    <meta name=\"twitter:site\" content=\"@github\" />\n    <meta name=\"twitter:card\" content=\"summary_large_image\" />\n    <meta name=\"twitter:title\" content=\"livewire/livewire\" />\n    <meta name=\"twitter:description\"\n        content=\"A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire\" />\n    <meta property=\"og:image\"\n        content=\"https://opengraph.githubassets.com/2c3bdb8f8e974e29270f0871c5109550250d88e6f15e78f9e76ee5c9402e7943/livewire/livewire\" />\n    <meta property=\"og:image:alt\"\n        content=\"A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire\" />\n    <meta property=\"og:image:width\" content=\"1200\" />\n    <meta property=\"og:image:height\" content=\"600\" />\n    <meta property=\"og:site_name\" content=\"GitHub\" />\n    <meta property=\"og:type\" content=\"object\" />\n    <meta property=\"og:title\" content=\"livewire/livewire\" />\n    <meta property=\"og:url\" content=\"https://github.com/livewire/livewire\" />\n    <meta property=\"og:description\"\n        content=\"A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire\" />\n\n\n\n\n\n    <link rel=\"assets\" href=\"https://github.githubassets.com/\">\n    <link rel=\"shared-web-socket\"\n        href=\"wss://alive.github.com/_sockets/u/3670578/ws?session=eyJ2IjoiVjMiLCJ1IjozNjcwNTc4LCJzIjo2NjQ5NDAwNjMsImMiOjMzOTEyNDU3NTUsInQiOjE2MTk2NTgwMDN9--04a68da7ebc819e2a2255059fd0688878878654c20ccd90a9f536be9143f9388\"\n        data-refresh-url=\"/_alive\" data-session-id=\"67bb550516ee9baa341519a263257364cc249c174d73cef440f2ebbd72e91158\">\n    <link rel=\"shared-web-socket-src\" href=\"/socket-worker-3f088aa2.js\">\n    <link rel=\"sudo-modal\" href=\"/sessions/sudo_modal\">\n\n    <meta name=\"request-id\" content=\"CCCD:3F5B:1974405:32E9AD9:608A0503\" data-pjax-transient=\"true\" />\n    <meta name=\"html-safe-nonce\" content=\"557fb0696dac7fb80490fa7a4e91bc5ca235fad92960b2156d7d81429fe2867a\"\n        data-pjax-transient=\"true\" />\n    <meta name=\"visitor-payload\"\n        content=\"eyJyZWZlcnJlciI6bnVsbCwicmVxdWVzdF9pZCI6IkNDQ0Q6M0Y1QjoxOTc0NDA1OjMyRTlBRDk6NjA4QTA1MDMiLCJ2aXNpdG9yX2lkIjoiNTIxMDgyOTQ0ODEwMzUwMTczMyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9\"\n        data-pjax-transient=\"true\" />\n    <meta name=\"visitor-hmac\" content=\"d6d0bcc2678a7e8512d44d5efa443be1244d5b543a89368a149406beb19b5a54\"\n        data-pjax-transient=\"true\" />\n\n    <meta name=\"hovercard-subject-tag\" content=\"repository:170355508\" data-pjax-transient>\n\n\n    <meta name=\"github-keyboard-shortcuts\" content=\"repository,source-code\" data-pjax-transient=\"true\" />\n\n\n\n    <meta name=\"selected-link\" value=\"repo_source\" data-pjax-transient>\n\n    <meta name=\"google-site-verification\" content=\"c1kuD-K2HIVF635lypcsWPoD4kilo5-jA_wBFyT4uMY\">\n    <meta name=\"google-site-verification\" content=\"KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU\">\n    <meta name=\"google-site-verification\" content=\"ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA\">\n    <meta name=\"google-site-verification\" content=\"GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc\">\n\n    <meta name=\"octolytics-host\" content=\"collector.githubapp.com\" />\n    <meta name=\"octolytics-app-id\" content=\"github\" />\n    <meta name=\"octolytics-event-url\" content=\"https://collector.githubapp.com/github-external/browser_event\" />\n    <meta name=\"octolytics-actor-id\" content=\"3670578\" />\n    <meta name=\"octolytics-actor-login\" content=\"calebporzio\" />\n    <meta name=\"octolytics-actor-hash\" content=\"ea5c7bc4a37b65d07c6b56074b63615f19314fbd4a42cc8a2f1a9d71e9fbe181\" />\n\n    <meta name=\"analytics-location\" content=\"/&lt;user-name&gt;/&lt;repo-name&gt;/compare/show\"\n        data-pjax-transient=\"true\" />\n    <meta name=\"hostname\" content=\"github.com\">\n    <meta name=\"user-login\" content=\"calebporzio\">\n\n\n    <meta name=\"expected-hostname\" content=\"github.com\">\n\n    <meta name=\"js-proxy-site-detection-payload\"\n        content=\"NmZmYzAyZjZmMDAzMmFjMzhhNjA1ZmYwNDM3MTU5NmQ2ZDYzZWM2YjJkNmNkMzNhMmNkMzEwNzM2YWYxODlmYnx7InJlbW90ZV9hZGRyZXNzIjoiMTA4LjE3LjE1LjQ1IiwicmVxdWVzdF9pZCI6IkNDQ0Q6M0Y1QjoxOTc0NDA1OjMyRTlBRDk6NjA4QTA1MDMiLCJ0aW1lc3RhbXAiOjE2MTk2NTgwMDMsImhvc3QiOiJnaXRodWIuY29tIn0=\">\n\n    <meta name=\"enabled-features\"\n        content=\"MARKETPLACE_PENDING_INSTALLATIONS,AUTOCOMPLETE_EMOJIS_IN_MARKDOWN_EDITOR,GITHUB_TOKEN_PERMISSION,ACTIONS_CONCURRENCY_UI\">\n\n    <meta http-equiv=\"x-pjax-version\" content=\"a19e819ac3421c0b8ca026b3b670d302ebcd282e758523a8d1a60a3d92cdcb98\">\n\n\n    <link data-pjax-transient rel='alternate' type='text/x-diff' href='/livewire/livewire/compare/v2.4.0...master.diff'>\n    <link data-pjax-transient rel='alternate' type='text/x-patch'\n        href='/livewire/livewire/compare/v2.4.0...master.patch'>\n\n    <meta name=\"session-resume-id\" content=\"/livewire/livewire/compare\" data-pjax-transient>\n\n    <meta name=\"go-import\" content=\"github.com/livewire/livewire git https://github.com/livewire/livewire.git\">\n\n    <meta name=\"octolytics-dimension-user_id\" content=\"51960834\" />\n    <meta name=\"octolytics-dimension-user_login\" content=\"livewire\" />\n    <meta name=\"octolytics-dimension-repository_id\" content=\"170355508\" />\n    <meta name=\"octolytics-dimension-repository_nwo\" content=\"livewire/livewire\" />\n    <meta name=\"octolytics-dimension-repository_public\" content=\"true\" />\n    <meta name=\"octolytics-dimension-repository_is_fork\" content=\"false\" />\n    <meta name=\"octolytics-dimension-repository_network_root_id\" content=\"170355508\" />\n    <meta name=\"octolytics-dimension-repository_network_root_nwo\" content=\"livewire/livewire\" />\n\n    <meta name=\"browser-stats-url\" content=\"https://api.github.com/_private/browser/stats\">\n\n    <meta name=\"browser-errors-url\" content=\"https://api.github.com/_private/browser/errors\">\n\n    <meta name=\"browser-optimizely-client-errors-url\"\n        content=\"https://api.github.com/_private/browser/optimizely_client/errors\">\n\n    <link rel=\"mask-icon\" href=\"https://github.githubassets.com/pinned-octocat.svg\" color=\"#000000\">\n    <link rel=\"alternate icon\" class=\"js-site-favicon\" type=\"image/png\"\n        href=\"https://github.githubassets.com/favicons/favicon.png\">\n    <link rel=\"icon\" class=\"js-site-favicon\" type=\"image/svg+xml\"\n        href=\"https://github.githubassets.com/favicons/favicon.svg\">\n\n    <meta name=\"theme-color\" content=\"#1e2327\">\n    <meta name=\"color-scheme\" content=\"light dark\" />\n\n    <link rel=\"manifest\" href=\"/manifest.json\" crossOrigin=\"use-credentials\">\n</head>\n\n<body class=\"logged-in env-production page-responsive\" style=\"word-wrap: break-word;\">\n    <div class=\"position-relative js-header-wrapper \">\n        <a href=\"#start-of-content\"\n            class=\"p-3 color-bg-info-inverse color-text-white show-on-focus js-skip-to-content\">Skip to content</a>\n        <span class=\"progress-pjax-loader width-full js-pjax-loader-bar Progress position-fixed\">\n            <span style=\"background-color: #79b8ff;width: 0%;\" class=\"Progress-item progress-pjax-loader-bar \"></span>\n        </span>\n\n        <header class=\"Header js-details-container Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap\" role=\"banner\">\n            <div class=\"Header-item mt-n1 mb-n1  d-none d-md-flex\">\n                <a class=\"Header-link \" href=\"https://github.com/\" data-hotkey=\"g d\" aria-label=\"Homepage \"\n                    data-ga-click=\"Header, go to dashboard, icon:logo\">\n                    <svg class=\"octicon octicon-mark-github v-align-middle\" height=\"32\" viewBox=\"0 0 16 16\"\n                        version=\"1.1\" width=\"32\" aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\"\n                            d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\">\n                        </path>\n                    </svg>\n                </a>\n\n            </div>\n\n            <div class=\"Header-item d-md-none\">\n                <button class=\"Header-link btn-link js-details-target\" type=\"button\" aria-label=\"Toggle navigation\"\n                    aria-expanded=\"false\">\n                    <svg height=\"24\" class=\"octicon octicon-three-bars\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"24\"\n                        aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\"\n                            d=\"M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z\">\n                        </path>\n                    </svg>\n                </button>\n            </div>\n\n            <div\n                class=\"Header-item Header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex\">\n                <div class=\"header-search flex-auto js-site-search position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3 scoped-search site-scoped-search js-jump-to\"\n                    role=\"combobox\" aria-owns=\"jump-to-results\" aria-label=\"Search or jump to\" aria-haspopup=\"listbox\"\n                    aria-expanded=\"false\">\n                    <div class=\"position-relative\">\n                        <!-- '\"` -->\n                        <!-- </textarea></xmp> -->\n                        </option>\n                        </form>\n                        <form class=\"js-site-search-form\" role=\"search\" aria-label=\"Site\" data-scope-type=\"Repository\"\n                            data-scope-id=\"170355508\" data-scoped-search-url=\"/livewire/livewire/search\"\n                            data-owner-scoped-search-url=\"/orgs/livewire/search\" data-unscoped-search-url=\"/search\"\n                            action=\"/livewire/livewire/search\" accept-charset=\"UTF-8\" method=\"get\">\n                            <label\n                                class=\"form-control input-sm header-search-wrapper p-0 js-chromeless-input-container header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center\">\n                                <input type=\"text\"\n                                    class=\"form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable\"\n                                    data-hotkey=\"s,/\" name=\"q\" value=\"\" placeholder=\"Search or jump to…\"\n                                    data-unscoped-placeholder=\"Search or jump to…\"\n                                    data-scoped-placeholder=\"Search or jump to…\" autocapitalize=\"off\"\n                                    aria-autocomplete=\"list\" aria-controls=\"jump-to-results\"\n                                    aria-label=\"Search or jump to…\"\n                                    data-jump-to-suggestions-path=\"/_graphql/GetSuggestedNavigationDestinations\"\n                                    spellcheck=\"false\" autocomplete=\"off\">\n                                <input type=\"hidden\"\n                                    value=\"ShzwEg2Zqb6gnqBwUyXc21KpEEXoWPsZD/kjb44OhkNeZORhpdEipljIa/mNdXtfhlsSA444zNT0YImAnNCsZw==\"\n                                    data-csrf=\"true\" class=\"js-data-jump-to-suggestions-path-csrf\" />\n                                <input type=\"hidden\" class=\"js-site-search-type-field\" name=\"type\">\n                                <img src=\"https://github.githubassets.com/images/search-key-slash.svg\" alt=\"\"\n                                    class=\"mr-2 header-search-key-slash\">\n\n                                <div\n                                    class=\"Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container\">\n\n                                    <ul class=\"d-none js-jump-to-suggestions-template-container\">\n\n\n                                        <li class=\"d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-suggestion\"\n                                            role=\"option\">\n                                            <a tabindex=\"-1\"\n                                                class=\"no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2\"\n                                                href=\"\" data-item-type=\"suggestion\">\n                                                <div\n                                                    class=\"jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none\">\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none\"\n                                                        title=\"Repository\" aria-label=\"Repository\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none\"\n                                                        title=\"Project\" aria-label=\"Project\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none\"\n                                                        title=\"Search\" aria-label=\"Search\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\">\n                                                        </path>\n                                                    </svg>\n                                                </div>\n\n                                                <img class=\"avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none\"\n                                                    alt=\"\" aria-label=\"Team\" src=\"\" width=\"28\" height=\"28\">\n\n                                                <div\n                                                    class=\"jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target\">\n                                                </div>\n\n                                                <div\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search\">\n                                                    <span class=\"js-jump-to-badge-search-text-default d-none\"\n                                                        aria-label=\"in this repository\">\n                                                        In this repository\n                                                    </span>\n                                                    <span class=\"js-jump-to-badge-search-text-global d-none\"\n                                                        aria-label=\"in all of GitHub\">\n                                                        All GitHub\n                                                    </span>\n                                                    <span aria-hidden=\"true\"\n                                                        class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n\n                                                <div aria-hidden=\"true\"\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump\">\n                                                    Jump to\n                                                    <span class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n                                            </a>\n                                        </li>\n\n                                    </ul>\n\n                                    <ul class=\"d-none js-jump-to-no-results-template-container\">\n                                        <li\n                                            class=\"d-flex flex-justify-center flex-items-center f5 d-none js-jump-to-suggestion p-2\">\n                                            <span class=\"color-text-secondary\">No suggested jump to results</span>\n                                        </li>\n                                    </ul>\n\n                                    <ul id=\"jump-to-results\" role=\"listbox\"\n                                        class=\"p-0 m-0 js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container\">\n\n\n                                        <li class=\"d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-scoped-search d-none\"\n                                            role=\"option\">\n                                            <a tabindex=\"-1\"\n                                                class=\"no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2\"\n                                                href=\"\" data-item-type=\"scoped_search\">\n                                                <div\n                                                    class=\"jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none\">\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none\"\n                                                        title=\"Repository\" aria-label=\"Repository\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none\"\n                                                        title=\"Project\" aria-label=\"Project\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none\"\n                                                        title=\"Search\" aria-label=\"Search\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\">\n                                                        </path>\n                                                    </svg>\n                                                </div>\n\n                                                <img class=\"avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none\"\n                                                    alt=\"\" aria-label=\"Team\" src=\"\" width=\"28\" height=\"28\">\n\n                                                <div\n                                                    class=\"jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target\">\n                                                </div>\n\n                                                <div\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search\">\n                                                    <span class=\"js-jump-to-badge-search-text-default d-none\"\n                                                        aria-label=\"in this repository\">\n                                                        In this repository\n                                                    </span>\n                                                    <span class=\"js-jump-to-badge-search-text-global d-none\"\n                                                        aria-label=\"in all of GitHub\">\n                                                        All GitHub\n                                                    </span>\n                                                    <span aria-hidden=\"true\"\n                                                        class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n\n                                                <div aria-hidden=\"true\"\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump\">\n                                                    Jump to\n                                                    <span class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n                                            </a>\n                                        </li>\n\n\n\n                                        <li class=\"d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-owner-scoped-search d-none\"\n                                            role=\"option\">\n                                            <a tabindex=\"-1\"\n                                                class=\"no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2\"\n                                                href=\"\" data-item-type=\"owner_scoped_search\">\n                                                <div\n                                                    class=\"jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none\">\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none\"\n                                                        title=\"Repository\" aria-label=\"Repository\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none\"\n                                                        title=\"Project\" aria-label=\"Project\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none\"\n                                                        title=\"Search\" aria-label=\"Search\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\">\n                                                        </path>\n                                                    </svg>\n                                                </div>\n\n                                                <img class=\"avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none\"\n                                                    alt=\"\" aria-label=\"Team\" src=\"\" width=\"28\" height=\"28\">\n\n                                                <div\n                                                    class=\"jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target\">\n                                                </div>\n\n                                                <div\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search\">\n                                                    <span class=\"js-jump-to-badge-search-text-default d-none\"\n                                                        aria-label=\"in this organization\">\n                                                        In this organization\n                                                    </span>\n                                                    <span class=\"js-jump-to-badge-search-text-global d-none\"\n                                                        aria-label=\"in all of GitHub\">\n                                                        All GitHub\n                                                    </span>\n                                                    <span aria-hidden=\"true\"\n                                                        class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n\n                                                <div aria-hidden=\"true\"\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump\">\n                                                    Jump to\n                                                    <span class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n                                            </a>\n                                        </li>\n\n\n\n                                        <li class=\"d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-global-search d-none\"\n                                            role=\"option\">\n                                            <a tabindex=\"-1\"\n                                                class=\"no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2\"\n                                                href=\"\" data-item-type=\"global_search\">\n                                                <div\n                                                    class=\"jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none\">\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none\"\n                                                        title=\"Repository\" aria-label=\"Repository\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none\"\n                                                        title=\"Project\" aria-label=\"Project\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg height=\"16\" width=\"16\"\n                                                        class=\"octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none\"\n                                                        title=\"Search\" aria-label=\"Search\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" role=\"img\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\">\n                                                        </path>\n                                                    </svg>\n                                                </div>\n\n                                                <img class=\"avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none\"\n                                                    alt=\"\" aria-label=\"Team\" src=\"\" width=\"28\" height=\"28\">\n\n                                                <div\n                                                    class=\"jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target\">\n                                                </div>\n\n                                                <div\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search\">\n                                                    <span class=\"js-jump-to-badge-search-text-default d-none\"\n                                                        aria-label=\"in this repository\">\n                                                        In this repository\n                                                    </span>\n                                                    <span class=\"js-jump-to-badge-search-text-global d-none\"\n                                                        aria-label=\"in all of GitHub\">\n                                                        All GitHub\n                                                    </span>\n                                                    <span aria-hidden=\"true\"\n                                                        class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n\n                                                <div aria-hidden=\"true\"\n                                                    class=\"border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump\">\n                                                    Jump to\n                                                    <span class=\"d-inline-block ml-1 v-align-middle\">↵</span>\n                                                </div>\n                                            </a>\n                                        </li>\n\n\n                                        <li\n                                            class=\"d-flex flex-justify-center flex-items-center p-0 f5 js-jump-to-suggestion\">\n                                            <svg style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                                viewBox=\"0 0 16 16\" fill=\"none\" width=\"32\" height=\"32\"\n                                                class=\"m-3 anim-rotate\">\n                                                <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\"\n                                                    stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" />\n                                                <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\"\n                                                    vector-effect=\"non-scaling-stroke\" />\n                                            </svg>\n                                        </li>\n                                    </ul>\n\n                                </div>\n                            </label>\n                        </form>\n                    </div>\n                </div>\n\n                <nav class=\"d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto\" aria-label=\"Global\">\n                    <a class=\"Header-link py-md-3 d-block d-md-none py-2 border-top border-md-top-0 border-white-fade-15\"\n                        data-ga-click=\"Header, click, Nav menu - item:dashboard:user\" aria-label=\"Dashboard\"\n                        href=\"/dashboard\">\n                        Dashboard\n                    </a>\n                    <a class=\"js-selected-navigation-item Header-link mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15\"\n                        data-hotkey=\"g p\" data-ga-click=\"Header, click, Nav menu - item:pulls context:user\"\n                        aria-label=\"Pull requests you created\"\n                        data-selected-links=\"/pulls /pulls/assigned /pulls/mentioned /pulls\" href=\"/pulls\">\n                        Pull<span class=\"d-inline d-md-none d-lg-inline\"> request</span>s\n                    </a>\n                    <a class=\"js-selected-navigation-item Header-link mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15\"\n                        data-hotkey=\"g i\" data-ga-click=\"Header, click, Nav menu - item:issues context:user\"\n                        aria-label=\"Issues you created\"\n                        data-selected-links=\"/issues /issues/assigned /issues/mentioned /issues\" href=\"/issues\">\n                        Issues\n                    </a>\n                    <div class=\"d-flex position-relative\">\n                        <a class=\"js-selected-navigation-item Header-link flex-auto mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15\"\n                            data-ga-click=\"Header, click, Nav menu - item:marketplace context:user\"\n                            data-octo-click=\"marketplace_click\" data-octo-dimensions=\"location:nav_bar\"\n                            data-selected-links=\" /marketplace\" href=\"/marketplace\">\n                            Marketplace\n                        </a>\n                    </div>\n\n                    <a class=\"js-selected-navigation-item Header-link mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15\"\n                        data-ga-click=\"Header, click, Nav menu - item:explore\"\n                        data-selected-links=\"/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore\"\n                        href=\"/explore\">\n                        Explore\n                    </a>\n                    <a class=\"js-selected-navigation-item Header-link d-block d-md-none py-2 py-md-3 border-top border-md-top-0 border-white-fade-15\"\n                        data-ga-click=\"Header, click, Nav menu - item:workspaces context:user\"\n                        data-selected-links=\"/codespaces /codespaces\" href=\"/codespaces\">\n                        Codespaces\n                    </a>\n                    <a class=\"js-selected-navigation-item Header-link d-block d-md-none py-2 py-md-3 border-top border-md-top-0 border-white-fade-15\"\n                        data-ga-click=\"Header, click, Nav menu - item:Sponsors\"\n                        data-hydro-click=\"{&quot;event_type&quot;:&quot;sponsors.button_click&quot;,&quot;payload&quot;:{&quot;button&quot;:&quot;HEADER_SPONSORS_DASHBOARD&quot;,&quot;sponsorable_login&quot;:&quot;calebporzio&quot;,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                        data-hydro-click-hmac=\"22cb5ddd16c713f6bd489b6a5834b103bf046730721949a0d1d536e17bfc9fb9\"\n                        data-selected-links=\" /sponsors/accounts\" href=\"/sponsors/accounts\">Sponsors</a>\n\n                    <a class=\"Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-top border-md-top-0 border-white-fade-15\"\n                        href=\"/settings/profile\">\n                        Settings\n                    </a>\n                    <a class=\"Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-top border-md-top-0 border-white-fade-15\"\n                        href=\"/calebporzio\">\n                        <img class=\"avatar avatar-user\"\n                            src=\"https://avatars.githubusercontent.com/u/3670578?s=40&amp;v=4\" width=\"20\" height=\"20\"\n                            alt=\"@calebporzio\" />\n                        calebporzio\n                    </a>\n                    <!-- '\"` -->\n                    <!-- </textarea></xmp> -->\n                    </option>\n                    </form>\n                    <form action=\"/logout\" accept-charset=\"UTF-8\" method=\"post\"><input type=\"hidden\"\n                            name=\"authenticity_token\"\n                            value=\"9+7FhAatzPGw3hT7+wVwNXk/SAoiTm4cZwa9dSePNBjYklZ4vj/svoqfMJvl/Rw7cAkzfSNSukn77o081tow5w==\" />\n                        <button type=\"submit\"\n                            class=\"Header-link mr-0 mr-md-3 py-2 py-md-3 border-top border-md-top-0 border-white-fade-15 d-md-none btn-link d-block width-full text-left\"\n                            data-ga-click=\"Header, sign out, icon:logout\" style=\"padding-left: 2px;\">\n                            <svg class=\"octicon octicon-sign-out v-align-middle\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\"\n                                    d=\"M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 010 1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm10.44 4.5H6.75a.75.75 0 000 1.5h5.69l-1.97 1.97a.75.75 0 101.06 1.06l3.25-3.25a.75.75 0 000-1.06l-3.25-3.25a.75.75 0 10-1.06 1.06l1.97 1.97z\">\n                                </path>\n                            </svg>\n                            Sign out\n                        </button>\n                    </form>\n                </nav>\n\n            </div>\n\n            <div class=\"Header-item Header-item--full flex-justify-center d-md-none position-relative\">\n                <a class=\"Header-link \" href=\"https://github.com/\" data-hotkey=\"g d\" aria-label=\"Homepage \"\n                    data-ga-click=\"Header, go to dashboard, icon:logo\">\n                    <svg class=\"octicon octicon-mark-github v-align-middle\" height=\"32\" viewBox=\"0 0 16 16\"\n                        version=\"1.1\" width=\"32\" aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\"\n                            d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\">\n                        </path>\n                    </svg>\n                </a>\n\n            </div>\n\n            <div class=\"Header-item mr-0 mr-md-3 flex-order-1 flex-md-order-none\">\n\n\n\n                <notification-indicator class=\"js-socket-channel\" data-test-selector=\"notifications-indicator\"\n                    data-channel=\"eyJjIjoibm90aWZpY2F0aW9uLWNoYW5nZWQ6MzY3MDU3OCIsInQiOjE2MTk2NTgwMDN9--0068489773fd235881c029716c4da100c479652edd0aa143c5d9c9cadb5bcf52\">\n                    <a href=\"/notifications\"\n                        class=\"Header-link notification-indicator position-relative tooltipped tooltipped-sw\"\n                        aria-label=\"You have unread notifications\" data-hotkey=\"g n\"\n                        data-ga-click=\"Header, go to notifications, icon:unread\"\n                        data-target=\"notification-indicator.link\">\n                        <span class=\"mail-status unread \" data-target=\"notification-indicator.modifier\"></span>\n                        <svg class=\"octicon octicon-bell\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                            aria-hidden=\"true\">\n                            <path\n                                d=\"M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z\">\n                            </path>\n                            <path fill-rule=\"evenodd\"\n                                d=\"M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z\">\n                            </path>\n                        </svg>\n                    </a>\n                </notification-indicator>\n\n            </div>\n\n\n            <div class=\"Header-item position-relative d-none d-md-flex\">\n                <details class=\"details-overlay details-reset js-header-promo-toggle\">\n                    <summary class=\"Header-link\" aria-label=\"Create new…\" data-ga-click=\"Header, create new, icon:add\">\n                        <svg class=\"octicon octicon-plus\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                            aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\"\n                                d=\"M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 110 1.5H8.5v4.25a.75.75 0 11-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z\">\n                            </path>\n                        </svg> <span class=\"dropdown-caret\"></span>\n                    </summary>\n                    <details-menu class=\"dropdown-menu dropdown-menu-sw\">\n\n                        <a role=\"menuitem\" class=\"dropdown-item\" href=\"/new\"\n                            data-ga-click=\"Header, create new repository\">\n                            New repository\n                        </a>\n\n                        <a role=\"menuitem\" class=\"dropdown-item\" href=\"/new/import\"\n                            data-ga-click=\"Header, import a repository\">\n                            Import repository\n                        </a>\n\n                        <a role=\"menuitem\" class=\"dropdown-item\" href=\"https://gist.github.com/\"\n                            data-ga-click=\"Header, create new gist\">\n                            New gist\n                        </a>\n\n                        <a role=\"menuitem\" class=\"dropdown-item\" href=\"/organizations/new\"\n                            data-ga-click=\"Header, create new organization\">\n                            New organization\n                        </a>\n\n\n                        <div role=\"none\" class=\"dropdown-divider\"></div>\n                        <div class=\"dropdown-header\">\n                            <span title=\"livewire/livewire\">This repository</span>\n                        </div>\n                        <a role=\"menuitem\" class=\"dropdown-item\" href=\"/livewire/livewire/issues/new/choose\"\n                            data-ga-click=\"Header, create new issue\" data-skip-pjax>\n                            New issue\n                        </a>\n\n\n                    </details-menu>\n                </details>\n\n            </div>\n\n            <div class=\"Header-item position-relative mr-0 d-none d-md-flex\">\n\n                <details\n                    class=\"details-overlay details-reset js-header-promo-toggle js-feature-preview-indicator-container\"\n                    data-feature-preview-indicator-src=\"/users/calebporzio/feature_preview/indicator_check\">\n\n                    <summary class=\"Header-link\" aria-label=\"View profile and more\"\n                        data-ga-click=\"Header, show menu, icon:avatar\">\n                        <img src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;v=4\" alt=\"@calebporzio\"\n                            size=\"20\" height=\"20\" width=\"20\" class=\"avatar-user avatar avatar-small \"></img>\n                        <span class=\"feature-preview-indicator js-feature-preview-indicator\" style=\"top: 1px;\"\n                            hidden></span>\n                        <span class=\"dropdown-caret\"></span>\n                    </summary>\n                    <details-menu class=\"dropdown-menu dropdown-menu-sw\" style=\"width: 180px\" src=\"/users/3670578/menu\"\n                        preload>\n                        <include-fragment>\n                            <p class=\"text-center mt-3\" data-hide-on-error>\n                                <svg style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                    viewBox=\"0 0 16 16\" fill=\"none\" width=\"32\" height=\"32\" class=\"anim-rotate\">\n                                    <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\"\n                                        stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" />\n                                    <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\" stroke-width=\"2\"\n                                        stroke-linecap=\"round\" vector-effect=\"non-scaling-stroke\" />\n                                </svg>\n                            </p>\n                            <p class=\"ml-1 mb-2 mt-2 color-text-primary\" data-show-on-error>\n                                <svg class=\"octicon octicon-alert\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                    height=\"16\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\"\n                                        d=\"M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z\">\n                                    </path>\n                                </svg>\n                                Sorry, something went wrong.\n                            </p>\n                        </include-fragment>\n                    </details-menu>\n                </details>\n\n            </div>\n\n        </header>\n\n\n    </div>\n\n    <div id=\"start-of-content\" class=\"show-on-focus\"></div>\n\n\n\n\n\n    <div data-pjax-replace id=\"js-flash-container\">\n\n\n        <template class=\"js-flash-template\">\n            <div class=\"flash flash-full  {{ className }}\">\n                <div class=\" px-2\">\n                    <button class=\"flash-close js-flash-close\" type=\"button\" aria-label=\"Dismiss this message\">\n                        <svg class=\"octicon octicon-x\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                            aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\"\n                                d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\">\n                            </path>\n                        </svg>\n                    </button>\n\n                    <div>{{ message }}</div>\n\n                </div>\n            </div>\n        </template>\n    </div>\n\n\n\n\n    <include-fragment class=\"js-notification-shelf-include-fragment\"\n        data-base-src=\"https://github.com/notifications/beta/shelf\"></include-fragment>\n\n\n\n\n    <div class=\"application-main \" data-commit-hovercards-enabled data-discussion-hovercards-enabled\n        data-issue-and-pr-hovercards-enabled>\n        <div itemscope itemtype=\"http://schema.org/SoftwareSourceCode\" class=\"\">\n            <main id=\"js-repo-pjax-container\" data-pjax-container>\n\n\n\n\n\n\n\n\n\n\n\n\n\n                <div class=\"color-bg-secondary pt-3 hide-full-screen mb-5\">\n\n                    <div class=\"d-flex mb-3 px-3 px-md-4 px-lg-5\">\n\n                        <div class=\"flex-auto min-width-0 width-fit mr-3\">\n                            <h1 class=\" d-flex flex-wrap flex-items-center break-word f3 text-normal\">\n                                <svg class=\"octicon octicon-repo color-text-secondary mr-2\" viewBox=\"0 0 16 16\"\n                                    version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\"\n                                        d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\">\n                                    </path>\n                                </svg>\n                                <span class=\"author flex-self-stretch\" itemprop=\"author\">\n                                    <a class=\"url fn\" rel=\"author\" data-hovercard-type=\"organization\"\n                                        data-hovercard-url=\"/orgs/livewire/hovercard\" href=\"/livewire\">livewire</a>\n                                </span>\n                                <span class=\"mx-1 flex-self-stretch color-text-secondary\">/</span>\n                                <strong itemprop=\"name\" class=\"mr-2 flex-self-stretch\">\n                                    <a data-pjax=\"#js-repo-pjax-container\" href=\"/livewire/livewire\">livewire</a>\n                                </strong>\n\n                            </h1>\n\n\n                        </div>\n\n                        <ul class=\"pagehead-actions flex-shrink-0 d-none d-md-inline\" style=\"padding: 2px 0;\">\n                            <li>\n                                <details id=\"funding-links-modal\"\n                                    class=\"details-reset details-overlay details-overlay-dark d-inline-block float-left\">\n                                    <summary id=\"sponsor-button-repo\" class=\"btn btn-sm\"\n                                        title=\"Sponsor livewire/livewire\"\n                                        data-ga-click=\"Repository, show sponsor modal, action:compare#show; text:Sponsor\">\n                                        <svg class=\"octicon octicon-heart icon-sponsor text-pink mr-1\" height=\"16\"\n                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z\">\n                                            </path>\n                                        </svg>\n                                        Sponsor\n                                    </summary>\n                                    <details-dialog class=\"anim-fade-in fast Box Box--overlay d-flex flex-column\"\n                                        src=\"/livewire/livewire/funding_links?fragment=1\" preload>\n                                        <div class=\"Box-header\">\n                                            <button class=\"Box-btn-octicon btn-octicon float-right\" type=\"button\"\n                                                aria-label=\"Close dialog\" data-close-dialog>\n                                                <svg class=\"octicon octicon-x\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                    width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                    <path fill-rule=\"evenodd\"\n                                                        d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\">\n                                                    </path>\n                                                </svg>\n                                            </button>\n                                            <h3 class=\"Box-title\">\n                                                Sponsor livewire/livewire\n                                            </h3>\n                                        </div>\n                                        <div class=\"overflow-auto\">\n                                            <include-fragment>\n                                                <svg aria-label=\"Loading...\"\n                                                    style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" width=\"64\" height=\"64\"\n                                                    class=\"my-3 mx-auto d-block anim-rotate\">\n                                                    <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\"\n                                                        stroke-opacity=\"0.25\" stroke-width=\"2\"\n                                                        vector-effect=\"non-scaling-stroke\" />\n                                                    <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\"\n                                                        stroke-width=\"2\" stroke-linecap=\"round\"\n                                                        vector-effect=\"non-scaling-stroke\" />\n                                                </svg>\n                                            </include-fragment>\n                                        </div>\n                                    </details-dialog>\n                                </details>\n                            </li>\n\n                            <li>\n                                <notifications-list-subscription-form class=\"f5 position-relative d-flex\">\n                                    <details class=\"details-reset details-overlay f5 position-relative\"\n                                        data-target=\"notifications-list-subscription-form.details\"\n                                        data-action=\"toggle:notifications-list-subscription-form#detailsToggled\">\n\n                                        <summary class=\"btn btn-sm rounded-right-0\"\n                                            data-hydro-click=\"{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;WATCH_BUTTON&quot;,&quot;repository_id&quot;:170355508,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-click-hmac=\"a7627d94619addaa4691df329a47b427f1e8e50927b2dc066b79a5483b43d1a1\"\n                                            data-ga-click=\"Repository, click Watch settings, action:compare#show\"\n                                            aria-label=\"Notifications settings\">\n                                            <span data-menu-button>\n                                                <span\n                                                    data-target=\"notifications-list-subscription-form.unwatchButtonCopy\">\n                                                    <svg class=\"octicon octicon-eye\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z\">\n                                                        </path>\n                                                    </svg>\n                                                    Unwatch\n                                                </span>\n                                                <span hidden\n                                                    data-target=\"notifications-list-subscription-form.stopIgnoringButtonCopy\">\n                                                    <svg class=\"octicon octicon-bell-slash\" height=\"16\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 014.38 1.55 5 5 0 0113 5v2.373a.75.75 0 01-1.5 0V5A3.5 3.5 0 008 1.5zM4.182 4.31L1.19 2.143a.75.75 0 10-.88 1.214L3 5.305v2.642a.25.25 0 01-.042.139L1.255 10.64A1.518 1.518 0 002.518 13h11.108l1.184.857a.75.75 0 10.88-1.214l-1.375-.996a1.196 1.196 0 00-.013-.01L4.198 4.321a.733.733 0 00-.016-.011zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01.015.015 0 00.005.012.017.017 0 00.006.004l.007.001h9.037zM8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z\">\n                                                        </path>\n                                                    </svg>\n                                                    Stop ignoring\n                                                </span>\n                                                <span hidden\n                                                    data-target=\"notifications-list-subscription-form.watchButtonCopy\">\n                                                    <svg class=\"octicon octicon-eye\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z\">\n                                                        </path>\n                                                    </svg>\n                                                    Watch\n                                                </span>\n                                            </span>\n                                            <span class=\"dropdown-caret\"></span>\n                                        </summary>\n                                        <details-menu class=\"SelectMenu  \" role=\"menu\"\n                                            data-target=\"notifications-list-subscription-form.menu\">\n                                            <div class=\"SelectMenu-modal notifications-component-menu-modal\">\n                                                <header class=\"SelectMenu-header\">\n                                                    <h3 class=\"SelectMenu-title\">Notifications</h3>\n                                                    <button class=\"SelectMenu-closeButton\" type=\"button\"\n                                                        aria-label=\"Close menu\"\n                                                        data-action=\"click:notifications-list-subscription-form#closeMenu\">\n                                                        <svg class=\"octicon octicon-x\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                            width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                            <path fill-rule=\"evenodd\"\n                                                                d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </header>\n\n                                                <div class=\"SelectMenu-list\">\n                                                    <form data-target=\"notifications-list-subscription-form.form\"\n                                                        data-action=\"submit:notifications-list-subscription-form#submitForm\"\n                                                        action=\"/notifications/subscribe\" accept-charset=\"UTF-8\"\n                                                        method=\"post\"><input type=\"hidden\" name=\"authenticity_token\"\n                                                            value=\"Ydq+x6q0Q9s22TAF70yZRVrcryU7QruCMhE4732JeI6zEO6rjPBR+Fc8xvd8LKwvyKbWzG5DAha3kJcGhSITgQ==\" />\n\n                                                        <input type=\"hidden\" name=\"repository_id\" value=\"170355508\">\n\n                                                        <button type=\"submit\" name=\"do\" value=\"included\"\n                                                            class=\"SelectMenu-item flex-items-start\"\n                                                            role=\"menuitemradio\" aria-checked=\"false\"\n                                                            data-targets=\"notifications-list-subscription-form.subscriptionButtons\">\n                                                            <span class=\"f5\">\n                                                                <svg class=\"octicon octicon-check SelectMenu-icon SelectMenu-icon--check\"\n                                                                    height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                                    width=\"16\" aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </span>\n                                                            <div>\n                                                                <div class=\"f5 text-bold\">\n                                                                    Participating and @mentions\n                                                                </div>\n                                                                <div\n                                                                    class=\"text-small color-text-secondary text-normal pb-1\">\n                                                                    Only receive notifications from this repository when\n                                                                    participating or @mentioned.\n                                                                </div>\n                                                            </div>\n                                                        </button>\n\n                                                        <button type=\"submit\" name=\"do\" value=\"subscribed\"\n                                                            class=\"SelectMenu-item flex-items-start\"\n                                                            role=\"menuitemradio\" aria-checked=\"true\"\n                                                            data-targets=\"notifications-list-subscription-form.subscriptionButtons\">\n                                                            <span class=\"f5\">\n                                                                <svg class=\"octicon octicon-check SelectMenu-icon SelectMenu-icon--check\"\n                                                                    height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                                    width=\"16\" aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </span>\n                                                            <div>\n                                                                <div class=\"f5 text-bold\">\n                                                                    All Activity\n                                                                </div>\n                                                                <div\n                                                                    class=\"text-small color-text-secondary text-normal pb-1\">\n                                                                    Notified of all notifications on this repository.\n                                                                </div>\n                                                            </div>\n                                                        </button>\n\n                                                        <button type=\"submit\" name=\"do\" value=\"ignore\"\n                                                            class=\"SelectMenu-item flex-items-start\"\n                                                            role=\"menuitemradio\" aria-checked=\"false\"\n                                                            data-targets=\"notifications-list-subscription-form.subscriptionButtons\">\n                                                            <span class=\"f5\">\n                                                                <svg class=\"octicon octicon-check SelectMenu-icon SelectMenu-icon--check\"\n                                                                    height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                                    width=\"16\" aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </span>\n                                                            <div>\n                                                                <div class=\"f5 text-bold\">\n                                                                    Ignore\n                                                                </div>\n                                                                <div\n                                                                    class=\"text-small color-text-secondary text-normal pb-1\">\n                                                                    Never be notified.\n                                                                </div>\n                                                            </div>\n                                                        </button>\n                                                    </form>\n                                                    <button class=\"SelectMenu-item flex-items-start pr-3\" type=\"button\"\n                                                        role=\"menuitemradio\"\n                                                        data-target=\"notifications-list-subscription-form.customButton\"\n                                                        data-action=\"click:notifications-list-subscription-form#openCustomDialog\"\n                                                        aria-haspopup=\"true\" aria-checked=\"false\">\n                                                        <span class=\"f5\">\n                                                            <svg class=\"octicon octicon-check SelectMenu-icon SelectMenu-icon--check\"\n                                                                height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                aria-hidden=\"true\">\n                                                                <path fill-rule=\"evenodd\"\n                                                                    d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                </path>\n                                                            </svg>\n                                                        </span>\n                                                        <div>\n                                                            <div class=\"d-flex flex-items-start flex-justify-between\">\n                                                                <div class=\"f5 text-bold\">Custom</div>\n                                                                <div class=\"f5 pr-1\">\n                                                                    <svg class=\"octicon octicon-arrow-right\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z\">\n                                                                        </path>\n                                                                    </svg>\n                                                                </div>\n                                                            </div>\n                                                            <div\n                                                                class=\"text-small color-text-secondary text-normal pb-1\">\n                                                                Select events you want to be notified of in addition to\n                                                                participating and @mentions.\n                                                            </div>\n                                                        </div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </details-menu>\n\n                                        <details-dialog class=\"notifications-component-dialog \"\n                                            data-target=\"notifications-list-subscription-form.customDialog\" hidden>\n                                            <div\n                                                class=\"SelectMenu-modal notifications-component-dialog-modal overflow-visible\">\n                                                <form data-target=\"notifications-list-subscription-form.customform\"\n                                                    data-action=\"submit:notifications-list-subscription-form#submitCustomForm\"\n                                                    action=\"/notifications/subscribe\" accept-charset=\"UTF-8\"\n                                                    method=\"post\"><input type=\"hidden\" name=\"authenticity_token\"\n                                                        value=\"23byxDOOU2M8WE19er6RBhRyO73g+BxMSWEzObDNQIgJvKKoFcpBQF29u4/p3qRshghCVLX5pdjM4JzQSGYrhw==\" />\n\n                                                    <input type=\"hidden\" name=\"repository_id\" value=\"170355508\">\n\n                                                    <header\n                                                        class=\"d-sm-none SelectMenu-header pb-0 border-bottom-0 px-2 px-sm-3\">\n                                                        <h1 class=\"f3 SelectMenu-title d-inline-flex\">\n                                                            <button\n                                                                class=\"color-bg-primary border-0 px-2 py-0 m-0 Link--secondary f5\"\n                                                                aria-label=\"Return to menu\" type=\"button\"\n                                                                data-action=\"click:notifications-list-subscription-form#closeCustomDialog\">\n                                                                <svg style=\"\" class=\"octicon octicon-arrow-left\"\n                                                                    height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                                    width=\"16\" aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </button>\n                                                            Custom\n                                                            </h3>\n                                                    </header>\n\n                                                    <header class=\"d-none d-sm-flex flex-items-start pt-1\">\n                                                        <button class=\"border-0 px-2 pt-1 m-0 Link--secondary f5\"\n                                                            style=\"background-color: transparent;\"\n                                                            aria-label=\"Return to menu\" type=\"button\"\n                                                            data-action=\"click:notifications-list-subscription-form#closeCustomDialog\">\n                                                            <svg style=\"position: relative; left: 2px; top: 1px\"\n                                                                class=\"octicon octicon-arrow-left\" height=\"16\"\n                                                                viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                aria-hidden=\"true\">\n                                                                <path fill-rule=\"evenodd\"\n                                                                    d=\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\">\n                                                                </path>\n                                                            </svg>\n                                                        </button>\n\n                                                        <h1 class=\"pt-1 pr-4 pb-0 pl-0 f5 text-bold\">\n                                                            Custom\n                                                        </h1>\n                                                    </header>\n\n                                                    <fieldset>\n                                                        <legend>\n                                                            <div\n                                                                class=\"text-small color-text-secondary pt-0 pr-3 pb-3 pl-6 pl-sm-5 border-bottom mb-3\">\n                                                                Select events you want to be notified of in addition to\n                                                                participating and @mentions.\n                                                            </div>\n                                                        </legend>\n                                                        <div class=\"form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0\">\n                                                            <label class=\"f5 text-normal\">\n                                                                <input type=\"checkbox\" name=\"thread_types[]\"\n                                                                    value=\"Issue\"\n                                                                    data-targets=\"notifications-list-subscription-form.threadTypeCheckboxes\"\n                                                                    data-action=\"change:notifications-list-subscription-form#threadTypeCheckboxesUpdated\">\n                                                                Issues\n                                                            </label>\n\n                                                        </div>\n                                                        <div class=\"form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0\">\n                                                            <label class=\"f5 text-normal\">\n                                                                <input type=\"checkbox\" name=\"thread_types[]\"\n                                                                    value=\"PullRequest\"\n                                                                    data-targets=\"notifications-list-subscription-form.threadTypeCheckboxes\"\n                                                                    data-action=\"change:notifications-list-subscription-form#threadTypeCheckboxesUpdated\">\n                                                                Pull requests\n                                                            </label>\n\n                                                        </div>\n                                                        <div class=\"form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0\">\n                                                            <label class=\"f5 text-normal\">\n                                                                <input type=\"checkbox\" name=\"thread_types[]\"\n                                                                    value=\"Release\"\n                                                                    data-targets=\"notifications-list-subscription-form.threadTypeCheckboxes\"\n                                                                    data-action=\"change:notifications-list-subscription-form#threadTypeCheckboxesUpdated\">\n                                                                Releases\n                                                            </label>\n\n                                                        </div>\n                                                        <div class=\"form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0\">\n                                                            <label class=\"f5 text-normal\">\n                                                                <input type=\"checkbox\" name=\"thread_types[]\"\n                                                                    value=\"Discussion\"\n                                                                    data-targets=\"notifications-list-subscription-form.threadTypeCheckboxes\"\n                                                                    data-action=\"change:notifications-list-subscription-form#threadTypeCheckboxesUpdated\">\n                                                                Discussions\n                                                            </label>\n\n                                                        </div>\n                                                    </fieldset>\n                                                    <div\n                                                        class=\"pt-2 pb-3 px-3 d-flex flex-justify-start flex-row-reverse\">\n                                                        <button type=\"submit\" name=\"do\" value=\"custom\"\n                                                            class=\"btn btn-sm btn-primary ml-2\"\n                                                            data-target=\"notifications-list-subscription-form.customSubmit\"\n                                                            disabled>Apply</button>\n\n                                                        <button class=\"btn btn-sm\" type=\"button\"\n                                                            data-action=\"click:notifications-list-subscription-form#resetForm\"\n                                                            data-close-dialog=\"\">Cancel</button>\n                                                    </div>\n                                                </form>\n                                            </div>\n                                        </details-dialog>\n                                        <div class=\"notifications-component-dialog-overlay\"></div>\n                                    </details>\n                                    <a class=\"social-count\" href=\"/livewire/livewire/watchers\"\n                                        aria-label=\"179 users are watching this repository\"\n                                        data-target=\"notifications-list-subscription-form.socialCount\">\n                                        179\n                                    </a>\n                                </notifications-list-subscription-form>\n\n\n\n                            </li>\n\n                            <li>\n                                <div class=\"d-block js-toggler-container js-social-container starring-container on\">\n                                    <form class=\"starred js-social-form\" action=\"/livewire/livewire/unstar\"\n                                        accept-charset=\"UTF-8\" method=\"post\"><input type=\"hidden\"\n                                            name=\"authenticity_token\"\n                                            value=\"YEssjLcpByUaytmoyOSqtxscnZJXcnkmK0hrhgOeQMgBWnHiKYLdt6Zd5aP+r0V5OFbMcffvGDvnd/70DV5e+Q==\" />\n                                        <input type=\"hidden\" name=\"context\" value=\"repository\">\n                                        <button type=\"submit\" class=\"btn btn-sm btn-with-count  js-toggler-target\"\n                                            aria-label=\"Unstar this repository\" title=\"Unstar livewire/livewire\"\n                                            data-hydro-click=\"{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;UNSTAR_BUTTON&quot;,&quot;repository_id&quot;:170355508,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-click-hmac=\"bc5093c637cdf7c6e6f31f0fec12eb0aa3c2be537a20845e37f9ba9fe069977e\"\n                                            data-ga-click=\"Repository, click unstar button, action:compare#show; text:Unstar\">\n                                            <svg class=\"octicon octicon-star-fill mr-1\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z\">\n                                                </path>\n                                            </svg>\n                                            <span>\n                                                Unstar\n                                            </span></button> <a class=\"social-count js-social-count\"\n                                            href=\"/livewire/livewire/stargazers\"\n                                            aria-label=\"10972 users starred this repository\">\n                                            11k\n                                        </a>\n                                    </form>\n                                    <form class=\"unstarred js-social-form\" action=\"/livewire/livewire/star\"\n                                        accept-charset=\"UTF-8\" method=\"post\"><input type=\"hidden\"\n                                            name=\"authenticity_token\"\n                                            value=\"cdxb1VOEWZsilwfEVxPUPqU+nW1Kaia3rxhpmocyFImNd7PBx2IvlhwNXZnQtA5R4LDuX493t7ndj7jP0wdorg==\" />\n                                        <input type=\"hidden\" name=\"context\" value=\"repository\">\n                                        <button type=\"submit\" class=\"btn btn-sm btn-with-count  js-toggler-target\"\n                                            aria-label=\"Unstar this repository\" title=\"Star livewire/livewire\"\n                                            data-hydro-click=\"{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;STAR_BUTTON&quot;,&quot;repository_id&quot;:170355508,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-click-hmac=\"071a2e4fb0329ce3ba97a1c8016f1e11f156b427f80f8f11b647779fe9d42313\"\n                                            data-ga-click=\"Repository, click star button, action:compare#show; text:Star\">\n                                            <svg class=\"octicon octicon-star mr-1\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z\">\n                                                </path>\n                                            </svg>\n                                            <span>\n                                                Star\n                                            </span></button> <a class=\"social-count js-social-count\"\n                                            href=\"/livewire/livewire/stargazers\"\n                                            aria-label=\"10972 users starred this repository\">\n                                            11k\n                                        </a>\n                                    </form>\n                                </div>\n\n                            </li>\n\n                            <li>\n                                <div class=\"float-left\">\n                                    <details class=\"details-reset details-overlay details-overlay-dark \">\n                                        <summary class=\"btn btn-sm btn-with-count\"\n                                            title=\"Fork your own copy of livewire/livewire to your account\"\n                                            data-hydro-click=\"{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;FORK_BUTTON&quot;,&quot;repository_id&quot;:170355508,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-click-hmac=\"7de18a3ca53eef6d3ddb3be2212da3b4784c4444d6b47b1e2d1970dfbdf2e704\"\n                                            data-ga-click=\"Repository, show fork modal, action:compare#show; text:Fork\">\n                                            <svg class=\"octicon octicon-repo-forked\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z\">\n                                                </path>\n                                            </svg>\n                                            Fork\n                                        </summary>\n\n                                        <details-dialog class=\"Box d-flex flex-column anim-fade-in fast Box--overlay \"\n                                            aria-label=\"Fork livewire\" src=\"/livewire/livewire/fork?fragment=1\" preload>\n                                            <div class=\"Box-header\">\n                                                <button class=\"Box-btn-octicon btn-octicon float-right\" type=\"button\"\n                                                    aria-label=\"Close dialog\" data-close-dialog>\n                                                    <svg class=\"octicon octicon-x\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                        version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n                                                <h1 class=\"Box-title\">Fork livewire</h1>\n                                            </div>\n\n                                            <div class=\"text-center overflow-auto\">\n                                                <include-fragment>\n                                                    <div class=\"octocat-spinner my-5\" aria-label=\"Loading...\"></div>\n                                                    <p class=\"f5 color-text-secondary\">If this dialog fails to load, you\n                                                        can visit <a href=\"/livewire/livewire/fork\">the fork page</a>\n                                                        directly.</p>\n                                                </include-fragment>\n                                            </div>\n\n                                        </details-dialog>\n                                    </details>\n                                </div>\n\n                                <a href=\"/livewire/livewire/network/members\" class=\"social-count\"\n                                    aria-label=\"624 users forked this repository\">\n                                    624\n                                </a>\n                            </li>\n                        </ul>\n\n                    </div>\n\n\n                    <nav data-pjax=\"#js-repo-pjax-container\" aria-label=\"Repository\"\n                        class=\"js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5 color-bg-secondary\">\n\n                        <ul class=\"UnderlineNav-body list-style-none \">\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire\" data-tab-item=\"i0code-tab\"\n                                    data-selected-links=\"repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments /livewire/livewire\"\n                                    data-hotkey=\"g c\" data-ga-click=\"Repository, Navigation click, Code tab\"\n                                    aria-current=\"page\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item selected \">\n\n                                    <svg class=\"octicon octicon-code UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Code\">Code</span>\n                                    <span title=\"Not available\" class=\"Counter \"></span>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/issues\" data-tab-item=\"i1issues-tab\"\n                                    data-selected-links=\"repo_issues repo_labels repo_milestones /livewire/livewire/issues\"\n                                    data-hotkey=\"g i\" data-ga-click=\"Repository, Navigation click, Issues tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Issues\">Issues</span>\n                                    <span title=\"116\" class=\"Counter \">116</span>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/pulls\" data-tab-item=\"i2pull-requests-tab\"\n                                    data-selected-links=\"repo_pulls checks /livewire/livewire/pulls\" data-hotkey=\"g p\"\n                                    data-ga-click=\"Repository, Navigation click, Pull requests tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Pull requests\">Pull requests</span>\n                                    <span title=\"7\" class=\"Counter \">7</span>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/discussions\" data-tab-item=\"i3discussions-tab\"\n                                    data-selected-links=\"repo_discussions /livewire/livewire/discussions\"\n                                    data-hotkey=\"g g\" data-ga-click=\"Repository, Navigation click, Discussions tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-comment-discussion UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Discussions\">Discussions</span>\n                                    <span title=\"Not available\" class=\"Counter \"></span>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/actions\" data-tab-item=\"i4actions-tab\"\n                                    data-selected-links=\"repo_actions /livewire/livewire/actions\" data-hotkey=\"g a\"\n                                    data-ga-click=\"Repository, Navigation click, Actions tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-play UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Actions\">Actions</span>\n                                    <span title=\"Not available\" class=\"Counter \"></span>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/projects\" data-tab-item=\"i5projects-tab\"\n                                    data-selected-links=\"repo_projects new_repo_project repo_project /livewire/livewire/projects\"\n                                    data-hotkey=\"g b\" data-ga-click=\"Repository, Navigation click, Projects tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-project UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Projects\">Projects</span>\n                                    <span title=\"2\" class=\"Counter \">2</span>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/security\" data-tab-item=\"i6security-tab\"\n                                    data-selected-links=\"security overview alerts policy token_scanning code_scanning /livewire/livewire/security\"\n                                    data-hotkey=\"g s\" data-ga-click=\"Repository, Navigation click, Security tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M7.467.133a1.75 1.75 0 011.066 0l5.25 1.68A1.75 1.75 0 0115 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.7 1.7 0 01-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 011.217-1.667l5.25-1.68zm.61 1.429a.25.25 0 00-.153 0l-5.25 1.68a.25.25 0 00-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.2.2 0 00.154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.25.25 0 00-.174-.237l-5.25-1.68zM9 10.5a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.75a.75.75 0 10-1.5 0v3a.75.75 0 001.5 0v-3z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Security\">Security</span>\n                                    <include-fragment src=\"/livewire/livewire/security/overall-count\"\n                                        accept=\"text/fragment+html\"></include-fragment>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/pulse\" data-tab-item=\"i7insights-tab\"\n                                    data-selected-links=\"repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /livewire/livewire/pulse\"\n                                    data-ga-click=\"Repository, Navigation click, Insights tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M1.5 1.75a.75.75 0 00-1.5 0v12.5c0 .414.336.75.75.75h14.5a.75.75 0 000-1.5H1.5V1.75zm14.28 2.53a.75.75 0 00-1.06-1.06L10 7.94 7.53 5.47a.75.75 0 00-1.06 0L3.22 8.72a.75.75 0 001.06 1.06L7 7.06l2.47 2.47a.75.75 0 001.06 0l5.25-5.25z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Insights\">Insights</span>\n                                    <span title=\"Not available\" class=\"Counter \"></span>\n\n\n                                </a>\n                            </li>\n                            <li class=\"d-flex\">\n                                <a href=\"/livewire/livewire/settings\" data-tab-item=\"i8settings-tab\"\n                                    data-selected-links=\"repo_settings repo_branch_settings hooks integration_installations repo_keys_settings issue_template_editor secrets_settings key_links_settings repo_actions_settings notifications repository_environments interaction_limits /livewire/livewire/settings\"\n                                    data-ga-click=\"Repository, Navigation click, Settings tab\"\n                                    class=\"UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item \">\n\n                                    <svg class=\"octicon octicon-gear UnderlineNav-octicon d-none d-sm-inline\"\n                                        height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z\">\n                                        </path>\n                                    </svg>\n                                    <span data-content=\"Settings\">Settings</span>\n                                    <span title=\"Not available\" class=\"Counter \"></span>\n\n\n                                </a>\n                            </li>\n                        </ul>\n                        <div style=\"visibility:hidden;\"\n                            class=\"UnderlineNav-actions  js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0\">\n                            <details class=\"details-overlay details-reset position-relative\">\n                                <summary role=\"button\">\n                                    <div class=\"UnderlineNav-item mr-0 border-0\">\n                                        <svg class=\"octicon octicon-kebab-horizontal\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                            width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path\n                                                d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                            </path>\n                                        </svg>\n                                        <span class=\"sr-only\">More</span>\n                                    </div>\n                                </summary>\n                                <div>\n                                    <details-menu role=\"menu\" class=\"dropdown-menu dropdown-menu-sw \">\n\n                                        <ul>\n                                            <li data-menu-item=\"i0code-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire\" href=\"/livewire/livewire\">\n                                                    Code\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i1issues-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/issues\"\n                                                    href=\"/livewire/livewire/issues\">\n                                                    Issues\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i2pull-requests-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/pulls\"\n                                                    href=\"/livewire/livewire/pulls\">\n                                                    Pull requests\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i3discussions-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/discussions\"\n                                                    href=\"/livewire/livewire/discussions\">\n                                                    Discussions\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i4actions-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/actions\"\n                                                    href=\"/livewire/livewire/actions\">\n                                                    Actions\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i5projects-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/projects\"\n                                                    href=\"/livewire/livewire/projects\">\n                                                    Projects\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i6security-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/security\"\n                                                    href=\"/livewire/livewire/security\">\n                                                    Security\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i7insights-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/pulse\"\n                                                    href=\"/livewire/livewire/pulse\">\n                                                    Insights\n                                                </a>\n                                            </li>\n                                            <li data-menu-item=\"i8settings-tab\" hidden>\n                                                <a role=\"menuitem\" class=\"js-selected-navigation-item dropdown-item\"\n                                                    data-selected-links=\" /livewire/livewire/settings\"\n                                                    href=\"/livewire/livewire/settings\">\n                                                    Settings\n                                                </a>\n                                            </li>\n                                        </ul>\n\n                                    </details-menu>\n                                </div>\n                            </details>\n                        </div>\n                    </nav>\n\n                </div>\n\n\n                <div class=\"container-xl clearfix new-discussion-timeline px-3 px-md-4 px-lg-5\">\n                    <div id=\"repo-content-pjax-container\" class=\"repository-content \">\n\n\n\n                        <a class=\"d-none js-permalink-shortcut\" data-hotkey=\"y\"\n                            href=\"https://github.com/livewire/livewire/compare/livewire:8055af7...livewire:33101c8\">Permalink</a>\n\n                        <div class=\"compare-show-header Subhead hx_Subhead--responsive \">\n                            <h1 class=\"Subhead-heading \">Comparing changes</h1>\n\n                            <div class=\"Subhead-description \"> Choose two branches to see what's changed or to start a\n                                new pull request.\n                                If you need to, you can also <button type=\"button\"\n                                    class=\"btn-link js-toggle-range-editor-cross-repo\">compare across forks</button>.\n                            </div>\n                        </div>\n                        <div class=\"compare-pr-header Subhead hx_Subhead--responsive \">\n                            <h1 class=\"Subhead-heading \">Open a pull request</h1>\n\n                            <div class=\"Subhead-description \"> Create a new pull request by comparing changes across two\n                                branches. If you need to, you can also <button type=\"button\"\n                                    class=\"btn-link js-toggle-range-editor-cross-repo\">compare across forks</button>.\n                            </div>\n                        </div>\n                        <div class=\"range-editor color-text-secondary js-range-editor \">\n                            <svg class=\"octicon octicon-git-compare range-editor-icon\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\"\n                                    d=\"M9.573.677L7.177 3.073a.25.25 0 000 .354l2.396 2.396A.25.25 0 0010 5.646V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5h-1V.854a.25.25 0 00-.427-.177zM6 12v-1.646a.25.25 0 01.427-.177l2.396 2.396a.25.25 0 010 .354l-2.396 2.396A.25.25 0 016 15.146V13.5H5A2.5 2.5 0 012.5 11V5.372a2.25 2.25 0 111.5 0V11a1 1 0 001 1h1zm6.75 0a.75.75 0 100 1.5.75.75 0 000-1.5zM4 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\">\n                                </path>\n                            </svg>\n                            <div class=\"range-cross-repo-pair\">\n                                <details class=\"select-menu fork-suggester details-reset details-overlay hx_rsm\">\n                                    <summary class=\"btn btn-sm select-menu-button\">\n                                        <i>base repository:</i>\n                                        <span class=\"css-truncate css-truncate-target\" data-menu-button\n                                            title=\"base: livewire/livewire\">livewire/livewire</span>\n                                    </summary>\n\n                                    <details-menu class=\"select-menu-modal position-absolute\" style=\"z-index: 99;\"\n                                        data-pjax\n                                        src=\"/livewire/livewire/compare/repository-list?range=v2.4.0...master&amp;selected=livewire%2Flivewire&amp;type=base\"\n                                        preload>\n                                        <include-fragment>\n                                            <svg style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                                viewBox=\"0 0 16 16\" fill=\"none\" width=\"32\" height=\"32\"\n                                                class=\"my-6 mx-auto d-block anim-rotate\">\n                                                <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\"\n                                                    stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" />\n                                                <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\"\n                                                    vector-effect=\"non-scaling-stroke\" />\n                                            </svg>\n                                        </include-fragment>\n                                    </details-menu>\n                                </details>\n\n\n\n                                <details class=\"details-reset details-overlay select-menu commitish-suggester hx_rsm\">\n                                    <summary class=\"btn btn-sm select-menu-button branch\">\n                                        <i>base:</i>\n                                        <span class=\"css-truncate css-truncate-target\" data-menu-button\n                                            title=\"base: v2.4.0\">v2.4.0</span>\n                                    </summary>\n                                    <details-menu class=\"select-menu-modal position-absolute\" style=\"z-index: 99;\"\n                                        data-pjax\n                                        src=\"/livewire/livewire/compare/branch-list?range=v2.4.0...master&amp;type=base\"\n                                        preload>\n                                        <include-fragment>\n                                            <svg style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                                viewBox=\"0 0 16 16\" fill=\"none\" width=\"32\" height=\"32\"\n                                                class=\"my-6 mx-auto d-block anim-rotate\">\n                                                <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\"\n                                                    stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" />\n                                                <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\"\n                                                    vector-effect=\"non-scaling-stroke\" />\n                                            </svg>\n                                        </include-fragment>\n                                    </details-menu>\n                                </details>\n\n                            </div>\n\n                            <span class=\"tooltipped tooltipped-n\" aria-label=\"Diff using three-dot (...) notation\"><svg\n                                    class=\"octicon octicon-arrow-left\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                    height=\"16\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\"\n                                        d=\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\">\n                                    </path>\n                                </svg></span>\n\n                            <div class=\"range-cross-repo-pair\">\n                                <details class=\"select-menu fork-suggester details-reset details-overlay hx_rsm\">\n                                    <summary class=\"btn btn-sm select-menu-button\">\n                                        <i>head repository:</i>\n                                        <span class=\"css-truncate css-truncate-target\" data-menu-button\n                                            title=\"head: livewire/livewire\">livewire/livewire</span>\n                                    </summary>\n\n                                    <details-menu class=\"select-menu-modal position-absolute\" style=\"z-index: 99;\"\n                                        data-pjax\n                                        src=\"/livewire/livewire/compare/repository-list?range=v2.4.0...master&amp;selected=livewire%2Flivewire&amp;type=head\"\n                                        preload>\n                                        <include-fragment>\n                                            <svg style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                                viewBox=\"0 0 16 16\" fill=\"none\" width=\"32\" height=\"32\"\n                                                class=\"my-6 mx-auto d-block anim-rotate\">\n                                                <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\"\n                                                    stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" />\n                                                <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\"\n                                                    vector-effect=\"non-scaling-stroke\" />\n                                            </svg>\n                                        </include-fragment>\n                                    </details-menu>\n                                </details>\n\n\n\n                                <details class=\"details-reset details-overlay select-menu commitish-suggester hx_rsm\">\n                                    <summary class=\"btn btn-sm select-menu-button branch\">\n                                        <i>compare:</i>\n                                        <span class=\"css-truncate css-truncate-target\" data-menu-button\n                                            title=\"compare: master\">master</span>\n                                    </summary>\n                                    <details-menu class=\"select-menu-modal position-absolute\" style=\"z-index: 99;\"\n                                        data-pjax\n                                        src=\"/livewire/livewire/compare/branch-list?range=v2.4.0...master&amp;type=head\"\n                                        preload>\n                                        <include-fragment>\n                                            <svg style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                                viewBox=\"0 0 16 16\" fill=\"none\" width=\"32\" height=\"32\"\n                                                class=\"my-6 mx-auto d-block anim-rotate\">\n                                                <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\"\n                                                    stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" />\n                                                <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\"\n                                                    vector-effect=\"non-scaling-stroke\" />\n                                            </svg>\n                                        </include-fragment>\n                                    </details-menu>\n                                </details>\n\n                            </div>\n\n                        </div>\n\n\n\n\n\n                        <div class=\"tabnav\">\n                            <div class=\"tabnav-extra float-right\">\n                                <svg class=\"octicon octicon-organization\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                    height=\"16\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\"\n                                        d=\"M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                    </path>\n                                </svg>\n                                25\n                                contributors\n                            </div>\n\n                            <nav class=\"tabnav-tabs\">\n                                <a href=\"#commits_bucket\" class=\"tabnav-tab js-compare-tab selected\"\n                                    data-ga-click=\"Compare, tabs, commits\">\n                                    <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                        height=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                        </path>\n                                    </svg>\n                                    Commits\n                                    <span title=\"56\" class=\"Counter \">56</span>\n                                </a>\n                                <a href=\"#files_bucket\" class=\"tabnav-tab js-compare-tab\"\n                                    data-ga-click=\"Compare, tabs, files\">\n                                    <svg class=\"octicon octicon-file-diff\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                        height=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M2.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H2.75zM1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V1.75zm7 1.5a.75.75 0 01.75.75v1.5h1.5a.75.75 0 010 1.5h-1.5v1.5a.75.75 0 01-1.5 0V7h-1.5a.75.75 0 010-1.5h1.5V4A.75.75 0 018 3.25zm-3 8a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\">\n                                        </path>\n                                    </svg>\n                                    Files changed\n                                    <span title=\"74\" class=\"Counter \">74</span>\n                                </a>\n                                <a href=\"#commit_comments_bucket\" class=\"tabnav-tab js-compare-tab\"\n                                    data-ga-click=\"Compare, tabs, comments\">\n                                    <svg class=\"octicon octicon-comment\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                        height=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z\">\n                                        </path>\n                                    </svg>\n                                    Commit comments\n                                    <span title=\"0\" class=\"Counter \">0</span>\n                                </a>\n                            </nav>\n                        </div>\n\n                        <div id=\"commits_bucket\" class=\"\">\n\n                            <div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Jan 28, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjFiMDAzZWY0NDQ5OGE1MTlmNDQzZDRkNDQzOTlkYTg0ZjVhMGVlNzYiLCJ0IjoxNjE5NjU4MDAzfQ==--fc6903ac9bf07a1532fd65c55e6f521a9d2c0c3f63d5bbca22cb4ddd43cb7073\"\n                                                data-url=\"/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"driesvints\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/driesvints/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/driesvints\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@driesvints\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/594614?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Only return integers for pages (#2409)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76\">Only return integers for pages (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"794312283\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2409\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2409/hovercard\" href=\"https://github.com/livewire/livewire/pull/2409\">#2409</a><a title=\"Only return integers for pages (#2409)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"sPa4rmACsilzkeHzoWi9ucl/4hjwE8URdvT0GQRgpOHsoeg7r9R8IHv3PgOVB0I6mO+8u0S3XbZpBIJznv26+w==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjFiMDAzZWY0NDQ5OGE1MTlmNDQzZDRkNDQzOTlkYTg0ZjVhMGVlNzY=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"t6pHYgsF/WrAOFQ5rksxqzROgBOu/AoEu5ubS8WcRVquF7ajDiEdic+uYq/42vLQyHfAKYK6FqA3h5RvNZySAQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"1b003ef44498a519f443d4d44399da84f5a0ee76\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76\" class=\"Link--secondary\">1b003ef</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Feb 28, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmY5NDg1ZDJhNDg5ZjE5ZDcxMjhiOTBlMDBlYjRlNDgxOTc1MTliNGIiLCJ0IjoxNjE5NjU4MDAzfQ==--668b3cb663bf6debcc17e59bd0343118e026d6b0d61e4f646237422dc1d22025\"\n                                                data-url=\"/livewire/livewire/commit/f9485d2a489f19d7128b90e00eb4e48197519b4b/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"ncharalampidis\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/ncharalampidis/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/ncharalampidis\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@ncharalampidis\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/1126928?s=60&amp;u=a500a2a42786e106607abb172037915ec5e92c77&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Remove onNodeAdded event call when matched keyed node moved to new parent\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/f9485d2a489f19d7128b90e00eb4e48197519b4b\">Remove onNodeAdded event call when matched keyed node moved to new pa…</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"ulwhI4L0LtV+ntLy9vh3xlOoNzqWILxuVKRtEZnOuE/mC3G2TSLg3Hb4DQLCl4hFAjhpmSKEJMlLVBt7A1OmVQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmY5NDg1ZDJhNDg5ZjE5ZDcxMjhiOTBlMDBlYjRlNDgxOTc1MTliNGI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"Kvvw8RxHjrDjBqRi9VjT3rFUEuO4rDSh5Ec/3+oOma4zRgEwGWNuU+yQkvSjyRClTW1S2ZTqKAVoWzD7Gg5O9Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"f9485d2a489f19d7128b90e00eb4e48197519b4b\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/f9485d2a489f19d7128b90e00eb4e48197519b4b\" class=\"Link--secondary\">f9485d2</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">…rent</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Mar 01, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjliNjAxMzM1NTk0NTA5MjZmZjFhYzRmZTVlNGQ1NGM0MGViN2U0ZWMiLCJ0IjoxNjE5NjU4MDAzfQ==--0fc63e6b87ae32a840c6ce5438ba834bc9b095438f150a0540ec307e512f5d04\"\n                                                data-url=\"/livewire/livewire/commit/9b60133559450926ff1ac4fe5e4d54c40eb7e4ec/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"jasonlbeggs\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/jasonlbeggs/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/jasonlbeggs\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@jasonlbeggs\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/25065083?s=60&amp;u=5009c15780028dc4c2ddf4ac387d2424832c2454&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title='Update \"Test\" to \"TEST\" in command output (#2555)' data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/9b60133559450926ff1ac4fe5e4d54c40eb7e4ec\">Update \"Test\" to \"TEST\" in command output (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"814817061\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2555\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2555/hovercard\" href=\"https://github.com/livewire/livewire/pull/2555\">#2555</a><a title='Update \"Test\" to \"TEST\" in command output (#2555)' data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/9b60133559450926ff1ac4fe5e4d54c40eb7e4ec\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"3KFeCgDEZysHig9H6VGC+UyrJXhPyMYK16O4fesOvByA9g6fzxKpIg/s0LfdPn16HTt72/tsXq3IU84XcZOiBg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjliNjAxMzM1NTk0NTA5MjZmZjFhYzRmZTVlNGQ1NGM0MGViN2U0ZWM=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"G6By+fe0bkEWDvqEsUvwQCJyynJfaGwwifXMivu7fGACHYM48pCOohmYzBLn2jM73kuKSHMucJQF6cOuC7urOw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"9b60133559450926ff1ac4fe5e4d54c40eb7e4ec\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/9b60133559450926ff1ac4fe5e4d54c40eb7e4ec\" class=\"Link--secondary\">9b60133</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjQ4NzlkYmFiYjlkNDU3NzEyODUzMzUyMWUyMGJiOTY1NzNmZTAyNTkiLCJ0IjoxNjE5NjU4MDAzfQ==--718eb14bcbb7d9a7caef3e78a7eabe246211fe7272290039feefa383e91bacbe\"\n                                                data-url=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"rodrigopedra\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/rodrigopedra/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/rodrigopedra\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@rodrigopedra\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/5470108?s=60&amp;u=9e92863ccd8ac3ec7f65f07f6b5a255cc319aa72&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Update `WithPagination` to allow  `queryString()` (#2554)\n\nThis PR updates `WithPagination` to account for  `queryString()` method introduced in 2.4.0\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259\">Update</a> <code><a title=\"Update `WithPagination` to allow  `queryString()` (#2554)\n\nThis PR updates `WithPagination` to account for  `queryString()` method introduced in 2.4.0\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259\">WithPagination</a></code>\n                                                            <a title=\"Update `WithPagination` to allow  `queryString()` (#2554)\n\nThis PR updates `WithPagination` to account for  `queryString()` method introduced in 2.4.0\" data-pjax=\"true\"\n                                                                class=\"Link--secondary markdown-title\"\n                                                                href=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259\">to\n                                                                allow</a>\n                                                            <code><a title=\"Update `WithPagination` to allow  `queryString()` (#2554)\n\nThis PR updates `WithPagination` to account for  `queryString()` method introduced in 2.4.0\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259\">queryString()</a></code>\n                                                            <a title=\"Update `WithPagination` to allow  `queryString()` (#2554)\n\nThis PR updates `WithPagination` to account for  `queryString()` method introduced in 2.4.0\" data-pjax=\"true\"\n                                                                class=\"Link--secondary markdown-title\"\n                                                                href=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259\">(</a><a\n                                                                class=\"issue-link js-issue-link\"\n                                                                data-error-text=\"Failed to load title\"\n                                                                data-id=\"814743917\"\n                                                                data-permission-text=\"Title is private\"\n                                                                data-url=\"https://github.com/livewire/livewire/issues/2554\"\n                                                                data-hovercard-type=\"pull_request\"\n                                                                data-hovercard-url=\"/livewire/livewire/pull/2554/hovercard\"\n                                                                href=\"https://github.com/livewire/livewire/pull/2554\">#2554</a><a\n                                                                title=\"Update `WithPagination` to allow  `queryString()` (#2554)\n\nThis PR updates `WithPagination` to account for  `queryString()` method introduced in 2.4.0\" data-pjax=\"true\"\n                                                                class=\"Link--secondary markdown-title\"\n                                                                href=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259\">)</a>\n                                                            </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"iyTVwe1shATpa6g7J9aF9kOZdJ9X+wIFI+V2FgpMvdzXc4VUIrpKDeENd8sTuXp1EgkqPONfmqI8FQB8kNGjxg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjQ4NzlkYmFiYjlkNDU3NzEyODUzMzUyMWUyMGJiOTY1NzNmZTAyNTk=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"jRkxlPhMQ6IKBbZIm6pr731X0wI/osIlDROFem/Be3WUpMBV/WijQQWTgN7NO6iUgW6TOBPk3oGBD4pen8GsLg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"4879dbabb9d4577128533521e20bb96573fe0259\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/4879dbabb9d4577128533521e20bb96573fe0259\" class=\"Link--secondary\">4879dba</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre\n                                                        class=\"color-text-secondary ws-pre-wrap\">This PR updates `WithPagination` to account for  `queryString()` method introduced in 2.4.0</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0Ojc5ZTk3NzYwOTVlOGIwZjYyZmU3ZGI0NjUwY2M2MWZjZWZiMDY3M2YiLCJ0IjoxNjE5NjU4MDAzfQ==--66bc2ec9d3d1296e67f496f67574a9577617130be53d1cee2c382516f6735c48\"\n                                                data-url=\"/livewire/livewire/commit/79e9776095e8b0f62fe7db4650cc61fcefb0673f/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"timrspratt\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/timrspratt/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/timrspratt\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@timrspratt\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/20431294?s=60&amp;u=c3a6d4ecf81421c7798b40c2e88e42de5e0d91ef&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"add rounded border to tailwind pagination (#2567)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/79e9776095e8b0f62fe7db4650cc61fcefb0673f\">add rounded border to tailwind pagination (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"816844214\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2567\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2567/hovercard\" href=\"https://github.com/livewire/livewire/pull/2567\">#2567</a><a title=\"add rounded border to tailwind pagination (#2567)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/79e9776095e8b0f62fe7db4650cc61fcefb0673f\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"qnPpMKjpxHBOGRQe94Ogkf3hcLNAiP6aUMvAsfPFIfz2JLmlZz8KeUZ/y+7D7F8SrHEuEPQsZj1PO7bbaVg/5g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4Ojc5ZTk3NzYwOTVlOGIwZjYyZmU3ZGI0NjUwY2M2MWZjZWZiMDY3M2Y=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"JZGHawXhfIdiuhmFH+0hOBhd2u7l9219tLQ/9hjgwOE8LHaqAMWcZG0sLxNJfOJD5GSa1Mmxcdk4qDDS6OAXug==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"79e9776095e8b0f62fe7db4650cc61fcefb0673f\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/79e9776095e8b0f62fe7db4650cc61fcefb0673f\" class=\"Link--secondary\">79e9776</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjUyNTZjZjc1NTE5Y2Q4NTk2NWYyODk0ZTExMGY1OTMzODVjMTViMTciLCJ0IjoxNjE5NjU4MDAzfQ==--192e3232f6129e9c2c8b1444dca2d2eaf81b2d6cdaac3c9ddcea89974c04665a\"\n                                                data-url=\"/livewire/livewire/commit/5256cf75519cd85965f2894e110f593385c15b17/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"austenc\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/austenc/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/austenc\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@austenc\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/575421?s=60&amp;u=719d46aaf48e927b447af23fce00ddd03c97a8fd&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Fixed TestableLivewire to always return an instance of itself (#2536)\n\n* fixed TestableLivewire to always return an instance of itself when calling unknown method\n\n* added test\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/5256cf75519cd85965f2894e110f593385c15b17\">Fixed TestableLivewire to always return an instance of itself (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"812362572\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2536\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2536/hovercard\" href=\"https://github.com/livewire/livewire/pull/2536\">#2536</a><a title=\"Fixed TestableLivewire to always return an instance of itself (#2536)\n\n* fixed TestableLivewire to always return an instance of itself when calling unknown method\n\n* added test\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/5256cf75519cd85965f2894e110f593385c15b17\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"XtxizEY7HSOTUgWRiGjfWxM9IKc3rJuLojgrWqrXMZsCizJZie3TKps02mG8ByDYQq1+BIMIAyy9yF0wMEovgQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjUyNTZjZjc1NTE5Y2Q4NTk2NWYyODk0ZTExMGY1OTMzODVjMTViMTc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"LeeEX2yL9W5Wu9S/db2fuQi6yiINqB0/c0Ee0tfrhlg0WnWeaa8VjVkt4ikjLFzC9IOKGCHuAZv/XRH2J+tRAw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"5256cf75519cd85965f2894e110f593385c15b17\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/5256cf75519cd85965f2894e110f593385c15b17\" class=\"Link--secondary\">5256cf7</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* fixed TestableLivewire to always return an instance of itself when calling unknown method\n\n* added test</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmI2NDdhYzYzMzc4ZWEwMmJkYWM5NzVmNzBhNGU1N2FlYTg0YmRhMGIiLCJ0IjoxNjE5NjU4MDAzfQ==--7aa229b52ad51778a87573c5b87b977c0080a80ed1c3ee9031387ba1455c4e4f\"\n                                                data-url=\"/livewire/livewire/commit/b647ac63378ea02bdac975f70a4e57aea84bda0b/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"austenc\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/austenc/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/austenc\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@austenc\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/575421?s=60&amp;u=719d46aaf48e927b447af23fce00ddd03c97a8fd&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Allow App namespace in config - closes #2107 (#2505)\n\n* allow App namespace in config - closes #2107\n\n* added test\n\n* fixed namespacing to also work with app default - #2107\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/b647ac63378ea02bdac975f70a4e57aea84bda0b\">Allow App namespace in config -</a> <span class=\"issue-keyword tooltipped tooltipped-se\" aria-label=\"This commit closes issue #2107.\"><a title=\"Allow App namespace in config - closes #2107 (#2505)\n\n* allow App namespace in config - closes #2107\n\n* added test\n\n* fixed namespacing to also work with app default - #2107\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/b647ac63378ea02bdac975f70a4e57aea84bda0b\">closes</a></span> <a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"752033546\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2107\" data-hovercard-type=\"issue\" data-hovercard-url=\"/livewire/livewire/issues/2107/hovercard\" href=\"https://github.com/livewire/livewire/issues/2107\">#2107</a> <a title=\"Allow App namespace in config - closes #2107 (#2505)\n\n* allow App namespace in config - closes #2107\n\n* added test\n\n* fixed namespacing to also work with app default - #2107\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/b647ac63378ea02bdac975f70a4e57aea84bda0b\">(</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"808679712\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2505\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2505/hovercard\" href=\"https://github.com/livewire/livewire/pull/2505\">#2505</a><a title=\"Allow App namespace in config - closes #2107 (#2505)\n\n* allow App namespace in config - closes #2107\n\n* added test\n\n* fixed namespacing to also work with app default - #2107\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/b647ac63378ea02bdac975f70a4e57aea84bda0b\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"dE5oE53CujJXkxSZ7LghmkPXy9a8WA/zv0hYer0pxSEoGTiGUhR0O1/1y2nY194ZEkeVdQj8l1SguC4QJ7TbOw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmI2NDdhYzYzMzc4ZWEwMmJkYWM5NzVmNzBhNGU1N2FlYTg0YmRhMGI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"fH1qUD9WH7sH4wcoqVWEtG7sPPlw3wjv1i5FRKhyB31lwJuROnL/WAh1Mb7/xEfPktV8w1yZFEtaMkpgWHLQJg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"b647ac63378ea02bdac975f70a4e57aea84bda0b\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/b647ac63378ea02bdac975f70a4e57aea84bda0b\" class=\"Link--secondary\">b647ac6</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre\n                                                        class=\"color-text-secondary ws-pre-wrap\">* allow App namespace in config - <span class=\"issue-keyword tooltipped tooltipped-se\" aria-label=\"This commit closes issue #2107.\">closes</span> <a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"752033546\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2107\" data-hovercard-type=\"issue\" data-hovercard-url=\"/livewire/livewire/issues/2107/hovercard\" href=\"https://github.com/livewire/livewire/issues/2107\">#2107</a>\n\n* added test\n\n* fixed namespacing to also work with app default - <a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"752033546\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2107\" data-hovercard-type=\"issue\" data-hovercard-url=\"/livewire/livewire/issues/2107/hovercard\" href=\"https://github.com/livewire/livewire/issues/2107\">#2107</a></pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Mar 22, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjlkZmQwM2JiMDE0ZWFiNmMyZjNhYWJmZWRlOTZlMTNjNGNlNDE1ZTQiLCJ0IjoxNjE5NjU4MDAzfQ==--2511c739e135c8541c418ecb6f117274c6ddf623bc2f245537055e3820332fc1\"\n                                                data-url=\"/livewire/livewire/commit/9dfd03bb014eab6c2f3aabfede96e13c4ce415e4/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Protect lifecycle hooks from being called directly\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/9dfd03bb014eab6c2f3aabfede96e13c4ce415e4\">Protect lifecycle hooks from being called directly</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"1Xw+zw1v5c0Fre6eUVeBeO88K3sCN8lW8B2Beu5SRECJK25awrkrxA3LMW5lOH77vqx12LaTUfHv7fcQdM9aWg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjlkZmQwM2JiMDE0ZWFiNmMyZjNhYWJmZWRlOTZlMTNjNGNlNDE1ZTQ=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"+xoPWtGXcs9JKIgKF/v+vBoXm7S37x8ZqQ0jSx5qr7bip/6b1LOSLEa+vpxBaj3H5i7bjpupA70lESxv7mp47Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"9dfd03bb014eab6c2f3aabfede96e13c4ce415e4\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/9dfd03bb014eab6c2f3aabfede96e13c4ce415e4\" class=\"Link--secondary\">9dfd03b</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmIwY2I3ODI2NzQ2NzNhNjdkZGZkNTkxMGQyZmNiNTMwOGJiMzI4NTciLCJ0IjoxNjE5NjU4MDAzfQ==--c3574d38fd8ce9086fb10df9ad479b6bca89b5627c9102ebc05ab071f81d8fb6\"\n                                                data-url=\"/livewire/livewire/commit/b0cb782674673a67ddfd5910d2fcb5308bb32857/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/b0cb782674673a67ddfd5910d2fcb5308bb32857\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"elkHhqy4QwFMGwiSKCa0BZgzb/+mexUUofriHe7UD4kmDlcTY26NCER912IcSUuGyaMxXBLfjbO+CpR3dEkRkw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmIwY2I3ODI2NzQ2NzNhNjdkZGZkNTkxMGQyZmNiNTMwOGJiMzI4NTc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"nwyC+3qph4MdBRY18v/WGo/Z6hYy6nTDmaz5KSTe3IOGsXM6f41nYBKTIKOkbhVhc+CqLB6saGcVsPYN1N4L2A==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"b0cb782674673a67ddfd5910d2fcb5308bb32857\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/b0cb782674673a67ddfd5910d2fcb5308bb32857\" class=\"Link--secondary\">b0cb782</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjQ5YTI0OWFmZjMyOTI4M2E1MGQ5ZDk2NTllMjY2YmUzNjUzNjI5ODYiLCJ0IjoxNjE5NjU4MDAzfQ==--258099ca8259598d224b82926cea7c4ea2ce6ea8a89e57fa5f2d2f5bd922b889\"\n                                                data-url=\"/livewire/livewire/commit/49a249aff329283a50d9d9659e266be365362986/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Protected lifecycle hooks\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/49a249aff329283a50d9d9659e266be365362986\">Protected lifecycle hooks</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"itfBdJbiLNI6kI38nTZFz6HLHIWKnRGMnc1ibXz42FfWgJHhWTTi2zL2UgypWbpM8FtCJj45iSuCPRQH5mXGTQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjQ5YTI0OWFmZjMyOTI4M2E1MGQ5ZDk2NTllMjY2YmUzNjUzNjI5ODY=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"7SNRj9TQOOYhCqmBoLNsnPQ3N7qG4JJKJX7tTWGcZyr0nqBO0fTYBS6cnxf2Iq/nCA53gKqmju6pYuJpkZywcQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"49a249aff329283a50d9d9659e266be365362986\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/49a249aff329283a50d9d9659e266be365362986\" class=\"Link--secondary\">49a249a</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0Ojk2Zjk1NzU1NmI4NDQ5NmI5M2E1YTExNWE1NjI0ODAyZTdiZWJhZDQiLCJ0IjoxNjE5NjU4MDAzfQ==--aabff1d7a48222cd2f275cc041c585cda7761dfa1e343b67d6688f56ae8f8488\"\n                                                data-url=\"/livewire/livewire/commit/96f957556b84496b93a5a115a5624802e7bebad4/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Upmerge from 1.x\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/96f957556b84496b93a5a115a5624802e7bebad4\">Upmerge from 1.x</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"cMc1Igmc2hKiu2FTNkIB7Y2rHea7DNRJBO6n73geZQ0skGW3xkoUG6rdvqMCLf5u3DtDRQ+oTO4bHtGF4oN7Fw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4Ojk2Zjk1NzU1NmI4NDQ5NmI5M2E1YTExNWE1NjI0ODAyZTdiZWJhZDQ=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"vgwhQBizNUYPXUU9Bw0ejI8CBJI8XhsrvxGqWz/2nl6nsdCBHZfVpQDLc6tRnN33cztEqBAYB48zDaV/z/ZJBQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"96f957556b84496b93a5a115a5624802e7bebad4\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/96f957556b84496b93a5a115a5624802e7bebad4\" class=\"Link--secondary\">96f9575</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjcyM2MxYTczZWY5YWNjOWVlODMxYTY0ZTVmYzBiNzFkYzQ2NzNlMGIiLCJ0IjoxNjE5NjU4MDAzfQ==--65817f3503f8cbec0f5466585b8b083b366da5167b79186b2072941ccdb1b0e4\"\n                                                data-url=\"/livewire/livewire/commit/723c1a73ef9acc9ee831a64e5fc0b71dc4673e0b/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Merge branch &#39;1.x&#39;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/723c1a73ef9acc9ee831a64e5fc0b71dc4673e0b\">Merge branch '1.x'</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"DkFQszDpWSyhp5MDDT8j+GZjWgOh+OJSaEZ3eDrYqVVSFgAm/z+XJanBTPM5UNx7N/MEoBVcevV3tgESoEW3Tw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjcyM2MxYTczZWY5YWNjOWVlODMxYTY0ZTVmYzBiNzFkYzQ2NzNlMGI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/723c1a73ef9acc9ee831a64e5fc0b71dc4673e0b\" class=\"Link--secondary\">723c1a7</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjFlZDBjNDlmMzhmNzE2NjU0YjAwMmY0YjY5YTdlOTE0ZjA5NThiZTAiLCJ0IjoxNjE5NjU4MDAzfQ==--60869eb7150ae560eb6be5b3401d2c7200cf3d55d06cf26b2f2458202a591311\"\n                                                data-url=\"/livewire/livewire/commit/1ed0c49f38f716654b002f4b69a7e914f0958be0/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/1ed0c49f38f716654b002f4b69a7e914f0958be0\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"qvi9P4nTD7+zSjcoodTcooIlvP2ens3xVWnyLADsdvT2r+2qRgXBtrss6NiVuyMh07XiXio6VVZKmYRGmnFo7g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjFlZDBjNDlmMzhmNzE2NjU0YjAwMmY0YjY5YTdlOTE0ZjA5NThiZTA=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"8cK9ltCMczUe8H53g8JiVOCMVDeSm6AsUZb+ZrJRgqDof0xX1aiT1hFmSOHVU6EvHLUUDb7dvIjdivFCQlFV+w==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"1ed0c49f38f716654b002f4b69a7e914f0958be0\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/1ed0c49f38f716654b002f4b69a7e914f0958be0\" class=\"Link--secondary\">1ed0c49</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjQ4NDFhNDFmMWViNTg0NjkyNDMwMjYyMzYzZWZhNGY0NGE1Y2I0MWUiLCJ0IjoxNjE5NjU4MDAzfQ==--06f639d65c6a92db92bb2a203b2cb81f3e68fb122f557a5c768521bc80da0d40\"\n                                                data-url=\"/livewire/livewire/commit/4841a41f1eb584692430262363efa4f44a5cb41e/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/4841a41f1eb584692430262363efa4f44a5cb41e\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"PHeHu7pbroSJPFMerjaLAy7Hk28uvDOBFAbU3l/tD5NgINcudY1gjYFajO6aWXSAf1fNzJoYqyYL9qK0xXARiQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjQ4NDFhNDFmMWViNTg0NjkyNDMwMjYyMzYzZWZhNGY0NGE1Y2I0MWU=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"WX3PaCh60fPUqwAeDXHcv8WlXxbc3Rk0ziQfFpRLphVAwD6pLV4xENs9Nohb4B/EOZwfLPCbBZBCOBAyZEtxTg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"4841a41f1eb584692430262363efa4f44a5cb41e\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/4841a41f1eb584692430262363efa4f44a5cb41e\" class=\"Link--secondary\">4841a41</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjQxOGViMTE5ZmE4N2I3MGI3YzcwZTc0ZTEwYzRiZWUyOGU4Zjc0MGYiLCJ0IjoxNjE5NjU4MDAzfQ==--8f28e6ba265d3ae2c21d455e42192646dfa2a1c90856f5957fff10efa2bc7e97\"\n                                                data-url=\"/livewire/livewire/commit/418eb119fa87b70b7c70e74e10c4bee28e8f740f/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/418eb119fa87b70b7c70e74e10c4bee28e8f740f\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"e2KzLHHrOsReJSiK07SGEXc5nAoOvhVveggJQ9vBqmgnNeO5vj30zVZD93rn23mSJqnCqboajchl+H8pQVy0cg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjQxOGViMTE5ZmE4N2I3MGI3YzcwZTc0ZTEwYzRiZWUyOGU4Zjc0MGY=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"v5/BPSMGu9t1/lnYfy+k6YUt1B1RCzBONERZJqw1S6CmIjD8JiJbOHpob04pvmeSeRSUJ31NLOq4WFYCXDWc+w==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"418eb119fa87b70b7c70e74e10c4bee28e8f740f\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/418eb119fa87b70b7c70e74e10c4bee28e8f740f\" class=\"Link--secondary\">418eb11</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Mar 24, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjJmMDZiMjhiZTBhYTBkNWJmMGE0NTk4YjRiNTcxZDdkMWEyNGU1YzEiLCJ0IjoxNjE5NjU4MDAzfQ==--5bc331a0ea39a311b48ed41d70872e34fdaa766608d07396ea1ca8a86c745fc2\"\n                                                data-url=\"/livewire/livewire/commit/2f06b28be0aa0d5bf0a4598b4b571d7d1a24e5c1/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"joshhanley\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/joshhanley/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/joshhanley\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@joshhanley\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/882837?s=60&amp;u=5d7fd95f2e0989124c3fa8f9e8d83110b3d93804&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"[Update fix] Add failing test for dynamic nested entangled components (#2517)\n\n* Add failing test for dynamic nested entangled components\n\n* Bump Alpine to 2.8.2 for browser tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2f06b28be0aa0d5bf0a4598b4b571d7d1a24e5c1\">[Update fix] Add failing test for dynamic nested entangled components (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"809983329\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2517\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2517/hovercard\" href=\"https://github.com/livewire/livewire/pull/2517\">…</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"thv8ZaFsU25bbts0Pc7YGlYmaIPGmj2BE0yKRtAQxdDqTKzwbrqdZ1MIBMQJoSeZB7Y2IHI+pSYMvPwsSo3byg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjJmMDZiMjhiZTBhYTBkNWJmMGE0NTk4YjRiNTcxZDdkMWEyNGU1YzE=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"xTa4zTL8IXUXEt7zT+bsk0dZ0Sv0yk+igjW4ojiMfavci0kMN9jBlhiE6GUZdy/ou2CREdiMUwYOKbeGyIyq8A==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"2f06b28be0aa0d5bf0a4598b4b571d7d1a24e5c1\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/2f06b28be0aa0d5bf0a4598b4b571d7d1a24e5c1\" class=\"Link--secondary\">2f06b28</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\"><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"809983329\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2517\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2517/hovercard\" href=\"https://github.com/livewire/livewire/pull/2517\">…#2517</a>)\n\n* Add failing test for dynamic nested entangled components\n\n* Bump Alpine to 2.8.2 for browser tests</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 03, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmQ0ODM1ZTQzMmIzM2MzMzNjZjM5YjQ5NGZkNTAyNGM3OWNjNjNjNjMiLCJ0IjoxNjE5NjU4MDAzfQ==--8338ffa26121d649f125aa4f0a13bc2611464b9906bdf08bba1391c23a1b9e90\"\n                                                data-url=\"/livewire/livewire/commit/d4835e432b33c333cf39b494fd5024c79cc63c63/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"taylorotwell\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/taylorotwell/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/taylorotwell\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@taylorotwell\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/463230?s=60&amp;u=0c486fbe3a30dadd5c5981a9fbc3a0d269ca0c33&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"use middleware callbacks on each request (#2692)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/d4835e432b33c333cf39b494fd5024c79cc63c63\">use middleware callbacks on each request (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"849667199\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2692\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2692/hovercard\" href=\"https://github.com/livewire/livewire/pull/2692\">#2692</a><a title=\"use middleware callbacks on each request (#2692)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/d4835e432b33c333cf39b494fd5024c79cc63c63\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"l0zad9qBMnHYqy1iETvUaw4XjoTPmvRQ9TZL9Xq2xcrLG4riFVf8eNDN8pIlVCvoX4fQJ3s+bPfqxj2f4Cvb0A==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmQ0ODM1ZTQzMmIzM2MzMzNjZjM5YjQ5NGZkNTAyNGM3OWNjNjNjNjM=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"sfiYWlXC08JAgg6IHO6GoXoKJRLDNuuQ5jjooB0DRBGoRWmbUOYzIU8UOB5Kf0XahjNlKO9w9zRqJOeE7QOTSg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"d4835e432b33c333cf39b494fd5024c79cc63c63\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/d4835e432b33c333cf39b494fd5024c79cc63c63\" class=\"Link--secondary\">d4835e4</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 04, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjZjZGFkN2MxNzBmMWVkN2VjMDQ3NWI2MjNjNGFmZDE3MWVkM2ZjZmEiLCJ0IjoxNjE5NjU4MDAzfQ==--d45074731c67c537a4d6a91bdb10f0ccbc672998fa3f06d637b3997a77291051\"\n                                                data-url=\"/livewire/livewire/commit/6cdad7c170f1ed7ec0475b623c4afd171ed3fcfa/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"joshhanley\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/joshhanley/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/joshhanley\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@joshhanley\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/882837?s=60&amp;u=5d7fd95f2e0989124c3fa8f9e8d83110b3d93804&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add helpful entangle error message (#2592)\n\n* Add helpful entangle error\n\n* Build assets\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/6cdad7c170f1ed7ec0475b623c4afd171ed3fcfa\">Add helpful entangle error message (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"823419530\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2592\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2592/hovercard\" href=\"https://github.com/livewire/livewire/pull/2592\">#2592</a><a title=\"Add helpful entangle error message (#2592)\n\n* Add helpful entangle error\n\n* Build assets\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/6cdad7c170f1ed7ec0475b623c4afd171ed3fcfa\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"J1c3RB9oixXmaGh2HsqDWX4BcPPDsibK4wZ0dwo+JiB7AGfR0L5FHO4Ot4YqpXzaL5EuUHcWvm389gIdkKM4Og==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjZjZGFkN2MxNzBmMWVkN2VjMDQ3NWI2MjNjNGFmZDE3MWVkM2ZjZmE=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"fJd6km6QdLvpG5TTH+UHlTKA/+QSqBeYomSv0dpGIwZlKotTa7SUWOaNokVJdMTuzrm/3j7uCzwueKD1Kkb0XQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"6cdad7c170f1ed7ec0475b623c4afd171ed3fcfa\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/6cdad7c170f1ed7ec0475b623c4afd171ed3fcfa\" class=\"Link--secondary\">6cdad7c</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Add helpful entangle error\n\n* Build assets</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjgyYzA5MjU4ZjkyYmRmMGJiOGM0OTIyMjYyOWY3YjVlOTkwMWVkODciLCJ0IjoxNjE5NjU4MDAzfQ==--6482d2357c605de42593a45846d2461cd7db61f2cbd32d666cbddb69f39372f8\"\n                                                data-url=\"/livewire/livewire/commit/82c09258f92bdf0bb8c49222629f7b5e9901ed87/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"zepfietje\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/zepfietje/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/zepfietje\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@zepfietje\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/44533235?s=60&amp;u=82413b8fdeed71ecfd4f97ce5dd10245c697a045&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Remove whitespace from config (#2659)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/82c09258f92bdf0bb8c49222629f7b5e9901ed87\">Remove whitespace from config (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"839595302\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2659\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2659/hovercard\" href=\"https://github.com/livewire/livewire/pull/2659\">#2659</a><a title=\"Remove whitespace from config (#2659)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/82c09258f92bdf0bb8c49222629f7b5e9901ed87\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"F0q29xFoKyY1PA3/zJ8ALgvG5aVYSlG1pMfcFv95DzlLHeZi3r7lLz1a0g/48P+tWla7BuzuyRK7N6p8ZeQRIw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjgyYzA5MjU4ZjkyYmRmMGJiOGM0OTIyMjYyOWY3YjVlOTkwMWVkODc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"WdmZ576x5ugkNoz47Xd8l72L4MZfC+6DixiRu9TpTbJAZGgmu5UGCyugum675r/sQbKg/HNN8icHBJ6fJOma6Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"82c09258f92bdf0bb8c49222629f7b5e9901ed87\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/82c09258f92bdf0bb8c49222629f7b5e9901ed87\" class=\"Link--secondary\">82c0925</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmExM2FjNjk3YzM0MDE5ZmY1NjQwM2U3MTZlYmNjY2UzNWRkZjJjNTciLCJ0IjoxNjE5NjU4MDAzfQ==--88a4f5717d0127459eebaac9f71eff1f2382054ef371221612dd81780b910607\"\n                                                data-url=\"/livewire/livewire/commit/a13ac697c34019ff56403e716ebccce35ddf2c57/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"rezaamini-ir\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/rezaamini-ir/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/rezaamini-ir\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@rezaamini-ir\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/29504334?s=60&amp;u=c7cdc17494bec76fe5e3e15728f24ccc60cafa71&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add isPreviewable Method  (#2648)\n\n* Add isPreviewable Method to TemporaryUpload Class\n\n* Add isPreviewable Tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/a13ac697c34019ff56403e716ebccce35ddf2c57\">Add isPreviewable Method (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"836042117\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2648\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2648/hovercard\" href=\"https://github.com/livewire/livewire/pull/2648\">#2648</a><a title=\"Add isPreviewable Method  (#2648)\n\n* Add isPreviewable Method to TemporaryUpload Class\n\n* Add isPreviewable Tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/a13ac697c34019ff56403e716ebccce35ddf2c57\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"XWjtCjljv8fEMxbPxZsn6TUSpUsNwcYuaDdsBVfIBhgBP72f9rVxzsxVyT/x9NhqZIL76LllXol3xxpvzVUYAg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmExM2FjNjk3YzM0MDE5ZmY1NjQwM2U3MTZlYmNjY2UzNWRkZjJjNTc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"cS0ivY+ra+ZRqXn5gvaFwglhIZCXPnj3EzanT2v4iWhokNN8io+LBV4/T2/UZ0a59Vhhqrt4ZFOfKqhrm/heMw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"a13ac697c34019ff56403e716ebccce35ddf2c57\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/a13ac697c34019ff56403e716ebccce35ddf2c57\" class=\"Link--secondary\">a13ac69</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Add isPreviewable Method to TemporaryUpload Class\n\n* Add isPreviewable Tests</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmQwNTZhNDJiNDYzZjg0NjcyMDY1MDM1MDhjZjJhNTY0YzA4NDAzMDEiLCJ0IjoxNjE5NjU4MDAzfQ==--98b894bc9a377772247f36710996658980124268b585f1b1c5a991b3d8a86c3e\"\n                                                data-url=\"/livewire/livewire/commit/d056a42b463f8467206503508cf2a564c0840301/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"vdauchy\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/vdauchy/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/vdauchy\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@vdauchy\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/26772554?s=60&amp;u=71532bdd6a5bb09386a7be9ef779d2bff004feec&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Make LivewireManager singleton and set the alias after. (#2633)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/d056a42b463f8467206503508cf2a564c0840301\">Make LivewireManager singleton and set the alias after. (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"832299961\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2633\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2633/hovercard\" href=\"https://github.com/livewire/livewire/pull/2633\">#2633</a><a title=\"Make LivewireManager singleton and set the alias after. (#2633)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/d056a42b463f8467206503508cf2a564c0840301\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"ipRYNwS5c5Mjs9XxHKSsDJ774Vy6zr8WqlNoULHrD73Wwwiiy2+9mivVCgEoy1OPz2u//w5qJ7G1ox46K3YRpw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmQwNTZhNDJiNDYzZjg0NjcyMDY1MDM1MDhjZjJhNTY0YzA4NDAzMDE=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"rDzO35373n6bsMhXLmzizuGQZMSQq6ZXWbLuxbnrKJC1gT8emN8+nZQm/sF4/SG1Hakk/rztuvPVruHhSev/yw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"d056a42b463f8467206503508cf2a564c0840301\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/d056a42b463f8467206503508cf2a564c0840301\" class=\"Link--secondary\">d056a42</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0Ojg2Mzc0ZWU5OTI4NTUxYjVkZjNmMWM3Y2MwMDlkYmU5NmEwOGYwYjgiLCJ0IjoxNjE5NjU4MDAzfQ==--04f44056827b8e1ef0fc924e9607aaa125a372213ecce708d45d73f2c7dfb136\"\n                                                data-url=\"/livewire/livewire/commit/86374ee9928551b5df3f1c7cc009dbe96a08f0b8/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/86374ee9928551b5df3f1c7cc009dbe96a08f0b8\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"7s7Xjp+/DTWnx2jj31hiIB7vMkpxnxYxnmhL03ByDluymYcbUGnDPK+htxPrN52jT39s6cU7jpaBmD256u8QQQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4Ojg2Mzc0ZWU5OTI4NTUxYjVkZjNmMWM3Y2MwMDlkYmU5NmEwOGYwYjg=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"sTtL3XyfwLeqekSAnAMNPC5mhBP5QoJKpAJjj1tob7SohrocebsgVKXschbKks5H0l/EKdUEnu4oHmyrq2i47w==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"86374ee9928551b5df3f1c7cc009dbe96a08f0b8\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/86374ee9928551b5df3f1c7cc009dbe96a08f0b8\" class=\"Link--secondary\">86374ee</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjI0OTUzODc4NDFhM2ViMDNhYzYyYjJjOTg0Y2NkMjU3NDMwMzI4NWIiLCJ0IjoxNjE5NjU4MDAzfQ==--cb5756d3f080d0e38139df567726f360d8d8ef6f9c0ef862049d0a5aa1cb60db\"\n                                                data-url=\"/livewire/livewire/commit/2495387841a3eb03ac62b2c984ccd2574303285b/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start AvatarStack--two\">\n                                                            <div class=\"AvatarStack-body\"\n                                                                aria-label=\"claytonrcarter and calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/claytonrcarter/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/claytonrcarter\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@claytonrcarter\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/1420419?s=60&amp;u=3d191a2a49e5e866b4e270f0c54c96b94a6d2056&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a> <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"fix $wire.emit, $wire.emitUp and $wire.emitTo (fixes #2498) (#2618)\n\n* fix $wire.emit, $wire.emitUp and $wire.emitTo\n\n* add test for $wire.emit, $wire.emitSelf, $wire.emitTo, and $wire.emitUp\n\n* commit build artifacts\n\n* Build assets\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2495387841a3eb03ac62b2c984ccd2574303285b\">fix $wire.emit, $wire.emitUp and $wire.emitTo (</a><span class=\"issue-keyword tooltipped tooltipped-se\" aria-label=\"This commit closes issue #2498.\"><a title=\"fix $wire.emit, $wire.emitUp and $wire.emitTo (fixes #2498) (#2618)\n\n* fix $wire.emit, $wire.emitUp and $wire.emitTo\n\n* add test for $wire.emit, $wire.emitSelf, $wire.emitTo, and $wire.emitUp\n\n* commit build artifacts\n\n* Build assets\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2495387841a3eb03ac62b2c984ccd2574303285b\">fixes</a></span> <a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"807860312\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2498\" data-hovercard-type=\"issue\" data-hovercard-url=\"/livewire/livewire/issues/2498/hovercard\" href=\"https://github.com/livewire/livewire/issues/2498\">#2498</a><a title=\"fix $wire.emit, $wire.emitUp and $wire.emitTo (fixes #2498) (#2618)\n\n* fix $wire.emit, $wire.emitUp and $wire.emitTo\n\n* add test for $wire.emit, $wire.emitSelf, $wire.emitTo, and $wire.emitUp\n\n* commit build artifacts\n\n* Build assets\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2495387841a3eb03ac62b2c984ccd2574303285b\">) (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"828058429\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2618\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2618/hovercard\" href=\"https://github.com/livewire/livewire/pull/2618\">#2618</a><a title=\"fix $wire.emit, $wire.emitUp and $wire.emitTo (fixes #2498) (#2618)\n\n* fix $wire.emit, $wire.emitUp and $wire.emitTo\n\n* add test for $wire.emit, $wire.emitSelf, $wire.emitTo, and $wire.emitUp\n\n* commit build artifacts\n\n* Build assets\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2495387841a3eb03ac62b2c984ccd2574303285b\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"3/uNhVyYWobZs2rfSU3jU3I9C2Q7hIp9V2h7WicGabWDrN0Qk06Uj9HVtS99IhzQI61Vx48gEtpImA0wvZt3rw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjI0OTUzODc4NDFhM2ViMDNhYzYyYjJjOTg0Y2NkMjU3NDMwMzI4NWI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"NaiU+7qXAPZTBoCX0j+ffNZxC/YnhMVruTWiH9SJhmAsFWU6v7PgFVyQtgGErlwHKkhLzAvC2c81Ka07JIlROw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"2495387841a3eb03ac62b2c984ccd2574303285b\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/2495387841a3eb03ac62b2c984ccd2574303285b\" class=\"Link--secondary\">2495387</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* fix $wire.emit, $wire.emitUp and $wire.emitTo\n\n* add test for $wire.emit, $wire.emitSelf, $wire.emitTo, and $wire.emitUp\n\n* commit build artifacts\n\n* Build assets\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjZiYjJmNDVmZTBmNGEzNzJlY2MyZTdiYmIxMmQ5MWNlZDYzYTk2MjIiLCJ0IjoxNjE5NjU4MDAzfQ==--150c400e4d142e67f67d5697b83aa098b88e9c1ba902cb3e852a28c1449ad5ac\"\n                                                data-url=\"/livewire/livewire/commit/6bb2f45fe0f4a372ecc2e7bbb12d91ced63a9622/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"vdauchy\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/vdauchy/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/vdauchy\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@vdauchy\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/26772554?s=60&amp;u=71532bdd6a5bb09386a7be9ef779d2bff004feec&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add getComponentAliases() to LivewireManager (#2634)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/6bb2f45fe0f4a372ecc2e7bbb12d91ced63a9622\">Add getComponentAliases() to LivewireManager (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"832310187\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2634\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2634/hovercard\" href=\"https://github.com/livewire/livewire/pull/2634\">#2634</a><a title=\"Add getComponentAliases() to LivewireManager (#2634)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/6bb2f45fe0f4a372ecc2e7bbb12d91ced63a9622\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"EtcAka7a387rRoKHvP17pRO0HiLTwEyypSSgwctg3nxOgFAEYQwRx+MgXXeIkoQmQiRAgWdk1BW61NarUf3AZg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjZiYjJmNDVmZTBmNGEzNzJlY2MyZTdiYmIxMmQ5MWNlZDYzYTk2MjI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"ep8S+31fA6DGUZ+DlFLos/K98yYnG901UUJKlUmF13BjIuM6eHvjQ8nHqRXCwyvIDoSzHAtdwZHdXkWxuYUAKw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"6bb2f45fe0f4a372ecc2e7bbb12d91ced63a9622\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/6bb2f45fe0f4a372ecc2e7bbb12d91ced63a9622\" class=\"Link--secondary\">6bb2f45</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 12, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmJlYzBhM2U3YTA4NTdhYzU5MTU2OTVkZjIzZDMyYzk5ZjQ5NTVhNTciLCJ0IjoxNjE5NjU4MDAzfQ==--231ce3b31e1b4eb3f2c059900b9e86c6679910c7450ef39665c7c3165d79f740\"\n                                                data-url=\"/livewire/livewire/commit/bec0a3e7a0857ac5915695df23d32c99f4955a57/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"RomainMazB\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/RomainMazB/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/RomainMazB\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@RomainMazB\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/53976837?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Fix x layout (#2499)\n\n* rollback &amp; simplify\n\n* add tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/bec0a3e7a0857ac5915695df23d32c99f4955a57\">Fix x layout (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"808077696\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2499\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2499/hovercard\" href=\"https://github.com/livewire/livewire/pull/2499\">#2499</a><a title=\"Fix x layout (#2499)\n\n* rollback &amp; simplify\n\n* add tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/bec0a3e7a0857ac5915695df23d32c99f4955a57\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"uOxh2P13pygtFeg+Zkhpn/jocOZYYK9hJIjsGQGbsGPkuzFNMqFpISVzN85SJ5YcqXguRezEN8Y7eJpzmwaueQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmJlYzBhM2U3YTA4NTdhYzU5MTU2OTVkZjIzZDMyYzk5ZjQ5NTVhNTc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"+yeE54caOHHBAgtqTd59Ux6NXEx4VGrmt26csFIfof7imnUmgj7Yks6UPfwbT74o4rQcdlQSdkI7cpOUoh92pQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"bec0a3e7a0857ac5915695df23d32c99f4955a57\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/bec0a3e7a0857ac5915695df23d32c99f4955a57\" class=\"Link--secondary\">bec0a3e</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* rollback &amp; simplify\n\n* add tests</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0Ojk0MTY3ODZkMTFmNzUxNTJiOWJjYjViZjYwZDVlNTk0NGEwYzJiMDgiLCJ0IjoxNjE5NjU4MDAzfQ==--f0dc869ff7d6fd41657bc1579d0c3e94b46e0f9236bb5c41dc5f3d9172a49066\"\n                                                data-url=\"/livewire/livewire/commit/9416786d11f75152b9bcb5bf60d5e5944a0c2b08/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/9416786d11f75152b9bcb5bf60d5e5944a0c2b08\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"FWOQ+CN7oFT9RnfMEjHgtWQcTS+57ez8t1sF62jfc+BJNMBt7K1uXfUgqDwmXh82NYwTjA1JdFuoq3OB8kJt+g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4Ojk0MTY3ODZkMTFmNzUxNTJiOWJjYjViZjYwZDVlNTk0NGEwYzJiMDg=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"cBn7iMHF6V8kkFOQ1AvZJRs5hF7yXU+6Gl21Se8KEjlppApJxOEJvCsGZQaCmhpe5wDEZN4bUx6WQbptHwrFYg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"9416786d11f75152b9bcb5bf60d5e5944a0c2b08\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/9416786d11f75152b9bcb5bf60d5e5944a0c2b08\" class=\"Link--secondary\">9416786</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjhiOGFmYTY1Mzk0ZDQ5OTJmOWFmNjY5MjdjN2E3ZjQ0MTE2OGMwNTUiLCJ0IjoxNjE5NjU4MDAzfQ==--1b347831926a70319943734a95ea7bd5e701563cfef08e1cb5548d73fa7a7199\"\n                                                data-url=\"/livewire/livewire/commit/8b8afa65394d4992f9af66927c7a7f441168c055/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Merge branch &#39;master&#39; into ncharalampidis-master\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/8b8afa65394d4992f9af66927c7a7f441168c055\">Merge branch 'master' into ncharalampidis-master</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"PW0fTS4+AJHjpDESkc2MPu1eQfARSmdwY6wafXGmWpZhOk/Y4ejOmOvC7uKlonO9vM4fU6Xu/9d8XGwX6ztEjA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjhiOGFmYTY1Mzk0ZDQ5OTJmOWFmNjY5MjdjN2E3ZjQ0MTE2OGMwNTU=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/8b8afa65394d4992f9af66927c7a7f441168c055\" class=\"Link--secondary\">8b8afa6</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmQzYTBmYzY0Yjk5ODA4Y2UwMWJlYzUzMmEzNWUwYjhlNzAwYTQxN2YiLCJ0IjoxNjE5NjU4MDAzfQ==--6f338355932c006c6f86852011a7834dfaa26fd440bf28a44389320878b7193d\"\n                                                data-url=\"/livewire/livewire/commit/d3a0fc64b99808ce01bec532a35e0b8e700a417f/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"build assets\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/d3a0fc64b99808ce01bec532a35e0b8e700a417f\">build assets</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"4VSg+9O2jox2mn87GO4TIs27kka3Au/xzNlmoE0B7cy9A/BuHGBAhX78oMssgeyhnCvM5QOmd1bTKRDK15zz1g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmQzYTBmYzY0Yjk5ODA4Y2UwMWJlYzUzMmEzNWUwYjhlNzAwYTQxN2Y=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"OIzfT5eftBm2WJU+FwLqF7bjE57Zegib+1aV7h+5Wx8hMS6OkrtU+rnOo6hBkylsStpTpPU8FD93SprK77mMRA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"d3a0fc64b99808ce01bec532a35e0b8e700a417f\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/d3a0fc64b99808ce01bec532a35e0b8e700a417f\" class=\"Link--secondary\">d3a0fc6</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmMwOTIzYjdlNWYwZGI5NzgzMWIzNmE4N2E5YjVmZTczMjhmZDc1MTUiLCJ0IjoxNjE5NjU4MDAzfQ==--1449c96508965d09dabebe9921cbafb0f3cd60229ab89206c2c63081536c135d\"\n                                                data-url=\"/livewire/livewire/commit/c0923b7e5f0db97831b36a87a9b5fe7328fd7515/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"stancl\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/stancl/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/stancl\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@stancl\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/33033094?s=60&amp;u=af2f8c68849665a7827be80ba26c1131efff2642&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title='Move \"This page has expired...\" message to a method (#2589)' data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/c0923b7e5f0db97831b36a87a9b5fe7328fd7515\">Move \"This page has expired...\" message to a method (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"821536896\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2589\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2589/hovercard\" href=\"https://github.com/livewire/livewire/pull/2589\">#2589</a><a title='Move \"This page has expired...\" message to a method (#2589)' data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/c0923b7e5f0db97831b36a87a9b5fe7328fd7515\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"9eR8cEXMCTG7z7Ba+fEPPRtlHLe1tn82OmoYMjn8Lw+psyzlihrHOLOpb6rNnvC+SvVCFAES55Elmm5Yo2ExFQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmMwOTIzYjdlNWYwZGI5NzgzMWIzNmE4N2E5YjVmZTczMjhmZDc1MTU=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"4zguZG7oZaD/61SNmTMgmQIwM8Z7FnO5FKZfZ+gqgUj6hd+la8yFQ/B9YhvPouPi/glz/FdQbx2YulBDGCpWEw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"c0923b7e5f0db97831b36a87a9b5fe7328fd7515\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/c0923b7e5f0db97831b36a87a9b5fe7328fd7515\" class=\"Link--secondary\">c0923b7</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjQxMTE0MjI0MjIwODkyNWVlYTZjYTgxNjVlNjg1MTRjNjZiZTZlMDIiLCJ0IjoxNjE5NjU4MDAzfQ==--93b23d7cc39108dd5a6bbb71e57b65ab165e76a51a9e1e61f2b264e5d92552a6\"\n                                                data-url=\"/livewire/livewire/commit/411142242208925eea6ca8165e68514c66be6e02/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"jameslkingsley\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/jameslkingsley/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/jameslkingsley\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@jameslkingsley\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/11015784?s=60&amp;u=be8ec62674f325c902d93b75d28e48b0533962c1&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add docblock tags to provide auto-completion in IDE's (#2699)\n\n* Add actingAs method to docblock\n\n* Add mixin for forwarded calls to the response\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/411142242208925eea6ca8165e68514c66be6e02\">Add docblock tags to provide auto-completion in IDE's (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"851520765\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2699\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2699/hovercard\" href=\"https://github.com/livewire/livewire/pull/2699\">#2699</a><a title=\"Add docblock tags to provide auto-completion in IDE's (#2699)\n\n* Add actingAs method to docblock\n\n* Add mixin for forwarded calls to the response\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/411142242208925eea6ca8165e68514c66be6e02\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"XlCDV9cWcyXAVJ0c1XR+Mlcyey3oD3s93NYAVGTS+i0CB9PCGMC9LMgyQuzhG4GxBqIljlyr45rDJnY+/k/kNw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjQxMTE0MjI0MjIwODkyNWVlYTZjYTgxNjVlNjg1MTRjNjZiZTZlMDI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"oaNYf0pLMdfY20Hn3DSyUb+slo4CUYEzy7zCh6qtRS+4Hqm+T2/RNNdNd3GKpXEqQ5XWtC4XnZdHoM2jWq2SdA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"411142242208925eea6ca8165e68514c66be6e02\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/411142242208925eea6ca8165e68514c66be6e02\" class=\"Link--secondary\">4111422</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Add actingAs method to docblock\n\n* Add mixin for forwarded calls to the response</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmRjODk4NTBmMjExOTcwZjZkNGZjMDhjODZjOGRiYzExZGY3YmFhZjQiLCJ0IjoxNjE5NjU4MDAzfQ==--e4d1d9ff4dca5586a6d4af9ca9c8301fc2266e6bceeef1b93559859572e2b984\"\n                                                data-url=\"/livewire/livewire/commit/dc89850f211970f6d4fc08c86c8dbc11df7baaf4/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"Mecit\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/Mecit/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/Mecit\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@Mecit\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/4574879?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"make the test stub file publishable (#2704)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/dc89850f211970f6d4fc08c86c8dbc11df7baaf4\">make the test stub file publishable (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"852703058\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2704\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2704/hovercard\" href=\"https://github.com/livewire/livewire/pull/2704\">#2704</a><a title=\"make the test stub file publishable (#2704)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/dc89850f211970f6d4fc08c86c8dbc11df7baaf4\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"/0y10vKlblrrWH0GN8HkB7au0xBz80v7/+jJItt5kO6jG+VHPXOgU+M+ovYDrhuE5z6Ns8dX01zgGL9IQeSO9A==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmRjODk4NTBmMjExOTcwZjZkNGZjMDhjODZjOGRiYzExZGY3YmFhZjQ=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"jaNMlT0kSBpFcRVf1EpfWqV3iA78is1q4kRahNk6q/KUHr1UOACo+UrnI8mC25whWU7INNDM0c5uWFWgKTp8qQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"dc89850f211970f6d4fc08c86c8dbc11df7baaf4\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/dc89850f211970f6d4fc08c86c8dbc11df7baaf4\" class=\"Link--secondary\">dc89850</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjlhZjI0NjE2N2IyMmUwZjQzMzBlMDJiNzg5MGY1Y2E1OGRiZTU3MTgiLCJ0IjoxNjE5NjU4MDAzfQ==--15cef8a8bae9ae968745531f771b66609d621841c802247c4e5695cdd6dbfc82\"\n                                                data-url=\"/livewire/livewire/commit/9af246167b22e0f4330e02b7890f5ca58dbe5718/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start AvatarStack--two\">\n                                                            <div class=\"AvatarStack-body\"\n                                                                aria-label=\"nihilsen and calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/nihilsen/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/nihilsen\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@nihilsen\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/32091869?s=60&amp;u=63dba35874102241a6d634c85812eaa40414ee82&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a> <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add support for history sync with optional route parameters (#2709)\n\n* Add tests for optional route parameters\n\n* Add support for optional route parameters\n\n* wip\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/9af246167b22e0f4330e02b7890f5ca58dbe5718\">Add support for history sync with optional route parameters (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"854101446\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2709\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2709/hovercard\" href=\"https://github.com/livewire/livewire/pull/2709\">#2709</a><a title=\"Add support for history sync with optional route parameters (#2709)\n\n* Add tests for optional route parameters\n\n* Add support for optional route parameters\n\n* wip\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/9af246167b22e0f4330e02b7890f5ca58dbe5718\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"tD/W+s0RP88Py3hPhomVgFCjr7chP78Jgv9wtoOiuV/oaIZvAsfxxgetp7+y5moDATPxFJWbJ66dDwbcGT+nRQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjlhZjI0NjE2N2IyMmUwZjQzMzBlMDJiNzg5MGY1Y2E1OGRiZTU3MTg=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"GxCfVYYzX00LLOD+auVxWTCe/jhRl1+SQKleD1tbQY4CrW6Ugxe/rgS61mg8dLIizKe+An3RQzbMtVErq1uW1Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"9af246167b22e0f4330e02b7890f5ca58dbe5718\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/9af246167b22e0f4330e02b7890f5ca58dbe5718\" class=\"Link--secondary\">9af2461</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Add tests for optional route parameters\n\n* Add support for optional route parameters\n\n* wip\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 16, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmJhM2Y5NDcyZWY5YWViNjNmZTQ2MWQyMDE2OWIyOTBjMzc0NmQ5Y2IiLCJ0IjoxNjE5NjU4MDAzfQ==--04dea556c6a19d5cdd0cefaaacfb960379b02506b1246ceb2ec0eca44f45dece\"\n                                                data-url=\"/livewire/livewire/commit/ba3f9472ef9aeb63fe461d20169b290c3746d9cb/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"ju5t\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/ju5t/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/ju5t\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@ju5t\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3635751?s=60&amp;u=17bacaad65d3598760bec5385ced3efe2d514b93&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Disable poll when hidden (#2560)\n\n* Allow polling to be disabled outside viewport\n\n* feat: block 95% poll requests out of viewport\n\nThis will stop polling if the element is not in the\nviewport by default. If it needs to continue even\nwhen it is not in the viewport, add `keep-alive`:\n\n`wire:poll.keep-alive`\n\n* chore: rewrite comment\n\n* feat: don't poll element outside viewport\n\nThe .visible modifier ensures that polling only happens\nwhen the element is within the viewport.\n\n* tests: add test for visibile polling\n\n* feat: never poll instead of 5% of the time\n\n* fix: first check for the modifier\n\n* chore: add livewire js builds\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/ba3f9472ef9aeb63fe461d20169b290c3746d9cb\">Disable poll when hidden (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"815265378\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2560\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2560/hovercard\" href=\"https://github.com/livewire/livewire/pull/2560\">#2560</a><a title=\"Disable poll when hidden (#2560)\n\n* Allow polling to be disabled outside viewport\n\n* feat: block 95% poll requests out of viewport\n\nThis will stop polling if the element is not in the\nviewport by default. If it needs to continue even\nwhen it is not in the viewport, add `keep-alive`:\n\n`wire:poll.keep-alive`\n\n* chore: rewrite comment\n\n* feat: don't poll element outside viewport\n\nThe .visible modifier ensures that polling only happens\nwhen the element is within the viewport.\n\n* tests: add test for visibile polling\n\n* feat: never poll instead of 5% of the time\n\n* fix: first check for the modifier\n\n* chore: add livewire js builds\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/ba3f9472ef9aeb63fe461d20169b290c3746d9cb\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"/Sn/9HDi11pZVuaLESF9rRssmikWHUpMVGfF9nzOLPGhfq9hvzQZU1EwOXslToIuSrzEiqK50utLl7Oc5lMy6w==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmJhM2Y5NDcyZWY5YWViNjNmZTQ2MWQyMDE2OWIyOTBjMzc0NmQ5Y2I=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"qmleDGW8lM6sAvXCz0lhGz2OSmJ9ni6qYOcXbiwZBkOz1K/NYJh0LaOUw1SZ2KJgwbcKWFHYMg7s+xhK3BnRGA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"ba3f9472ef9aeb63fe461d20169b290c3746d9cb\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/ba3f9472ef9aeb63fe461d20169b290c3746d9cb\" class=\"Link--secondary\">ba3f947</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Allow polling to be disabled outside viewport\n\n* feat: block 95% poll requests out of viewport\n\nThis will stop polling if the element is not in the\nviewport by default. If it needs to continue even\nwhen it is not in the viewport, add `keep-alive`:\n\n`wire:poll.keep-alive`\n\n* chore: rewrite comment\n\n* feat: don't poll element outside viewport\n\nThe .visible modifier ensures that polling only happens\nwhen the element is within the viewport.\n\n* tests: add test for visibile polling\n\n* feat: never poll instead of 5% of the time\n\n* fix: first check for the modifier\n\n* chore: add livewire js builds</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjY3ZDc0OTIxMmNjZWRkNDA1YzUyODJlODU4NDUwMzExOGNmOWNkZjEiLCJ0IjoxNjE5NjU4MDAzfQ==--5cd692d9f7d96795679e1203e56a2ececcbaa2e6ae8f7147afaaa74204e307d2\"\n                                                data-url=\"/livewire/livewire/commit/67d749212ccedd405c5282e8584503118cf9cdf1/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/67d749212ccedd405c5282e8584503118cf9cdf1\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"VrxIPptY5p34NyGK+hThgF9JRzLLVB23U5T/bDK8s6EK6xirVI4olPBR/nrOex4DDtkZkX/whRBMZIkGqCGtuw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjY3ZDc0OTIxMmNjZWRkNDA1YzUyODJlODU4NDUwMzExOGNmOWNkZjE=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"/EYeWSPAi+Pge1eD1k0wXVyESS8Iq9hDzUo8P/mTR5fl+++YJuRrAO/tYRWA3PMmoL0JFSTtxOdBVjMbCZOQzA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"67d749212ccedd405c5282e8584503118cf9cdf1\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/67d749212ccedd405c5282e8584503118cf9cdf1\" class=\"Link--secondary\">67d7492</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0Ojc1MjY2MDM1YjYyZjUzNDhkMjFhMWM1NmIzYTJlYmM2ZjZlNDhkZGYiLCJ0IjoxNjE5NjU4MDAzfQ==--12239e81030ed65a311a3597392444196d511b61b411da3c3aad2a71f804a958\"\n                                                data-url=\"/livewire/livewire/commit/75266035b62f5348d21a1c56b3a2ebc6f6e48ddf/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"Namoshek\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/Namoshek/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/Namoshek\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@Namoshek\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/8877609?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Avoid exception for unsupported HTTP methods (#2680)\n\n* Avoid exception for unsupported HTTP methods\n\nIn case a route is defined, but the utilized HTTP method (which is normally POST) is not supported, an exception other than `NotFoundHttpException` is thrown. By catching this `MethodNotAllowedHttpException`, we avoid exceptions to bubble up to the user.\n\n* Add browser test for method not allowed\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/75266035b62f5348d21a1c56b3a2ebc6f6e48ddf\">Avoid exception for unsupported HTTP methods (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"845062995\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2680\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2680/hovercard\" href=\"https://github.com/livewire/livewire/pull/2680\">#2680</a><a title=\"Avoid exception for unsupported HTTP methods (#2680)\n\n* Avoid exception for unsupported HTTP methods\n\nIn case a route is defined, but the utilized HTTP method (which is normally POST) is not supported, an exception other than `NotFoundHttpException` is thrown. By catching this `MethodNotAllowedHttpException`, we avoid exceptions to bubble up to the user.\n\n* Add browser test for method not allowed\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/75266035b62f5348d21a1c56b3a2ebc6f6e48ddf\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"kI459Cy6rPjsFJybavIdvAwxGNLaBgHG65+cxW8Zt4bM2Wlh42xi8eRyQ2teneI/XaFGcW6imWH0b+qv9YSpnA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4Ojc1MjY2MDM1YjYyZjUzNDhkMjFhMWM1NmIzYTJlYmM2ZjZlNDhkZGY=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"hEppniGSkuk5w4itplBJh50D15vgRK6sfm5RHFYrC8Kd95hfJLZyCjZVvjvwwYr8YTqXocwCsgjycl44pivcmQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"75266035b62f5348d21a1c56b3a2ebc6f6e48ddf\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/75266035b62f5348d21a1c56b3a2ebc6f6e48ddf\" class=\"Link--secondary\">7526603</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Avoid exception for unsupported HTTP methods\n\nIn case a route is defined, but the utilized HTTP method (which is normally POST) is not supported, an exception other than `NotFoundHttpException` is thrown. By catching this `MethodNotAllowedHttpException`, we avoid exceptions to bubble up to the user.\n\n* Add browser test for method not allowed</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjJlMTE1MzEzOGUyY2Y4ODNhMTAxNGU4NDExNjE2MmMxMjAxN2Q1YTMiLCJ0IjoxNjE5NjU4MDAzfQ==--1c6f573f32c58b277b0fe58d239d182f7dca732254a23d6a9322b79ee7b5cf29\"\n                                                data-url=\"/livewire/livewire/commit/2e1153138e2cf883a1014e84116162c12017d5a3/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"Mecit\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/Mecit/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/Mecit\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@Mecit\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/4574879?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"fixes the publish command for test files (#2723)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2e1153138e2cf883a1014e84116162c12017d5a3\">fixes the publish command for test files (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"858032797\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2723\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2723/hovercard\" href=\"https://github.com/livewire/livewire/pull/2723\">#2723</a><a title=\"fixes the publish command for test files (#2723)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2e1153138e2cf883a1014e84116162c12017d5a3\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"beQf3iLQ+hMjlNIdtO5EJeu85lG9eKA6JXM58GH2o04xs09L7QY0GivyDe2Agbumuiy48gncOJ06g0+a+2u9VA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjJlMTE1MzEzOGUyY2Y4ODNhMTAxNGU4NDExNjE2MmMxMjAxN2Q1YTM=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"pDGA7Y20OCz2umCoPD9Rw/LfENnx4wFidnSA5pF1IHW9jHEsiJDYz/ksVj5qrpK4DuZQ492lHcb6aI/CYXX3Lg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"2e1153138e2cf883a1014e84116162c12017d5a3\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/2e1153138e2cf883a1014e84116162c12017d5a3\" class=\"Link--secondary\">2e11531</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjY5NTc1ZjUwYmI3ZjhhNDlhNDFmOWJkNmJkMTZjNzNhNmVmNGZkYTMiLCJ0IjoxNjE5NjU4MDAzfQ==--e107b3c578cbef0395c61cf236ee05647fa0a2ea3a126269c97552ee2382760b\"\n                                                data-url=\"/livewire/livewire/commit/69575f50bb7f8a49a41f9bd6bd16c73a6ef4fda3/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start AvatarStack--two\">\n                                                            <div class=\"AvatarStack-body\"\n                                                                aria-label=\"ralphschindler and calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/ralphschindler/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/ralphschindler\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@ralphschindler\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/76674?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a> <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Fixes to ensure Livewire can run in a sessionless Laravel application (#2725)\n\n* Fixes to ensure Livewire can run in a sessionless Laravel application\n\n* wip\n\n* Merge master and re-build\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/69575f50bb7f8a49a41f9bd6bd16c73a6ef4fda3\">Fixes to ensure Livewire can run in a sessionless Laravel application (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"858281008\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2725\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2725/hovercard\" href=\"https://github.com/livewire/livewire/pull/2725\">…</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"zJn8adNyy8aFSqS2LgBvvOhvHHyoDu9zUC6Sp2JyeuOQzqz8HKQFz40se0Yab5A/uf9C3xyqd9RP3uTN+O9k+Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjY5NTc1ZjUwYmI3ZjhhNDlhNDFmOWJkNmJkMTZjNzNhNmVmNGZkYTM=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"7ip+QavUTT7FAa+xjlfi9fiQefkT8zBH/MD6+85dJeX3l4+ArvCt3cqXmSfYxiGOBKk5wz+1LONw3PXfPl3yvg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"69575f50bb7f8a49a41f9bd6bd16c73a6ef4fda3\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/69575f50bb7f8a49a41f9bd6bd16c73a6ef4fda3\" class=\"Link--secondary\">69575f5</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\"><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"858281008\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2725\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2725/hovercard\" href=\"https://github.com/livewire/livewire/pull/2725\">…#2725</a>)\n\n* Fixes to ensure Livewire can run in a sessionless Laravel application\n\n* wip\n\n* Merge master and re-build\n\nCo-authored-by: Caleb Porzio &lt;calebporzio@gmail.com&gt;</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 18, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmVjNWY4MDc4NGU1OTg0Y2I4MDhkNmU0ZWM3OWY0ZWI1NmFkMWE1NDIiLCJ0IjoxNjE5NjU4MDAzfQ==--628249e2da853edecabeb75814f92cee143b82e953ac4facb539680e732d12b9\"\n                                                data-url=\"/livewire/livewire/commit/ec5f80784e5984cb808d6e4ec79f4eb56ad1a542/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"mokhosh\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/mokhosh/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/mokhosh\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@mokhosh\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/6499685?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"poll if any part is visible, not if every part is visible (#2730)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/ec5f80784e5984cb808d6e4ec79f4eb56ad1a542\">poll if any part is visible, not if every part is visible (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"860013291\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2730\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2730/hovercard\" href=\"https://github.com/livewire/livewire/pull/2730\">#2730</a><a title=\"poll if any part is visible, not if every part is visible (#2730)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/ec5f80784e5984cb808d6e4ec79f4eb56ad1a542\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"JcnNHf/NnwKwI+J2jOil8R1g6B4tV57SczMug1rLwXd5np2IMBtRC7hFPYa4h1pyTPC2vZnzBnVsw1jpwFbfbQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmVjNWY4MDc4NGU1OTg0Y2I4MDhkNmU0ZWM3OWY0ZWI1NmFkMWE1NDI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"2F8kSdSdapEOHlZ7/VYSaC3xjY6fx1e+PBdXk678A9nB4tWI0bmKcgGIYO2rx9ET0cjNtLOBSxqwC1i3XvzUgg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"ec5f80784e5984cb808d6e4ec79f4eb56ad1a542\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/ec5f80784e5984cb808d6e4ec79f4eb56ad1a542\" class=\"Link--secondary\">ec5f807</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 19, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmU4ZTg0NDdkYjM4NTIwYzMzYmU4ZDIxNTU2NWRmMTA4ZTAyN2JlYzUiLCJ0IjoxNjE5NjU4MDAzfQ==--fb106c592f495695809372ce39a82a5a6b5f9f22bf24b43d3cb2a6108823e3a1\"\n                                                data-url=\"/livewire/livewire/commit/e8e8447db38520c33be8d215565df108e027bec5/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Remove the sad message\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/e8e8447db38520c33be8d215565df108e027bec5\">Remove the sad message</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"W2ifhXr0x1Z2UO52XfD0tgNE4bgdExoy9LSgTOWWpCwHP88QtSIJX342MYZpnws1UtS/G6m3gpXrRNYmfwu6Ng==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmU4ZTg0NDdkYjM4NTIwYzMzYmU4ZDIxNTU2NWRmMTA4ZTAyN2JlYzU=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/e8e8447db38520c33be8d215565df108e027bec5\" class=\"Link--secondary\">e8e8447</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjBjZjJkYTU0N2Y0MTcxOTA2NzYyNDRjMzg5YTIyODVhMjM3ZWFkNDUiLCJ0IjoxNjE5NjU4MDAzfQ==--286536a19240a16f289212d71cae5923664ad212c05a7162c5c7684731de2256\"\n                                                data-url=\"/livewire/livewire/commit/0cf2da547f417190676244c389a2285a237ead45/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Merge branch &#39;master&#39; of github.com:livewire/livewire\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/0cf2da547f417190676244c389a2285a237ead45\">Merge branch 'master' of github.com:livewire/livewire</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"q29jdqYQTq2v4PKFOC6ajMi6v9HdTMgjM6mqLP5bvw33ODPjacaApKeGLXUMQWUPmSrhcmnoUIQsWdxGZMahFw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjBjZjJkYTU0N2Y0MTcxOTA2NzYyNDRjMzg5YTIyODVhMjM3ZWFkNDU=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"c0I18zsgpuN6G1didf6gCAIyJtD5czulXsOssb0U355q/8QyPgRGAHWNYfQjb2Nz/gtm6tU1JwHS36OVTRQIxQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"0cf2da547f417190676244c389a2285a237ead45\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/0cf2da547f417190676244c389a2285a237ead45\" class=\"Link--secondary\">0cf2da5</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 21, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjBjMDM4ODJkNTZmZDhmMWY4YzQ2ZTQ0ZGVkZTEwZTQ2MDBlODA5YjUiLCJ0IjoxNjE5NjU4MDAzfQ==--3b1b63a559f2d1b59642d26f07d0901d0c4cf5fcf52a73bbecdba1395570a6bd\"\n                                                data-url=\"/livewire/livewire/commit/0c03882d56fd8f1f8c46e44dede10e4600e809b5/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"wuwx\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/wuwx/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/wuwx\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@wuwx\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/4401?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Update LivewireBladeDirectives.php (#2743)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/0c03882d56fd8f1f8c46e44dede10e4600e809b5\">Update LivewireBladeDirectives.php (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"862859250\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2743\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2743/hovercard\" href=\"https://github.com/livewire/livewire/pull/2743\">#2743</a><a title=\"Update LivewireBladeDirectives.php (#2743)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/0c03882d56fd8f1f8c46e44dede10e4600e809b5\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"Ytxnq0zrvsWrUgxZb3q3M+3e6JsCuICzeGhY3IqRqlI+izc+gz1wzKM006lbFUiwvE62OLYcGBRnmC62EAy0SA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjBjMDM4ODJkNTZmZDhmMWY4YzQ2ZTQ0ZGVkZTEwZTQ2MDBlODA5YjU=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"SllpBSBDgrVaJuf58LcMqiAzfmxfIBOmJT3BEKnT3JpT5JjEJWdiVlWw0W+mJs/R3Ao+VnNmDwKpIc40WdMLwQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"0c03882d56fd8f1f8c46e44dede10e4600e809b5\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/0c03882d56fd8f1f8c46e44dede10e4600e809b5\" class=\"Link--secondary\">0c03882</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmI2ZDFkZjQyN2EwODNiZGY0ZTYzY2E0NDBlYzQ5MjY1N2ViYmM1NTkiLCJ0IjoxNjE5NjU4MDAzfQ==--e19dc81ab5c2b489dbd382958fab23e7d408296451cf4fe971d6be2215d42b1a\"\n                                                data-url=\"/livewire/livewire/commit/b6d1df427a083bdf4e63ca440ec492657ebbc559/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"joshhanley\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/joshhanley/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/joshhanley\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@joshhanley\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/882837?s=60&amp;u=5d7fd95f2e0989124c3fa8f9e8d83110b3d93804&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title='Dynamic livewire components (#2502)\n\n* Add dynamic Livewire component support\n\n* Add tag compiler tests\n\n* Add support for \"is\" syntax\n\n* Add check for existing dynamic component' data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/b6d1df427a083bdf4e63ca440ec492657ebbc559\">Dynamic livewire components (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"808429687\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2502\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2502/hovercard\" href=\"https://github.com/livewire/livewire/pull/2502\">#2502</a><a title='Dynamic livewire components (#2502)\n\n* Add dynamic Livewire component support\n\n* Add tag compiler tests\n\n* Add support for \"is\" syntax\n\n* Add check for existing dynamic component' data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/b6d1df427a083bdf4e63ca440ec492657ebbc559\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"JOO5bt4LtNRx29kuqFSImIl9cv+xvfH4kSGfLpuJPux4tOn7Ed163Xm9Bt6cO3cb2O0sXAUZaV+O0elEARQg9g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmI2ZDFkZjQyN2EwODNiZGY0ZTYzY2E0NDBlYzQ5MjY1N2ViYmM1NTk=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"/moardrjuO5PUrrqLrG9ThB73aMdOazsdKt75wOPAWDn1+ts38dYDUDEjHx4IH417EKdmTF/sEj4t3TD84/WOw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"b6d1df427a083bdf4e63ca440ec492657ebbc559\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/b6d1df427a083bdf4e63ca440ec492657ebbc559\" class=\"Link--secondary\">b6d1df4</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Add dynamic Livewire component support\n\n* Add tag compiler tests\n\n* Add support for \"is\" syntax\n\n* Add check for existing dynamic component</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0Ojc1YzQ3YzljNThjMWU1Mjk2MjA5MTQwZjFiYmRjZjc4YjBlOWQ0ZTkiLCJ0IjoxNjE5NjU4MDAzfQ==--6b001ff19c9ad5962d73d21469ee463e8e1f03008876cb16f50d4924169237f2\"\n                                                data-url=\"/livewire/livewire/commit/75c47c9c58c1e5296209140f1bbdcf78b0e9d4e9/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"rezaamini-ir\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/rezaamini-ir/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/rezaamini-ir\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@rezaamini-ir\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/29504334?s=60&amp;u=c7cdc17494bec76fe5e3e15728f24ccc60cafa71&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add params method to view macros (#2736)\n\n* Add params method to macros\n\n* Add params tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/75c47c9c58c1e5296209140f1bbdcf78b0e9d4e9\">Add params method to view macros (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"860746614\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2736\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2736/hovercard\" href=\"https://github.com/livewire/livewire/pull/2736\">#2736</a><a title=\"Add params method to view macros (#2736)\n\n* Add params method to macros\n\n* Add params tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/75c47c9c58c1e5296209140f1bbdcf78b0e9d4e9\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"kghXZxbkml/PMJZ+BH39Y+zKocResACCXUiibcyXDWXOXwfy2TJUVsdWSY4wEgLgvVr/Z+oUmCVCuNQHVgoTfw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4Ojc1YzQ3YzljNThjMWU1Mjk2MjA5MTQwZjFiYmRjZjc4YjBlOWQ0ZTk=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"S/LX6Q4IJrvwJ1UT/wg1HLugdeLQtTMD68B3u6FT+udSTyYoCyzGWP+xY4WpmfZnR5k12PzzL6dn3HifUVMtvA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"75c47c9c58c1e5296209140f1bbdcf78b0e9d4e9\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/75c47c9c58c1e5296209140f1bbdcf78b0e9d4e9\" class=\"Link--secondary\">75c47c9</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Add params method to macros\n\n* Add params tests</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 22, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjJhY2YyNDYyNWJkMGY4ZDhmYjcyYjg1ZWU5NDkzNjQ4N2M1ZDE3OTMiLCJ0IjoxNjE5NjU4MDAzfQ==--c4bcb26c7f163866c14403ee173d6b98702105579981c56d1bee9eebec127d3e\"\n                                                data-url=\"/livewire/livewire/commit/2acf24625bd0f8d8fb72b85ee94936487c5d1793/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2acf24625bd0f8d8fb72b85ee94936487c5d1793\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"17bGAsP4VINfLuB20wIJdlvGcXUxkvExrNIhAjJHT+iL4ZaXDC6aildIP4bnbfb1ClYv1oU2aZazIldoqNpR8g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjJhY2YyNDYyNWJkMGY4ZDhmYjcyYjg1ZWU5NDkzNjQ4N2M1ZDE3OTM=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"vssOcEAXKq4arhWC+cN4sF4NMnseF8doLj7fpuLCHpyndv+xRTPKTRU4IxSvUrvLojRyQTJR28yiItCCEsLJxw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"2acf24625bd0f8d8fb72b85ee94936487c5d1793\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/2acf24625bd0f8d8fb72b85ee94936487c5d1793\" class=\"Link--secondary\">2acf246</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjRlYmFjNmU5YmVkM2RiMjdjMzhjZjkwMGEwNGI5OGJjNjM4M2E2YmIiLCJ0IjoxNjE5NjU4MDAzfQ==--9f82c05f80a1b3bcaf0f28967d04021b9a84a0d8f548deb910bcb61f930e503e\"\n                                                data-url=\"/livewire/livewire/commit/4ebac6e9bed3db27c38cf900a04b98bc6383a6bb/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Rename &quot;params&quot; to &quot;layoutData&quot;\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/4ebac6e9bed3db27c38cf900a04b98bc6383a6bb\">Rename \"params\" to \"layoutData\"</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"L9BfSHinJqJdq2fO+r3pJWK9wv7oZgbULYHA+L0wH+Vzhw/dt3Hoq1XNuD7O0hamMy2cXVzCnnMycbaSJ60B/w==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjRlYmFjNmU5YmVkM2RiMjdjMzhjZjkwMGEwNGI5OGJjNjM4M2E2YmI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"OKSSWsCr2WPNxGThcEqSw/7kUg1Qk+vXmvTsc+VsOe4hGWObxY85gMJSUncm21G4At0SN3zV93MW6ONXFWzutQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"4ebac6e9bed3db27c38cf900a04b98bc6383a6bb\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/4ebac6e9bed3db27c38cf900a04b98bc6383a6bb\" class=\"Link--secondary\">4ebac6e</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjFkZjk3NDIyMGJmNWU0MjcyY2QwZTk1OTdlOWM1NWFhMWYwN2MxMjYiLCJ0IjoxNjE5NjU4MDAzfQ==--01c21f2251d9648542583c76517e19442b41254c0ebbeb71b2b9f7e54386badf\"\n                                                data-url=\"/livewire/livewire/commit/1df974220bf5e4272cd0e9597e9c55aa1f07c126/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"jasonlbeggs\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/jasonlbeggs/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/jasonlbeggs\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@jasonlbeggs\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/25065083?s=60&amp;u=5009c15780028dc4c2ddf4ac387d2424832c2454&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Support using class names with assertSeeLivewire (#2754)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/1df974220bf5e4272cd0e9597e9c55aa1f07c126\">Support using class names with assertSeeLivewire (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"865227210\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2754\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2754/hovercard\" href=\"https://github.com/livewire/livewire/pull/2754\">#2754</a><a title=\"Support using class names with assertSeeLivewire (#2754)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/1df974220bf5e4272cd0e9597e9c55aa1f07c126\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"b4F4JvvAcJp6i7N3uO1P0rN9hXUxEPb/XMxdM2dgyGwz1iizNBa+k3LtbIeMgrBR4u3b1oW0blhDPCtZ/f3Wdg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjFkZjk3NDIyMGJmNWU0MjcyY2QwZTk1OTdlOWM1NWFhMWYwN2MxMjY=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"cnVlOY9HWEQfXu1x8rEQBpJxw9f8z67/wRpjqDS55mVryJT4imO4pxDI2+ekINN9bkiD7dCJsltNBmyMxLkxPg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"1df974220bf5e4272cd0e9597e9c55aa1f07c126\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/1df974220bf5e4272cd0e9597e9c55aa1f07c126\" class=\"Link--secondary\">1df9742</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmNkYzBjNDI3NTM1OTgxYzVlYjQ1ZmU1MWI3YWMwOTk0NTk0NDhkMTciLCJ0IjoxNjE5NjU4MDAzfQ==--840a4991ae1888fa08e608d28ad6e2c3c4781bb3fca0c5d939e61b95012f84f4\"\n                                                data-url=\"/livewire/livewire/commit/cdc0c427535981c5eb45fe51b7ac099459448d17/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"rezaamini-ir\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/rezaamini-ir/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/rezaamini-ir\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@rezaamini-ir\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/29504334?s=60&amp;u=c7cdc17494bec76fe5e3e15728f24ccc60cafa71&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Solve test problem (#2753)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/cdc0c427535981c5eb45fe51b7ac099459448d17\">Solve test problem (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"864973343\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2753\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2753/hovercard\" href=\"https://github.com/livewire/livewire/pull/2753\">#2753</a><a title=\"Solve test problem (#2753)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/cdc0c427535981c5eb45fe51b7ac099459448d17\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"YAqHGvRwWomBHvqS4EDfKhA7fm7KzxW3PtXjgxeZF+c8XdePO6aUgIl4JWLULyCpQasgzX5rjRAhJZXpjQQJ/Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmNkYzBjNDI3NTM1OTgxYzVlYjQ1ZmU1MWI3YWMwOTk0NTk0NDhkMTc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"KhJInFhZAVkxMl4b9Y8cHq9yKgqlmm2w2FSdj5GXOIEzr7ldXX3huj6kaI2jHt9lU0tqMInccRRUSJKrYZfv2g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"cdc0c427535981c5eb45fe51b7ac099459448d17\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/cdc0c427535981c5eb45fe51b7ac099459448d17\" class=\"Link--secondary\">cdc0c42</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjJlMDdmZTA4YTc5MmE2YmJhZDg4MDRhZTZhZWNhMWFhN2IxMGI5ZjAiLCJ0IjoxNjE5NjU4MDAzfQ==--e3bd900ab4416cdef56dea41bf2a7b79cc965ba82882884c6ad834de289ebe42\"\n                                                data-url=\"/livewire/livewire/commit/2e07fe08a792a6bbad8804ae6aeca1aa7b10b9f0/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"nuernbergerA\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/nuernbergerA/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/nuernbergerA\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@nuernbergerA\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/13331388?s=60&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"check if its a component, call getName without instantiating the class (#2755)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/2e07fe08a792a6bbad8804ae6aeca1aa7b10b9f0\">check if its a component, call getName without instantiating the class (</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"XJDag5ItGOoqpEbGFj1IGhYeFQZFGzatuEWTnmzytVUAx4oWXfvW4yLCmTYiUreZR45LpfG/rgqnteX09m+rTw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjJlMDdmZTA4YTc5MmE2YmJhZDg4MDRhZTZhZWNhMWFhN2IxMGI5ZjA=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"gcob0nWIWTDcqndr10QlrEdsRyM9uRuY4NtLFBAfhSqYd+oTcKy509M8Qf2B1ebXu1UHGRH/Bzxsx0Qw4B9ScQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"2e07fe08a792a6bbad8804ae6aeca1aa7b10b9f0\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/2e07fe08a792a6bbad8804ae6aeca1aa7b10b9f0\" class=\"Link--secondary\">2e07fe0</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre\n                                                        class=\"color-text-secondary ws-pre-wrap\"><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"865286879\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2755\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2755/hovercard\" href=\"https://github.com/livewire/livewire/pull/2755\">#2755</a>)</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 25, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjIyMTM4ZmE0NDYzYzIxYTE4MjE2YTllNjNiMzc3YzllZTEzNWMzODQiLCJ0IjoxNjE5NjU4MDAzfQ==--85a1acaa60842b8790a8c56acffa39135b977bafeeb721c7b16dcfb5548e7ffa\"\n                                                data-url=\"/livewire/livewire/commit/22138fa4463c21a18216a9e63b377c9ee135c384/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"rezaamini-ir\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/rezaamini-ir/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/rezaamini-ir\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@rezaamini-ir\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/29504334?s=60&amp;u=c7cdc17494bec76fe5e3e15728f24ccc60cafa71&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Fix layoutData method bug (#2765)\n\n* Fix layoutData bug\n\n* Update tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/22138fa4463c21a18216a9e63b377c9ee135c384\">Fix layoutData method bug (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"866988944\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2765\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2765/hovercard\" href=\"https://github.com/livewire/livewire/pull/2765\">#2765</a><a title=\"Fix layoutData method bug (#2765)\n\n* Fix layoutData bug\n\n* Update tests\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/22138fa4463c21a18216a9e63b377c9ee135c384\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"83l09SVNnRswRjd9Ahj1ImYwITGEUVSr/Ejp1k2cY02vLiRg6ptTEjgg6I02dwqhN6B/kjD1zAzjuJ+81wF9Vw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjIyMTM4ZmE0NDYzYzIxYTE4MjE2YTllNjNiMzc3YzllZTEzNWMzODQ=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"NTwmYqzK9Wadm/VrgQXz+E9xnCbk+TbEP2DgtCTAm+wsgdejqe4VhZINw/3XlDCDs0jcHMi/KmCzfO+Q1MBMtw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"22138fa4463c21a18216a9e63b377c9ee135c384\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/22138fa4463c21a18216a9e63b377c9ee135c384\" class=\"Link--secondary\">22138fa</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* Fix layoutData bug\n\n* Update tests</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 27, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjFjNzAyYjFhMDZlNDI5Zjc4MDNhNDhjNGZjM2FhNzE2YmZkZjkxM2YiLCJ0IjoxNjE5NjU4MDAzfQ==--4e15272c9786a883a51a2c86329320df63ba11e0f1a62d40fe461a0134901bef\"\n                                                data-url=\"/livewire/livewire/commit/1c702b1a06e429f7803a48c4fc3aa716bfdf913f/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"jasonlbeggs\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/jasonlbeggs/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/jasonlbeggs\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@jasonlbeggs\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/25065083?s=60&amp;u=5009c15780028dc4c2ddf4ac387d2424832c2454&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add assertFileDownloaded test helper (#2780)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/1c702b1a06e429f7803a48c4fc3aa716bfdf913f\">Add assertFileDownloaded test helper (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"869239986\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2780\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2780/hovercard\" href=\"https://github.com/livewire/livewire/pull/2780\">#2780</a><a title=\"Add assertFileDownloaded test helper (#2780)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/1c702b1a06e429f7803a48c4fc3aa716bfdf913f\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"5ncb1XRu4sGEuKcj9giNvuHLRLEBHcrg38HxkT54nCu6IEtAu7gsyIzeeNPCZ3I9sFsaErW5UkfAMYf7pOWCMQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjFjNzAyYjFhMDZlNDI5Zjc4MDNhNDhjNGZjM2FhNzE2YmZkZjkxM2Y=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"LaHvRcikOl2/jfenBy/Gt3DMS3JR67/zmQEKgTJM8YU0HB6EzYDavrAbwTFRvgXMjPULSH2to1cVHQWlwkwm3g==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"1c702b1a06e429f7803a48c4fc3aa716bfdf913f\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/1c702b1a06e429f7803a48c4fc3aa716bfdf913f\" class=\"Link--secondary\">1c702b1</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <div>\n                                    <div class=\"TimelineItem pb-1\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-repo-push\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n                                            Commits on Apr 28, 2021\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmRlODAyMWIwMjBkNmFhYTJiMDFmYTczYTE3Zjk4NjE0ZTcwYjZmNmYiLCJ0IjoxNjE5NjU4MDAzfQ==--f15a2f94079f44660f27df24695b3d41e48ff1379f23cfb3083b59f7b8b39a8f\"\n                                                data-url=\"/livewire/livewire/commit/de8021b020d6aaa2b01fa73a17f98614e70b6f6f/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Support using :wire:key on the nested Livewire component\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/de8021b020d6aaa2b01fa73a17f98614e70b6f6f\">Support using :wire:key on the nested Livewire component</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"k6EMy2tH08XWchTpShg0z1u8HMI2OwnE9BE3NMn6umLP9lxepJEdzN4Uyxl+d8tMCixCYYKfkWPr4UFeU2ekeA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmRlODAyMWIwMjBkNmFhYTJiMDFmYTczYTE3Zjk4NjE0ZTcwYjZmNmY=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/de8021b020d6aaa2b01fa73a17f98614e70b6f6f\" class=\"Link--secondary\">de8021b</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjhiZTQzMmI5YzFkMTFiNDBmNjUzNWJhZjI3MDBkM2MwNDQ1MzA0MzciLCJ0IjoxNjE5NjU4MDAzfQ==--353901c0d97d380dea88ed7004b765f98c599f8f3eb2d0d9a2428bfd61cfaf6b\"\n                                                data-url=\"/livewire/livewire/commit/8be432b9c1d11b40f6535baf2700d3c044530437/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Merge branch &#39;master&#39; of github.com:livewire/livewire\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/8be432b9c1d11b40f6535baf2700d3c044530437\">Merge branch 'master' of github.com:livewire/livewire</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"7tDXq+Xs+pwlNMNYkTGAkWWH1x5k2D53/2CEV4Su0qqyh4c+Kjo0lS1SHKilXn8SNBeJvdB8ptDgkPI9HjPMsA==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjhiZTQzMmI5YzFkMTFiNDBmNjUzNWJhZjI3MDBkM2MwNDQ1MzA0Mzc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"QLU/zJz1F3UXq3BWGkwV1QcJDEryn0gOUXl2FlURUYJZCM4NmdH3lhg9RsBM3dau+zBMcN7ZVKrdZXkypRGG2Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"8be432b9c1d11b40f6535baf2700d3c044530437\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/8be432b9c1d11b40f6535baf2700d3c044530437\" class=\"Link--secondary\">8be432b</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmYwNGJhYWVlZWU2ZmQ0MjE2NTAwNjY2ZDBmZjBjZmRmY2ExOTdkYmQiLCJ0IjoxNjE5NjU4MDAzfQ==--fedc06728f4f3203440168adb1a49415b509036a74431ae5db58b227b955f173\"\n                                                data-url=\"/livewire/livewire/commit/f04baaeeee6fd4216500666d0ff0cfdfca197dbd/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"dmitry-ivanov\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/dmitry-ivanov/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/dmitry-ivanov\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@dmitry-ivanov\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/1286821?s=60&amp;u=4a6a6a8aefb335cbd40330747f9bc4c0c80f8278&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Add dots to make it more consistent (#2748)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/f04baaeeee6fd4216500666d0ff0cfdfca197dbd\">Add dots to make it more consistent (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"864746743\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2748\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2748/hovercard\" href=\"https://github.com/livewire/livewire/pull/2748\">#2748</a><a title=\"Add dots to make it more consistent (#2748)\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/f04baaeeee6fd4216500666d0ff0cfdfca197dbd\">)</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"NPYJS6eVXJ/zQnBly3gEC2vtExopeJJesbH9KtsoTWVooVneaEOSlvskr5X/F/uIOn1NuZ3cCvmuQYtAQbVTfw==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmYwNGJhYWVlZWU2ZmQ0MjE2NTAwNjY2ZDBmZjBjZmRmY2ExOTdkYmQ=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"9DDLJo1h+wau/6lvhU5qA4OVWiD527FwYIKM6tvIeKbtjTrniEUb5aFpn/nT36l4f6waGtWdrdTsnoPOK8iv/Q==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"f04baaeeee6fd4216500666d0ff0cfdfca197dbd\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/f04baaeeee6fd4216500666d0ff0cfdfca197dbd\" class=\"Link--secondary\">f04baae</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmYwM2RiNGQ1ZTI4NGZlMDhjYjgwNjg3YjdjZWM0Nzk0OGVkMTEzMzciLCJ0IjoxNjE5NjU4MDAzfQ==--e6ce1386d0a9238eba214bfa79810f8d082348ea4f6ae040eead0fa6ee06262c\"\n                                                data-url=\"/livewire/livewire/commit/f03db4d5e284fe08cb80687b7cec47948ed11337/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"rezaamini-ir\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/rezaamini-ir/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\"\n                                                                    href=\"/rezaamini-ir\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@rezaamini-ir\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/29504334?s=60&amp;u=c7cdc17494bec76fe5e3e15728f24ccc60cafa71&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Sensitive Component Name (#2756)\n\n* More sensitive name for components\n\n* Update tests to cover more cases\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/f03db4d5e284fe08cb80687b7cec47948ed11337\">Sensitive Component Name (</a><a class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"865402787\" data-permission-text=\"Title is private\" data-url=\"https://github.com/livewire/livewire/issues/2756\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/livewire/livewire/pull/2756/hovercard\" href=\"https://github.com/livewire/livewire/pull/2756\">#2756</a><a title=\"Sensitive Component Name (#2756)\n\n* More sensitive name for components\n\n* Update tests to cover more cases\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/f03db4d5e284fe08cb80687b7cec47948ed11337\">)</a>\n        </code>\n\n                                                            <span class=\"hidden-text-expander inline\">\n                                                                <button type=\"button\"\n                                                                    class=\"ellipsis-expander js-details-target\"\n                                                                    aria-expanded=\"false\">&hellip;</button>\n                                                            </span>\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"lDa2nhiVn9i/y85RNlWc+Z1Z2RA1z1MenR5VRAK2yv3IYeYL10NR0betEaECOmN6zMmHs4Fry7mC7iMumCvU5w==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OmYwM2RiNGQ1ZTI4NGZlMDhjYjgwNjg3YjdjZWM0Nzk0OGVkMTEzMzc=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <span class=\"Skeleton d-inline-block mr-1\"\n                                                                    style=\"width:75px; height:14px; margin-top:5px;\"></span>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"qs/xJ/Cqf3C2x2vM6k5JSeV1MtmG7mUpZc8/oCcqBH6zcgDm9Y6fk7lRXVq834oyGUxy46qoeY3p0zCE1yrTJQ==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"f03db4d5e284fe08cb80687b7cec47948ed11337\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/f03db4d5e284fe08cb80687b7cec47948ed11337\" class=\"Link--secondary\">f03db4d</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"Details-content--hidden mt-2\">\n                                                    <pre class=\"color-text-secondary ws-pre-wrap\">* More sensitive name for components\n\n* Update tests to cover more cases</pre>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjlmNWM4MjY3ZDYxMzgyZjdjZGU3MWFmMjAyZGIyNDI4NmUyZTk2NTIiLCJ0IjoxNjE5NjU4MDAzfQ==--6919cca56b53b805e981c4f17c40cb6ec5b0f5a66a7a5012af077e14cb19e230\"\n                                                data-url=\"/livewire/livewire/commit/9f5c8267d61382f7cde71af202db24286e2e9652/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"wip\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/9f5c8267d61382f7cde71af202db24286e2e9652\">wip</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"D/BzI2FIVdQv/f3qF3/ITl3QgUfPpsVNRbIXHEZSz3RTpyO2rp6b3SebIhojEDfNDEDf5HsCXepaQmF23M/Rbg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjlmNWM4MjY3ZDYxMzgyZjdjZGU3MWFmMjAyZGIyNDI4NmUyZTk2NTI=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/9f5c8267d61382f7cde71af202db24286e2e9652\" class=\"Link--secondary\">9f5c826</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                    <div class=\"TimelineItem TimelineItem--condensed\">\n                                        <div class=\"TimelineItem-badge\">\n                                            <svg class=\"octicon octicon-git-commit\" viewBox=\"0 0 16 16\" version=\"1.1\"\n                                                width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z\">\n                                                </path>\n                                            </svg>\n                                        </div>\n                                        <div class=\"TimelineItem-body\">\n\n\n                                            <div class=\"js-details-container Details js-socket-channel js-updatable-content\"\n                                                data-channel=\"eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjMzMTAxYzgzYjc1NzI4NjUxYjllNjY4YTQ1NTlmOTdkZWY3YzkxMzgiLCJ0IjoxNjE5NjU4MDAzfQ==--90529c3758461e280f592de8ec18c698435f273375d3cc197540091d440cb30d\"\n                                                data-url=\"/livewire/livewire/commit/33101c83b75728651b9e668a4559f97def7c9138/_render_node/compare/commit\">\n                                                <div class=\"d-flex flex-md-row flex-column\">\n                                                    <div class=\"d-flex flex-auto\">\n\n                                                        <div class=\"AvatarStack flex-self-start \">\n                                                            <div class=\"AvatarStack-body\" aria-label=\"calebporzio\">\n                                                                <a class=\"avatar avatar-user\" data-skip-pjax=\"true\"\n                                                                    data-hovercard-type=\"user\"\n                                                                    data-hovercard-url=\"/users/calebporzio/hovercard\"\n                                                                    data-octo-click=\"hovercard-link-click\"\n                                                                    data-octo-dimensions=\"link_type:self\"\n                                                                    style=\"width:20px;height:20px;\" href=\"/calebporzio\">\n                                                                    <img height=\"20\" width=\"20\" alt=\"@calebporzio\"\n                                                                        src=\"https://avatars.githubusercontent.com/u/3670578?s=60&amp;u=b03293e8de4d6815ff792114f948609c0fa72d0d&amp;v=4\"\n                                                                        class=\" avatar-user\" />\n                                                                </a>\n                                                            </div>\n                                                        </div>\n\n\n                                                        <div class=\"pr-1 flex-auto min-width-0\">\n                                                            <code>\n            <a title=\"Merge branch &#39;master&#39; of github.com:livewire/livewire\" data-pjax=\"true\" class=\"Link--secondary markdown-title\" href=\"/livewire/livewire/commit/33101c83b75728651b9e668a4559f97def7c9138\">Merge branch 'master' of github.com:livewire/livewire</a>\n        </code>\n\n\n                                                        </div>\n\n                                                        <div class=\"text-right pr-1 d-md-inline-block d-none\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/commits/badges\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"rJ4KcYwCeWAn1XEdjwMogl5NRtCLKGS6ZIwSsZ1V8HzwyVrkQ9S3aS+zru27bNcBD90Ycz+M/B17fGTbB8juZg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"id\" id=\"id\"\n                                                                    value=\"MDY6Q29tbWl0MTcwMzU1NTA4OjMzMTAxYzgzYjc1NzI4NjUxYjllNjY4YTQ1NTlmOTdkZWY3YzkxMzg=\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"badge_size\" id=\"badge_size\"\n                                                                    value=\"small\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <div class=\"pr-1 flex-shrink-0\" style=\"width: 16px;\">\n\n                                                            <batch-deferred-content class=\"d-inline-block\"\n                                                                data-url=\"/livewire/livewire/commits/checks-statuses-rollups\">\n                                                                <input type=\"hidden\"\n                                                                    value=\"5aHfHW8e6wLql3F4S6NtBoWegrP+V4DiIErBGdonrj38HC7cajoL4eUBR+4dMq59eafCidIRnEasVs49Kid5Zg==\"\n                                                                    data-csrf=\"true\" />\n\n                                                                <input type=\"hidden\" name=\"oid\" id=\"oid\"\n                                                                    value=\"33101c83b75728651b9e668a4559f97def7c9138\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n                                                                <input type=\"hidden\" name=\"dropdown_direction\"\n                                                                    id=\"dropdown_direction\" value=\"w\"\n                                                                    data-targets=\"batch-deferred-content.inputs\" />\n\n\n\n                                                                <div class=\"commit-build-statuses\">\n                                                                    <span class=\"Skeleton d-inline-block\"\n                                                                        style=\"width:14px; height:14px; margin-top:5px;\"></span>\n                                                                </div>\n\n                                                            </batch-deferred-content>\n                                                        </div>\n\n                                                        <!-- ml-1 is added to accommodate \"clock\" icon -->\n                                                        <div class=\"text-right ml-1\">\n                                                            <code>\n          <a href=\"/livewire/livewire/commit/33101c83b75728651b9e668a4559f97def7c9138\" class=\"Link--secondary\">33101c8</a>\n        </code>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n\n\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n\n                    </div>\n                </div>\n\n                <div class=\"full-width px-4\">\n                    <div id=\"files_bucket\" class=\"files-bucket d-none\">\n                        <div id='diff' class=\"uncommentable\">\n                            <div id=\"toc\" class=\"details-collapse table-of-contents js-details-container Details\">\n                                <div class=\"BtnGroup float-right ml-2\" data-ga-load=\"Diff, view, Viewed Split Diff\">\n                                    <a class=\"btn btn-sm BtnGroup-item\"\n                                        href=\"https://github.com/livewire/livewire/compare/v2.4.0...master?diff=unified\">\n                                        Unified\n                                    </a>\n                                    <a class=\"btn btn-sm BtnGroup-item selected\" aria-current=\"true\"\n                                        href=\"https://github.com/livewire/livewire/compare/v2.4.0...master?diff=split\">\n                                        Split\n                                    </a>\n                                </div>\n\n\n                                <div class=\"toc-diff-stats\">\n                                    <svg class=\"octicon octicon-file-diff\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                        height=\"16\" aria-hidden=\"true\">\n                                        <path fill-rule=\"evenodd\"\n                                            d=\"M2.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H2.75zM1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V1.75zm7 1.5a.75.75 0 01.75.75v1.5h1.5a.75.75 0 010 1.5h-1.5v1.5a.75.75 0 01-1.5 0V7h-1.5a.75.75 0 010-1.5h1.5V4A.75.75 0 018 3.25zm-3 8a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\">\n                                        </path>\n                                    </svg>\n                                    Showing\n                                    <button type=\"button\" class=\"btn-link js-details-target\" aria-expanded=\"false\">\n                                        74 changed files\n                                    </button>\n                                    with\n                                    <strong>1,300 additions</strong>\n                                    and <strong>79 deletions</strong>.\n                                </div>\n\n                                <ol class=\"content collapse js-transitionable\">\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"3 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\">README.md</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\">config/livewire.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-71be7e35f51d605a8814367f54b7ac1ddf101170c889f2d2befe0d4cd7f60f9e\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"4 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-71be7e35f51d605a8814367f54b7ac1ddf101170c889f2d2befe0d4cd7f60f9e\">dist/livewire.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-f2b5f90a87aa8bf7534eee0391f57822445d72dec4c8f40b5c8fe511671db76c\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f2b5f90a87aa8bf7534eee0391f57822445d72dec4c8f40b5c8fe511671db76c\">dist/livewire.js.map</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466\">dist/manifest.json</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +18\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"19 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\">js/component/Polling.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +10\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"11 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\">js/component/SupportAlpine.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +4\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"5 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\">js/component/UploadManager.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +3\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"5 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\">js/component/index.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +11\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −5\n                                            </span>\n                                            <a href=\"#diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"16 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\">js/connection/index.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +7\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −7\n                                            </span>\n                                            <a href=\"#diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"14 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\">js/dom/morphdom/morphdom.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +3\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −10\n                                            </span>\n                                            <a href=\"#diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"13 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8\">js/util/getCsrfToken.js</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"3 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\">src/Commands/ComponentParser.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +0\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6\">src/Commands/FileManipulationCommand.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +80\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"82 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\">src/Commands/MakeCommand.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +5\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"5 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\">src/Commands/StubsCommand.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"4 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9\">src/Commands/the-tao.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\">src/ComponentConcerns/HandlesActions.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +13\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"13 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130\">src/Exceptions/ComponentAttributeMissingOnDynamicComponentException.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +15\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718e\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"15 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718e\">src/Exceptions/DirectlyCallingLifecycleHooksNotAllowedException.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +16\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f7a22595de5878355be07fb871c40e707c1f367a57cdd885c24646927df9ebc5\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"16 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f7a22595de5878355be07fb871c40e707c1f367a57cdd885c24646927df9ebc5\">src/HydrationMiddleware/PerformActionCalls.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f67b884dbf9b2531deef0ad1218b3eb30efe16239d84b6452f1f79cddd0fd63e\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"1 line changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f67b884dbf9b2531deef0ad1218b3eb30efe16239d84b6452f1f79cddd0fd63e\">src/Livewire.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-6ed71fdb43546c353f25666125f39d43742761b3f5567d1f6a8870164a9aec10\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-6ed71fdb43546c353f25666125f39d43742761b3f5567d1f6a8870164a9aec10\">src/LivewireBladeDirectives.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +7\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-079e88130eb18e9be475a2bf11b9d44b76078241bc58e624ab56ca1c92342a1e\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"9 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-079e88130eb18e9be475a2bf11b9d44b76078241bc58e624ab56ca1c92342a1e\">src/LivewireManager.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +37\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −7\n                                            </span>\n                                            <a href=\"#diff-4bbb62bd46c1a2661ac9c2ac1682e214a8763e81e6cbbe8bdc35217500176de8\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"44 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-4bbb62bd46c1a2661ac9c2ac1682e214a8763e81e6cbbe8bdc35217500176de8\">src/LivewireServiceProvider.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +33\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −7\n                                            </span>\n                                            <a href=\"#diff-e5cafee37c4d63fa836b940a1da983b5bb71e06ca61998ad930896e00ba2d55f\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"40 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-e5cafee37c4d63fa836b940a1da983b5bb71e06ca61998ad930896e00ba2d55f\">src/LivewireTagCompiler.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +8\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-cf0dd094bb41084407e96e32181f3738a9761d1d396f9d9adb893f25731de201\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"8 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-cf0dd094bb41084407e96e32181f3738a9761d1d396f9d9adb893f25731de201\">src/Macros/DuskBrowserMacros.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +15\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f5baf1043b8d6f58bf71d6650c4d59c40c69f4ea739229c18fd043461f022e90\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"15 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f5baf1043b8d6f58bf71d6650c4d59c40c69f4ea739229c18fd043461f022e90\">src/Macros/ViewMacros.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +4\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −3\n                                            </span>\n                                            <a href=\"#diff-beb976fc0a746bb560da4944af489a32a479c0972ab6264c1bed0910e5201524\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"7 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-beb976fc0a746bb560da4944af489a32a479c0972ab6264c1bed0910e5201524\">src/RenameMe/SupportBrowserHistory.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-eb3edf06bc629e7865339970316f2e5803d286ee0c26f802e1bda53387b5795c\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"4 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-eb3edf06bc629e7865339970316f2e5803d286ee0c26f802e1bda53387b5795c\">src/RenameMe/SupportRedirects.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +12\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −7\n                                            </span>\n                                            <a href=\"#diff-bc1a1c611931be05f4fd946bdc7dff27c6a67685f272b6e1369017a259d2b950\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"19 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-bc1a1c611931be05f4fd946bdc7dff27c6a67685f272b6e1369017a259d2b950\">src/TemporaryUploadedFile.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +19\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-465944669b04e4bdf1f802eb3c496011c32ad5ecbe33468c50022e6742a7e7c3\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"19 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-465944669b04e4bdf1f802eb3c496011c32ad5ecbe33468c50022e6742a7e7c3\">src/Testing/Concerns/MakesAssertions.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +4\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-0f97251c2146b0b3f5e9523d48777352d2b1934b401bbc3d42225c812f370ee1\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"5 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-0f97251c2146b0b3f5e9523d48777352d2b1934b401bbc3d42225c812f370ee1\">src/Testing/TestableLivewire.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +7\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −3\n                                            </span>\n                                            <a href=\"#diff-4b0d1bd219b7f12220571fc8aaf51d7d1ec35d12c16956fe75b0e3d39f571d87\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"10 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-4b0d1bd219b7f12220571fc8aaf51d7d1ec35d12c16956fe75b0e3d39f571d87\">src/WithPagination.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-983953ffcbc0c8bec1383283cc53340bf37193910e4938a9aa3adc7c9f61bcc6\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-983953ffcbc0c8bec1383283cc53340bf37193910e4938a9aa3adc7c9f61bcc6\">src/views/pagination/tailwind.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +15\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-2749359913bd12ed86bd6fc78e09cfe90600804f82991b72a1382cd96089fbbf\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"15 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-2749359913bd12ed86bd6fc78e09cfe90600804f82991b72a1382cd96089fbbf\">tests/AppLayout.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +54\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-b32e7df9cf38f64762244d5f4aead7da64dd74c7991a2f6d1059f4e09a937a9c\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"54 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-b32e7df9cf38f64762244d5f4aead7da64dd74c7991a2f6d1059f4e09a937a9c\">tests/Browser/Alpine/Emit/EmitComponent.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +24\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-e779d2c71ce4e295fb8deffc327a7a6cdcb7103e7046147c74b000e214b44332\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"24 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-e779d2c71ce4e295fb8deffc327a7a6cdcb7103e7046147c74b000e214b44332\">tests/Browser/Alpine/Emit/EmitNestedComponent.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +36\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-df59b39451e5d9671ff57f2af8289e0b6e434ba410c5d38c28369d8748fcbecd\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"36 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-df59b39451e5d9671ff57f2af8289e0b6e434ba410c5d38c28369d8748fcbecd\">tests/Browser/Alpine/Emit/Test.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +23\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-3a7e55ca4717203da1edcc0ffa11b31b266bebdad49b3adbbad6053a0012970d\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"23 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-3a7e55ca4717203da1edcc0ffa11b31b266bebdad49b3adbbad6053a0012970d\">tests/Browser/Alpine/Entangle/EntangleNestedChildComponent.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +41\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-ddb249f143ed43233315af5a7b10a37f221f5358a183efaa6beebacbf4f958d0\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"41 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-ddb249f143ed43233315af5a7b10a37f221f5358a183efaa6beebacbf4f958d0\">tests/Browser/Alpine/Entangle/EntangleNestedParentComponent.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +13\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f379af1248522b813bf3702e798e417f65c9b7ec067aabd8b5caf2bc425c013f\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"13 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f379af1248522b813bf3702e798e417f65c9b7ec067aabd8b5caf2bc425c013f\">tests/Browser/Alpine/Entangle/Test.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +24\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-76d82de3365e2ba4a0c4ec4abde027a9abb1b7d6e17ce1e5e60138d5603c3d89\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"24 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-76d82de3365e2ba4a0c4ec4abde027a9abb1b7d6e17ce1e5e60138d5603c3d89\">tests/Browser/DynamicComponentLoading/ClickableComponent.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +24\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-131f21875d2c9349b7616152e4aa3f4eb1c19e8b113b04ffc91e3e9fc731ebe8\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"24 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-131f21875d2c9349b7616152e4aa3f4eb1c19e8b113b04ffc91e3e9fc731ebe8\">tests/Browser/DynamicComponentLoading/Test.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +7\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f78f7ba2bbbaa9f73992e757e8aa856485509374f9fede268f015f8727a87c6c\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"7 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f78f7ba2bbbaa9f73992e757e8aa856485509374f9fede268f015f8727a87c6c\">tests/Browser/DynamicComponentLoading/view-clickable-component.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +7\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f57028a451e5d4fd7476b1a1abb09f7a1c6698c6999a7cfcfebbc90493ca9ae7\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"7 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f57028a451e5d4fd7476b1a1abb09f7a1c6698c6999a7cfcfebbc90493ca9ae7\">tests/Browser/DynamicComponentLoading/view-dynamic-component.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +25\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-3cb3978de97e827c53e2ddbfc5749494de7b08f4e96a8e2825fd0c11a0d72451\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"25 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-3cb3978de97e827c53e2ddbfc5749494de7b08f4e96a8e2825fd0c11a0d72451\">tests/Browser/DynamicComponentLoading/view-load-dynamic-component.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-38f2c3816014c3e194adf57550e3ffe2073f334ad5e6f9ea6ffcbf447198d985\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"1 line changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-38f2c3816014c3e194adf57550e3ffe2073f334ad5e6f9ea6ffcbf447198d985\">tests/Browser/Morphdom/Component.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +10\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-e87bcf6f124fa7417be8e8b5b28de208cc5a8875faf853f9e391ba2b3d127c2c\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"10 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-e87bcf6f124fa7417be8e8b5b28de208cc5a8875faf853f9e391ba2b3d127c2c\">tests/Browser/Morphdom/Test.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +11\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-0660a7e109903b5e6ad1f92c9445c8e8b18477894cb841b2ae7c1953fefd6aba\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"11 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-0660a7e109903b5e6ad1f92c9445c8e8b18477894cb841b2ae7c1953fefd6aba\">tests/Browser/Morphdom/view.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +18\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-00c5e4e8f577b5e06ca929195a53ab9a62619b67443fff2ab274ff20575e31c0\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"18 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-00c5e4e8f577b5e06ca929195a53ab9a62619b67443fff2ab274ff20575e31c0\">tests/Browser/PollingViewport/Component.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +25\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-14c510bbad28a60ec6b0c469016f9c35b3ada91da4a139bbf32641fafede4bf1\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"25 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-14c510bbad28a60ec6b0c469016f9c35b3ada91da4a139bbf32641fafede4bf1\">tests/Browser/PollingViewport/Test.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +11\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-a267811c956864a0f3186349c4c3386faf16d57a943bd7982a8745b613ef9ade\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"11 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-a267811c956864a0f3186349c4c3386faf16d57a943bd7982a8745b613ef9ade\">tests/Browser/PollingViewport/view.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +26\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-6afb847abcfd8e754d0cc65dba6e397407c97c9ec10f0bb97e2f3508daf45fb5\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"26 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-6afb847abcfd8e754d0cc65dba6e397407c97c9ec10f0bb97e2f3508daf45fb5\">tests/Browser/SyncHistory/ComponentWithOptionalParameter.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +13\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-1661d45358987854f978cb6ca765147ae7e723ee6143e15241e0cf9db9ff03f5\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"13 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-1661d45358987854f978cb6ca765147ae7e723ee6143e15241e0cf9db9ff03f5\">tests/Browser/SyncHistory/Test.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +16\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-3f14f69efcc9cb38862f543bb3ed42b6869aa19e7b9992d53379d082623cf067\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"16 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-3f14f69efcc9cb38862f543bb3ed42b6869aa19e7b9992d53379d082623cf067\">tests/Browser/TestCase.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-769d95623a744a6e1acd04466186a11829a5ac1e0282b93a15c17a84c41df317\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-769d95623a744a6e1acd04466186a11829a5ac1e0282b93a15c17a84c41df317\">tests/Browser/console/.gitignore</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-76e94089aa1212c1931ed72e5e78026f52a82050d6915f0ecf92ff19699516ba\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-76e94089aa1212c1931ed72e5e78026f52a82050d6915f0ecf92ff19699516ba\">tests/Browser/screenshots/.gitignore</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-692a03c6df0d8e311b919149593904bcf39627abdfff7f39c817ade9966e30de\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-692a03c6df0d8e311b919149593904bcf39627abdfff7f39c817ade9966e30de\">tests/Browser/source/.gitignore</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +12\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-8020b94d7c5d40b1cc465ead6377b1c37a31ba550dfa8ced0f4c2227c130676e\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"12 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-8020b94d7c5d40b1cc465ead6377b1c37a31ba550dfa8ced0f4c2227c130676e\">tests/Browser/views/layouts/app-for-normal-views.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −1\n                                            </span>\n                                            <a href=\"#diff-97940895b75ee49703319400faaf6531a7a816f69be4477aba548129d5201f04\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"2 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-97940895b75ee49703319400faaf6531a7a816f69be4477aba548129d5201f04\">tests/Browser/views/layouts/app.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +2\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −2\n                                            </span>\n                                            <a href=\"#diff-b7ca964ab950e00485102e75d51b1f377dd00b13ce9705c713189414cef88129\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"4 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-deleted\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-b7ca964ab950e00485102e75d51b1f377dd00b13ce9705c713189414cef88129\">tests/Unit/BladeComponentAttributeMacrosTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +94\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-e23f93930facb8bf3d9dc9c7d99c378f8823f492b9540741e8e65a7f8b6069f8\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"94 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-e23f93930facb8bf3d9dc9c7d99c378f8823f492b9540741e8e65a7f8b6069f8\">tests/Unit/CantCallLifecycleHooksDirectlyFromJSTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +64\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-ac682eb849a349ad6fbe477aa2f4c55bca7bff7693c5d5844b97127d6d0ad1b5\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"64 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-ac682eb849a349ad6fbe477aa2f4c55bca7bff7693c5d5844b97127d6d0ad1b5\">tests/Unit/ComponentLayoutTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +41\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-eb7af1a5516fb91341ecb7c64b1eda40199b1832323e2ecbb69419ab80092e3c\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"41 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-eb7af1a5516fb91341ecb7c64b1eda40199b1832323e2ecbb69419ab80092e3c\">tests/Unit/ComponentNameAndNamespaceTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +4\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-0857d6104f01c080dc5cd190e4db158854a1de6eb31dacbcad734b2176566bd5\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"4 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-0857d6104f01c080dc5cd190e4db158854a1de6eb31dacbcad734b2176566bd5\">tests/Unit/FileUploadsTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +117\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-2a332dbc5589ece86c3e02a947a318bc93995c14203a13497e3fa8622b32f02e\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"117 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-2a332dbc5589ece86c3e02a947a318bc93995c14203a13497e3fa8622b32f02e\">tests/Unit/LivewireDirectivesTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +5\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-b2fca9c196cb9e56eec5272b0270c752cdfc04e248571f6a4758315ed15564c0\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"5 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-b2fca9c196cb9e56eec5272b0270c752cdfc04e248571f6a4758315ed15564c0\">tests/Unit/MakeCommandTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +39\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-f0fdb732e10ef007596cfb298eb4cce01aa7518c024fe6f9cb9fbf1ee67baa7f\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"39 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-f0fdb732e10ef007596cfb298eb4cce01aa7518c024fe6f9cb9fbf1ee67baa7f\">tests/Unit/NestingComponentsTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-00f50ad34fa360a2e220bfd8f739635d486faec0547ad24e3ccd271f97acb5b9\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"1 line changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-00f50ad34fa360a2e220bfd8f739635d486faec0547ad24e3ccd271f97acb5b9\">tests/Unit/StubCommandTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +118\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-99d0bcb5584c87aa80115dbe133d510eb6ee7c042279f02c0c7c0e2ffac15032\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"118 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-99d0bcb5584c87aa80115dbe133d510eb6ee7c042279f02c0c7c0e2ffac15032\">tests/Unit/TagCompilerTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +17\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-a9a3c94c5f3546a2699732c0df318d75213d605c7951d3be7215596c8a6f94f2\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"17 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"modified\" class=\"octicon octicon-diff-modified\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M2.75 2.5h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zM13.25 1H2.75A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1zM8 10a2 2 0 100-4 2 2 0 000 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-a9a3c94c5f3546a2699732c0df318d75213d605c7951d3be7215596c8a6f94f2\">tests/Unit/TestableLivewireCanAssertStatusCodesTest.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +7\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-61186d8819c46a2594fd7a554ecac7145d0b8be8a2daabf418316cf1c489bd18\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"7 lines changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-added\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-61186d8819c46a2594fd7a554ecac7145d0b8be8a2daabf418316cf1c489bd18\">tests/Unit/views/layouts/app-from-class-component.blade.php</a>\n                                    </li>\n                                    <li>\n                                        <span class=\"diffstat float-right\">\n                                            <span class=\"color-text-success\">\n                                                +1\n                                            </span>\n                                            <span class=\"color-text-danger\">\n                                                −0\n                                            </span>\n                                            <a href=\"#diff-0b1573e34623894db6b887f1b1410b19c3978a55ce91762f2b115bf646e6817b\"\n                                                class=\"tooltipped tooltipped-s\" aria-label=\"1 line changed\">\n                                                <span class=\"diffstat-block-added\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span><span\n                                                    class=\"diffstat-block-neutral\"></span>\n                                            </a>\n                                        </span>\n                                        <svg title=\"added\" class=\"octicon octicon-diff-added\" viewBox=\"0 0 16 16\"\n                                            version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\"\n                                                d=\"M13.25 2.5H2.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25V2.75C1 1.784 1.784 1 2.75 1zM8 4a.75.75 0 01.75.75v2.5h2.5a.75.75 0 010 1.5h-2.5v2.5a.75.75 0 01-1.5 0v-2.5h-2.5a.75.75 0 010-1.5h2.5v-2.5A.75.75 0 018 4z\">\n                                            </path>\n                                        </svg>\n                                        <a\n                                            href=\"#diff-0b1573e34623894db6b887f1b1410b19c3978a55ce91762f2b115bf646e6817b\">tests/Unit/views/layouts/data-test.blade.php</a>\n                                    </li>\n                                </ol>\n                            </div>\n\n\n                            <div id=\"files\" class=\"diff-view  js-diff-container\">\n\n                                <div class=\"js-diff-progressive-container\">\n\n                                    <div id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n              soft-wrap\n              file-type-prose\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".md\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"README.md\" data-short-path=\"b335630\"\n                                            data-anchor=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\"\n                                            data-file-type=\".md\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/a579d0f6acd4ed6f47c9f044a1ccd2bec050a74c?diff=split&amp;direction=full&amp;mode=100644&amp;path=README.md\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"3 changes: 2 additions &amp; 1 deletion\">3 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"README.md\" class=\"Link--primary\"\n                                                    href=\"#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\">README.md</a>\n\n                                                <clipboard-copy value=\"README.md\" data-copy-feedback=\"Copied!\"\n                                                    aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n                                                    <span class=\"BtnGroup flex-auto min-width-0\">\n                                                        <!-- '\"` -->\n                                                        <!-- </textarea></xmp> -->\n                                                        </option>\n                                                        </form>\n                                                        <form class=\"BtnGroup-parent js-prose-diff-toggle-form\"\n                                                            action=\"/livewire/livewire/diffs/0?sha1=8055af7730938cd607616fde122825ed960a9b71&amp;sha2=33101c83b75728651b9e668a4559f97def7c9138\"\n                                                            accept-charset=\"UTF-8\" method=\"get\"> <button\n                                                                class=\"btn btn-sm BtnGroup-item tooltipped tooltipped-w source js-source selected\"\n                                                                aria-current=\"true\" aria-label=\"Display the source diff\"\n                                                                type=\"submit\" data-disable-with>\n                                                                <svg class=\"octicon octicon-code\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </button>\n                                                        </form> <!-- '\"` -->\n                                                        <!-- </textarea></xmp> -->\n                                                        </option>\n                                                        </form>\n                                                        <form class=\"BtnGroup-parent js-prose-diff-toggle-form\"\n                                                            action=\"/livewire/livewire/diffs/0?sha1=8055af7730938cd607616fde122825ed960a9b71&amp;sha2=33101c83b75728651b9e668a4559f97def7c9138&amp;short_path=b335630\"\n                                                            accept-charset=\"UTF-8\" method=\"get\"> <button\n                                                                class=\"btn btn-sm BtnGroup-item tooltipped tooltipped-w rendered js-rendered\"\n                                                                aria-label=\"Display the rich diff\" type=\"submit\"\n                                                                data-disable-with>\n                                                                <svg class=\"octicon octicon-file\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </button>\n                                                        </form>\n                                                    </span>\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/README.md\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=README.md\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/a579d0f6acd4ed6f47c9f044a1ccd2bec050a74c?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=10&amp;left_hunk_size=7&amp;mode=100644&amp;path=README.md&amp;right=10&amp;right_hunk_size=7\"\n                                                                data-left-range=\"1-9\" data-right-range=\"1-9\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -10,7 +10,7 @@ Awesome Livewire stuff here:\n                                                            https://github.com/imliam/awesome-livewire</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"9a4ed99d1356fd65dc08fe78e03726d0a86a714a0fb94ecd8f0707e3dedaeec9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L10\"\n                                                            data-line-number=\"10\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R10\"\n                                                            data-line-number=\"10\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"9a4ed99d1356fd65dc08fe78e03726d0a86a714a0fb94ecd8f0707e3dedaeec9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L11\"\n                                                            data-line-number=\"11\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">All contributions are welcomed!\n                                                                (but please submit an issue to make sure the PR is\n                                                                warranted first)</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R11\"\n                                                            data-line-number=\"11\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">All contributions are welcomed!\n                                                                (but please submit an issue to make sure the PR is\n                                                                warranted first)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"9a4ed99d1356fd65dc08fe78e03726d0a86a714a0fb94ecd8f0707e3dedaeec9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L12\"\n                                                            data-line-number=\"12\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R12\"\n                                                            data-line-number=\"12\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"9a4ed99d1356fd65dc08fe78e03726d0a86a714a0fb94ecd8f0707e3dedaeec9\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\">Open GitHub issues for all bugs.\n                                                                Ideas and questions belong <span class=\"x x-first\">on\n                                                                    the [</span><span\n                                                                    class=\"pl-e x x-last\">forum</span>](https://<span\n                                                                    class=\"x x-first x-last\">forum.laravel-livewire.</span>com)\n                                                                or [<span class=\"pl-e\">Discord\n                                                                    server</span>](https://discord.gg/livewire).</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\">Open GitHub issues for all bugs.\n                                                                Ideas and questions belong <span class=\"x x-first\">in\n                                                                    [</span><span\n                                                                    class=\"pl-e x x-last\">Discussions</span>](https://<span\n                                                                    class=\"x x-first x-last\">github.</span>com<span\n                                                                    class=\"x x-first x-last\">/livewire/livewire/discussions</span>)\n                                                                or [<span class=\"pl-e\">Discord\n                                                                    server</span>](https://discord.gg/livewire).</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"9a4ed99d1356fd65dc08fe78e03726d0a86a714a0fb94ecd8f0707e3dedaeec9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"9a4ed99d1356fd65dc08fe78e03726d0a86a714a0fb94ecd8f0707e3dedaeec9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">Contribute to the docs here:\n                                                                https://github.com/livewire/docs</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">Contribute to the docs here:\n                                                                https://github.com/livewire/docs</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"9a4ed99d1356fd65dc08fe78e03726d0a86a714a0fb94ecd8f0707e3dedaeec9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"9\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand All\" aria-label=\"Expand All\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/a579d0f6acd4ed6f47c9f044a1ccd2bec050a74c?diff=split&amp;in_wiki_context=&amp;last_left=16&amp;last_right=16&amp;left=28&amp;left_hunk_size=6&amp;mode=100644&amp;path=README.md&amp;right=28&amp;right_hunk_size=7\"\n                                                                data-left-range=\"17-21\" data-right-range=\"17-21\">\n                                                                <svg class=\"octicon octicon-unfold\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -28,6 +28,7 @@ Livewire uses semantic\n                                                            versioning and will use the following release schedule st\n                                                        </td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"72ebdf13f1f4e1a50b11c0173a1ed216f0b4bb3615ec8db20d5a8b38c852d905\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L28\"\n                                                            data-line-number=\"28\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-v\">*</span> Refine\n                                                                the &quot;asset_url&quot; config. Potentially change to\n                                                                &quot;app_url&quot;\n                                                                (https://github.com/livewire/livewire/pull/1693)</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R28\"\n                                                            data-line-number=\"28\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-v\">*</span> Refine\n                                                                the &quot;asset_url&quot; config. Potentially change to\n                                                                &quot;app_url&quot;\n                                                                (https://github.com/livewire/livewire/pull/1693)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"72ebdf13f1f4e1a50b11c0173a1ed216f0b4bb3615ec8db20d5a8b38c852d905\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L29\"\n                                                            data-line-number=\"29\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-v\">*</span> Support\n                                                                multiple pagination\n                                                                (https://github.com/livewire/livewire/pull/1997)</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R29\"\n                                                            data-line-number=\"29\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-v\">*</span> Support\n                                                                multiple pagination\n                                                                (https://github.com/livewire/livewire/pull/1997)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"72ebdf13f1f4e1a50b11c0173a1ed216f0b4bb3615ec8db20d5a8b38c852d905\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L30\"\n                                                            data-line-number=\"30\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-v\">*</span> A\n                                                                CSP-safe mode for Livewire\n                                                                (https://github.com/livewire/livewire/pull/2485#issuecomment-784355989)</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R30\"\n                                                            data-line-number=\"30\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-v\">*</span> A\n                                                                CSP-safe mode for Livewire\n                                                                (https://github.com/livewire/livewire/pull/2485#issuecomment-784355989)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"72ebdf13f1f4e1a50b11c0173a1ed216f0b4bb3615ec8db20d5a8b38c852d905\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R31\"\n                                                            data-line-number=\"31\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=\"pl-v\">*</span> Add\n                                                                <span class=\"pl-c1\">`$wire.errors()`</span> type\n                                                                deal</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"72ebdf13f1f4e1a50b11c0173a1ed216f0b4bb3615ec8db20d5a8b38c852d905\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L31\"\n                                                            data-line-number=\"31\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R32\"\n                                                            data-line-number=\"32\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"72ebdf13f1f4e1a50b11c0173a1ed216f0b4bb3615ec8db20d5a8b38c852d905\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L32\"\n                                                            data-line-number=\"32\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-mh\"><span\n                                                                        class=\"pl-mh\">##</span><span class=\"pl-mh\">\n                                                                    </span>Contributors ✨</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R33\"\n                                                            data-line-number=\"33\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=\"pl-mh\"><span\n                                                                        class=\"pl-mh\">##</span><span class=\"pl-mh\">\n                                                                    </span>Contributors ✨</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"72ebdf13f1f4e1a50b11c0173a1ed216f0b4bb3615ec8db20d5a8b38c852d905\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L33\"\n                                                            data-line-number=\"33\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R34\"\n                                                            data-line-number=\"34\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/a579d0f6acd4ed6f47c9f044a1ccd2bec050a74c?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=33&amp;last_right=34&amp;left=147&amp;left_hunk_size=&amp;mode=100644&amp;path=README.md&amp;right=147&amp;right_hunk_size=\"\n                                                                data-left-range=\"34-146\" data-right-range=\"35-146\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"config/livewire.php\" data-short-path=\"4a31ab0\"\n                                            data-anchor=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/e83ec55321901bd9395f35f59525f12a68f6915b?diff=split&amp;direction=full&amp;mode=100644&amp;path=config%2Flivewire.php\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"2 changes: 1 addition &amp; 1 deletion\">2 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"config/livewire.php\" class=\"Link--primary\"\n                                                    href=\"#diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\">config/livewire.php</a>\n\n                                                <clipboard-copy value=\"config/livewire.php\" data-copy-feedback=\"Copied!\"\n                                                    aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/config/livewire.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=config%2Flivewire.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/e83ec55321901bd9395f35f59525f12a68f6915b?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=38&amp;left_hunk_size=7&amp;mode=100644&amp;path=config%2Flivewire.php&amp;right=38&amp;right_hunk_size=7\"\n                                                                data-left-range=\"1-37\" data-right-range=\"1-37\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -38,7 +38,7 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"a7cf6e941a36ad49d5c94ad7fe7eda3eaee38d9e2d04383baafeedf0ca824bcc\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeL38\"\n                                                            data-line-number=\"38\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-c> | the view\n                                                                    returned by SomeComponent will be wrapped in\n                                                                    &quot;layouts.app&quot;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeR38\"\n                                                            data-line-number=\"38\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-c> | the view\n                                                                    returned by SomeComponent will be wrapped in\n                                                                    &quot;layouts.app&quot;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"a7cf6e941a36ad49d5c94ad7fe7eda3eaee38d9e2d04383baafeedf0ca824bcc\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeL39\"\n                                                            data-line-number=\"39\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-c> |</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeR39\"\n                                                            data-line-number=\"39\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-c> |</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"a7cf6e941a36ad49d5c94ad7fe7eda3eaee38d9e2d04383baafeedf0ca824bcc\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeL40\"\n                                                            data-line-number=\"40\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-c> */</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeR40\"\n                                                            data-line-number=\"40\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-c> */</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"a7cf6e941a36ad49d5c94ad7fe7eda3eaee38d9e2d04383baafeedf0ca824bcc\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeL41\"\n                                                            data-line-number=\"41\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><span class=\"x x-first x-last\">\n                                                                </span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeR41\"\n                                                            data-line-number=\"41\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"a7cf6e941a36ad49d5c94ad7fe7eda3eaee38d9e2d04383baafeedf0ca824bcc\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeL42\"\n                                                            data-line-number=\"42\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;layout&#39;</span> =&gt; <span\n                                                                    class=pl-s>&#39;layouts.app&#39;</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeR42\"\n                                                            data-line-number=\"42\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;layout&#39;</span> =&gt; <span\n                                                                    class=pl-s>&#39;layouts.app&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"a7cf6e941a36ad49d5c94ad7fe7eda3eaee38d9e2d04383baafeedf0ca824bcc\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeL43\"\n                                                            data-line-number=\"43\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeR43\"\n                                                            data-line-number=\"43\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"a7cf6e941a36ad49d5c94ad7fe7eda3eaee38d9e2d04383baafeedf0ca824bcc\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeL44\"\n                                                            data-line-number=\"44\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>/*</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dedeR44\"\n                                                            data-line-number=\"44\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>/*</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-4a31ab0b161a5a4941cf1ee470cdd9f9cb91ce0123872a9a16796d918343dede\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/e83ec55321901bd9395f35f59525f12a68f6915b?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=44&amp;last_right=44&amp;left=114&amp;left_hunk_size=&amp;mode=100644&amp;path=config%2Flivewire.php&amp;right=114&amp;right_hunk_size=\"\n                                                                data-left-range=\"45-113\" data-right-range=\"45-113\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-71be7e35f51d605a8814367f54b7ac1ddf101170c889f2d2befe0d4cd7f60f9e\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n             hide-file-notes-toggle\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"dist/livewire.js\" data-short-path=\"71be7e3\"\n                                            data-anchor=\"diff-71be7e35f51d605a8814367f54b7ac1ddf101170c889f2d2befe0d4cd7f60f9e\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"4 changes: 2 additions &amp; 2 deletions\">4 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"dist/livewire.js\" class=\"Link--primary\"\n                                                    href=\"#diff-71be7e35f51d605a8814367f54b7ac1ddf101170c889f2d2befe0d4cd7f60f9e\">dist/livewire.js</a>\n\n                                                <clipboard-copy value=\"dist/livewire.js\" data-copy-feedback=\"Copied!\"\n                                                    aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/dist/livewire.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=dist%2Flivewire.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"js-diff-load-container\">\n                                                <include-fragment\n                                                    data-fragment-url=\"/livewire/livewire/diffs/2?sha1=8055af7730938cd607616fde122825ed960a9b71&amp;sha2=33101c83b75728651b9e668a4559f97def7c9138\"\n                                                    class=\"js-diff-entry-loader px-3 py-4 position-relative\">\n                                                    <div>\n                                                    </div>\n\n                                                    <div data-hide-on-error>\n                                                        <svg aria-hidden=\"true\" class=\"width-full\"\n                                                            style=\"max-width: 340px;\" height=\"84\" viewBox=\"0 0 340 84\"\n                                                            xmlns=\"http://www.w3.org/2000/svg\" class=\"d-block\">\n                                                            <path class=\"js-diff-placeholder\"\n                                                                clip-path=\"url(#diff-placeholder)\" d=\"M0 0h340v84H0z\"\n                                                                style=\"fill: var(--color-bg-tertiary)\"\n                                                                fill-rule=\"evenodd\"></path>\n                                                        </svg>\n\n                                                        <button type=\"button\" class=\"load-diff-button btn-link width-full\n                  position-absolute top-0 left-0 height-full f4 no-underline js-diff-load\" data-disable-with=\"Loading…\"\n                                                            aria-describedby=\"hidden-diff-reason-71be7e35f51d605a8814367f54b7ac1ddf101170c889f2d2befe0d4cd7f60f9e\">\n                                                            <div class=\"text-bold f4 mb-3 js-button-text\">Load diff\n                                                            </div>\n                                                        </button>\n                                                        <div\n                                                            class=\"d-flex flex-items-center flex-justify-center position-absolute top-0 left-0 height-full width-full\">\n                                                            <p id=\"hidden-diff-reason-71be7e35f51d605a8814367f54b7ac1ddf101170c889f2d2befe0d4cd7f60f9e\"\n                                                                class=\"hidden-diff-reason color-text-tertiary f6 mt-4 mb-0 text-center\">\n                                                                Large diffs are not rendered by default.\n                                                            </p>\n                                                        </div>\n                                                    </div>\n\n                                                    <div class=\"load-diff-retry text-center p-1\" data-show-on-error\n                                                        hidden>\n                                                        <svg class=\"octicon octicon-alert color-text-danger mr-1\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path fill-rule=\"evenodd\"\n                                                                d=\"M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z\">\n                                                            </path>\n                                                        </svg>\n                                                        Oops, something went wrong.\n                                                        <button type=\"button\" class=\"btn-link\"\n                                                            data-retry-button>Retry</button>\n                                                    </div>\n                                                </include-fragment>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-f2b5f90a87aa8bf7534eee0391f57822445d72dec4c8f40b5c8fe511671db76c\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n             hide-file-notes-toggle\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".map\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"dist/livewire.js.map\" data-short-path=\"f2b5f90\"\n                                            data-anchor=\"diff-f2b5f90a87aa8bf7534eee0391f57822445d72dec4c8f40b5c8fe511671db76c\"\n                                            data-file-type=\".map\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"2 changes: 1 addition &amp; 1 deletion\">2 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"dist/livewire.js.map\" class=\"Link--primary\"\n                                                    href=\"#diff-f2b5f90a87aa8bf7534eee0391f57822445d72dec4c8f40b5c8fe511671db76c\">dist/livewire.js.map</a>\n\n                                                <clipboard-copy value=\"dist/livewire.js.map\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/dist/livewire.js.map\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=dist%2Flivewire.js.map\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"js-diff-load-container\">\n                                                <include-fragment\n                                                    data-fragment-url=\"/livewire/livewire/diffs/3?sha1=8055af7730938cd607616fde122825ed960a9b71&amp;sha2=33101c83b75728651b9e668a4559f97def7c9138\"\n                                                    class=\"js-diff-entry-loader px-3 py-4 position-relative\">\n                                                    <div>\n                                                    </div>\n\n                                                    <div data-hide-on-error>\n                                                        <svg aria-hidden=\"true\" class=\"width-full\"\n                                                            style=\"max-width: 340px;\" height=\"84\" viewBox=\"0 0 340 84\"\n                                                            xmlns=\"http://www.w3.org/2000/svg\" class=\"d-block\">\n                                                            <path class=\"js-diff-placeholder\"\n                                                                clip-path=\"url(#diff-placeholder)\" d=\"M0 0h340v84H0z\"\n                                                                style=\"fill: var(--color-bg-tertiary)\"\n                                                                fill-rule=\"evenodd\"></path>\n                                                        </svg>\n\n                                                        <button type=\"button\" class=\"load-diff-button btn-link width-full\n                  position-absolute top-0 left-0 height-full f4 no-underline js-diff-load\" data-disable-with=\"Loading…\"\n                                                            aria-describedby=\"hidden-diff-reason-f2b5f90a87aa8bf7534eee0391f57822445d72dec4c8f40b5c8fe511671db76c\">\n                                                            <div class=\"text-bold f4 mb-3 js-button-text\">Load diff\n                                                            </div>\n                                                        </button>\n                                                        <div\n                                                            class=\"d-flex flex-items-center flex-justify-center position-absolute top-0 left-0 height-full width-full\">\n                                                            <p id=\"hidden-diff-reason-f2b5f90a87aa8bf7534eee0391f57822445d72dec4c8f40b5c8fe511671db76c\"\n                                                                class=\"hidden-diff-reason color-text-tertiary f6 mt-4 mb-0 text-center\">\n                                                                Large diffs are not rendered by default.\n                                                            </p>\n                                                        </div>\n                                                    </div>\n\n                                                    <div class=\"load-diff-retry text-center p-1\" data-show-on-error\n                                                        hidden>\n                                                        <svg class=\"octicon octicon-alert color-text-danger mr-1\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path fill-rule=\"evenodd\"\n                                                                d=\"M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z\">\n                                                            </path>\n                                                        </svg>\n                                                        Oops, something went wrong.\n                                                        <button type=\"button\" class=\"btn-link\"\n                                                            data-retry-button>Retry</button>\n                                                    </div>\n                                                </include-fragment>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".json\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"dist/manifest.json\" data-short-path=\"3b0435c\"\n                                            data-anchor=\"diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466\"\n                                            data-file-type=\".json\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"2 changes: 1 addition &amp; 1 deletion\">2 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"dist/manifest.json\" class=\"Link--primary\"\n                                                    href=\"#diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466\">dist/manifest.json</a>\n\n                                                <clipboard-copy value=\"dist/manifest.json\" data-copy-feedback=\"Copied!\"\n                                                    aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/dist/manifest.json\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=dist%2Fmanifest.json\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr data-position=\"0\">\n                                                        <td id=\"diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466HL1\"\n                                                            class=\"blob-num blob-num-hunk\" data-line-number=\"...\"></td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -1 +1 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"c728f3a1d80a5f979b6fdb3d52bdf3443778cd1dcce7edc45957c60225413db8\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466L1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\">{<span class=\"pl-s\"><span\n                                                                        class=\"pl-pds\">\"</span>/livewire.js<span\n                                                                        class=\"pl-pds\">\"</span></span>:<span\n                                                                    class=\"pl-s\"><span\n                                                                        class=\"pl-pds\">\"</span>/livewire.js?id=<span\n                                                                        class=\"x x-first x-last\">25f025805c3c370f7e87</span><span\n                                                                        class=\"pl-pds\">\"</span></span>}</span>\n\n                                                            <span class=\"no-nl-marker tooltipped tooltipped-n\"\n                                                                aria-label=\"No newline at end of file\">\n                                                                <svg class=\"octicon octicon-no-entry\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M2.5 8a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM8 1a7 7 0 100 14A7 7 0 008 1zm3.25 7.75a.75.75 0 000-1.5h-6.5a.75.75 0 000 1.5h6.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </span>\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-3b0435c9efe073e8ab8263bbad459657ba8d6826e4a2e5079b67438cb535a466R1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\">{<span class=\"pl-s\"><span\n                                                                        class=\"pl-pds\">\"</span>/livewire.js<span\n                                                                        class=\"pl-pds\">\"</span></span>:<span\n                                                                    class=\"pl-s\"><span\n                                                                        class=\"pl-pds\">\"</span>/livewire.js?id=<span\n                                                                        class=\"x x-first x-last\">54d078b2ce39327a1702</span><span\n                                                                        class=\"pl-pds\">\"</span></span>}</span>\n\n                                                            <span class=\"no-nl-marker tooltipped tooltipped-n\"\n                                                                aria-label=\"No newline at end of file\">\n                                                                <svg class=\"octicon octicon-no-entry\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path fill-rule=\"evenodd\"\n                                                                        d=\"M2.5 8a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM8 1a7 7 0 100 14A7 7 0 008 1zm3.25 7.75a.75.75 0 000-1.5h-6.5a.75.75 0 000 1.5h6.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </span>\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"js/component/Polling.js\" data-short-path=\"ceed65e\"\n                                            data-anchor=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/96ddaf336369173aaddcd73d571718e73c0e0e46?diff=split&amp;direction=full&amp;mode=100644&amp;path=js%2Fcomponent%2FPolling.js\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"19 changes: 18 additions &amp; 1 deletion\">19 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"js/component/Polling.js\" class=\"Link--primary\"\n                                                    href=\"#diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\">js/component/Polling.js</a>\n\n                                                <clipboard-copy value=\"js/component/Polling.js\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/js/component/Polling.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=js%2Fcomponent%2FPolling.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr data-position=\"0\">\n                                                        <td id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3HL1\"\n                                                            class=\"blob-num blob-num-hunk\" data-line-number=\"...\"></td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -1,5 +1,5 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"ae122b57fb819d991abab92d03f21361886e494c65b777aacc332c50fc1840fb\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>import</span>\n                                                                <span class=pl-v>MethodAction</span> <span\n                                                                    class=pl-k>from</span> <span\n                                                                    class=pl-s>&#39;@/action/method&#39;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>import</span>\n                                                                <span class=pl-v>MethodAction</span> <span\n                                                                    class=pl-k>from</span> <span\n                                                                    class=pl-s>&#39;@/action/method&#39;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"ae122b57fb819d991abab92d03f21361886e494c65b777aacc332c50fc1840fb\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L2\"\n                                                            data-line-number=\"2\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><span class=\"pl-k\">import</span>\n                                                                <span class=\"pl-kos\">{</span> <span\n                                                                    class=\"pl-s1\">wireDirectives</span><span\n                                                                    class=\"pl-kos\">}</span> <span\n                                                                    class=\"pl-k\">from</span> <span\n                                                                    class=\"pl-s\">'@/util'</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R2\"\n                                                            data-line-number=\"2\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=\"pl-k\">import</span>\n                                                                <span class=\"pl-kos\">{</span> <span\n                                                                    class=\"pl-s1\">wireDirectives</span><span\n                                                                    class=\"x x-first x-last\"> </span><span\n                                                                    class=\"pl-kos\">}</span> <span\n                                                                    class=\"pl-k\">from</span> <span\n                                                                    class=\"pl-s\">'@/util'</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"ae122b57fb819d991abab92d03f21361886e494c65b777aacc332c50fc1840fb\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L3\"\n                                                            data-line-number=\"3\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>import</span>\n                                                                <span class=pl-s1>store</span> <span\n                                                                    class=pl-k>from</span> <span\n                                                                    class=pl-s>&#39;@/Store&#39;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R3\"\n                                                            data-line-number=\"3\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>import</span>\n                                                                <span class=pl-s1>store</span> <span\n                                                                    class=pl-k>from</span> <span\n                                                                    class=pl-s>&#39;@/Store&#39;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"ae122b57fb819d991abab92d03f21361886e494c65b777aacc332c50fc1840fb\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L4\"\n                                                            data-line-number=\"4\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R4\"\n                                                            data-line-number=\"4\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"ae122b57fb819d991abab92d03f21361886e494c65b777aacc332c50fc1840fb\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L5\"\n                                                            data-line-number=\"5\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>export</span>\n                                                                <span class=pl-k>default</span> <span\n                                                                    class=pl-k>function</span> <span\n                                                                    class=pl-kos>(</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R5\"\n                                                            data-line-number=\"5\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>export</span>\n                                                                <span class=pl-k>default</span> <span\n                                                                    class=pl-k>function</span> <span\n                                                                    class=pl-kos>(</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"7\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\"\n                                                                class=\"js-expand directional-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/96ddaf336369173aaddcd73d571718e73c0e0e46?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=5&amp;last_right=5&amp;left=56&amp;left_hunk_size=9&amp;mode=100644&amp;path=js%2Fcomponent%2FPolling.js&amp;right=56&amp;right_hunk_size=26\"\n                                                                data-left-range=\"6-29\" data-right-range=\"6-29\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                            <a href=\"#diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3\"\n                                                                class=\"js-expand directional-expander\" title=\"Expand Up\"\n                                                                aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/96ddaf336369173aaddcd73d571718e73c0e0e46?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=5&amp;last_right=5&amp;left=56&amp;left_hunk_size=9&amp;mode=100644&amp;path=js%2Fcomponent%2FPolling.js&amp;right=56&amp;right_hunk_size=26\"\n                                                                data-left-range=\"30-55\" data-right-range=\"30-55\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -56,9 +56,26 @@ function\n                                                            fireActionOnInterval(node, component) {</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L56\"\n                                                            data-line-number=\"56\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-v>Math</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>random</span><span\n                                                                    class=pl-kos>(</span><span class=pl-kos>)</span>\n                                                                <span class=pl-c1>&lt;</span> <span\n                                                                    class=pl-c1>.95</span><span class=pl-kos>)</span>\n                                                                <span class=pl-k>return</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R56\"\n                                                            data-line-number=\"56\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-v>Math</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>random</span><span\n                                                                    class=pl-kos>(</span><span class=pl-kos>)</span>\n                                                                <span class=pl-c1>&lt;</span> <span\n                                                                    class=pl-c1>.95</span><span class=pl-kos>)</span>\n                                                                <span class=pl-k>return</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L57\"\n                                                            data-line-number=\"57\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R57\"\n                                                            data-line-number=\"57\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L58\"\n                                                            data-line-number=\"58\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R58\"\n                                                            data-line-number=\"58\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R59\"\n                                                            data-line-number=\"59\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-c>// Only poll\n                                                                    visible elements. Visible elements are elements\n                                                                    that</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R60\"\n                                                            data-line-number=\"60\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-c>// are visible in\n                                                                    the current viewport.</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R61\"\n                                                            data-line-number=\"61\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>directive</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>modifiers</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>includes</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s>&#39;visible&#39;</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-c1>!</span> <span\n                                                                    class=pl-en>inViewport</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>directive</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>el</span><span\n                                                                    class=pl-kos>)</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R62\"\n                                                            data-line-number=\"62\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-k>return</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R63\"\n                                                            data-line-number=\"63\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R64\"\n                                                            data-line-number=\"64\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L59\"\n                                                            data-line-number=\"59\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// Don&#39;t poll\n                                                                    if livewire is offline as well.</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R65\"\n                                                            data-line-number=\"65\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// Don&#39;t poll\n                                                                    if livewire is offline as well.</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L60\"\n                                                            data-line-number=\"60\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>store</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>livewireIsOffline</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-k>return</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R66\"\n                                                            data-line-number=\"66\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>store</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>livewireIsOffline</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-k>return</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L61\"\n                                                            data-line-number=\"61\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R67\"\n                                                            data-line-number=\"67\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L62\"\n                                                            data-line-number=\"62\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>addAction</span><span\n                                                                    class=pl-kos>(</span><span class=pl-k>new</span>\n                                                                <span class=pl-v>MethodAction</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>method</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>directive</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>params</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>node</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R68\"\n                                                            data-line-number=\"68\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>addAction</span><span\n                                                                    class=pl-kos>(</span><span class=pl-k>new</span>\n                                                                <span class=pl-v>MethodAction</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>method</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>directive</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>params</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>node</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L63\"\n                                                            data-line-number=\"63\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>interval</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R69\"\n                                                            data-line-number=\"69\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>interval</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3L64\"\n                                                            data-line-number=\"64\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R70\"\n                                                            data-line-number=\"70\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R71\"\n                                                            data-line-number=\"71\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R72\"\n                                                            data-line-number=\"72\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=pl-k>function</span>\n                                                                <span class=pl-en>inViewport</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>el</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R73\"\n                                                            data-line-number=\"73\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>var</span> <span\n                                                                    class=pl-s1>bounding</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>el</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>getBoundingClientRect</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R74\"\n                                                            data-line-number=\"74\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R75\"\n                                                            data-line-number=\"75\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>return</span>\n                                                                <span class=pl-kos>(</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R76\"\n                                                            data-line-number=\"76\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s1>bounding</span><span\n                                                                    class=pl-kos>.</span><span class=pl-c1>top</span>\n                                                                <span class=pl-c1>&lt;</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>innerHeight</span> <span\n                                                                    class=pl-c1>||</span> <span\n                                                                    class=pl-smi>document</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>documentElement</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>clientHeight</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R77\"\n                                                            data-line-number=\"77\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s1>bounding</span><span\n                                                                    class=pl-kos>.</span><span class=pl-c1>left</span>\n                                                                <span class=pl-c1>&lt;</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>innerWidth</span> <span\n                                                                    class=pl-c1>||</span> <span\n                                                                    class=pl-smi>document</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>documentElement</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>clientWidth</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R78\"\n                                                            data-line-number=\"78\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s1>bounding</span><span\n                                                                    class=pl-kos>.</span><span class=pl-c1>bottom</span>\n                                                                <span class=pl-c1>&gt;</span> <span class=pl-c1>0</span>\n                                                                <span class=pl-c1>&amp;&amp;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R79\"\n                                                            data-line-number=\"79\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s1>bounding</span><span\n                                                                    class=pl-kos>.</span><span class=pl-c1>right</span>\n                                                                <span class=pl-c1>&gt;</span> <span\n                                                                    class=pl-c1>0</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R80\"\n                                                            data-line-number=\"80\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"557cb495972c21b87d762151ab5d67160ffc9e9c57a29c4b3369145f2c5b7f63\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-ceed65e79fe474e64ddbd6363a7a083ef8e5147326c3adc7ed1acd46236c18e3R81\"\n                                                            data-line-number=\"81\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"js/component/SupportAlpine.js\" data-short-path=\"7ce6ac6\"\n                                            data-anchor=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/27d35a3146d77a6f40fdc5b94dc9918a8bbbb49d?diff=split&amp;direction=full&amp;mode=100644&amp;path=js%2Fcomponent%2FSupportAlpine.js\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"11 changes: 10 additions &amp; 1 deletion\">11 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"js/component/SupportAlpine.js\" class=\"Link--primary\"\n                                                    href=\"#diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\">js/component/SupportAlpine.js</a>\n\n                                                <clipboard-copy value=\"js/component/SupportAlpine.js\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/js/component/SupportAlpine.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=js%2Fcomponent%2FSupportAlpine.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/27d35a3146d77a6f40fdc5b94dc9918a8bbbb49d?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=64&amp;left_hunk_size=10&amp;mode=100644&amp;path=js%2Fcomponent%2FSupportAlpine.js&amp;right=64&amp;right_hunk_size=19\"\n                                                                data-left-range=\"1-63\" data-right-range=\"1-63\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -64,10 +64,19 @@ function supportEntangle() {\n                                                        </td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L64\"\n                                                            data-line-number=\"64\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>isDeferred</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>value</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>isDeferred</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R64\"\n                                                            data-line-number=\"64\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>isDeferred</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>value</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>isDeferred</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L65\"\n                                                            data-line-number=\"65\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>livewireComponent</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>livewireEl</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>__livewire</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R65\"\n                                                            data-line-number=\"65\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>livewireComponent</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>livewireEl</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>__livewire</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L66\"\n                                                            data-line-number=\"66\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R66\"\n                                                            data-line-number=\"66\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R67\"\n                                                            data-line-number=\"67\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>livewirePropertyValue</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>livewireEl</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>__livewire</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>get</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>livewireProperty</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R68\"\n                                                            data-line-number=\"68\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R69\"\n                                                            data-line-number=\"69\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-c>// Check to see\n                                                                    if the Livewire property exists and if not log a\n                                                                    console error</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R70\"\n                                                            data-line-number=\"70\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-c>// and return so\n                                                                    everything else keeps running.</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R71\"\n                                                            data-line-number=\"71\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span class=pl-k>typeof</span>\n                                                                <span class=pl-s1>livewirePropertyValue</span> <span\n                                                                    class=pl-c1>===</span> <span\n                                                                    class=pl-s>&#39;undefined&#39;</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R72\"\n                                                            data-line-number=\"72\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-smi>console</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>error</span><span\n                                                                    class=pl-kos>(</span><span class=pl-s>`Livewire\n                                                                    Entangle Error: Livewire property &#39;<span\n                                                                        class=pl-s1><span class=pl-kos>${</span><span\n                                                                            class=pl-s1>livewireProperty</span><span\n                                                                            class=pl-kos>}</span></span>&#39; cannot be\n                                                                    found`</span><span class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R73\"\n                                                            data-line-number=\"73\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-k>return</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R74\"\n                                                            data-line-number=\"74\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R75\"\n                                                            data-line-number=\"75\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L67\"\n                                                            data-line-number=\"67\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// Let&#39;s set\n                                                                    the initial value of the Alpine prop to the Livewire\n                                                                    prop&#39;s value.</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R76\"\n                                                            data-line-number=\"76\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// Let&#39;s set\n                                                                    the initial value of the Alpine prop to the Livewire\n                                                                    prop&#39;s value.</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L68\"\n                                                            data-line-number=\"68\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>unobservedData</span><span\n                                                                    class=pl-kos>[</span><span\n                                                                    class=pl-s1>key</span><span\n                                                                    class=pl-kos>]</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R77\"\n                                                            data-line-number=\"77\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>unobservedData</span><span\n                                                                    class=pl-kos>[</span><span\n                                                                    class=pl-s1>key</span><span\n                                                                    class=pl-kos>]</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L69\"\n                                                            data-line-number=\"69\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// We need to\n                                                                    stringify and parse it though to get a deep\n                                                                    clone.</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R78\"\n                                                            data-line-number=\"78\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// We need to\n                                                                    stringify and parse it though to get a deep\n                                                                    clone.</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L70\"\n                                                            data-line-number=\"70\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=\"pl-c1\">=</span> <span\n                                                                    class=\"pl-c1\">JSON</span><span\n                                                                    class=\"pl-kos\">.</span><span\n                                                                    class=\"pl-en\">parse</span><span\n                                                                    class=\"pl-kos\">(</span><span\n                                                                    class=\"pl-c1\">JSON</span><span\n                                                                    class=\"pl-kos\">.</span><span\n                                                                    class=\"pl-en\">stringify</span><span\n                                                                    class=\"pl-kos\">(</span><span\n                                                                    class=\"pl-s1 x x-first\">livewireEl</span><span\n                                                                    class=\"pl-kos x\">.</span><span\n                                                                    class=\"pl-c1 x\">__livewire</span><span\n                                                                    class=\"pl-kos x\">.</span><span\n                                                                    class=\"pl-en x\">get</span><span\n                                                                    class=\"pl-kos x\">(</span><span\n                                                                    class=\"pl-s1 x\">livewireProperty</span><span\n                                                                    class=\"pl-kos x x-last\">)</span><span\n                                                                    class=\"pl-kos\">)</span><span\n                                                                    class=\"pl-kos\">)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R79\"\n                                                            data-line-number=\"79\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=\"pl-c1\">=</span> <span\n                                                                    class=\"pl-c1\">JSON</span><span\n                                                                    class=\"pl-kos\">.</span><span\n                                                                    class=\"pl-en\">parse</span><span\n                                                                    class=\"pl-kos\">(</span><span\n                                                                    class=\"pl-c1\">JSON</span><span\n                                                                    class=\"pl-kos\">.</span><span\n                                                                    class=\"pl-en\">stringify</span><span\n                                                                    class=\"pl-kos\">(</span><span\n                                                                    class=\"pl-s1 x x-first x-last\">livewirePropertyValue</span><span\n                                                                    class=\"pl-kos\">)</span><span\n                                                                    class=\"pl-kos\">)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L71\"\n                                                            data-line-number=\"71\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R80\"\n                                                            data-line-number=\"80\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L72\"\n                                                            data-line-number=\"72\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>blockAlpineWatcher</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-c1>false</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R81\"\n                                                            data-line-number=\"81\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>blockAlpineWatcher</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-c1>false</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"c59a7995943b70d126b613f515a15c3f6d6ccaae1e50cbf04e776e94a8ef3588\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024L73\"\n                                                            data-line-number=\"73\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024R82\"\n                                                            data-line-number=\"82\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-7ce6ac695f53fd2e2c50f1f962b00fb2da5cdf2576a1c1d6eeacca29f34b6024\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/27d35a3146d77a6f40fdc5b94dc9918a8bbbb49d?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=73&amp;last_right=82&amp;left=189&amp;left_hunk_size=&amp;mode=100644&amp;path=js%2Fcomponent%2FSupportAlpine.js&amp;right=189&amp;right_hunk_size=\"\n                                                                data-left-range=\"74-188\" data-right-range=\"83-188\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"js/component/UploadManager.js\" data-short-path=\"d7e3884\"\n                                            data-anchor=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/cf6042b25d4108eda16a179821f544e36416d763?diff=split&amp;direction=full&amp;mode=100644&amp;path=js%2Fcomponent%2FUploadManager.js\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"5 changes: 4 additions &amp; 1 deletion\">5 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span></span>\n\n\n                                                <a title=\"js/component/UploadManager.js\" class=\"Link--primary\"\n                                                    href=\"#diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\">js/component/UploadManager.js</a>\n\n                                                <clipboard-copy value=\"js/component/UploadManager.js\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/js/component/UploadManager.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=js%2Fcomponent%2FUploadManager.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/cf6042b25d4108eda16a179821f544e36416d763?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=71&amp;left_hunk_size=10&amp;mode=100644&amp;path=js%2Fcomponent%2FUploadManager.js&amp;right=71&amp;right_hunk_size=13\"\n                                                                data-left-range=\"1-70\" data-right-range=\"1-70\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -71,10 +71,13 @@ class UploadManager {</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L71\"\n                                                            data-line-number=\"71\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-v>Array</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>from</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>uploadBag</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>first</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>name</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>files</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>forEach</span><span\n                                                                    class=pl-kos>(</span><span class=pl-s1>file</span>\n                                                                <span class=pl-c1>=&gt;</span> <span\n                                                                    class=pl-s1>formData</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>append</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s>&#39;files[]&#39;</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>file</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R71\"\n                                                            data-line-number=\"71\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-v>Array</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>from</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>uploadBag</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>first</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>name</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>files</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>forEach</span><span\n                                                                    class=pl-kos>(</span><span class=pl-s1>file</span>\n                                                                <span class=pl-c1>=&gt;</span> <span\n                                                                    class=pl-s1>formData</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>append</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s>&#39;files[]&#39;</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>file</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L72\"\n                                                            data-line-number=\"72\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R72\"\n                                                            data-line-number=\"72\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L73\"\n                                                            data-line-number=\"73\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>headers</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R73\"\n                                                            data-line-number=\"73\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>headers</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L74\"\n                                                            data-line-number=\"74\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span\n                                                                    class=pl-s>&#39;X-CSRF-TOKEN&#39;</span>: <span\n                                                                    class=pl-en>getCsrfToken</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L75\"\n                                                            data-line-number=\"75\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Accept&#39;</span>: <span\n                                                                    class=pl-s>&#39;application/json&#39;</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R74\"\n                                                            data-line-number=\"74\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Accept&#39;</span>: <span\n                                                                    class=pl-s>&#39;application/json&#39;</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L76\"\n                                                            data-line-number=\"76\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R75\"\n                                                            data-line-number=\"75\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L77\"\n                                                            data-line-number=\"77\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R76\"\n                                                            data-line-number=\"76\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R77\"\n                                                            data-line-number=\"77\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>csrfToken</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-en>getCsrfToken</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R78\"\n                                                            data-line-number=\"78\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R79\"\n                                                            data-line-number=\"79\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>csrfToken</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-s1>headers</span><span\n                                                                    class=pl-kos>[</span><span\n                                                                    class=pl-s>&#39;X-CSRF-TOKEN&#39;</span><span\n                                                                    class=pl-kos>]</span> <span class=pl-c1>=</span>\n                                                                <span class=pl-s1>csrfToken</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R80\"\n                                                            data-line-number=\"80\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L78\"\n                                                            data-line-number=\"78\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>makeRequest</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>name</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>formData</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s>&#39;post&#39;</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>url</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>headers</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>response</span> <span\n                                                                    class=pl-c1>=&gt;</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R81\"\n                                                            data-line-number=\"81\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>makeRequest</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>name</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>formData</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s>&#39;post&#39;</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>url</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>headers</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>response</span> <span\n                                                                    class=pl-c1>=&gt;</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L79\"\n                                                            data-line-number=\"79\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>response</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>paths</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R82\"\n                                                            data-line-number=\"82\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>response</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>paths</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"97db3419ff3de19bfa56b37b7119556da96750ab52a1a2c5a21e96f9e019419c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22L80\"\n                                                            data-line-number=\"80\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22R83\"\n                                                            data-line-number=\"83\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-d7e388481275415ea842d1705bf02e2ec8805d16d31ab8098953bb6c81224a22\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/cf6042b25d4108eda16a179821f544e36416d763?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=80&amp;last_right=83&amp;left=163&amp;left_hunk_size=&amp;mode=100644&amp;path=js%2Fcomponent%2FUploadManager.js&amp;right=163&amp;right_hunk_size=\"\n                                                                data-left-range=\"81-162\" data-right-range=\"84-162\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"js/component/index.js\" data-short-path=\"7a6850d\"\n                                            data-anchor=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/760f399afefd11c7ad99fd0277c553b2bbb7efe2?diff=split&amp;direction=full&amp;mode=100644&amp;path=js%2Fcomponent%2Findex.js\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"5 changes: 3 additions &amp; 2 deletions\">5 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span></span>\n\n\n                                                <a title=\"js/component/index.js\" class=\"Link--primary\"\n                                                    href=\"#diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\">js/component/index.js</a>\n\n                                                <clipboard-copy value=\"js/component/index.js\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/js/component/index.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=js%2Fcomponent%2Findex.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/760f399afefd11c7ad99fd0277c553b2bbb7efe2?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=641&amp;left_hunk_size=8&amp;mode=100644&amp;path=js%2Fcomponent%2Findex.js&amp;right=641&amp;right_hunk_size=9\"\n                                                                data-left-range=\"1-640\" data-right-range=\"1-640\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -641,8 +641,9 @@ export default class\n                                                            Component {</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL641\"\n                                                            data-line-number=\"641\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// Forward\n                                                                    &quot;emits&quot; to base Livewire\n                                                                    object.</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR641\"\n                                                            data-line-number=\"641\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// Forward\n                                                                    &quot;emits&quot; to base Livewire\n                                                                    object.</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL642\"\n                                                            data-line-number=\"642\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span class=pl-k>typeof</span>\n                                                                <span class=pl-s1>property</span> <span\n                                                                    class=pl-c1>===</span> <span\n                                                                    class=pl-s>&#39;string&#39;</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-s1>property</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>match</span><span\n                                                                    class=pl-kos>(</span><span class=pl-pds><span\n                                                                        class=pl-c1>/</span><span\n                                                                        class=pl-cce>^</span>emit.<span\n                                                                        class=pl-c1>*</span><span\n                                                                        class=pl-c1>/</span></span><span\n                                                                    class=pl-kos>)</span><span class=pl-kos>)</span>\n                                                                <span class=pl-k>return</span> <span\n                                                                    class=pl-k>function</span> <span\n                                                                    class=pl-kos>(</span>...<span\n                                                                    class=pl-s1>args</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR642\"\n                                                            data-line-number=\"642\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span class=pl-k>typeof</span>\n                                                                <span class=pl-s1>property</span> <span\n                                                                    class=pl-c1>===</span> <span\n                                                                    class=pl-s>&#39;string&#39;</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-s1>property</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>match</span><span\n                                                                    class=pl-kos>(</span><span class=pl-pds><span\n                                                                        class=pl-c1>/</span><span\n                                                                        class=pl-cce>^</span>emit.<span\n                                                                        class=pl-c1>*</span><span\n                                                                        class=pl-c1>/</span></span><span\n                                                                    class=pl-kos>)</span><span class=pl-kos>)</span>\n                                                                <span class=pl-k>return</span> <span\n                                                                    class=pl-k>function</span> <span\n                                                                    class=pl-kos>(</span>...<span\n                                                                    class=pl-s1>args</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL643\"\n                                                            data-line-number=\"643\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>property</span> <span\n                                                                    class=pl-c1>===</span> <span\n                                                                    class=pl-s>&#39;emitSelf&#39;</span><span\n                                                                    class=pl-kos>)</span> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>store</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>emitSelf</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>id</span><span class=pl-kos>,</span>\n                                                                ...<span class=pl-s1>args</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR643\"\n                                                            data-line-number=\"643\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>property</span> <span\n                                                                    class=pl-c1>===</span> <span\n                                                                    class=pl-s>&#39;emitSelf&#39;</span><span\n                                                                    class=pl-kos>)</span> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>store</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>emitSelf</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>id</span><span class=pl-kos>,</span>\n                                                                ...<span class=pl-s1>args</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL644\"\n                                                            data-line-number=\"644\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR644\"\n                                                            data-line-number=\"644\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>property</span> <span\n                                                                    class=pl-c1>===</span> <span\n                                                                    class=pl-s>&#39;emitUp&#39;</span><span\n                                                                    class=pl-kos>)</span> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>store</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>emitUp</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>el</span><span class=pl-kos>,</span>\n                                                                ...<span class=pl-s1>args</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL645\"\n                                                            data-line-number=\"645\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>store</span><span\n                                                                    class=pl-kos>[</span><span\n                                                                    class=pl-s1>property</span><span\n                                                                    class=pl-kos>]</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>apply</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>component</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>args</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR645\"\n                                                            data-line-number=\"645\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR646\"\n                                                            data-line-number=\"646\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>store</span><span\n                                                                    class=pl-kos>[</span><span\n                                                                    class=pl-s1>property</span><span\n                                                                    class=pl-kos>]</span><span\n                                                                    class=pl-kos>(</span>...<span\n                                                                    class=pl-s1>args</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL646\"\n                                                            data-line-number=\"646\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR647\"\n                                                            data-line-number=\"647\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL647\"\n                                                            data-line-number=\"647\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR648\"\n                                                            data-line-number=\"648\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"703a7b1b1ec4cd8a5142ef58ac7ad71d53bb3722154bba10e805d241e4d9b41b\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecL648\"\n                                                            data-line-number=\"648\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeecR649\"\n                                                            data-line-number=\"649\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-7a6850de1cf4fdc4fd5c79ffda24669dabb7a479799d7ce1558645783ccbaeec\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/760f399afefd11c7ad99fd0277c553b2bbb7efe2?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=648&amp;last_right=649&amp;left=691&amp;left_hunk_size=&amp;mode=100644&amp;path=js%2Fcomponent%2Findex.js&amp;right=691&amp;right_hunk_size=\"\n                                                                data-left-range=\"649-690\" data-right-range=\"650-690\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"js/connection/index.js\" data-short-path=\"0a49531\"\n                                            data-anchor=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/29267920855b1a84824d9df2e320ace5ae81d01d?diff=split&amp;direction=full&amp;mode=100644&amp;path=js%2Fconnection%2Findex.js\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"16 changes: 11 additions &amp; 5 deletions\">16 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"js/connection/index.js\" class=\"Link--primary\"\n                                                    href=\"#diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\">js/connection/index.js</a>\n\n                                                <clipboard-copy value=\"js/connection/index.js\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/js/connection/index.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=js%2Fconnection%2Findex.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/29267920855b1a84824d9df2e320ace5ae81d01d?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=13&amp;left_hunk_size=8&amp;mode=100644&amp;path=js%2Fconnection%2Findex.js&amp;right=13&amp;right_hunk_size=16\"\n                                                                data-left-range=\"1-12\" data-right-range=\"1-12\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -13,8 +13,16 @@ export default class\n                                                            Connection {</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>componentStore</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>onErrorCallback</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>status</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>componentStore</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>onErrorCallback</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>status</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-en>showExpiredMessage</span><span\n                                                                    class=pl-kos>(</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R17\"\n                                                            data-line-number=\"17\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-en>confirm</span><span\n                                                                    class=pl-kos>(</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R18\"\n                                                            data-line-number=\"18\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-s>&#39;This page\n                                                                    has expired due to inactivity.\\nWould you like to\n                                                                    refresh the page?&#39;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R19\"\n                                                            data-line-number=\"19\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-kos>)</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>location</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>reload</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R20\"\n                                                            data-line-number=\"20\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R21\"\n                                                            data-line-number=\"21\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-en>sendMessage</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>message</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R22\"\n                                                            data-line-number=\"22\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-en>sendMessage</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>message</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L17\"\n                                                            data-line-number=\"17\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>payload</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>message</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>payload</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R23\"\n                                                            data-line-number=\"23\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>payload</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-s1>message</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>payload</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R24\"\n                                                            data-line-number=\"24\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>csrfToken</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-en>getCsrfToken</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R25\"\n                                                            data-line-number=\"25\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>socketId</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>getSocketId</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L18\"\n                                                            data-line-number=\"18\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R26\"\n                                                            data-line-number=\"26\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L19\"\n                                                            data-line-number=\"19\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>__testing_request_interceptor</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R27\"\n                                                            data-line-number=\"27\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>__testing_request_interceptor</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"f42f6c10e052af30b4cf5c22234c664d76ca16235114aa2d89ac4e078fef3c43\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L20\"\n                                                            data-line-number=\"20\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>__testing_request_interceptor</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>payload</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R28\"\n                                                            data-line-number=\"28\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>__testing_request_interceptor</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>payload</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"17\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand All\" aria-label=\"Expand All\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/29267920855b1a84824d9df2e320ace5ae81d01d?diff=split&amp;in_wiki_context=&amp;last_left=20&amp;last_right=28&amp;left=31&amp;left_hunk_size=12&amp;mode=100644&amp;path=js%2Fconnection%2Findex.js&amp;right=39&amp;right_hunk_size=12\"\n                                                                data-left-range=\"21-24\" data-right-range=\"29-32\">\n                                                                <svg class=\"octicon octicon-unfold\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -31,12 +39,12 @@ export default class\n                                                            Connection {</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L31\"\n                                                            data-line-number=\"31\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c1>headers</span>:\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R39\"\n                                                            data-line-number=\"39\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c1>headers</span>:\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L32\"\n                                                            data-line-number=\"32\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Content-Type&#39;</span>: <span\n                                                                    class=pl-s>&#39;application/json&#39;</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R40\"\n                                                            data-line-number=\"40\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Content-Type&#39;</span>: <span\n                                                                    class=pl-s>&#39;application/json&#39;</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L33\"\n                                                            data-line-number=\"33\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Accept&#39;</span>: <span\n                                                                    class=pl-s>&#39;text/html,\n                                                                    application/xhtml+xml&#39;</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R41\"\n                                                            data-line-number=\"41\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Accept&#39;</span>: <span\n                                                                    class=pl-s>&#39;text/html,\n                                                                    application/xhtml+xml&#39;</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L34\"\n                                                            data-line-number=\"34\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span\n                                                                    class=pl-s>&#39;X-CSRF-TOKEN&#39;</span>: <span\n                                                                    class=pl-en>getCsrfToken</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L35\"\n                                                            data-line-number=\"35\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span\n                                                                    class=pl-s>&#39;X-Socket-ID&#39;</span>: <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>getSocketId</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L36\"\n                                                            data-line-number=\"36\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;X-Livewire&#39;</span>: <span\n                                                                    class=pl-c1>true</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R42\"\n                                                            data-line-number=\"42\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;X-Livewire&#39;</span>: <span\n                                                                    class=pl-c1>true</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L37\"\n                                                            data-line-number=\"37\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R43\"\n                                                            data-line-number=\"43\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L38\"\n                                                            data-line-number=\"38\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// We&#39;ll set\n                                                                    this explicitly to mitigate potential interference\n                                                                    from ad-blockers/etc.</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R44\"\n                                                            data-line-number=\"44\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-c>// We&#39;ll set\n                                                                    this explicitly to mitigate potential interference\n                                                                    from ad-blockers/etc.</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L39\"\n                                                            data-line-number=\"39\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Referer&#39;</span>: <span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>location</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>href</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R45\"\n                                                            data-line-number=\"45\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s>&#39;Referer&#39;</span>: <span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>location</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>href</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R46\"\n                                                            data-line-number=\"46\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> ...<span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>csrfToken</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-kos>{</span> <span\n                                                                    class=pl-s>&#39;X-CSRF-TOKEN&#39;</span>: <span\n                                                                    class=pl-s1>csrfToken</span> <span\n                                                                    class=pl-kos>}</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R47\"\n                                                            data-line-number=\"47\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> ...<span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>socketId</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-kos>{</span> <span\n                                                                    class=pl-s>&#39;X-Socket-ID&#39;</span>: <span\n                                                                    class=pl-s1>socketId</span> <span\n                                                                    class=pl-kos>}</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L40\"\n                                                            data-line-number=\"40\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R48\"\n                                                            data-line-number=\"48\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span><span\n                                                                    class=pl-kos>,</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L41\"\n                                                            data-line-number=\"41\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R49\"\n                                                            data-line-number=\"49\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"906ae82fba5a7686d124c15b442a035a48ff4c67868eae6bcffee4236fc87bca\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L42\"\n                                                            data-line-number=\"42\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R50\"\n                                                            data-line-number=\"50\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"32\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand All\" aria-label=\"Expand All\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/29267920855b1a84824d9df2e320ace5ae81d01d?diff=split&amp;in_wiki_context=&amp;last_left=42&amp;last_right=50&amp;left=58&amp;left_hunk_size=9&amp;mode=100644&amp;path=js%2Fconnection%2Findex.js&amp;right=66&amp;right_hunk_size=7\"\n                                                                data-left-range=\"43-49\" data-right-range=\"51-57\">\n                                                                <svg class=\"octicon octicon-unfold\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -58,9 +66,7 @@ export default class\n                                                            Connection {</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L58\"\n                                                            data-line-number=\"58\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R66\"\n                                                            data-line-number=\"66\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L59\"\n                                                            data-line-number=\"59\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>store</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>sessionHasExpired</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-c1>true</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R67\"\n                                                            data-line-number=\"67\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>store</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>sessionHasExpired</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-c1>true</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L60\"\n                                                            data-line-number=\"60\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R68\"\n                                                            data-line-number=\"68\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L61\"\n                                                            data-line-number=\"61\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span\n                                                                    class=pl-en>confirm</span><span\n                                                                    class=pl-kos>(</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R69\"\n                                                            data-line-number=\"69\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>showExpiredMessage</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L62\"\n                                                            data-line-number=\"62\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-s>&#39;This page\n                                                                    has expired due to inactivity.\\nWould you like to\n                                                                    refresh the page?&#39;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L63\"\n                                                            data-line-number=\"63\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-kos>)</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>location</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>reload</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L64\"\n                                                            data-line-number=\"64\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span> <span\n                                                                    class=pl-k>else</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R70\"\n                                                            data-line-number=\"70\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span> <span\n                                                                    class=pl-k>else</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L65\"\n                                                            data-line-number=\"65\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>response</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>text</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>then</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>response</span> <span\n                                                                    class=pl-c1>=&gt;</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R71\"\n                                                            data-line-number=\"71\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>response</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>text</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>then</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>response</span> <span\n                                                                    class=pl-c1>=&gt;</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4e6b76b2494816481f7cb5e80beab16ff6763620262fba46b9bf3171e22a957a\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2L66\"\n                                                            data-line-number=\"66\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>showHtmlModal</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>response</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2R72\"\n                                                            data-line-number=\"72\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-smi>this</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>showHtmlModal</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>response</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-0a4953139bc5b7c42ffef56b808019ce492149c99441129c9c92837256bb1fd2\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/29267920855b1a84824d9df2e320ace5ae81d01d?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=66&amp;last_right=72&amp;left=145&amp;left_hunk_size=&amp;mode=100644&amp;path=js%2Fconnection%2Findex.js&amp;right=145&amp;right_hunk_size=\"\n                                                                data-left-range=\"67-144\" data-right-range=\"73-144\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"js/dom/morphdom/morphdom.js\" data-short-path=\"a5b0af0\"\n                                            data-anchor=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/f980fea4082ff3e9eab019005433141a0ec4adef?diff=split&amp;direction=full&amp;mode=100644&amp;path=js%2Fdom%2Fmorphdom%2Fmorphdom.js\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"14 changes: 7 additions &amp; 7 deletions\">14 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"js/dom/morphdom/morphdom.js\" class=\"Link--primary\"\n                                                    href=\"#diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\">js/dom/morphdom/morphdom.js</a>\n\n                                                <clipboard-copy value=\"js/dom/morphdom/morphdom.js\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/js/dom/morphdom/morphdom.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=js%2Fdom%2Fmorphdom%2Fmorphdom.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/f980fea4082ff3e9eab019005433141a0ec4adef?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=10&amp;left_hunk_size=8&amp;mode=100644&amp;path=js%2Fdom%2Fmorphdom%2Fmorphdom.js&amp;right=10&amp;right_hunk_size=8\"\n                                                                data-left-range=\"1-9\" data-right-range=\"1-9\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -10,8 +10,8 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL10\"\n                                                            data-line-number=\"10\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR10\"\n                                                            data-line-number=\"10\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL11\"\n                                                            data-line-number=\"11\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-s>&#39;use\n                                                                    strict&#39;</span><span class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR11\"\n                                                            data-line-number=\"11\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-s>&#39;use\n                                                                    strict&#39;</span><span class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL12\"\n                                                            data-line-number=\"12\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR12\"\n                                                            data-line-number=\"12\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><span class=pl-k>import</span>\n                                                                <span class=pl-kos>{</span> <span\n                                                                    class=pl-s1>compareNodeNames</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>toElement</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>moveChildren</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>createElementNS</span><span\n                                                                    class=pl-kos>,</span> <span class=pl-s1>doc</span>\n                                                                <span class=pl-kos>}</span> <span class=pl-k>from</span>\n                                                                <span class=pl-s>&#39;./util&#39;</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>import</span>\n                                                                <span class=pl-s1>specialElHandlers</span> <span\n                                                                    class=pl-k>from</span> <span\n                                                                    class=pl-s>&#39;./specialElHandlers&#39;</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>import</span>\n                                                                <span class=pl-s1>specialElHandlers</span> <span\n                                                                    class=pl-k>from</span> <span\n                                                                    class=pl-s>&#39;./specialElHandlers&#39;</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=pl-k>import</span>\n                                                                <span class=pl-kos>{</span> <span\n                                                                    class=pl-s1>compareNodeNames</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>createElementNS</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>doc</span><span class=pl-kos>,</span>\n                                                                <span class=pl-s1>moveChildren</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>toElement</span> <span\n                                                                    class=pl-kos>}</span> <span class=pl-k>from</span>\n                                                                <span class=pl-s>&#39;./util&#39;</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>var</span> <span\n                                                                    class=pl-c1>ELEMENT_NODE</span> <span\n                                                                    class=pl-c1>=</span> <span class=pl-c1>1</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>var</span> <span\n                                                                    class=pl-c1>ELEMENT_NODE</span> <span\n                                                                    class=pl-c1>=</span> <span class=pl-c1>1</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"339630dafbd0f7a0955e5674bb21fa763ef2f8627e61c9c203c97b14efbfb356\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL17\"\n                                                            data-line-number=\"17\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>var</span> <span\n                                                                    class=pl-c1>DOCUMENT_FRAGMENT_NODE</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-c1>11</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR17\"\n                                                            data-line-number=\"17\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>var</span> <span\n                                                                    class=pl-c1>DOCUMENT_FRAGMENT_NODE</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-c1>11</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"10\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                                                class=\"js-expand directional-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/f980fea4082ff3e9eab019005433141a0ec4adef?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=17&amp;last_right=17&amp;left=153&amp;left_hunk_size=15&amp;mode=100644&amp;path=js%2Fdom%2Fmorphdom%2Fmorphdom.js&amp;right=153&amp;right_hunk_size=15\"\n                                                                data-left-range=\"18-84\" data-right-range=\"18-84\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                            <a href=\"#diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                                                class=\"js-expand directional-expander\" title=\"Expand Up\"\n                                                                aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/f980fea4082ff3e9eab019005433141a0ec4adef?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=17&amp;last_right=17&amp;left=153&amp;left_hunk_size=15&amp;mode=100644&amp;path=js%2Fdom%2Fmorphdom%2Fmorphdom.js&amp;right=153&amp;right_hunk_size=15\"\n                                                                data-left-range=\"85-152\" data-right-range=\"85-152\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -153,15 +153,15 @@ export default function\n                                                            morphdomFactory(morphAttrs) {</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL153\"\n                                                            data-line-number=\"153\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>unmatchedFromEl</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-en>compareNodeNames</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>unmatchedFromEl</span><span\n                                                                    class=pl-kos>)</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR153\"\n                                                            data-line-number=\"153\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>unmatchedFromEl</span> <span\n                                                                    class=pl-c1>&amp;&amp;</span> <span\n                                                                    class=pl-en>compareNodeNames</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>unmatchedFromEl</span><span\n                                                                    class=pl-kos>)</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL154\"\n                                                            data-line-number=\"154\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>parentNode</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>replaceChild</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>unmatchedFromEl</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR154\"\n                                                            data-line-number=\"154\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>parentNode</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>replaceChild</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>unmatchedFromEl</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL155\"\n                                                            data-line-number=\"155\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-en>morphEl</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>unmatchedFromEl</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR155\"\n                                                            data-line-number=\"155\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-en>morphEl</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>unmatchedFromEl</span><span\n                                                                    class=pl-kos>,</span> <span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL156\"\n                                                            data-line-number=\"156\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL157\"\n                                                            data-line-number=\"157\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-c>// <span\n                                                                        class=pl-k>@livewireModification</span></span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL158\"\n                                                            data-line-number=\"158\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-c>// Otherwise,\n                                                                    &quot;curChild&quot; will be unnatached when it is\n                                                                    passed to &quot;handleNodeAdde&quot;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL159\"\n                                                            data-line-number=\"159\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-c>// things like\n                                                                    .parent and .closest will break.</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL160\"\n                                                            data-line-number=\"160\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-s1>curChild</span>\n                                                                <span class=pl-c1>=</span> <span\n                                                                    class=pl-s1>unmatchedFromEl</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL161\"\n                                                            data-line-number=\"161\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR156\"\n                                                            data-line-number=\"156\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR157\"\n                                                            data-line-number=\"157\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>else</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR158\"\n                                                            data-line-number=\"158\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-en>handleNodeAdded</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR159\"\n                                                            data-line-number=\"159\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR160\"\n                                                            data-line-number=\"160\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR161\"\n                                                            data-line-number=\"161\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>else</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR162\"\n                                                            data-line-number=\"162\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-en>handleNodeAdded</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL162\"\n                                                            data-line-number=\"162\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR163\"\n                                                            data-line-number=\"163\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL163\"\n                                                            data-line-number=\"163\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR164\"\n                                                            data-line-number=\"164\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL164\"\n                                                            data-line-number=\"164\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span\n                                                                    class=pl-en>handleNodeAdded</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>curChild</span><span\n                                                                    class=pl-kos>)</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL165\"\n                                                            data-line-number=\"165\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1>curChild</span>\n                                                                <span class=pl-c1>=</span> <span\n                                                                    class=pl-s1>nextSibling</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR165\"\n                                                            data-line-number=\"165\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1>curChild</span>\n                                                                <span class=pl-c1>=</span> <span\n                                                                    class=pl-s1>nextSibling</span><span\n                                                                    class=pl-kos>;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL166\"\n                                                            data-line-number=\"166\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR166\"\n                                                            data-line-number=\"166\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"efb2ce2b696c60b54072dde7ff996699179e3bddd64af578da26960126f9617f\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdL167\"\n                                                            data-line-number=\"167\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfdR167\"\n                                                            data-line-number=\"167\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-a5b0af02217f9228acfaa08e71b0f8f9e754c03dcd08db148499c1d0527a3bfd\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/f980fea4082ff3e9eab019005433141a0ec4adef?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=167&amp;last_right=167&amp;left=495&amp;left_hunk_size=&amp;mode=100644&amp;path=js%2Fdom%2Fmorphdom%2Fmorphdom.js&amp;right=495&amp;right_hunk_size=\"\n                                                                data-left-range=\"168-494\" data-right-range=\"168-494\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".js\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"js/util/getCsrfToken.js\" data-short-path=\"8facbbc\"\n                                            data-anchor=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8\"\n                                            data-file-type=\".js\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"13 changes: 3 additions &amp; 10 deletions\">13 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"js/util/getCsrfToken.js\" class=\"Link--primary\"\n                                                    href=\"#diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8\">js/util/getCsrfToken.js</a>\n\n                                                <clipboard-copy value=\"js/util/getCsrfToken.js\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/js/util/getCsrfToken.js\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=js%2Futil%2FgetCsrfToken.js\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr data-position=\"0\">\n                                                        <td id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8HL1\"\n                                                            class=\"blob-num blob-num-hunk\" data-line-number=\"...\"></td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -1,16 +1,9 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>export</span>\n                                                                <span class=pl-k>function</span> <span\n                                                                    class=pl-en>getCsrfToken</span><span\n                                                                    class=pl-kos>(</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-k>export</span>\n                                                                <span class=pl-k>function</span> <span\n                                                                    class=pl-en>getCsrfToken</span><span\n                                                                    class=pl-kos>(</span><span class=pl-kos>)</span>\n                                                                <span class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L2\"\n                                                            data-line-number=\"2\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>const</span>\n                                                                <span class=pl-s1>tokenTag</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-smi>document</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>head</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>querySelector</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s>&#39;meta[name=&quot;csrf-token&quot;]&#39;</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R2\"\n                                                            data-line-number=\"2\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>const</span>\n                                                                <span class=pl-s1>tokenTag</span> <span\n                                                                    class=pl-c1>=</span> <span\n                                                                    class=pl-smi>document</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>head</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-en>querySelector</span><span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s>&#39;meta[name=&quot;csrf-token&quot;]&#39;</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L3\"\n                                                            data-line-number=\"3\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-k>let</span> <span\n                                                                    class=pl-s1>token</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L4\"\n                                                            data-line-number=\"4\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R3\"\n                                                            data-line-number=\"3\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L5\"\n                                                            data-line-number=\"5\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span class=pl-c1>!</span><span\n                                                                    class=pl-s1>tokenTag</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R4\"\n                                                            data-line-number=\"4\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span\n                                                                    class=pl-s1>tokenTag</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L6\"\n                                                            data-line-number=\"6\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-k>if</span> <span\n                                                                    class=pl-kos>(</span><span class=pl-c1>!</span><span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>livewire_token</span><span\n                                                                    class=pl-kos>)</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R5\"\n                                                            data-line-number=\"5\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>return</span>\n                                                                <span class=pl-s1>tokenTag</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>content</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L7\"\n                                                            data-line-number=\"7\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-k>throw</span>\n                                                                <span class=pl-k>new</span> <span\n                                                                    class=pl-v>Error</span><span\n                                                                    class=pl-kos>(</span><span class=pl-s>&#39;Whoops,\n                                                                    looks like you haven\\&#39;t added a\n                                                                    &quot;csrf-token&quot; meta tag&#39;</span><span\n                                                                    class=pl-kos>)</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L8\"\n                                                            data-line-number=\"8\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L9\"\n                                                            data-line-number=\"9\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L10\"\n                                                            data-line-number=\"10\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-s1>token</span>\n                                                                <span class=pl-c1>=</span> <span\n                                                                    class=pl-smi>window</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>livewire_token</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L11\"\n                                                            data-line-number=\"11\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-kos>}</span> <span\n                                                                    class=pl-k>else</span> <span\n                                                                    class=pl-kos>{</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L12\"\n                                                            data-line-number=\"12\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-s1>token</span>\n                                                                <span class=pl-c1>=</span> <span\n                                                                    class=pl-s1>tokenTag</span><span\n                                                                    class=pl-kos>.</span><span\n                                                                    class=pl-c1>content</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R6\"\n                                                            data-line-number=\"6\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R7\"\n                                                            data-line-number=\"7\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=\"pl-k\">return</span>\n                                                                <span class=\"pl-s1 x x-first x-last\">token</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R8\"\n                                                            data-line-number=\"8\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=\"pl-k\">return</span>\n                                                                <span class=\"pl-smi x x-first\">window</span><span\n                                                                    class=\"pl-kos x\">.</span><span\n                                                                    class=\"pl-c1 x\">livewire_token</span><span\n                                                                    class=\"x\"> </span><span\n                                                                    class=\"pl-c1 x\">??</span><span class=\"x\">\n                                                                </span><span\n                                                                    class=\"pl-c1 x x-last\">undefined</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"8e908ded2ff1400f0bb9173372ce320f4ec52d7cadfa897c449ad22823c030a5\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8L16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-kos>}</span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-8facbbc733835f6231d3d30a13420935802662dae2afde4c4fd45d2b348ec6b8R9\"\n                                                            data-line-number=\"9\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><span class=pl-kos>}</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/Commands/ComponentParser.php\" data-short-path=\"e47c84b\"\n                                            data-anchor=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/29db9c4f08e1d0b33745298dacb08ed97701b642?diff=split&amp;direction=full&amp;mode=100644&amp;path=src%2FCommands%2FComponentParser.php\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"3 changes: 1 addition &amp; 2 deletions\">3 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"src/Commands/ComponentParser.php\" class=\"Link--primary\"\n                                                    href=\"#diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\">src/Commands/ComponentParser.php</a>\n\n                                                <clipboard-copy value=\"src/Commands/ComponentParser.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/Commands/ComponentParser.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FCommands%2FComponentParser.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/29db9c4f08e1d0b33745298dacb08ed97701b642?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=200&amp;left_hunk_size=8&amp;mode=100644&amp;path=src%2FCommands%2FComponentParser.php&amp;right=200&amp;right_hunk_size=7\"\n                                                                data-left-range=\"1-199\" data-right-range=\"1-199\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -200,8 +200,7 @@ public function\n                                                            wisdomOfTheTao()</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L200\"\n                                                            data-line-number=\"200\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388R200\"\n                                                            data-line-number=\"200\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L201\"\n                                                            data-line-number=\"201\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>public</span>\n                                                                <span class=pl-k>static</span> <span\n                                                                    class=pl-k>function</span> <span\n                                                                    class=pl-en>generatePathFromNamespace</span>(<span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>namespace</span>)</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388R201\"\n                                                            data-line-number=\"201\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>public</span>\n                                                                <span class=pl-k>static</span> <span\n                                                                    class=pl-k>function</span> <span\n                                                                    class=pl-en>generatePathFromNamespace</span>(<span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>namespace</span>)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L202\"\n                                                            data-line-number=\"202\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> {</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388R202\"\n                                                            data-line-number=\"202\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L203\"\n                                                            data-line-number=\"203\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>name</span> = <span\n                                                                    class=pl-en>str</span>(<span class=pl-s1><span\n                                                                        class=pl-c1>$</span>namespace</span>)-&gt;<span\n                                                                    class=pl-en>replaceFirst</span>(<span\n                                                                    class=pl-en>app</span>()-&gt;<span\n                                                                    class=pl-en>getNamespace</span>(), <span\n                                                                    class=pl-s>&#39;&#39;</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388R203\"\n                                                            data-line-number=\"203\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>name</span> = <span\n                                                                    class=pl-en>str</span>(<span class=pl-s1><span\n                                                                        class=pl-c1>$</span>namespace</span>)-&gt;<span\n                                                                    class=pl-en>finish</span>(<span\n                                                                    class=pl-s>&#39;\\\\&#39;</span>)-&gt;<span\n                                                                    class=pl-en>replaceFirst</span>(<span\n                                                                    class=pl-en>app</span>()-&gt;<span\n                                                                    class=pl-en>getNamespace</span>(), <span\n                                                                    class=pl-s>&#39;&#39;</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L204\"\n                                                            data-line-number=\"204\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L205\"\n                                                            data-line-number=\"205\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-en>app</span>(<span\n                                                                    class=pl-s>&#39;path&#39;</span>).<span\n                                                                    class=pl-s>&#39;/&#39;</span>.<span\n                                                                    class=pl-en>str_replace</span>(<span\n                                                                    class=pl-s>&#39;\\\\&#39;</span>, <span\n                                                                    class=pl-s>&#39;/&#39;</span>, <span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>name</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388R204\"\n                                                            data-line-number=\"204\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>return</span>\n                                                                <span class=pl-en>app</span>(<span\n                                                                    class=pl-s>&#39;path&#39;</span>).<span\n                                                                    class=pl-s>&#39;/&#39;</span>.<span\n                                                                    class=pl-en>str_replace</span>(<span\n                                                                    class=pl-s>&#39;\\\\&#39;</span>, <span\n                                                                    class=pl-s>&#39;/&#39;</span>, <span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>name</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L206\"\n                                                            data-line-number=\"206\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388R205\"\n                                                            data-line-number=\"205\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"4709d7c1d7d3db6cbfd04d8e254df8a1151267cfb186225f69ffaf1027cf3d51\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388L207\"\n                                                            data-line-number=\"207\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388R206\"\n                                                            data-line-number=\"206\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-e47c84bf61f3d6eebc767e61b81e6b9b60d090630e7c27a076cdf55626757388\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/29db9c4f08e1d0b33745298dacb08ed97701b642?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=207&amp;last_right=206&amp;left=214&amp;left_hunk_size=&amp;mode=100644&amp;path=src%2FCommands%2FComponentParser.php&amp;right=214&amp;right_hunk_size=\"\n                                                                data-left-range=\"208-213\" data-right-range=\"207-213\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/Commands/FileManipulationCommand.php\"\n                                            data-short-path=\"b88f9d9\"\n                                            data-anchor=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/b7cd4b6cb8367ad6dadc26bdcff8efae37b124e9?diff=split&amp;direction=full&amp;mode=100644&amp;path=src%2FCommands%2FFileManipulationCommand.php\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"2 changes: 0 additions &amp; 2 deletions\">2 <span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"src/Commands/FileManipulationCommand.php\"\n                                                    class=\"Link--primary\"\n                                                    href=\"#diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6\">src/Commands/FileManipulationCommand.php</a>\n\n                                                <clipboard-copy value=\"src/Commands/FileManipulationCommand.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/Commands/FileManipulationCommand.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FCommands%2FFileManipulationCommand.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/b7cd4b6cb8367ad6dadc26bdcff8efae37b124e9?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=52&amp;left_hunk_size=8&amp;mode=100644&amp;path=src%2FCommands%2FFileManipulationCommand.php&amp;right=52&amp;right_hunk_size=6\"\n                                                                data-left-range=\"1-51\" data-right-range=\"1-51\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -52,8 +52,6 @@ public function\n                                                            writeWelcomeMessage()</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L52\"\n                                                            data-line-number=\"52\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span>(<span\n                                                                    class=pl-c1>PHP_OS_FAMILY</span> == <span\n                                                                    class=pl-s>&#39;Linux&#39;</span>) <span\n                                                                    class=pl-en>exec</span>(<span\n                                                                    class=pl-s>&#39;xdg-open\n                                                                    https://github.com/livewire/livewire&#39;</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6R52\"\n                                                            data-line-number=\"52\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span>(<span\n                                                                    class=pl-c1>PHP_OS_FAMILY</span> == <span\n                                                                    class=pl-s>&#39;Linux&#39;</span>) <span\n                                                                    class=pl-en>exec</span>(<span\n                                                                    class=pl-s>&#39;xdg-open\n                                                                    https://github.com/livewire/livewire&#39;</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L53\"\n                                                            data-line-number=\"53\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6R53\"\n                                                            data-line-number=\"53\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L54\"\n                                                            data-line-number=\"54\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;<span\n                                                                    class=pl-en>line</span>(<span\n                                                                    class=pl-s>&quot;Thanks! Means the world to\n                                                                    me!&quot;</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6R54\"\n                                                            data-line-number=\"54\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;<span\n                                                                    class=pl-en>line</span>(<span\n                                                                    class=pl-s>&quot;Thanks! Means the world to\n                                                                    me!&quot;</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L55\"\n                                                            data-line-number=\"55\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> } <span class=pl-k>else</span>\n                                                                {</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L56\"\n                                                            data-line-number=\"56\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;<span\n                                                                    class=pl-en>line</span>(<span class=pl-s>&quot;I\n                                                                    understand, but am not going to pretend I&#39;m not\n                                                                    sad about it...&quot;</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"right\"></td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L57\"\n                                                            data-line-number=\"57\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6R55\"\n                                                            data-line-number=\"55\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L58\"\n                                                            data-line-number=\"58\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6R56\"\n                                                            data-line-number=\"56\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fe19201baf59b97472a41fdd95d4ab5c2d5ce54cde79a52ef6bf970061ae6127\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6L59\"\n                                                            data-line-number=\"59\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">}</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-b88f9d90de064e4075af0732f0d4ff85a4ebd6de05187d72e79732ffee292ef6R57\"\n                                                            data-line-number=\"57\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">}</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/Commands/MakeCommand.php\" data-short-path=\"87513b0\"\n                                            data-anchor=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/823b4cc966a2d3a65fc73d3b50b4b7ff9c5e5755?diff=split&amp;direction=full&amp;mode=100644&amp;path=src%2FCommands%2FMakeCommand.php\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"82 changes: 80 additions &amp; 2 deletions\">82 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"src/Commands/MakeCommand.php\" class=\"Link--primary\"\n                                                    href=\"#diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\">src/Commands/MakeCommand.php</a>\n\n                                                <clipboard-copy value=\"src/Commands/MakeCommand.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/Commands/MakeCommand.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FCommands%2FMakeCommand.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/823b4cc966a2d3a65fc73d3b50b4b7ff9c5e5755?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=48&amp;left_hunk_size=7&amp;mode=100644&amp;path=src%2FCommands%2FMakeCommand.php&amp;right=48&amp;right_hunk_size=7\"\n                                                                data-left-range=\"1-47\" data-right-range=\"1-47\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -48,7 +48,7 @@ public function handle()</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"fef1939f227e5270b8ef62c35548cdc5d76f2de5382a189bca3a10eaf99ed8d8\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL48\"\n                                                            data-line-number=\"48\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR48\"\n                                                            data-line-number=\"48\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fef1939f227e5270b8ef62c35548cdc5d76f2de5382a189bca3a10eaf99ed8d8\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL49\"\n                                                            data-line-number=\"49\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR49\"\n                                                            data-line-number=\"49\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fef1939f227e5270b8ef62c35548cdc5d76f2de5382a189bca3a10eaf99ed8d8\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL50\"\n                                                            data-line-number=\"50\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> (<span\n                                                                    class=pl-s1><span class=pl-c1>$</span>test</span>)\n                                                                {</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR50\"\n                                                            data-line-number=\"50\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> (<span\n                                                                    class=pl-s1><span class=pl-c1>$</span>test</span>)\n                                                                {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fef1939f227e5270b8ef62c35548cdc5d76f2de5382a189bca3a10eaf99ed8d8\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL51\"\n                                                            data-line-number=\"51\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=\"pl-s1\"><span\n                                                                        class=\"pl-c1\">$</span>test</span> &amp;&amp;\n                                                                <span class=\"pl-s1\"><span class=\"pl-c1\">$</span><span\n                                                                        class=\"pl-smi\">this</span></span>-&gt;<span\n                                                                    class=\"pl-en\">line</span>(<span\n                                                                    class=\"pl-s\">\"&lt;options=bold;fg=green&gt;<span\n                                                                        class=\"x x-first x-last\">Test</span>:&lt;/&gt;\n                                                                    {$this-&gt;parser-&gt;relativeTestPath()}\"</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR51\"\n                                                            data-line-number=\"51\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=\"pl-s1\"><span\n                                                                        class=\"pl-c1\">$</span>test</span> &amp;&amp;\n                                                                <span class=\"pl-s1\"><span class=\"pl-c1\">$</span><span\n                                                                        class=\"pl-smi\">this</span></span>-&gt;<span\n                                                                    class=\"pl-en\">line</span>(<span\n                                                                    class=\"pl-s\">\"&lt;options=bold;fg=green&gt;<span\n                                                                        class=\"x x-first x-last\">TEST</span>:&lt;/&gt;\n                                                                    {$this-&gt;parser-&gt;relativeTestPath()}\"</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fef1939f227e5270b8ef62c35548cdc5d76f2de5382a189bca3a10eaf99ed8d8\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL52\"\n                                                            data-line-number=\"52\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR52\"\n                                                            data-line-number=\"52\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fef1939f227e5270b8ef62c35548cdc5d76f2de5382a189bca3a10eaf99ed8d8\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL53\"\n                                                            data-line-number=\"53\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR53\"\n                                                            data-line-number=\"53\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"fef1939f227e5270b8ef62c35548cdc5d76f2de5382a189bca3a10eaf99ed8d8\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL54\"\n                                                            data-line-number=\"54\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> (<span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>showWelcomeMessage</span>\n                                                                &amp;&amp; ! <span class=pl-en>app</span>()-&gt;<span\n                                                                    class=pl-en>environment</span>(<span\n                                                                    class=pl-s>&#39;testing&#39;</span>)) {</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR54\"\n                                                            data-line-number=\"54\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>if</span> (<span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>showWelcomeMessage</span>\n                                                                &amp;&amp; ! <span class=pl-en>app</span>()-&gt;<span\n                                                                    class=pl-en>environment</span>(<span\n                                                                    class=pl-s>&#39;testing&#39;</span>)) {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"9\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\"\n                                                                class=\"js-expand directional-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/823b4cc966a2d3a65fc73d3b50b4b7ff9c5e5755?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=54&amp;last_right=54&amp;left=115&amp;left_hunk_size=6&amp;mode=100644&amp;path=src%2FCommands%2FMakeCommand.php&amp;right=115&amp;right_hunk_size=84\"\n                                                                data-left-range=\"55-83\" data-right-range=\"55-83\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                            <a href=\"#diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cb\"\n                                                                class=\"js-expand directional-expander\" title=\"Expand Up\"\n                                                                aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/823b4cc966a2d3a65fc73d3b50b4b7ff9c5e5755?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=54&amp;last_right=54&amp;left=115&amp;left_hunk_size=6&amp;mode=100644&amp;path=src%2FCommands%2FMakeCommand.php&amp;right=115&amp;right_hunk_size=84\"\n                                                                data-left-range=\"84-114\" data-right-range=\"84-114\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -115,6 +115,84 @@ protected function\n                                                            createTest($force = false)</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL115\"\n                                                            data-line-number=\"115\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR115\"\n                                                            data-line-number=\"115\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL116\"\n                                                            data-line-number=\"116\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>public</span>\n                                                                <span class=pl-k>function</span> <span\n                                                                    class=pl-en>isReservedClassName</span>(<span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>name</span>)</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR116\"\n                                                            data-line-number=\"116\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-k>public</span>\n                                                                <span class=pl-k>function</span> <span\n                                                                    class=pl-en>isReservedClassName</span>(<span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>name</span>)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL117\"\n                                                            data-line-number=\"117\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> {</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR117\"\n                                                            data-line-number=\"117\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL118\"\n                                                            data-line-number=\"118\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=\"pl-k\">return</span>\n                                                                <span class=\"pl-en\">array_search</span>(<span\n                                                                    class=\"pl-s1\"><span\n                                                                        class=\"pl-c1\">$</span>name</span><span\n                                                                    class=\"x x-first\">, [</span><span\n                                                                    class=\"pl-s x\">'Parent'</span><span class=\"x\">,\n                                                                </span><span class=\"pl-s x\">'Component'</span><span\n                                                                    class=\"x\">, </span><span\n                                                                    class=\"pl-s x\">'Interface'</span><span\n                                                                    class=\"x x-last\">]</span>) !== <span\n                                                                    class=\"pl-c1\">false</span>;</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR118\"\n                                                            data-line-number=\"118\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=\"pl-k\">return</span>\n                                                                <span class=\"pl-en\">array_search</span>(<span\n                                                                    class=\"pl-en x x-first\">strtolower</span><span\n                                                                    class=\"x x-last\">(</span><span class=\"pl-s1\"><span\n                                                                        class=\"pl-c1\">$</span>name</span><span\n                                                                    class=\"x x-first\">), </span><span\n                                                                    class=\"pl-s1\"><span class=\"pl-c1 x\">$</span><span\n                                                                        class=\"pl-smi x\">this</span></span><span\n                                                                    class=\"x\">-&gt;</span><span\n                                                                    class=\"pl-en x\">getReservedName</span><span\n                                                                    class=\"x x-last\">()</span>) !== <span\n                                                                    class=\"pl-c1\">false</span>;</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL119\"\n                                                            data-line-number=\"119\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR119\"\n                                                            data-line-number=\"119\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR120\"\n                                                            data-line-number=\"120\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR121\"\n                                                            data-line-number=\"121\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>private</span>\n                                                                <span class=pl-k>function</span> <span\n                                                                    class=pl-en>getReservedName</span>()</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR122\"\n                                                            data-line-number=\"122\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR123\"\n                                                            data-line-number=\"123\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>return</span>\n                                                                [</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR124\"\n                                                            data-line-number=\"124\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;parent&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR125\"\n                                                            data-line-number=\"125\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;component&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR126\"\n                                                            data-line-number=\"126\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;interface&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR127\"\n                                                            data-line-number=\"127\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;__halt_compiler&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR128\"\n                                                            data-line-number=\"128\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;abstract&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR129\"\n                                                            data-line-number=\"129\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;and&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR130\"\n                                                            data-line-number=\"130\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;array&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR131\"\n                                                            data-line-number=\"131\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;as&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR132\"\n                                                            data-line-number=\"132\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;break&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR133\"\n                                                            data-line-number=\"133\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;callable&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR134\"\n                                                            data-line-number=\"134\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;case&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR135\"\n                                                            data-line-number=\"135\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;catch&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR136\"\n                                                            data-line-number=\"136\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;class&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR137\"\n                                                            data-line-number=\"137\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;clone&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR138\"\n                                                            data-line-number=\"138\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;const&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR139\"\n                                                            data-line-number=\"139\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;continue&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR140\"\n                                                            data-line-number=\"140\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;declare&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR141\"\n                                                            data-line-number=\"141\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;default&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR142\"\n                                                            data-line-number=\"142\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;die&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR143\"\n                                                            data-line-number=\"143\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;do&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR144\"\n                                                            data-line-number=\"144\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;echo&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR145\"\n                                                            data-line-number=\"145\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;else&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR146\"\n                                                            data-line-number=\"146\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;elseif&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR147\"\n                                                            data-line-number=\"147\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;empty&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR148\"\n                                                            data-line-number=\"148\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;enddeclare&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR149\"\n                                                            data-line-number=\"149\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;endfor&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR150\"\n                                                            data-line-number=\"150\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;endforeach&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR151\"\n                                                            data-line-number=\"151\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;endif&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR152\"\n                                                            data-line-number=\"152\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;endswitch&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR153\"\n                                                            data-line-number=\"153\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;endwhile&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR154\"\n                                                            data-line-number=\"154\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;eval&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR155\"\n                                                            data-line-number=\"155\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;exit&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR156\"\n                                                            data-line-number=\"156\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;extends&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR157\"\n                                                            data-line-number=\"157\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;final&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR158\"\n                                                            data-line-number=\"158\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;finally&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR159\"\n                                                            data-line-number=\"159\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;fn&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR160\"\n                                                            data-line-number=\"160\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;for&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR161\"\n                                                            data-line-number=\"161\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;foreach&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR162\"\n                                                            data-line-number=\"162\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;function&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR163\"\n                                                            data-line-number=\"163\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;global&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR164\"\n                                                            data-line-number=\"164\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;goto&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR165\"\n                                                            data-line-number=\"165\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;if&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR166\"\n                                                            data-line-number=\"166\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;implements&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR167\"\n                                                            data-line-number=\"167\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;include&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR168\"\n                                                            data-line-number=\"168\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;include_once&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR169\"\n                                                            data-line-number=\"169\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;instanceof&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR170\"\n                                                            data-line-number=\"170\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;insteadof&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR171\"\n                                                            data-line-number=\"171\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;interface&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR172\"\n                                                            data-line-number=\"172\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;isset&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR173\"\n                                                            data-line-number=\"173\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;list&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR174\"\n                                                            data-line-number=\"174\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;namespace&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR175\"\n                                                            data-line-number=\"175\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;new&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR176\"\n                                                            data-line-number=\"176\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;or&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR177\"\n                                                            data-line-number=\"177\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;print&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR178\"\n                                                            data-line-number=\"178\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;private&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR179\"\n                                                            data-line-number=\"179\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;protected&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR180\"\n                                                            data-line-number=\"180\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;public&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR181\"\n                                                            data-line-number=\"181\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;require&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR182\"\n                                                            data-line-number=\"182\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;require_once&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR183\"\n                                                            data-line-number=\"183\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;return&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR184\"\n                                                            data-line-number=\"184\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;static&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR185\"\n                                                            data-line-number=\"185\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;switch&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR186\"\n                                                            data-line-number=\"186\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;throw&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR187\"\n                                                            data-line-number=\"187\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;trait&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR188\"\n                                                            data-line-number=\"188\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;try&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR189\"\n                                                            data-line-number=\"189\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;unset&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR190\"\n                                                            data-line-number=\"190\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;use&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR191\"\n                                                            data-line-number=\"191\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;var&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR192\"\n                                                            data-line-number=\"192\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;while&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR193\"\n                                                            data-line-number=\"193\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;xor&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR194\"\n                                                            data-line-number=\"194\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-s>&#39;yield&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR195\"\n                                                            data-line-number=\"195\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> ];</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR196\"\n                                                            data-line-number=\"196\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR197\"\n                                                            data-line-number=\"197\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"da930f4ae3e749eeab25b10944c426365de7658d9870d69c45f08778aba8fe67\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbL120\"\n                                                            data-line-number=\"120\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">}</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-87513b0688c5bcf349a2eb04697cff111c5fefdc2ef1ed8b94bfb0262041a4cbR198\"\n                                                            data-line-number=\"198\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">}</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/Commands/StubsCommand.php\" data-short-path=\"656d08d\"\n                                            data-anchor=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/d1ac2c5c2f7dccb546ac28a2eab928b282b0c77f?diff=split&amp;direction=full&amp;mode=100644&amp;path=src%2FCommands%2FStubsCommand.php\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"5 changes: 5 additions &amp; 0 deletions\">5 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span></span>\n\n\n                                                <a title=\"src/Commands/StubsCommand.php\" class=\"Link--primary\"\n                                                    href=\"#diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\">src/Commands/StubsCommand.php</a>\n\n                                                <clipboard-copy value=\"src/Commands/StubsCommand.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/Commands/StubsCommand.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FCommands%2FStubsCommand.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/d1ac2c5c2f7dccb546ac28a2eab928b282b0c77f?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=34&amp;left_hunk_size=6&amp;mode=100644&amp;path=src%2FCommands%2FStubsCommand.php&amp;right=34&amp;right_hunk_size=11\"\n                                                                data-left-range=\"1-33\" data-right-range=\"1-33\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -34,6 +34,11 @@ public function handle()</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269L34\"\n                                                            data-line-number=\"34\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>stubsPath</span>.<span\n                                                                    class=pl-s>&#39;/livewire.view.stub&#39;</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R34\"\n                                                            data-line-number=\"34\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>stubsPath</span>.<span\n                                                                    class=pl-s>&#39;/livewire.view.stub&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269L35\"\n                                                            data-line-number=\"35\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-en>file_get_contents</span>(__DIR__.<span\n                                                                    class=pl-s>&#39;/livewire.view.stub&#39;</span>)</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R35\"\n                                                            data-line-number=\"35\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-en>file_get_contents</span>(__DIR__.<span\n                                                                    class=pl-s>&#39;/livewire.view.stub&#39;</span>)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269L36\"\n                                                            data-line-number=\"36\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> );</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R36\"\n                                                            data-line-number=\"36\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> );</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R37\"\n                                                            data-line-number=\"37\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R38\"\n                                                            data-line-number=\"38\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-en>file_put_contents</span>(</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R39\"\n                                                            data-line-number=\"39\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>stubsPath</span>.<span\n                                                                    class=pl-s>&#39;/livewire.test.stub&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R40\"\n                                                            data-line-number=\"40\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-en>file_get_contents</span>(__DIR__.<span\n                                                                    class=pl-s>&#39;/livewire.test.stub&#39;</span>)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R41\"\n                                                            data-line-number=\"41\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> );</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269L37\"\n                                                            data-line-number=\"37\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R42\"\n                                                            data-line-number=\"42\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269L38\"\n                                                            data-line-number=\"38\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;<span\n                                                                    class=pl-en>info</span>(<span class=pl-s>&#39;Stubs\n                                                                    published successfully.&#39;</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R43\"\n                                                            data-line-number=\"43\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;<span\n                                                                    class=pl-en>info</span>(<span class=pl-s>&#39;Stubs\n                                                                    published successfully.&#39;</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"85a456cebdfd44da6a7030266def00b8388d7536c4299b6105ff1abdd074f972\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269L39\"\n                                                            data-line-number=\"39\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269R44\"\n                                                            data-line-number=\"44\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-656d08dd8e0d0f4b2e539c4661490a5942bd3047ff2b3c27d5d9163488cb4269\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/d1ac2c5c2f7dccb546ac28a2eab928b282b0c77f?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=39&amp;last_right=44&amp;left=46&amp;left_hunk_size=&amp;mode=100644&amp;path=src%2FCommands%2FStubsCommand.php&amp;right=46&amp;right_hunk_size=\"\n                                                                data-left-range=\"40-45\" data-right-range=\"45-45\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/Commands/the-tao.php\" data-short-path=\"163d5ca\"\n                                            data-anchor=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/853603300d361c0a2dec09a7f6f0bdb6b8f68789?diff=split&amp;direction=full&amp;mode=100644&amp;path=src%2FCommands%2Fthe-tao.php\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"4 changes: 2 additions &amp; 2 deletions\">4 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"src/Commands/the-tao.php\" class=\"Link--primary\"\n                                                    href=\"#diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9\">src/Commands/the-tao.php</a>\n\n                                                <clipboard-copy value=\"src/Commands/the-tao.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/Commands/the-tao.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FCommands%2Fthe-tao.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/853603300d361c0a2dec09a7f6f0bdb6b8f68789?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=14&amp;left_hunk_size=8&amp;mode=100644&amp;path=src%2FCommands%2Fthe-tao.php&amp;right=14&amp;right_hunk_size=8\"\n                                                                data-left-range=\"1-13\" data-right-range=\"1-13\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -14,8 +14,8 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;Knowing\n                                                                    others is intelligence; knowing yourself is true\n                                                                    wisdom.&#39;</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;Knowing\n                                                                    others is intelligence; knowing yourself is true\n                                                                    wisdom.&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;If your\n                                                                    happiness depends on money, you will never be happy\n                                                                    with yourself.&#39;</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;If your\n                                                                    happiness depends on money, you will never be happy\n                                                                    with yourself.&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;If you look\n                                                                    to others for fulfillment, you will never truly be\n                                                                    fulfilled.&#39;</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R16\"\n                                                            data-line-number=\"16\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;If you look\n                                                                    to others for fulfillment, you will never truly be\n                                                                    fulfilled.&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L17\"\n                                                            data-line-number=\"17\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=\"pl-s\">'To attain\n                                                                    knowledge, add things every day; To attain wisdom,\n                                                                    subtract things every day'</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R17\"\n                                                            data-line-number=\"17\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=\"pl-s\">'To attain\n                                                                    knowledge, add things every day; To attain wisdom,\n                                                                    subtract things every day<span\n                                                                        class=\"x x-first x-last\">.</span>'</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L18\"\n                                                            data-line-number=\"18\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;Close your\n                                                                    eyes. Count to one. That is how long forever\n                                                                    feels.&#39;</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R18\"\n                                                            data-line-number=\"18\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;Close your\n                                                                    eyes. Count to one. That is how long forever\n                                                                    feels.&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L19\"\n                                                            data-line-number=\"19\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"> <span class=\"pl-s\">'The whole\n                                                                    world belongs to you'</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R19\"\n                                                            data-line-number=\"19\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=\"pl-s\">'The whole\n                                                                    world belongs to you<span\n                                                                        class=\"x x-first x-last\">.</span>'</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L20\"\n                                                            data-line-number=\"20\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;Stop trying\n                                                                    to control.&#39;</span>,</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R20\"\n                                                            data-line-number=\"20\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s>&#39;Stop trying\n                                                                    to control.&#39;</span>,</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"b7b42fc94a8b80ebab3cbdf4e2849b64800913e9619d23c661071e33dd8e130c\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9L21\"\n                                                            data-line-number=\"21\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">];</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-163d5ca7f00205ed0f151d39e83fca2512c7ae431621b3a94ecdf24ade8665f9R21\"\n                                                            data-line-number=\"21\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \">];</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/ComponentConcerns/HandlesActions.php\"\n                                            data-short-path=\"407939f\"\n                                            data-anchor=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n                                                <div class=\"js-expand-full-wrapper d-inline\">\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-expand-full directional-expander tooltipped tooltipped-se\"\n                                                        aria-label=\"Expand all\"\n                                                        data-url=\"/livewire/livewire/blob_expand/da6d5e81a4618718df967fc03602fa902b291310?diff=split&amp;direction=full&amp;mode=100644&amp;path=src%2FComponentConcerns%2FHandlesActions.php\">\n                                                        <svg aria-label=\"Expand all\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-unfold\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                            aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                    <button type=\"button\"\n                                                        class=\"btn-link color-text-tertiary no-underline js-collapse-diff tooltipped tooltipped-se\"\n                                                        aria-label=\"Collapse expanded lines\" hidden>\n                                                        <svg aria-label=\"Collapse added diff lines\" aria-hidden=\"false\"\n                                                            class=\"octicon octicon-fold\" height=\"16\" viewBox=\"0 0 16 16\"\n                                                            version=\"1.1\" width=\"16\" aria-hidden=\"true\">\n                                                            <path\n                                                                d=\"M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                            </path>\n                                                        </svg>\n                                                    </button>\n                                                </div>\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"2 changes: 1 addition &amp; 1 deletion\">2 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-deleted\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span><span\n                                                        class=\"diffstat-block-neutral\"></span></span>\n\n\n                                                <a title=\"src/ComponentConcerns/HandlesActions.php\"\n                                                    class=\"Link--primary\"\n                                                    href=\"#diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\">src/ComponentConcerns/HandlesActions.php</a>\n\n                                                <clipboard-copy value=\"src/ComponentConcerns/HandlesActions.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/ComponentConcerns/HandlesActions.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FComponentConcerns%2FHandlesActions.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                        <col width=\"44\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"0\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Up\" aria-label=\"Expand Up\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/da6d5e81a4618718df967fc03602fa902b291310?diff=split&amp;direction=up&amp;in_wiki_context=&amp;last_left=&amp;last_right=&amp;left=129&amp;left_hunk_size=7&amp;mode=100644&amp;path=src%2FComponentConcerns%2FHandlesActions.php&amp;right=129&amp;right_hunk_size=7\"\n                                                                data-left-range=\"1-128\" data-right-range=\"1-128\">\n                                                                <svg class=\"octicon octicon-fold-up\" viewBox=\"0 0 16 16\"\n                                                                    version=\"1.1\" width=\"16\" height=\"16\"\n                                                                    aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M7.823 1.677L4.927 4.573A.25.25 0 005.104 5H7.25v3.236a.75.75 0 101.5 0V5h2.146a.25.25 0 00.177-.427L8.177 1.677a.25.25 0 00-.354 0zM13.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zm-3.75.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM7.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM4 11.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM1.75 11a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -129,7 +129,7 @@ public function\n                                                            callMethod($method, $params = [])</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"0ebe9708612e6c6672853da7a24380fe3d419d3c0940427260925c9a387225d9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46L129\"\n                                                            data-line-number=\"129\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> } <span class=pl-k>else</span>\n                                                                {</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46R129\"\n                                                            data-line-number=\"129\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> } <span class=pl-k>else</span>\n                                                                {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"0ebe9708612e6c6672853da7a24380fe3d419d3c0940427260925c9a387225d9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46L130\"\n                                                            data-line-number=\"130\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>currentValue</span> = <span\n                                                                    class=pl-s1><span class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;{<span\n                                                                    class=pl-c1><span\n                                                                        class=pl-c1>$</span>prop</span>};</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46R130\"\n                                                            data-line-number=\"130\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>currentValue</span> = <span\n                                                                    class=pl-s1><span class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;{<span\n                                                                    class=pl-c1><span\n                                                                        class=pl-c1>$</span>prop</span>};</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"0ebe9708612e6c6672853da7a24380fe3d419d3c0940427260925c9a387225d9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46L131\"\n                                                            data-line-number=\"131\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46R131\"\n                                                            data-line-number=\"131\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"0ebe9708612e6c6672853da7a24380fe3d419d3c0940427260925c9a387225d9\">\n                                                        <td class=\"blob-num blob-num-deletion js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46L132\"\n                                                            data-line-number=\"132\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-deletion \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"-\"><span class=\"x x-first x-last\">\n                                                                </span></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46R132\"\n                                                            data-line-number=\"132\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"0ebe9708612e6c6672853da7a24380fe3d419d3c0940427260925c9a387225d9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46L133\"\n                                                            data-line-number=\"133\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;<span\n                                                                    class=pl-en>syncInput</span>(<span class=pl-s1><span\n                                                                        class=pl-c1>$</span>prop</span>, ! <span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>currentValue</span>, <span\n                                                                    class=pl-s1><span class=pl-c1>$</span>rehash</span>\n                                                                = <span class=pl-c1>false</span>);</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46R133\"\n                                                            data-line-number=\"133\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span class=pl-s1><span\n                                                                        class=pl-c1>$</span><span\n                                                                        class=pl-smi>this</span></span>-&gt;<span\n                                                                    class=pl-en>syncInput</span>(<span class=pl-s1><span\n                                                                        class=pl-c1>$</span>prop</span>, ! <span\n                                                                    class=pl-s1><span\n                                                                        class=pl-c1>$</span>currentValue</span>, <span\n                                                                    class=pl-s1><span class=pl-c1>$</span>rehash</span>\n                                                                = <span class=pl-c1>false</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"0ebe9708612e6c6672853da7a24380fe3d419d3c0940427260925c9a387225d9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46L134\"\n                                                            data-line-number=\"134\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46R134\"\n                                                            data-line-number=\"134\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"0ebe9708612e6c6672853da7a24380fe3d419d3c0940427260925c9a387225d9\">\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46L135\"\n                                                            data-line-number=\"135\"></td>\n\n                                                        <td data-split-side=\"left\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context \">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-k>return</span>;</span>\n\n                                                        </td>\n\n                                                        <td class=\"blob-num blob-num-context js-linkable-line-number\"\n                                                            id=\"diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46R135\"\n                                                            data-line-number=\"135\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-context\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\" \"> <span\n                                                                    class=pl-k>return</span>;</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n                                                    <tr class=\"js-expandable-line\" data-position=\"\">\n                                                        <td class=\"blob-num blob-num-expandable\" colspan=\"1\">\n                                                            <a href=\"#diff-407939fdc8fd9ff8f7aca791faec0a01792b72a9f10ffc2bf215b2fa508fde46\"\n                                                                class=\"js-expand directional-expander single-expander\"\n                                                                title=\"Expand Down\" aria-label=\"Expand Down\"\n                                                                data-url=\"/livewire/livewire/blob_excerpt/da6d5e81a4618718df967fc03602fa902b291310?diff=split&amp;direction=down&amp;in_wiki_context=&amp;last_left=135&amp;last_right=135&amp;left=169&amp;left_hunk_size=&amp;mode=100644&amp;path=src%2FComponentConcerns%2FHandlesActions.php&amp;right=169&amp;right_hunk_size=\"\n                                                                data-left-range=\"136-168\" data-right-range=\"136-168\">\n                                                                <svg class=\"octicon octicon-fold-down\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" aria-hidden=\"true\">\n                                                                    <path\n                                                                        d=\"M8.177 14.323l2.896-2.896a.25.25 0 00-.177-.427H8.75V7.764a.75.75 0 10-1.5 0V11H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0zM2.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zM8.25 5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 4.25a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5a.75.75 0 01.75.75zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </a>\n                                                        </td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\"></td>\n                                                    </tr>\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/Exceptions/ComponentAttributeMissingOnDynamicComponentException.php\"\n                                            data-short-path=\"98acb7f\"\n                                            data-anchor=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"13 changes: 13 additions &amp; 0 deletions\">13 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span></span>\n\n\n                                                <a title=\"src/Exceptions/ComponentAttributeMissingOnDynamicComponentException.php\"\n                                                    class=\"Link--primary\"\n                                                    href=\"#diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130\">src/Exceptions/ComponentAttributeMissingOnDynamicComponentException.php</a>\n\n                                                <clipboard-copy\n                                                    value=\"src/Exceptions/ComponentAttributeMissingOnDynamicComponentException.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/Exceptions/ComponentAttributeMissingOnDynamicComponentException.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FExceptions%2FComponentAttributeMissingOnDynamicComponentException.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr data-position=\"0\">\n                                                        <td id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130HL0\"\n                                                            class=\"blob-num blob-num-hunk\" data-line-number=\"...\"></td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -0,0 +1,13 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span\n                                                                    class=pl-ent>&lt;?php</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R2\"\n                                                            data-line-number=\"2\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R3\"\n                                                            data-line-number=\"3\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=pl-k>namespace</span>\n                                                                <span class=pl-v>Livewire</span>\\<span\n                                                                    class=pl-v>Exceptions</span>;</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R4\"\n                                                            data-line-number=\"4\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R5\"\n                                                            data-line-number=\"5\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=pl-k>class</span> <span\n                                                                    class=pl-v>ComponentAttributeMissingOnDynamicComponentException</span>\n                                                                <span class=pl-k>extends</span> \\<span\n                                                                    class=pl-v>Exception</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R6\"\n                                                            data-line-number=\"6\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\">{</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R7\"\n                                                            data-line-number=\"7\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>use</span> <span\n                                                                    class=pl-v>BypassViewHandler</span>;</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R8\"\n                                                            data-line-number=\"8\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R9\"\n                                                            data-line-number=\"9\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>public</span>\n                                                                <span class=pl-k>function</span> <span\n                                                                    class=pl-en>__construct</span>()</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R10\"\n                                                            data-line-number=\"10\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R11\"\n                                                            data-line-number=\"11\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-smi>parent</span>::<span\n                                                                    class=pl-en>__construct</span>(<span\n                                                                    class=pl-s>&#39;Dynamic component tag is missing\n                                                                    component attribute.&#39;</span>);</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R12\"\n                                                            data-line-number=\"12\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"e378a968f81962b35d006a9c32f93cf900717f89210179264d39efe7ea23d843\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-98acb7f13823ac1be1fb8b528683656b627169387a8d23ff6884e226131fd130R13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\">}</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n\n                                    <div id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718e\"\n                                        data-details-container-group=\"file\" class=\"file js-file js-details-container js-targetable-element Details\n              Details--on open\n\n\n\n\n\n              show-inline-notes\n              js-feature-enabled-split-diff-copy-protection\n           \" data-file-type=\".php\" data-file-deleted=\"false\">\n                                        <div class=\"file-header d-flex flex-md-row flex-column flex-md-items-center file-header--expandable js-file-header \"\n                                            data-path=\"src/Exceptions/DirectlyCallingLifecycleHooksNotAllowedException.php\"\n                                            data-short-path=\"f2edcee\"\n                                            data-anchor=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718e\"\n                                            data-file-type=\".php\" data-file-deleted=\"false\">\n                                            <div class=\"file-info flex-auto min-width-0 mb-md-0 mb-2\">\n                                                <button type=\"button\" class=\"btn-octicon js-details-target\"\n                                                    aria-label=\"Toggle diff contents\" aria-expanded=\"true\"\n                                                    style=\"width: 22px;\">\n                                                    <svg class=\"octicon octicon-chevron-down Details-content--hidden\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-chevron-right Details-content--shown\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z\">\n                                                        </path>\n                                                    </svg>\n                                                </button>\n\n\n\n\n\n\n\n                                                <span class=\"diffstat tooltipped tooltipped-e\"\n                                                    aria-label=\"15 changes: 15 additions &amp; 0 deletions\">15 <span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span><span\n                                                        class=\"diffstat-block-added\"></span></span>\n\n\n                                                <a title=\"src/Exceptions/DirectlyCallingLifecycleHooksNotAllowedException.php\"\n                                                    class=\"Link--primary\"\n                                                    href=\"#diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718e\">src/Exceptions/DirectlyCallingLifecycleHooksNotAllowedException.php</a>\n\n                                                <clipboard-copy\n                                                    value=\"src/Exceptions/DirectlyCallingLifecycleHooksNotAllowedException.php\"\n                                                    data-copy-feedback=\"Copied!\" aria-label=\"Copy\"\n                                                    class=\"js-clipboard-copy zeroclipboard-link color-text-secondary Link--onHover\">\n                                                    <svg class=\"octicon octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z\">\n                                                        </path>\n                                                    </svg>\n                                                    <svg class=\"octicon octicon-check js-clipboard-check-icon mx-1 d-inline-block d-none color-text-success\"\n                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                        aria-hidden=\"true\">\n                                                        <path fill-rule=\"evenodd\"\n                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                        </path>\n                                                    </svg>\n                                                </clipboard-copy>\n\n\n\n                                            </div>\n\n                                            <div\n                                                class=\"file-actions pt-0 mb-md-0 mb-2 ml-md-2 flex-shrink-0 flex-md-justify-end\">\n                                                <div class=\"d-flex flex-justify-end\">\n\n\n\n\n\n\n\n\n\n\n                                                    <details\n                                                        class=\"js-file-header-dropdown dropdown details-overlay details-reset pr-2 pl-2\">\n                                                        <summary class=\"height-full\">\n                                                            <div\n                                                                class=\"height-full d-flex flex-items-center Link--secondary\">\n                                                                <svg aria-label=\"Show options\"\n                                                                    class=\"octicon octicon-kebab-horizontal\"\n                                                                    viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                    height=\"16\" role=\"img\">\n                                                                    <path\n                                                                        d=\"M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\">\n                                                                    </path>\n                                                                </svg>\n                                                            </div>\n                                                        </summary>\n                                                        <details-menu\n                                                            class=\"dropdown-menu dropdown-menu-sw show-more-popover color-text-primary position-absolute f5\"\n                                                            style=\"width:185px; z-index:99; right: -4px;\">\n                                                            <label role=\"menuitemradio\"\n                                                                class=\"dropdown-item btn-link text-normal d-block pl-5\"\n                                                                tabindex=\"0\" aria-checked=\"true\">\n                                                                <span class=\"position-absolute ml-n4\"><svg\n                                                                        class=\"octicon octicon-check\" height=\"16\"\n                                                                        viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\"\n                                                                        aria-hidden=\"true\">\n                                                                        <path fill-rule=\"evenodd\"\n                                                                            d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\">\n                                                                        </path>\n                                                                    </svg></span>\n                                                                <input type=\"checkbox\" checked\n                                                                    class=\"d-none js-toggle-file-notes\">\n                                                                Show comments\n                                                            </label>\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a href=\"/livewire/livewire/blob/33101c83b75728651b9e668a4559f97def7c9138/src/Exceptions/DirectlyCallingLifecycleHooksNotAllowedException.php\"\n                                                                class=\"pl-5 dropdown-item btn-link\" rel=\"nofollow\"\n                                                                role=\"menuitem\"\n                                                                data-ga-click=\"View file, click, location:files_changed_dropdown\">\n                                                                View file\n                                                            </a>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to make changes.\">\n                                                                Edit file\n                                                            </button>\n\n\n                                                            <button type=\"button\" disabled role=\"menuitem\"\n                                                                class=\"pl-5 dropdown-item btn-link\"\n                                                                aria-label=\"You must be signed in and have push access to delete this file.\">\n                                                                Delete file\n                                                            </button>\n\n\n                                                            <div role=\"none\" class=\"dropdown-divider\"></div>\n\n                                                            <a class=\"pl-5 dropdown-item btn-link js-remove-unless-platform\"\n                                                                data-platforms=\"windows,mac\" role=\"menuitem\"\n                                                                href=\"x-github-client://openRepo/https://github.com/livewire/livewire?branch=master&amp;filepath=src%2FExceptions%2FDirectlyCallingLifecycleHooksNotAllowedException.php\"\n                                                                aria-label=\"Open this file in GitHub Desktop\"\n                                                                data-ga-click=\"Repository, open with desktop\">\n                                                                Open in desktop\n                                                            </a>\n\n\n\n                                                        </details-menu>\n                                                    </details>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"js-file-content Details-content--hidden\"\n                                            data-hydro-view=\"{&quot;event_type&quot;:&quot;pull_request.select_diff_range&quot;,&quot;payload&quot;:{&quot;actor_id&quot;:3670578,&quot;pull_request_id&quot;:null,&quot;repository_id&quot;:170355508,&quot;diff_type&quot;:&quot;SPLIT&quot;,&quot;whitespace_ignored&quot;:false,&quot;originating_url&quot;:&quot;https://github.com/livewire/livewire/compare/v2.4.0...master&quot;,&quot;user_id&quot;:3670578}}\"\n                                            data-hydro-view-hmac=\"a87745c5c6f76beea50a2f83c7f5893320e30d8d4b678bfd6f3a54953a1aeb5f\">\n                                            <div class=\"data highlight js-blob-wrapper \" style=\"overflow-x: auto\">\n                                                <table\n                                                    class=\"diff-table js-diff-table tab-size  file-diff-split js-file-diff-split\"\n                                                    data-tab-size=\"4\"\n                                                    data-diff-anchor=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718e\"\n                                                    data-paste-markdown-skip>\n                                                    <colgroup>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                        <col width=\"40\">\n                                                        <col>\n                                                    </colgroup>\n\n\n                                                    <tr data-position=\"0\">\n                                                        <td id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eHL0\"\n                                                            class=\"blob-num blob-num-hunk\" data-line-number=\"...\"></td>\n                                                        <td class=\"blob-code blob-code-inner blob-code-hunk\"\n                                                            colspan=\"3\">@@ -0,0 +1,15 @@</td>\n                                                    </tr>\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR1\"\n                                                            data-line-number=\"1\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span\n                                                                    class=pl-ent>&lt;?php</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR2\"\n                                                            data-line-number=\"2\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR3\"\n                                                            data-line-number=\"3\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=pl-k>namespace</span>\n                                                                <span class=pl-v>Livewire</span>\\<span\n                                                                    class=pl-v>Exceptions</span>;</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR4\"\n                                                            data-line-number=\"4\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR5\"\n                                                            data-line-number=\"5\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><span class=pl-k>class</span> <span\n                                                                    class=pl-v>DirectlyCallingLifecycleHooksNotAllowedException</span>\n                                                                <span class=pl-k>extends</span> \\<span\n                                                                    class=pl-v>Exception</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR6\"\n                                                            data-line-number=\"6\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\">{</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR7\"\n                                                            data-line-number=\"7\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>use</span> <span\n                                                                    class=pl-v>BypassViewHandler</span>;</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR8\"\n                                                            data-line-number=\"8\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"><br></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR9\"\n                                                            data-line-number=\"9\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-k>public</span>\n                                                                <span class=pl-k>function</span> <span\n                                                                    class=pl-en>__construct</span>(<span\n                                                                    class=pl-s1><span class=pl-c1>$</span>method</span>,\n                                                                <span class=pl-s1><span\n                                                                        class=pl-c1>$</span>component</span>)</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR10\"\n                                                            data-line-number=\"10\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> {</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR11\"\n                                                            data-line-number=\"11\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span\n                                                                    class=pl-smi>parent</span>::<span\n                                                                    class=pl-en>__construct</span>(</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR12\"\n                                                            data-line-number=\"12\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> <span class=pl-s>&quot;Unable to\n                                                                    call lifecycle method [{$method}] directly on\n                                                                    component: [{$component}]&quot;</span></span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR13\"\n                                                            data-line-number=\"13\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> );</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR14\"\n                                                            data-line-number=\"14\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\"> }</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n                                                    <tr\n                                                        data-hunk=\"6d75d6eb2ddccc5718e27840bc17134666bcdce1e047288fcc16007e2449f834\">\n                                                        <td class=\"blob-num blob-num-empty empty-cell\"></td>\n                                                        <td class=\"blob-code blob-code-empty empty-cell\"\n                                                            data-split-side=\"left\"></td>\n\n                                                        <td class=\"blob-num blob-num-addition js-linkable-line-number\"\n                                                            id=\"diff-f2edcee2db727cc98c6a44c9d50a2a7850b906b083656e7711ee16e00504718eR15\"\n                                                            data-line-number=\"15\"></td>\n\n                                                        <td data-split-side=\"right\" data-lock-side-selection=\"\"\n                                                            class=\"code-review blob-code blob-code-addition\">\n\n                                                            <span class=\"blob-code-inner blob-code-marker\"\n                                                                data-code-marker=\"+\">}</span>\n\n                                                        </td>\n                                                    </tr>\n\n\n\n\n\n                                                </table>\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n                                </div>\n\n                                <div class=\"js-diff-progressive-container\">\n                                    <include-fragment\n                                        src=\"/livewire/livewire/diffs?bytes=13564&amp;lines=384&amp;responsive=true&amp;sha1=8055af7730938cd607616fde122825ed960a9b71&amp;sha2=33101c83b75728651b9e668a4559f97def7c9138&amp;start_entry=20&amp;sticky=false\"\n                                        class=\"diff-progressive-loader js-diff-progressive-loader mb-4 d-flex flex-items-center flex-justify-center\">\n                                        <svg data-hide-on-error=\"true\"\n                                            style=\"box-sizing: content-box; color: var(--color-icon-primary);\"\n                                            viewBox=\"0 0 16 16\" fill=\"none\" width=\"32\" height=\"32\" class=\"anim-rotate\">\n                                            <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\"\n                                                stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" />\n                                            <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\" stroke-width=\"2\"\n                                                stroke-linecap=\"round\" vector-effect=\"non-scaling-stroke\" />\n                                        </svg>\n\n                                        <div data-show-on-error hidden>\n                                            <svg class=\"octicon octicon-alert color-text-danger mr-1\"\n                                                viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                                                aria-hidden=\"true\">\n                                                <path fill-rule=\"evenodd\"\n                                                    d=\"M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z\">\n                                                </path>\n                                            </svg>\n                                            Oops, something went wrong.\n                                            <button type=\"button\" class=\"btn-link\" data-retry-button>Retry</button>\n                                        </div>\n                                    </include-fragment>\n                                </div>\n\n\n                            </div>\n\n                            <button type=\"button\" class=\"js-toggle-all-file-notes\" data-hotkey=\"i\"\n                                style=\"display:none\">Toggle all file notes</button>\n\n                            <button type=\"button\" class=\"js-toggle-all-file-annotations\" data-hotkey=\"a\"\n                                style=\"display:none\">Toggle all file annotations</button>\n\n                            <svg aria-hidden=\"true\" width=\"320px\" height=\"84px\" viewBox=\"0 0 340 84\" version=\"1.1\"\n                                xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                                class=\"diff-placeholder-svg position-absolute bottom-0\">\n                                <defs>\n                                    <clippath id=\"diff-placeholder\">\n                                        <rect x=\"0\" y=\"0\" width=\"67.0175439\" height=\"11.9298746\" rx=\"2\"></rect>\n                                        <rect x=\"18.9473684\" y=\"47.7194983\" width=\"100.701754\" height=\"11.9298746\"\n                                            rx=\"2\"></rect>\n                                        <rect x=\"0\" y=\"71.930126\" width=\"37.8947368\" height=\"11.9298746\" rx=\"2\"></rect>\n                                        <rect x=\"127.017544\" y=\"48.0703769\" width=\"53.3333333\" height=\"11.9298746\"\n                                            rx=\"2\"></rect>\n                                        <rect x=\"187.719298\" y=\"48.0703769\" width=\"72.9824561\" height=\"11.9298746\"\n                                            rx=\"2\"></rect>\n                                        <rect x=\"76.8421053\" y=\"0\" width=\"140.350877\" height=\"11.9298746\" rx=\"2\"></rect>\n                                        <rect x=\"17.8947368\" y=\"23.8597491\" width=\"140.350877\" height=\"11.9298746\"\n                                            rx=\"2\"></rect>\n                                        <rect x=\"166.315789\" y=\"23.8597491\" width=\"173.684211\" height=\"11.9298746\"\n                                            rx=\"2\"></rect>\n                                    </clippath>\n\n                                    <linearGradient id=\"animated-diff-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"\n                                        spreadMethod=\"reflect\">\n                                        <stop offset=\"0\" stop-color=\"#eee\"></stop>\n                                        <stop offset=\"0.2\" stop-color=\"#eee\"></stop>\n                                        <stop offset=\"0.5\" stop-color=\"#ddd\"></stop>\n                                        <stop offset=\"0.8\" stop-color=\"#eee\"></stop>\n                                        <stop offset=\"1\" stop-color=\"#eee\"></stop>\n                                        <animateTransform attributeName=\"y1\" values=\"0%; 100%; 0\" dur=\"1s\"\n                                            repeatCount=\"3\"></animateTransform>\n                                        <animateTransform attributeName=\"y2\" values=\"100%; 200%; 0\" dur=\"1s\"\n                                            repeatCount=\"3\"></animateTransform>\n                                    </linearGradient>\n                                </defs>\n                            </svg>\n\n\n                        </div>\n                    </div>\n\n                    <div id=\"commit_comments_bucket\" class=\"compare-tab-comments d-none\">\n                        <div class=\"blankslate \">\n                            <svg class=\"octicon octicon-git-commit blankslate-icon\" height=\"32\" viewBox=\"0 0 24 24\"\n                                version=\"1.1\" width=\"32\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\"\n                                    d=\"M15.5 11.75a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm1.444-.75a5.001 5.001 0 00-9.888 0H2.75a.75.75 0 100 1.5h4.306a5.001 5.001 0 009.888 0h4.306a.75.75 0 100-1.5h-4.306z\">\n                                </path>\n                            </svg>\n\n                            <h3 class=\"mb-1\">No commit comments for this range</h3>\n\n\n\n\n\n                        </div>\n                    </div>\n                </div>\n\n            </main>\n        </div>\n\n    </div>\n\n\n    <div class=\"footer container-xl width-full p-responsive\" role=\"contentinfo\">\n        <div\n            class=\"position-relative d-flex flex-row-reverse flex-lg-row flex-wrap flex-lg-nowrap flex-justify-center flex-lg-justify-between pt-6 pb-2 mt-6 f6 color-text-secondary border-top color-border-secondary \">\n            <ul\n                class=\"list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0\">\n                <li class=\"mr-3 mr-lg-0\">&copy; 2021 GitHub, Inc.</li>\n                <li class=\"mr-3 mr-lg-0\"><a href=\"https://docs.github.com/en/github/site-policy/github-terms-of-service\"\n                        data-ga-click=\"Footer, go to terms, text:terms\">Terms</a></li>\n                <li class=\"mr-3 mr-lg-0\"><a\n                        href=\"https://docs.github.com/en/github/site-policy/github-privacy-statement\"\n                        data-ga-click=\"Footer, go to privacy, text:privacy\">Privacy</a></li>\n                <li class=\"mr-3 mr-lg-0\"><a data-ga-click=\"Footer, go to security, text:security\"\n                        href=\"https://github.com/security\">Security</a></li>\n                <li class=\"mr-3 mr-lg-0\"><a href=\"https://www.githubstatus.com/\"\n                        data-ga-click=\"Footer, go to status, text:status\">Status</a></li>\n                <li><a data-ga-click=\"Footer, go to help, text:Docs\" href=\"https://docs.github.com\">Docs</a></li>\n            </ul>\n\n            <a aria-label=\"Homepage\" title=\"GitHub\" class=\"footer-octicon d-none d-lg-block mx-lg-4\"\n                href=\"https://github.com\">\n                <svg height=\"24\" class=\"octicon octicon-mark-github\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"24\"\n                    aria-hidden=\"true\">\n                    <path fill-rule=\"evenodd\"\n                        d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\">\n                    </path>\n                </svg>\n            </a>\n            <ul\n                class=\"list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0\">\n                <li class=\"mr-3 mr-lg-0\"><a href=\"https://support.github.com\"\n                        data-ga-click=\"Footer, go to contact, text:contact\">Contact GitHub</a></li>\n                <li class=\"mr-3 mr-lg-0\"><a href=\"https://github.com/pricing\"\n                        data-ga-click=\"Footer, go to Pricing, text:Pricing\">Pricing</a></li>\n                <li class=\"mr-3 mr-lg-0\"><a href=\"https://docs.github.com\"\n                        data-ga-click=\"Footer, go to api, text:api\">API</a></li>\n                <li class=\"mr-3 mr-lg-0\"><a href=\"https://services.github.com\"\n                        data-ga-click=\"Footer, go to training, text:training\">Training</a></li>\n                <li class=\"mr-3 mr-lg-0\"><a href=\"https://github.blog\"\n                        data-ga-click=\"Footer, go to blog, text:blog\">Blog</a></li>\n                <li><a data-ga-click=\"Footer, go to about, text:about\" href=\"https://github.com/about\">About</a></li>\n            </ul>\n        </div>\n        <div class=\"d-flex flex-justify-center pb-6\">\n            <span class=\"f6 color-text-tertiary\"></span>\n        </div>\n\n\n    </div>\n\n\n\n    <div id=\"ajax-error-message\" class=\"ajax-error-message flash flash-error\" hidden>\n        <svg class=\"octicon octicon-alert\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n            <path fill-rule=\"evenodd\"\n                d=\"M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z\">\n            </path>\n        </svg>\n        <button type=\"button\" class=\"flash-close js-ajax-error-dismiss\" aria-label=\"Dismiss error\">\n            <svg class=\"octicon octicon-x\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                    d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\">\n                </path>\n            </svg>\n        </button>\n        You can't perform that action at this time.\n    </div>\n\n    <div class=\"js-stale-session-flash flash flash-warn flash-banner\" hidden>\n        <svg class=\"octicon octicon-alert\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\">\n            <path fill-rule=\"evenodd\"\n                d=\"M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z\">\n            </path>\n        </svg>\n        <span class=\"js-stale-session-flash-signed-in\" hidden>You signed in with another tab or window. <a\n                href=\"\">Reload</a> to refresh your session.</span>\n        <span class=\"js-stale-session-flash-signed-out\" hidden>You signed out in another tab or window. <a\n                href=\"\">Reload</a> to refresh your session.</span>\n    </div>\n    <template id=\"site-details-dialog\">\n        <details class=\"details-reset details-overlay details-overlay-dark lh-default color-text-primary hx_rsm\" open>\n            <summary role=\"button\" aria-label=\"Close dialog\"></summary>\n            <details-dialog class=\"Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal\">\n                <button class=\"Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0\" type=\"button\"\n                    aria-label=\"Close dialog\" data-close-dialog>\n                    <svg class=\"octicon octicon-x\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\"\n                        aria-hidden=\"true\">\n                        <path fill-rule=\"evenodd\"\n                            d=\"M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z\">\n                        </path>\n                    </svg>\n                </button>\n                <div class=\"octocat-spinner my-6 js-details-dialog-spinner\"></div>\n            </details-dialog>\n        </details>\n    </template>\n\n    <div class=\"Popover js-hovercard-content position-absolute\" style=\"display: none; outline: none;\" tabindex=\"0\">\n        <div class=\"Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large\"\n            style=\"width:360px;\">\n        </div>\n    </div>\n</body>\n\n</html>\n"
  },
  {
    "path": "benchmarks/init.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Alpine-3-keyed</title>\n    <link href=\"/css/currentStyle.css\" rel=\"stylesheet\" />\n    <script src=\"http://alpine-next.test/packages/alpinejs/dist/cdn.js\" defer></script>\n    <script>\n        window.start = performance.now()\n        document.addEventListener('alpine:initialized', () => {\n            setTimeout(() => {\n                console.log(performance.now() - window.start);\n            })\n        })\n    </script>\n  </head>\n  <body>\n    <div class=\"container\" id=\"main\" x-data=\"app\">\n      <div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                  @click=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                  @click=\"runLots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                  @click=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                  @click=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                  @click=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                  @click=\"swapRows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <table class=\"table table-hover table-striped test-data\">\n        <tbody>\n          <template x-for=\"item in data\" :key=\"item.id\">\n            <tr :class=\"item.id === selected ? 'danger' : ''\">\n              <td class=\"col-md-1\" x-text=\"item.id\"></td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\"></a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\" >x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n      <table class=\"table table-hover table-striped test-data\">\n        <tbody x-data=\"{ item: { id: 999999, label: 'yoyoyo' }}\">\n          <tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">5</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall yellow pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">6</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">7</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">8</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">9</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty white desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">10</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd blue pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">11</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">12</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large white bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">13</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">14</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">15</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">16</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain brown table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">17</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">18</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">19</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">20</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">21</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain pink cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">22</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">23</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">24</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">25</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">26</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large white chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">27</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">28</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">29</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">30</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">31</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome white chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">32</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">33</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">34</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant green desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">35</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty purple keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">36</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">37</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small yellow sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">38</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">39</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">40</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">41</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry white car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">42</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain blue car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">43</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">44</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">45</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">46</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short purple desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">47</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">48</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly orange desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">49</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">50</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">51</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable pink desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">52</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">53</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">54</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">55</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">56</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain red pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">57</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">58</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">59</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">60</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">61</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">62</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big orange cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">63</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty black bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">64</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">65</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">66</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome red pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">67</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd purple keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">68</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">69</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important blue table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr>\n            <div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n                <div class=\"row\">\n                  <div class=\"col-md-6\">\n                    <h1>Alpine-3-keyed</h1>\n                  </div>\n                  <div class=\"col-md-6\">\n                    <div class=\"row\">\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"run\"\n                          @click=\"run\"\n                        >\n                          Create 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"runlots\"\n                          @click=\"runLots\"\n                        >\n                          Create 10,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"add\"\n                          @click=\"add\"\n                        >\n                          Append 1,000 rows\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"update\"\n                          @click=\"update\"\n                        >\n                          Update every 10th row\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"clear\"\n                          @click=\"clear\"\n                        >\n                          Clear\n                        </button>\n                      </div>\n                      <div class=\"col-sm-6 smallpad\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-primary btn-block\"\n                          id=\"swaprows\"\n                          @click=\"swapRows\"\n                        >\n                          Swap Rows\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                  @click=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                  @click=\"runLots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                  @click=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                  @click=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                  @click=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                  @click=\"swapRows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div><div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n            <tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">70</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">71</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">72</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">73</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly yellow pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">74</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty purple keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">75</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">76</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">77</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">78</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">79</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">80</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">81</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">82</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">83</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big purple desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">84</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">85</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small green table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">86</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">87</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap yellow burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">88</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large purple car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">89</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">90</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean green desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">91</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">92</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">93</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive white pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">94</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">95</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">96</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long blue cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">97</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">98</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">99</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry yellow mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">100</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy purple cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">101</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful orange cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">102</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">103</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">104</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">105</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">106</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">107</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive blue house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">108</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">109</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">110</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">111</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">112</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">113</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">114</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">115</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">116</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">117</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important yellow pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">118</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">119</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant blue car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">120</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">121</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">122</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">123</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">124</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">125</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">126</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome yellow sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">127</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">128</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">129</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">130</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful orange bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">131</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">132</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">133</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">134</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">135</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry pink car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">136</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">137</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important purple keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">138</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">139</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">140</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">141</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">142</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">143</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">144</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain white table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">145</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short white pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">146</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">147</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">148</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable blue cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">149</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">150</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">151</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">152</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">153</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">154</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">155</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">156</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">157</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">158</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">159</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">160</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">161</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">162</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy pink house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">163</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">164</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">165</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">166</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">167</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">168</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">169</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">170</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">171</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">172</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">173</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy red car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">174</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">175</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">176</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">177</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">178</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">179</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">180</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important brown table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">181</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">182</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">183</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">184</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">185</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy green desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">186</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">187</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive purple cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">188</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall white car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">189</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">190</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy purple cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">191</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">192</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">193</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">194</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain white chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">195</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small pink table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">196</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">197</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">198</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy white sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">199</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">200</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">201</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">202</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">203</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap pink table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">204</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">205</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">206</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">207</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">208</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">209</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">210</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">211</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">212</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall white sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">213</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">214</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">215</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">216</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd red car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">217</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">218</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">219</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">220</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">221</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">222</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">223</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">224</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">225</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">226</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">227</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long blue car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">228</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly orange table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">229</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall yellow bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">230</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">231</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">232</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">233</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry red desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">234</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">235</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">236</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">237</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">238</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">239</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">240</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long yellow burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">241</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">242</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">243</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">244</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">245</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly purple car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">246</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">247</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">248</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short black pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">249</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">250</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome black bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">251</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">252</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty orange car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">253</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">254</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">255</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">256</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">257</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">258</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap yellow pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">259</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">260</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">261</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly purple desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">262</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">263</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">264</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">265</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">266</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">267</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd purple cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">268</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant white pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">269</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">270</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large yellow pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">271</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">272</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">273</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short white sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">274</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">275</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">276</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">277</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">278</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">279</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy purple car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">280</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">281</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd blue pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">282</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd yellow sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">283</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">284</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">285</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive white desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">286</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome pink mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">287</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">288</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">289</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">290</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive yellow desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">291</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">292</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big brown table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">293</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">294</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">295</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">296</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy purple burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">297</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable white car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">298</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">299</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">300</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">301</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">302</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty black keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">303</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">304</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">305</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint white bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">306</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">307</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd black bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">308</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd black chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">309</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">310</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive pink house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">311</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">312</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome blue pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">313</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive black burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">314</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain black house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">315</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">316</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">317</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry purple keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">318</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big purple burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">319</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">320</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive black pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">321</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">322</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">323</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">324</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy yellow bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">325</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">326</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">327</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">328</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">329</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy white table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">330</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">331</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">332</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">333</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">334</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">335</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy yellow burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">336</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">337</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">338</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy blue pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">339</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">340</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">341</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">342</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">343</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean blue desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">344</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">345</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable white bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">346</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">347</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">348</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">349</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful red pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">350</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">351</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy pink table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">352</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty purple desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">353</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy orange car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">354</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">355</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">356</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful yellow pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">357</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">358</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">359</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd pink table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">360</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly white pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">361</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big yellow mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">362</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small black bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">363</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">364</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">365</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">366</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint white table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">367</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">368</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">369</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">370</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">371</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">372</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">373</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy yellow pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">374</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable pink cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">375</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean brown table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">376</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">377</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">378</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd blue car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">379</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome blue desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">380</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">381</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">382</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">383</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">384</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">385</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">386</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">387</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">388</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain black chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">389</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">390</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">391</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">392</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable orange cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">393</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large green cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">394</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly blue desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">395</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">396</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">397</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long black chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">398</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly white table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">399</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short green desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">400</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">401</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">402</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">403</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small white house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">404</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long brown house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">405</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap pink car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">406</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">407</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short green pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">408</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">409</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big brown table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">410</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">411</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">412</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">413</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap purple cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">414</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">415</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy green table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">416</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy yellow pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">417</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">418</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">419</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">420</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">421</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain yellow chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">422</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">423</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">424</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean pink mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">425</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint white pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">426</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">427</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy pink sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">428</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">429</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty purple car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">430</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint red pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">431</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">432</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">433</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large blue burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">434</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive black house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">435</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">436</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy pink car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">437</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">438</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small brown house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">439</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">440</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">441</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint white house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">442</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy purple pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">443</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome red car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">444</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important blue house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">445</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">446</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">447</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">448</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty yellow burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">449</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">450</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive blue pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">451</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">452</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">453</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">454</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy red sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">455</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">456</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">457</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long pink desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">458</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">459</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">460</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">461</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">462</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">463</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">464</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">465</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">466</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">467</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty pink table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">468</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">469</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">470</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">471</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">472</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large black keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">473</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap green sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">474</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long black sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">475</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long black chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">476</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty purple cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">477</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">478</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">479</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">480</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant white house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">481</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">482</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">483</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">484</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable black pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">485</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">486</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry red desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">487</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty pink cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">488</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy green table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">489</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy black house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">490</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">491</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall pink cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">492</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">493</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly red car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">494</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">495</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">496</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">497</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small pink car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">498</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy white burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">499</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">500</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome blue desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">501</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">502</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly pink cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">503</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">504</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">505</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">506</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">507</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">508</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">509</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">510</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big yellow bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">511</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large orange desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">512</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">513</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">514</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important pink mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">515</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">516</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty brown table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">517</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd white pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">518</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall red desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">519</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">520</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long green keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">521</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">522</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">523</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">524</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">525</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">526</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall white car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">527</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">528</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">529</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">530</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">531</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">532</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap green keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">533</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large black chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">534</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap white pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">535</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive purple burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">536</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">537</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">538</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">539</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">540</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly pink table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">541</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful black burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">542</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">543</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">544</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">545</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">546</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">547</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">548</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">549</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long orange cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">550</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">551</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">552</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall yellow mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">553</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">554</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">555</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy purple mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">556</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain yellow bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">557</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall purple house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">558</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive red pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">559</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">560</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">561</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable yellow chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">562</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">563</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">564</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">565</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">566</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">567</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long white sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">568</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">569</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy orange table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">570</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry black house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">571</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">572</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">573</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">574</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">575</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">576</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable blue pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">577</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">578</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable blue burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">579</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">580</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">581</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">582</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">583</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">584</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">585</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy red pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">586</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">587</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">588</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">589</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">590</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean pink cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">591</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short white desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">592</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">593</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint blue cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">594</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">595</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean pink desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">596</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">597</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">598</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain blue burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">599</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">600</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">601</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">602</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">603</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">604</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain pink house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">605</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">606</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">607</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">608</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">609</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">610</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly blue car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">611</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small green cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">612</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly black keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">613</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">614</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">615</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy orange table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">616</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">617</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">618</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short yellow desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">619</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">620</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">621</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">622</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">623</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">624</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">625</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy black sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">626</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry red desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">627</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable red sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">628</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly yellow pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">629</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">630</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big blue house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">631</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">632</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">633</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">634</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">635</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive pink sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">636</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">637</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">638</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">639</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">640</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean orange house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">641</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">642</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">643</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall orange cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">644</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">645</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">646</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">647</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd black chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">648</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">649</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain red desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">650</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">651</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">652</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">653</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">654</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">655</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy orange table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">656</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall purple house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">657</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly black sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">658</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">659</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">660</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short yellow mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">661</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty green bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">662</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important blue pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">663</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy pink sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">664</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">665</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">666</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">667</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">668</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">669</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">670</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">671</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain blue desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">672</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important green bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">673</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">674</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long white burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">675</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry yellow pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">676</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">677</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">678</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">679</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">680</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd black bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">681</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">682</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">683</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">684</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">685</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy blue burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">686</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive pink car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">687</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome orange bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">688</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">689</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">690</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important brown keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">691</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">692</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">693</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly white bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">694</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">695</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">696</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">697</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">698</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">699</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry blue pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">700</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive white sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">701</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small green bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">702</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important red pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">703</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">704</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">705</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly pink cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">706</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">707</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">708</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">709</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy pink sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">710</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry pink burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">711</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">712</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome blue house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">713</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd black desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">714</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty white burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">715</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">716</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small yellow chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">717</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">718</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy white desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">719</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">720</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">721</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive purple burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">722</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">723</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">724</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty purple house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">725</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">726</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">727</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd green cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">728</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean green desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">729</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">730</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">731</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">732</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive black table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">733</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy purple car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">734</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">735</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">736</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">737</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint orange cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">738</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable black sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">739</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">740</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful yellow pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">741</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive brown car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">742</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">743</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful blue bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">744</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain pink mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">745</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">746</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long blue house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">747</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">748</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">749</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome pink chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">750</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">751</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry blue car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">752</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry pink mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">753</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">754</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">755</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">756</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">757</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">758</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">759</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">760</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">761</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">762</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">763</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short blue pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">764</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">765</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">766</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">767</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall white desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">768</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">769</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome green car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">770</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy green table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">771</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">772</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy yellow mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">773</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">774</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">775</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">776</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">777</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">778</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">779</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy green sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">780</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">781</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">782</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">783</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy green bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">784</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">785</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">786</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">787</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important white pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">788</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">789</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">790</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">791</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">792</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">793</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy orange car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">794</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">795</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long yellow chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">796</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant green sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">797</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">798</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">799</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">800</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy blue pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">801</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">802</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy pink house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">803</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">804</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">805</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable blue cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">806</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">807</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">808</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large blue cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">809</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">810</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">811</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall black bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">812</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large blue house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">813</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">814</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long red desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">815</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">816</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">817</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean orange house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">818</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">819</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">820</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">821</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd pink bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">822</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive pink car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">823</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">824</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">825</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint purple pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">826</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">827</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy white house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">828</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy pink house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">829</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint blue pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">830</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">831</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">832</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">833</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">834</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important orange car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">835</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive blue desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">836</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">837</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">838</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large brown house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">839</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty white car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">840</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">841</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">842</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">843</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">844</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">845</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain pink pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">846</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable brown mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">847</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive purple pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">848</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">849</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful purple burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">850</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy green cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">851</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">852</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short green pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">853</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big red keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">854</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy orange car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">855</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly orange burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">856</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">857</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall orange car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">858</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">859</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">860</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">861</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy blue car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">862</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">863</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">864</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive yellow house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">865</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">866</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap black desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">867</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">868</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small pink car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">869</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">870</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big purple desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">871</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">872</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant orange pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">873</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">874</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">875</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">876</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd white house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">877</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">878</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">879</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable brown pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">880</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain orange bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">881</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy blue desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">882</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy white bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">883</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly brown pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">884</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy white cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">885</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small white house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">886</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">887</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean purple chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">888</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">889</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important white burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">890</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">891</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">892</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">893</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">894</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">895</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big brown burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">896</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome red house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">897</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap green bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">898</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean orange mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">899</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly orange house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">900</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy white chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">901</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long red mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">902</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short orange bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">903</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint orange pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">904</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">905</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">906</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd orange mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">907</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty red desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">908</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">909</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">910</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small purple burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">911</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">912</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big white keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">913</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable pink sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">914</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">915</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">916</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy pink bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">917</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint orange chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">918</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">919</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry yellow table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">920</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable yellow keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">921</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important white mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">922</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">923</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small orange keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">924</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">925</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small black desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">926</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly yellow chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">927</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">928</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">inexpensive white table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">929</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain blue cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">930</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long white sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">931</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant white bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">932</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">933</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small blue burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">934</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">935</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful white table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">936</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long red cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">937</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">938</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd purple pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">939</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall purple desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">940</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">941</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall orange sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">942</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big blue burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">943</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful blue pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">944</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important brown sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">945</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">946</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small purple keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">947</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">948</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy green burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">949</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">950</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">951</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">952</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">953</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small blue cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">954</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large pink keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">955</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy brown cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">956</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome pink bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">957</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short purple mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">958</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy yellow car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">959</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">angry black burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">960</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">quaint black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">961</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">962</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large black desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">963</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">964</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful orange desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">965</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">large red table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">966</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">important pink house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">967</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall green mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">968</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">mushy yellow mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">969</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful brown chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">970</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful purple bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">971</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">easy yellow desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">972</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">small green pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">973</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable brown bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">974</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">tall red bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">975</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy red chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">976</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap purple sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">977</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">clean green pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">978</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">elegant pink house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">979</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">short purple car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">980</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">adorable white chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">981</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap blue mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">982</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long white car</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">983</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">crazy red burger</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">984</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">odd black cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">985</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">handsome black mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">986</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty yellow cookie</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">987</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy orange bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">988</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly yellow pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">989</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">expensive black pizza</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">990</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">long green table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">991</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap orange mouse</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">992</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">pretty orange bbq</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">993</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">fancy purple house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">994</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly blue chair</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">995</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">cheap brown desk</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">996</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful pink pony</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">997</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">plain blue sandwich</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">998</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">helpful purple table</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">999</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">unsightly blue keyboard</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr><tr :class=\"item.id === selected ? 'danger' : ''\" class=\"\">\n              <td class=\"col-md-1\" x-text=\"item.id\">1000</td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\">big green house</a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\">x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr>\n        </tbody>\n      </table>\n\n      <span\n        class=\"preloadicon glyphicon glyphicon-remove\"\n        aria-hidden=\"true\"\n      ></span>\n    </div>\n\n    <script>\n        document.addEventListener('alpine:init', () => {\n            let idCounter = 1;\n            const adjectives = [\"pretty\", \"large\", \"big\", \"small\", \"tall\", \"short\", \"long\", \"handsome\", \"plain\", \"quaint\", \"clean\", \"elegant\", \"easy\", \"angry\", \"crazy\", \"helpful\", \"mushy\", \"odd\", \"unsightly\", \"adorable\", \"important\", \"inexpensive\", \"cheap\", \"expensive\", \"fancy\"],\n            colours = [\"red\", \"yellow\", \"blue\", \"green\", \"pink\", \"brown\", \"purple\", \"brown\", \"white\", \"black\", \"orange\"],\n            nouns = [\"table\", \"chair\", \"house\", \"bbq\", \"desk\", \"car\", \"pony\", \"cookie\", \"sandwich\", \"burger\", \"pizza\", \"mouse\", \"keyboard\"];\n\n            function _random (max) { return Math.round(Math.random() * 1000) % max; };\n\n            function buildData(count) {\n            let data = new Array(count);\n            for (let i = 0; i < count; i++) {\n                data[i] = {\n                id: idCounter++,\n                label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`\n                }\n            }\n            return data;\n            }\n\n            Alpine.data('app', function() {\n                return {\n                    data: [],\n                    selected: undefined,\n\n                    add() { this.data = this.data.concat(buildData(1000)) },\n                    clear() {\n                        let start = performance.now()\n                        this.data = [];\n                        this.selected = undefined;\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    update() {\n                        let start = performance.now()\n                        for (let i = 0; i < this.data.length; i += 10) {\n                            this.data[i].label += ' !!!';\n                        }\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    remove(id) {\n                        let start = performance.now()\n                        const idx = this.data.findIndex(d => d.id === id);\n                        this.data.splice(idx, 1);\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    run() {\n                        let start = performance.now()\n                        this.data = buildData(1000);\n                        this.selected = undefined;\n                        setTimeout(() => {\n\n                        }, 0)\n                    },\n                    runLots() {\n                        let start = performance.now()\n                        this.data = buildData(10000);\n                        this.selected = undefined;\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    select(id) { this.selected = id },\n                    swapRows() {\n                        const d = this.data;\n                        if (d.length > 998) {\n                            const tmp = d[998];\n                            d[998] = d[1];\n                            d[1] = tmp;\n                        }\n                    }\n                }\n            })\n        })\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "benchmarks/loop.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Alpine-3-keyed</title>\n    <link href=\"/css/currentStyle.css\" rel=\"stylesheet\" />\n    <script src=\"http://alpine-next.test/packages/alpinejs/dist/cdn.js\" defer></script>\n    <!-- <script src=\"https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js\" defer></script> -->\n  </head>\n  <body>\n    <div class=\"container\" id=\"main\" x-data=\"{ data: []}\">\n      <div class=\"jumbotron\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h1>Alpine-3-keyed</h1>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"row\">\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"run\"\n                  @click=\"run\"\n                >\n                  Create 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"runlots\"\n                  @click=\"runLots\"\n                >\n                  Create 10,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"add\"\n                  @click=\"add\"\n                >\n                  Append 1,000 rows\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"update\"\n                  @click=\"update\"\n                >\n                  Update every 10th row\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"clear\"\n                  @click=\"clear\"\n                >\n                  Clear\n                </button>\n              </div>\n              <div class=\"col-sm-6 smallpad\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary btn-block\"\n                  id=\"swaprows\"\n                  @click=\"swapRows\"\n                >\n                  Swap Rows\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <table class=\"table table-hover table-striped test-data\">\n        <tbody>\n          <template x-for=\"item in data\" :key=\"item.id\">\n            <tr :class=\"item.id === selected ? 'danger' : ''\">\n              <td class=\"col-md-1\" x-text=\"item.id\"></td>\n              <td class=\"col-md-4\">\n                <a @click=\"select(item.id)\" x-text=\"item.label\"></a>\n              </td>\n              <td class=\"col-md-1\">\n                <a @click=\"remove(item.id)\" >x</a>\n              </td>\n              <td class=\"col-md-6\"></td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n\n      <span\n        class=\"preloadicon glyphicon glyphicon-remove\"\n        aria-hidden=\"true\"\n      ></span>\n    </div>\n\n    <script>\n            let idCounter = 1;\n            const adjectives = [\"pretty\", \"large\", \"big\", \"small\", \"tall\", \"short\", \"long\", \"handsome\", \"plain\", \"quaint\", \"clean\", \"elegant\", \"easy\", \"angry\", \"crazy\", \"helpful\", \"mushy\", \"odd\", \"unsightly\", \"adorable\", \"important\", \"inexpensive\", \"cheap\", \"expensive\", \"fancy\"],\n            colours = [\"red\", \"yellow\", \"blue\", \"green\", \"pink\", \"brown\", \"purple\", \"brown\", \"white\", \"black\", \"orange\"],\n            nouns = [\"table\", \"chair\", \"house\", \"bbq\", \"desk\", \"car\", \"pony\", \"cookie\", \"sandwich\", \"burger\", \"pizza\", \"mouse\", \"keyboard\"];\n\n            function _random (max) { return Math.round(Math.random() * 1000) % max; };\n\n            function buildData(count) {\n            let data = new Array(count);\n            for (let i = 0; i < count; i++) {\n                data[i] = {\n                id: idCounter++,\n                label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`\n                }\n            }\n            return data;\n            }\n\n            function app() {\n                return {\n                    data: [],\n                    selected: undefined,\n\n                    add() {\n                        let start = performance.now()\n                        this.data = this.data.concat(buildData(1000))\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    clear() {\n                        let start = performance.now()\n                        this.data = [];\n                        this.selected = undefined;\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    update() {\n                        let start = performance.now()\n                        for (let i = 0; i < this.data.length; i += 10) {\n                            this.data[i].label += ' !!!';\n                        }\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    remove(id) {\n                        let start = performance.now()\n                        const idx = this.data.findIndex(d => d.id === id);\n                        this.data.splice(idx, 1);\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    run() {\n                        let start = performance.now()\n                        this.data = buildData(100);\n                        this.selected = undefined;\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    runLots() {\n                        let start = performance.now()\n                        this.data = buildData(10000);\n                        this.selected = undefined;\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    select(id) {\n                        let start = performance.now()\n                        this.selected = id\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    },\n                    swapRows() {\n                        let start = performance.now()\n                        const d = this.data;\n                        if (d.length > 998) {\n                            const tmp = d[998];\n                            d[998] = d[1];\n                            d[1] = tmp;\n                        }\n                        setTimeout(() => {\n                            console.log(performance.now() - start);\n                        }, 0)\n                    }\n                }\n            }\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "benchmarks/memory.html",
    "content": "<html>\n    <script src=\"http://alpine-next.test/packages/alpinejs/dist/cdn.js\" defer></script>\n\n    <div x-data=\"{ items: [] }\">\n        <template x-for=\"item in items\">\n            <h1>hi</h1>\n        </template>\n\n        <button @click=\"items.length === 0 ? items.push('ggoo') : items = []\" x-text=\"'ghjghj'\">delete</button>\n    </div>\n\n    <script>\n        function remove() {\n            document.querySelector('span').remove()\n        }\n    </script>\n</html>\n"
  },
  {
    "path": "benchmarks/mutation_observer.html",
    "content": "<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document</title>\n    <script>\n        let mutations = []\n\n        let pauseCollection = false\n\n        function reverseMutation(mutation) {\n            let table = {\n                characterData: () => {\n                    mutation.target.textContent = mutation.oldValue\n                },\n                attributes: () => {\n                    if (! mutation.oldValue) {\n                        mutation.target.removeAttribute(mutation.attributeName)\n                        return\n                    }\n\n                    mutation.target.setAttribute(mutation.attributeName, mutation.oldValue)\n                },\n                childList: () => {\n                    if (mutation.removedNodes) {\n                        let parent = mutation.target\n                    }\n                }\n            }\n\n            console.log(mutation);\n            table[mutation.type]()\n        }\n\n        function reverse() {\n            pauseCollection = true\n\n            while (mutations.length > 0) reverseMutation(mutations.pop())\n\n            pauseCollection = false\n        }\n\n        document.addEventListener('DOMContentLoaded', () => {\n            let observer = new MutationObserver(imutations => {\n                if (pauseCollection) return\n\n                imutations.forEach(i => mutations.push(i))\n\n                console.log(imutations);\n            })\n\n            observer.observe(document.body, { characterData: true, attributeOldValue: true, characterDataOldValue: true, childList: true, subtree: true, attributes: true })\n        })\n    </script>\n</head>\n<body>\n    <div>\n        <h1 foo=\"bar\">yo</h1>\n        <h1>there</h1>\n\n        <button>this is cool</button>\n    </div>\n</body>\n</html>\n"
  },
  {
    "path": "cypress.json",
    "content": "{\n    \"ignoreTestFiles\": \"*.html\",\n    \"screenshotOnRunFailure\": false,\n    \"video\": false,\n    \"fixturesFolder\": \"tests/cypress/fixtures\",\n    \"integrationFolder\": \"tests/cypress/integration\",\n    \"pluginsFile\": \"tests/cypress/plugins/index.js\",\n    \"screenshotsFolder\": \"tests/cypress/screenshots\",\n    \"videosFolder\": \"tests/cypress/videos\",\n    \"supportFile\": \"tests/cypress/support/index.js\"\n}\n"
  },
  {
    "path": "index.html",
    "content": "<html>\n    <!-- <script src=\"./packages/intersect/dist/cdn.js\" defer></script>\n    <script src=\"./packages/morph/dist/cdn.js\" defer></script>\n    <script src=\"./packages/persist/dist/cdn.js\"></script>\n    <script src=\"./packages/focus/dist/cdn.js\"></script>\n    <script src=\"./packages/mask/dist/cdn.js\"></script>\n    <script src=\"./packages/ui/dist/cdn.js\" defer></script> -->\n    <script src=\"./packages/anchor/dist/cdn.js\" defer></script>\n    <script src=\"./packages/sort/dist/cdn.js\" defer></script>\n    <script src=\"./packages/alpinejs/dist/cdn.js\" defer></script>\n    <!-- <script src=\"//cdn.tailwindcss.com\"></script> -->\n    <!-- <script src=\"//cdn.tailwindcss.com\"></script> -->\n\n    <div x-data x-sort>\n        <div x-sort:item >foo</div>\n        <div >foo</div>\n        <div x-sort:item >foo</div>\n    </div>\n\n    <div x-data=\"{ val: true }\"\n    >\n   <input type=\"text\" x-model.boolean=\"val\">\n   <input type=\"checkbox\" x-model.boolean=\"val\">\n   <input type=\"radio\" name=\"foo\" value=\"true\" x-model.boolean=\"val\">\n   <input type=\"radio\" name=\"foo\" value=\"false\" x-model.boolean=\"val\">\n    </div>\n</html>\n"
  },
  {
    "path": "index2.html",
    "content": "<html>\n    <script src=\"./packages/navigate/dist/cdn.js\" defer></script>\n    <script src=\"./packages/alpinejs/dist/cdn.js\" defer></script>\n\n    <hr>\n    <a href=\"/index.html\">Previous</a>\n    <hr>\n\n    Second page:\n\n    <div x-data=\"{ count: 1 }\" x-navigate:persist=\"foo\">\n        <span x-text=\"count\"></span>\n\n        <button @click=\"count++\">+</button>\n    </div>\n</html>\n"
  },
  {
    "path": "jest.config.js",
    "content": "let config = {\n    rootDir: './tests/jest',\n}\n\nmodule.exports = config\n"
  },
  {
    "path": "morph.html",
    "content": "<html>\n    <script src=\"./packages/morph/dist/cdn.js\" defer></script>\n    <script src=\"./packages/alpinejs/dist/cdn.js\" defer></script>\n    <!-- <script src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.0.0/dist/cdn.min.js\" defer></script> -->\n\n<div id=\"before\">\n<!-- Before markup goes here: -->\n<ul>\n    <li data-key=\"1\">foo<input></li>\n</ul>\n</div>\n\n<div id=\"after\" style=\"display: none;\">\n<!-- After markup goes here: -->\n<ul>\n    <li data-key=\"2\">bar<input></li>\n    <li data-key=\"3\">baz<input></li>\n    <li data-key=\"1\">foo<input></li>\n</ul>\n</div>\n\n<div id=\"b\"></div>\n\n    <div style=\"display: flex;\">\n        <pre id=\"log-from\"></pre>\n        <pre id=\"log-to\"></pre>\n        <ul id=\"log-message\"></ul>\n    </div>\n\n    <div style=\"position: absolute; bottom: 0; left: 0; padding: 1rem; width: 100vw; background: gray; box-sizing: border-box;\">\n        <button onclick=\"start()\">Start</button>\n        <button onclick=\"next()\">Next Step</button>\n    </div>\n\n    <script>\n        function start() {\n            Alpine.morph.log((message, from, to) => {\n                console.log(message, from, to)\n                document.querySelector('#log-from').innerHTML = escape(from.outerHTML)\n                document.querySelector('#log-to').innerHTML = escape(to.outerHTML)\n                let li = document.createElement('li')\n                li.textContent = message\n                message && document.querySelector('#log-message').appendChild(li)\n            })\n\n            Alpine.morph(\n                document.querySelector('#before').firstElementChild,\n                document.querySelector('#after').firstElementChild.outerHTML,\n                { debug: true, key(el) { return el.dataset.key } }\n            )\n        }\n\n        function next() {\n            Alpine.morph.step()\n            setTimeout(() => window.dispatchEvent(new CustomEvent('refresh', { bubbles: true })))\n        }\n\n        function escape(unsafe) {\n            return unsafe\n                .replace(/\\n/g, \"⬎\\n\")\n                .replace(/&/g, \"&amp;\")\n                .replace(/</g, \"&lt;\")\n                .replace(/>/g, \"&gt;\")\n                .replace(/\"/g, \"&quot;\")\n                .replace(/'/g, \"&#039;\");\n        }\n    </script>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n    \"private\": true,\n    \"workspaces\": [\n        \"packages/*\"\n    ],\n    \"devDependencies\": {\n        \"axios\": \"^0.21.1\",\n        \"chalk\": \"^4.1.1\",\n        \"cypress\": \"^7.0.0\",\n        \"cypress-plugin-tab\": \"^1.0.5\",\n        \"dot-json\": \"^1.2.2\",\n        \"esbuild\": \"~0.16.17\",\n        \"jest\": \"^26.6.3\",\n        \"vitest\": \"^3.2.4\"\n    },\n    \"scripts\": {\n        \"build\": \"node ./scripts/build.js\",\n        \"watch\": \"node ./scripts/build.js --watch\",\n        \"test\": \"cypress run --quiet\",\n        \"cypress\": \"cypress open\",\n        \"vitest\": \"vitest run\",\n        \"update-docs\": \"node ./scripts/update-docs.js\",\n        \"release\": \"node ./scripts/release.js\"\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/builds/cdn.js",
    "content": "import Alpine from './../src/index'\n\nwindow.Alpine = Alpine\n\nqueueMicrotask(() => {\n    Alpine.start()\n})\n"
  },
  {
    "path": "packages/alpinejs/builds/module.js",
    "content": "import Alpine from './../src/index'\n\nexport default Alpine\n\nexport { Alpine }\n"
  },
  {
    "path": "packages/alpinejs/package.json",
    "content": "{\n    \"name\": \"alpinejs\",\n    \"version\": \"3.15.8\",\n    \"description\": \"The rugged, minimal JavaScript framework\",\n    \"homepage\": \"https://alpinejs.dev\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/alpinejs\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"dependencies\": {\n        \"@vue/reactivity\": \"~3.1.1\"\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/alpine.js",
    "content": "import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw, watch, transaction } from './reactivity'\nimport { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives'\nimport { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'\nimport { onElRemoved, onAttributeRemoved, onAttributesAdded, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'\nimport { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'\nimport { setEvaluator, setRawEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions, evaluateRaw } from './evaluator'\nimport { transition } from './directives/x-transition'\nimport { clone, cloneNode, skipDuringClone, onlyDuringClone, interceptClone } from './clone'\nimport { interceptor, initInterceptors } from './interceptor'\nimport { getBinding as bound, extractProp } from './utils/bind'\nimport { setErrorHandler } from './utils/error'\nimport { debounce } from './utils/debounce'\nimport { throttle } from './utils/throttle'\nimport { setStyles } from './utils/styles'\nimport { entangle } from './entangle'\nimport { nextTick } from './nextTick'\nimport { walk } from './utils/walk'\nimport { plugin } from './plugin'\nimport { magic, injectMagics } from './magics'\nimport { store } from './store'\nimport { bind } from './binds'\nimport { data } from './datas'\n\nlet Alpine = {\n    get reactive() { return reactive },\n    get release() { return release },\n    get effect() { return effect },\n    get raw() { return raw },\n    get transaction() { return transaction },\n    version: ALPINE_VERSION,\n    flushAndStopDeferringMutations,\n    dontAutoEvaluateFunctions,\n    disableEffectScheduling,\n    startObservingMutations,\n    stopObservingMutations,\n    setReactivityEngine,\n    onAttributeRemoved,\n    onAttributesAdded,\n    closestDataStack,\n    skipDuringClone,\n    onlyDuringClone,\n    addRootSelector,\n    addInitSelector,\n    setErrorHandler,\n    interceptClone,\n    addScopeToNode,\n    deferMutations,\n    mapAttributes,\n    evaluateLater,\n    interceptInit,\n    initInterceptors,\n    injectMagics,\n    setEvaluator,\n    setRawEvaluator,\n    mergeProxies,\n    extractProp,\n    findClosest,\n    onElRemoved,\n    closestRoot,\n    destroyTree,\n    interceptor, // INTERNAL: not public API and is subject to change without major release.\n    transition, // INTERNAL\n    setStyles, // INTERNAL\n    mutateDom,\n    directive,\n    entangle,\n    throttle,\n    debounce,\n    evaluate,\n    evaluateRaw,\n    initTree,\n    nextTick,\n    prefixed,\n    prefix,\n    plugin,\n    magic,\n    store,\n    start,\n    clone, // INTERNAL\n    cloneNode, // INTERNAL\n    bound,\n    $data,\n    watch,\n    walk,\n    data,\n    bind,\n}\n\nexport default Alpine\n"
  },
  {
    "path": "packages/alpinejs/src/binds.js",
    "content": "import { attributesOnly, directives } from \"./directives\"\n\nlet binds = {}\n\nexport function bind(name, bindings) {\n    let getBindings = typeof bindings !== 'function' ? () => bindings : bindings\n\n    if (name instanceof Element) {\n        return applyBindingsObject(name, getBindings())\n    } else {\n        binds[name] = getBindings\n    }\n\n    return () => {} // Null cleanup...\n}\n\nexport function injectBindingProviders(obj) {\n    Object.entries(binds).forEach(([name, callback]) => {\n        Object.defineProperty(obj, name, {\n            get() {\n                return (...args) => {\n                    return callback(...args)\n                }\n            }\n        })\n    })\n\n    return obj\n}\n\nexport function addVirtualBindings(el, bindings) {\n    let getBindings = typeof bindings !== 'function' ? () => bindings : bindings\n\n    el._x_virtualDirectives = getBindings()\n}\n\nexport function applyBindingsObject(el, obj, original) {\n    let cleanupRunners = []\n\n    while (cleanupRunners.length) cleanupRunners.pop()()\n\n    let attributes = Object.entries(obj).map(([name, value]) => ({ name, value }))\n\n    let staticAttributes = attributesOnly(attributes)\n\n    // Handle binding normal HTML attributes (non-Alpine directives).\n    attributes = attributes.map(attribute => {\n        if (staticAttributes.find(attr => attr.name === attribute.name)) {\n            return {\n                name: `x-bind:${attribute.name}`,\n                value: `\"${attribute.value}\"`,\n            }\n        }\n\n        return attribute\n    })\n\n    directives(el, attributes, original).map(handle => {\n        cleanupRunners.push(handle.runCleanups)\n\n        handle()\n    })\n\n    return () => {\n        while (cleanupRunners.length) cleanupRunners.pop()()\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/clone.js",
    "content": "import { effect, release, overrideEffect } from \"./reactivity\"\nimport { initTree, isRoot } from \"./lifecycle\"\nimport { walk } from \"./utils/walk\"\n\nexport let isCloning = false\n\nexport function skipDuringClone(callback, fallback = () => {}) {\n    return (...args) => isCloning ? fallback(...args) : callback(...args)\n}\n\nexport function onlyDuringClone(callback) {\n    return (...args) => isCloning && callback(...args)\n}\n\nlet interceptors = []\n\nexport function interceptClone(callback) {\n    interceptors.push(callback)\n}\n\nexport function cloneNode(from, to)\n{\n    interceptors.forEach(i => i(from, to))\n\n    isCloning = true\n\n    // We don't need reactive effects in the new tree.\n    // Cloning is just used to seed new server HTML with\n    // Alpine before \"morphing\" it onto live Alpine...\n    dontRegisterReactiveSideEffects(() => {\n        initTree(to, (el, callback) => {\n            // We're hijacking the \"walker\" so that we\n            // only initialize the element we're cloning...\n            callback(el, () => {})\n        })\n    })\n\n    isCloning = false\n}\n\nexport let isCloningLegacy = false\n\n/** deprecated */\nexport function clone(oldEl, newEl) {\n    if (! newEl._x_dataStack) newEl._x_dataStack = oldEl._x_dataStack\n\n    isCloning = true\n    isCloningLegacy = true\n\n    dontRegisterReactiveSideEffects(() => {\n        cloneTree(newEl)\n    })\n\n    isCloning = false\n    isCloningLegacy = false\n}\n\n/** deprecated */\nexport function cloneTree(el) {\n    let hasRunThroughFirstEl = false\n\n    let shallowWalker = (el, callback) => {\n        walk(el, (el, skip) => {\n            if (hasRunThroughFirstEl && isRoot(el)) return skip()\n\n            hasRunThroughFirstEl = true\n\n            callback(el, skip)\n        })\n    }\n\n    initTree(el, shallowWalker)\n}\n\nfunction dontRegisterReactiveSideEffects(callback) {\n    let cache = effect\n\n    overrideEffect((callback, el) => {\n        let storedEffect = cache(callback)\n\n        release(storedEffect)\n\n        return () => {}\n    })\n\n    callback()\n\n    overrideEffect(cache)\n}\n"
  },
  {
    "path": "packages/alpinejs/src/datas.js",
    "content": "\nlet datas = {}\n\nexport function data(name, callback) {\n    datas[name] = callback\n}\n\nexport function injectDataProviders(obj, context) {\n    Object.entries(datas).forEach(([name, callback]) => {\n        Object.defineProperty(obj, name, {\n            get() {\n                return (...args) => {\n                    return callback.bind(context)(...args)\n                }\n            },\n\n            enumerable: false,\n        })\n    })\n\n    return obj\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives/index.js",
    "content": "import { directive } from '../directives'\nimport { warn } from '../utils/warn'\n\nimport './x-transition'\nimport './x-modelable'\nimport './x-teleport'\nimport './x-ignore'\nimport './x-effect'\nimport './x-model'\nimport './x-cloak'\nimport './x-init'\nimport './x-text'\nimport './x-html'\nimport './x-bind'\nimport './x-data'\nimport './x-show'\nimport './x-for'\nimport './x-ref'\nimport './x-if'\nimport './x-id'\nimport './x-on'\n\n// Register warnings for people using plugin syntaxes and not loading the plugin itself:\nwarnMissingPluginDirective('Collapse', 'collapse', 'collapse')\nwarnMissingPluginDirective('Intersect', 'intersect', 'intersect')\nwarnMissingPluginDirective('Focus', 'trap', 'focus')\nwarnMissingPluginDirective('Mask', 'mask', 'mask')\n\nfunction warnMissingPluginDirective(name, directiveName, slug) {\n    directive(directiveName, (el) => warn(`You can't use [x-${directiveName}] without first installing the \"${name}\" plugin here: https://alpinejs.dev/plugins/${slug}`, el))\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-bind.js",
    "content": "import { directive, into, mapAttributes, prefix, startingWith } from '../directives'\nimport { evaluateLater } from '../evaluator'\nimport { mutateDom } from '../mutation'\nimport bind from '../utils/bind'\nimport { applyBindingsObject, injectBindingProviders } from '../binds'\n\nmapAttributes(startingWith(':', into(prefix('bind:'))))\n\nlet handler = (el, { value, modifiers, expression, original }, { effect, cleanup }) => {\n    if (! value) {\n        let bindingProviders = {}\n        injectBindingProviders(bindingProviders)\n\n        let getBindings = evaluateLater(el, expression)\n\n        getBindings(bindings => {\n            applyBindingsObject(el, bindings, original)\n        }, { scope: bindingProviders } )\n\n        return\n    }\n\n    if (value === 'key') return storeKeyForXFor(el, expression)\n\n    if (el._x_inlineBindings && el._x_inlineBindings[value] && el._x_inlineBindings[value].extract) {\n        return\n    }\n\n    let evaluate = evaluateLater(el, expression)\n\n    effect(() => evaluate(result => {\n        // If nested object key is undefined, set the default value to empty string.\n        if (result === undefined && typeof expression === 'string' && expression.match(/\\./)) {\n            result = ''\n        }\n\n        mutateDom(() => bind(el, value, result, modifiers))\n    }))\n\n    cleanup(() => {\n        el._x_undoAddedClasses && el._x_undoAddedClasses()\n        el._x_undoAddedStyles && el._x_undoAddedStyles()\n    })\n}\n\n// @todo: see if I can take advantage of the object created here inside the\n// non-inline handler above so we're not duplicating work twice...\nhandler.inline = (el, { value, modifiers, expression }) => {\n    if (! value) return;\n\n    if (! el._x_inlineBindings) el._x_inlineBindings = {}\n\n    el._x_inlineBindings[value] = { expression, extract: false }\n}\n\ndirective('bind', handler)\n\nfunction storeKeyForXFor(el, expression) {\n    el._x_keyExpression = expression\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-cloak.js",
    "content": "import { directive, prefix } from '../directives'\nimport { mutateDom } from '../mutation'\n\ndirective('cloak', el => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix('cloak')))))\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-data.js",
    "content": "import { directive, prefix } from '../directives'\nimport { initInterceptors } from '../interceptor'\nimport { injectDataProviders } from '../datas'\nimport { addRootSelector } from '../lifecycle'\nimport { interceptClone, isCloning, isCloningLegacy } from '../clone'\nimport { addScopeToNode } from '../scope'\nimport { injectMagics, magic } from '../magics'\nimport { reactive } from '../reactivity'\nimport { evaluate } from '../evaluator'\n\naddRootSelector(() => `[${prefix('data')}]`)\n\ndirective('data', ((el, { expression }, { cleanup }) => {\n    if (shouldSkipRegisteringDataDuringClone(el)) return\n\n    expression = expression === '' ? '{}' : expression\n\n    let magicContext = {}\n    injectMagics(magicContext, el)\n\n    let dataProviderContext = {}\n    injectDataProviders(dataProviderContext, magicContext)\n\n    let data = evaluate(el, expression, { scope: dataProviderContext })\n\n    if (data === undefined || data === true) data = {}\n\n    injectMagics(data, el)\n\n    let reactiveData = reactive(data)\n\n    initInterceptors(reactiveData)\n\n    let undo = addScopeToNode(el, reactiveData)\n\n    reactiveData['init'] && evaluate(el, reactiveData['init'])\n\n    cleanup(() => {\n        reactiveData['destroy'] && evaluate(el, reactiveData['destroy'])\n\n        undo()\n    })\n}))\n\ninterceptClone((from, to) => {\n    // Transfer over existing runtime Alpine state from\n    // the existing dom tree over to the new one...\n    if (from._x_dataStack) {\n        to._x_dataStack = from._x_dataStack\n\n        // Set a flag to signify the new tree is using\n        // pre-seeded state (used so x-data knows when\n        // and when not to initialize state)...\n        to.setAttribute('data-has-alpine-state', true)\n    }\n})\n\n// If we are cloning a tree, we only want to evaluate x-data if another\n// x-data context DOESN'T exist on the component.\n// The reason a data context WOULD exist is that we graft root x-data state over\n// from the live tree before hydrating the clone tree.\nfunction shouldSkipRegisteringDataDuringClone(el) {\n    if (! isCloning) return false\n    if (isCloningLegacy) return true\n\n    return el.hasAttribute('data-has-alpine-state')\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-effect.js",
    "content": "import { skipDuringClone } from '../clone'\nimport { directive } from '../directives'\nimport { evaluate, evaluateLater } from '../evaluator'\n\ndirective('effect', skipDuringClone((el, { expression }, { effect }) => {\n    effect(evaluateLater(el, expression))\n}))\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-for.js",
    "content": "import { addScopeToNode } from '../scope'\nimport { evaluateLater } from '../evaluator'\nimport { directive } from '../directives'\nimport { reactive } from '../reactivity'\nimport { initTree, destroyTree } from '../lifecycle'\nimport { mutateDom } from '../mutation'\nimport { warn } from '../utils/warn'\nimport { skipDuringClone } from '../clone'\n\ndirective('for', (el, { expression }, { effect, cleanup }) => {\n    let iteratorNames = parseForExpression(expression)\n\n    let evaluateItems = evaluateLater(el, iteratorNames.items)\n    let evaluateKey = evaluateLater(el,\n        // the x-bind:key expression is stored for our use instead of evaluated.\n        el._x_keyExpression || 'index'\n    )\n\n    el._x_lookup = new Map()\n\n    effect(() => loop(el, iteratorNames, evaluateItems, evaluateKey))\n\n    cleanup(() => {\n        el._x_lookup.forEach(el =>\n            mutateDom(() => {\n                destroyTree(el)\n\n                el.remove()\n            })\n        )\n\n        delete el._x_lookup\n    })\n})\n\nfunction refreshScope(scope) {\n    return (newScope) => {\n        Object.entries(newScope).forEach(([key, value]) => {\n            scope[key] = value\n        })\n    }\n}\n\nfunction loop(templateEl, iteratorNames, evaluateItems, evaluateKey) {\n    evaluateItems(items => {\n        // Prepare yourself. There's a lot going on here. Take heart,\n        // every bit of complexity in this function was added for\n        // the purpose of making Alpine fast with large datas.\n\n        // Support number literals. Ex: x-for=\"i in 100\"\n        if (isNumeric(items))\n            items = Array.from({ length: items }, (_, i) => i + 1)\n\n        if (items === undefined) items = []\n\n        // Support Set and Map objects by converting to arrays.\n        if (items instanceof Set) items = Array.from(items)\n        if (items instanceof Map) items = Array.from(items)\n\n        // In order to remove elements early we need to generate the key/scope\n        // pairs up front, moving existing elements from the old lookup to the\n        // new. This leaves only the elements to be removed in the old lookup.\n        let oldLookup = templateEl._x_lookup\n        let lookup = new Map()\n        templateEl._x_lookup = lookup\n\n        let hasStringKeys = isObject(items)\n        let scopeEntries = Object.entries(items).map(([index, item]) => {\n            if (! hasStringKeys) index = parseInt(index)\n            let scope = getIterationScopeVariables(iteratorNames, item, index, items)\n            let key\n            evaluateKey(innerKey => {\n                if (typeof innerKey === 'object')\n                    warn('x-for key cannot be an object, it must be a string or an integer', templateEl)\n\n                if (oldLookup.has(innerKey)) {\n                    lookup.set(innerKey, oldLookup.get(innerKey))\n                    oldLookup.delete(innerKey)\n                }\n                key = innerKey\n            }, { scope: { index, ...scope } })\n            return [key, scope]\n        })\n\n        mutateDom(() => {\n            oldLookup.forEach((el) => {\n                destroyTree(el)\n                el.remove()\n            })\n\n            let added = new Set()\n\n            let prev = templateEl\n            scopeEntries.forEach(([key, scope]) => {\n                if (lookup.has(key)) {\n                    let el = lookup.get(key)\n                    el._x_refreshXForScope(scope)\n\n                    if (prev.nextElementSibling !== el) {\n                        if (prev.nextElementSibling)\n                            el.replaceWith(prev.nextElementSibling)\n                        prev.after(el)\n                    }\n                    prev = el\n\n                    if (el._x_currentIfEl) {\n                        if (el.nextElementSibling !== el._x_currentIfEl)\n                            prev.after(el._x_currentIfEl)\n                        prev = el._x_currentIfEl\n                    }\n                    return\n                }\n\n                let clone = document.importNode(templateEl.content, true).firstElementChild\n                let reactiveScope = reactive(scope)\n                addScopeToNode(clone, reactiveScope, templateEl)\n                clone._x_refreshXForScope = refreshScope(reactiveScope)\n\n                lookup.set(key, clone)\n                added.add(clone)\n\n                prev.after(clone)\n                prev = clone\n            })\n            skipDuringClone(() => added.forEach(clone => initTree(clone)))()\n        })\n    })\n}\n\n// This was taken from VueJS 2.* core. Thanks Vue!\nfunction parseForExpression(expression) {\n    let forIteratorRE = /,([^,\\}\\]]*)(?:,([^,\\}\\]]*))?$/\n    let stripParensRE = /^\\s*\\(|\\)\\s*$/g\n    let forAliasRE = /([\\s\\S]*?)\\s+(?:in|of)\\s+([\\s\\S]*)/\n    let inMatch = expression.match(forAliasRE)\n\n    if (! inMatch) return\n\n    let res = {}\n    res.items = inMatch[2].trim()\n    let item = inMatch[1].replace(stripParensRE, '').trim()\n    let iteratorMatch = item.match(forIteratorRE)\n\n    if (iteratorMatch) {\n        res.item = item.replace(forIteratorRE, '').trim()\n        res.index = iteratorMatch[1].trim()\n\n        if (iteratorMatch[2]) {\n            res.collection = iteratorMatch[2].trim()\n        }\n    } else {\n        res.item = item\n    }\n\n    return res\n}\n\nfunction getIterationScopeVariables(iteratorNames, item, index, items) {\n    // We must create a new object, so each iteration has a new scope\n    let scopeVariables = {}\n\n    // Support array destructuring ([foo, bar]).\n    if (/^\\[.*\\]$/.test(iteratorNames.item) && Array.isArray(item)) {\n        let names = iteratorNames.item.replace('[', '').replace(']', '').split(',').map(i => i.trim())\n\n        names.forEach((name, i) => {\n            scopeVariables[name] = item[i]\n        })\n    // Support object destructuring ({ foo: 'oof', bar: 'rab' }).\n    } else if (/^\\{.*\\}$/.test(iteratorNames.item) && ! Array.isArray(item) && typeof item === 'object') {\n        let names = iteratorNames.item.replace('{', '').replace('}', '').split(',').map(i => i.trim())\n\n        names.forEach(name => {\n            scopeVariables[name] = item[name]\n        })\n    } else {\n        scopeVariables[iteratorNames.item] = item\n    }\n\n    if (iteratorNames.index) scopeVariables[iteratorNames.index] = index\n\n    if (iteratorNames.collection) scopeVariables[iteratorNames.collection] = items\n\n    return scopeVariables\n}\n\nfunction isNumeric(subject){\n    return ! Array.isArray(subject) && ! isNaN(subject)\n}\n\nfunction isObject(subject) {\n    return typeof subject === 'object' && ! Array.isArray(subject)\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-html.js",
    "content": "import { directive } from '../directives'\nimport { initTree } from '../lifecycle'\nimport { mutateDom } from '../mutation'\n\ndirective('html', (el, { expression }, { effect, evaluateLater }) => {\n    let evaluate = evaluateLater(expression)\n\n    effect(() => {\n        evaluate(value => {\n            mutateDom(() => {\n                el.innerHTML = value ?? ''\n\n                el._x_ignoreSelf = true\n                initTree(el)\n                delete el._x_ignoreSelf\n            })\n        })\n    })\n})\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-id.js",
    "content": "import { interceptClone } from \"../clone\"\nimport { directive } from \"../directives\"\nimport { setIdRoot } from '../ids'\n\ndirective('id', (el, { expression }, { evaluate }) => {\n    let names = evaluate(expression)\n\n    names.forEach(name => setIdRoot(el, name))\n})\n\ninterceptClone((from, to) => {\n    // Transfer over existing ID registrations from\n    // the existing dom tree over to the new one\n    // so that there aren't ID mismatches...\n    if (from._x_ids) {\n        to._x_ids = from._x_ids\n    }\n})\n\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-if.js",
    "content": "import { evaluateLater } from '../evaluator'\nimport { addScopeToNode } from '../scope'\nimport { directive } from '../directives'\nimport { initTree, destroyTree } from '../lifecycle'\nimport { mutateDom } from '../mutation'\nimport { warn } from \"../utils/warn\"\nimport { skipDuringClone } from '../clone'\n\ndirective('if', (el, { expression }, { effect, cleanup }) => {\n    if (el.tagName.toLowerCase() !== 'template') warn('x-if can only be used on a <template> tag', el)\n\n    let evaluate = evaluateLater(el, expression)\n\n    let show = () => {\n        if (el._x_currentIfEl) return el._x_currentIfEl\n\n        let clone = el.content.cloneNode(true).firstElementChild\n\n        addScopeToNode(clone, {}, el)\n\n        mutateDom(() => {\n            el.after(clone)\n\n            // These nodes will be \"inited\" as morph walks the tree...\n            skipDuringClone(() => initTree(clone))()\n        })\n\n        el._x_currentIfEl = clone\n\n        el._x_undoIf = () => {\n            mutateDom(() => {\n                destroyTree(clone)\n\n                clone.remove()\n            })\n\n            delete el._x_currentIfEl\n        }\n\n        return clone\n    }\n\n    let hide = () => {\n        if (! el._x_undoIf) return\n\n        el._x_undoIf()\n\n        delete el._x_undoIf\n    }\n\n    effect(() => evaluate(value => {\n        value ? show() : hide()\n    }))\n\n    cleanup(() => el._x_undoIf && el._x_undoIf())\n})\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-ignore.js",
    "content": "import { directive } from \"../directives\"\n\nlet handler = () => {}\n\nhandler.inline = (el, { modifiers }, { cleanup }) => {\n    modifiers.includes('self')\n        ? el._x_ignoreSelf = true\n        : el._x_ignore = true\n\n    cleanup(() => {\n        modifiers.includes('self')\n            ? delete el._x_ignoreSelf\n            : delete el._x_ignore\n    })\n}\n\ndirective('ignore', handler)\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-init.js",
    "content": "import { directive, prefix } from \"../directives\";\nimport { addInitSelector } from \"../lifecycle\";\nimport { skipDuringClone } from \"../clone\";\n\naddInitSelector(() => `[${prefix('init')}]`)\n\ndirective('init', skipDuringClone((el, { expression }, { evaluate }) => {\n    if (typeof expression === 'string') {\n        return !! expression.trim() && evaluate(expression, {}, false)\n    }\n\n    return evaluate(expression, {}, false)\n}))\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-model.js",
    "content": "import bind, { isCheckbox, isRadio, safeParseBoolean } from '../utils/bind'\nimport { evaluateLater } from '../evaluator'\nimport { directive } from '../directives'\nimport { mutateDom } from '../mutation'\nimport { nextTick } from '../nextTick'\nimport { isCloning } from '../clone'\nimport on, { addDebounceOrThrottle } from '../utils/on'\nimport { findClosest } from '../lifecycle'\n\ndirective('model', (el, { modifiers, expression }, { effect, cleanup }) => {\n    let scopeTarget = el\n\n    if (modifiers.includes('parent')) {\n        scopeTarget = findClosest(el, (element) => element !== el)\n    }\n\n    let evaluateGet = evaluateLater(scopeTarget, expression)\n    let evaluateSet\n\n    if (typeof expression === 'string') {\n        evaluateSet = evaluateLater(scopeTarget, `${expression} = __placeholder`)\n    } else if (typeof expression === 'function' && typeof expression() === 'string') {\n        evaluateSet = evaluateLater(scopeTarget, `${expression()} = __placeholder`)\n    } else {\n        evaluateSet = () => {}\n    }\n\n    let getValue = () => {\n        let result\n\n        evaluateGet(value => result = value)\n\n        return isGetterSetter(result) ? result.get() : result\n    }\n\n    let setValue = value => {\n        let result\n\n        evaluateGet(value => result = value)\n\n        if (isGetterSetter(result)) {\n            result.set(value)\n        } else {\n            evaluateSet(() => {}, {\n                scope: { '__placeholder': value }\n            })\n        }\n    }\n\n    if (typeof expression === 'string' && el.type === 'radio') {\n        // Radio buttons only work properly when they share a name attribute.\n        // People might assume we take care of that for them, because\n        // they already set a shared \"x-model\" attribute.\n        mutateDom(() => {\n            if (! el.hasAttribute('name')) el.setAttribute('name', expression)\n        })\n    }\n\n    // Check for explicit event modifiers (.change, .blur, .enter)\n    let hasChangeModifier = modifiers.includes('change') || modifiers.includes('lazy')\n    let hasBlurModifier = modifiers.includes('blur')\n    let hasEnterModifier = modifiers.includes('enter')\n    let hasExplicitEventModifiers = hasChangeModifier || hasBlurModifier || hasEnterModifier\n\n    let removeListener\n\n    if (isCloning) {\n        removeListener = () => {}\n    } else if (hasExplicitEventModifiers) {\n        // When explicit event modifiers are present, attach listeners for each specified event\n        let listeners = []\n\n        let syncValue = (e) => setValue(getInputValue(el, modifiers, e, getValue()))\n\n        if (hasChangeModifier) {\n            listeners.push(on(el, 'change', modifiers, syncValue))\n        }\n\n        if (hasBlurModifier) {\n            listeners.push(on(el, 'blur', modifiers, syncValue))\n\n            // The browser fires \"submit\" before \"blur\", so if this input\n            // is inside a form, the model value would be stale when the\n            // submit handler runs. Register a pending update on the form\n            // so it can be flushed before submit handlers execute.\n            if (el.form) {\n                let syncCallback = () => syncValue({ target: el })\n\n                if (!el.form._x_pendingModelUpdates) el.form._x_pendingModelUpdates = []\n                el.form._x_pendingModelUpdates.push(syncCallback)\n\n                cleanup(() => el.form._x_pendingModelUpdates.splice(el.form._x_pendingModelUpdates.indexOf(syncCallback), 1))\n            }\n        }\n\n        if (hasEnterModifier) {\n            listeners.push(on(el, 'keydown', modifiers, (e) => {\n                if (e.key === 'Enter') syncValue(e)\n            }))\n        }\n\n        removeListener = () => listeners.forEach(remove => remove())\n    } else {\n        // Default behavior: select, checkbox, radio use 'change', others use 'input'\n        let event = (el.tagName.toLowerCase() === 'select')\n            || ['checkbox', 'radio'].includes(el.type)\n                ? 'change' : 'input'\n\n        removeListener = on(el, event, modifiers, (e) => {\n            setValue(getInputValue(el, modifiers, e, getValue()))\n        })\n    }\n\n    if (modifiers.includes('fill'))\n        if ([undefined, null, ''].includes(getValue())\n            || (isCheckbox(el) && Array.isArray(getValue()))\n            || (el.tagName.toLowerCase() === 'select' && el.multiple)) {\n        setValue(\n            getInputValue(el, modifiers, { target: el }, getValue())\n        );\n    }\n\n    // Register the listener removal callback on the element, so that\n    // in addition to the cleanup function, x-modelable may call it.\n    // Also, make this a keyed object if we decide to reintroduce\n    // \"named modelables\" some time in a future Alpine version.\n    if (! el._x_removeModelListeners) el._x_removeModelListeners = {}\n    el._x_removeModelListeners['default'] = removeListener\n\n    cleanup(() => el._x_removeModelListeners['default']())\n\n    // If the input/select/textarea element is linked to a form\n    // we listen for the reset event on the parent form (the event\n    // does not trigger on the single inputs) and update\n    // on nextTick so the page doesn't end up out of sync\n    if (el.form) {\n        let removeResetListener = on(el.form, 'reset', [], (e) => {\n            nextTick(() => el._x_model && el._x_model.set(getInputValue(el, modifiers, { target: el }, getValue())))\n        })\n        cleanup(() => removeResetListener())\n    }\n\n    // Allow programmatic overriding of x-model.\n    el._x_model = {\n        get() {\n            return getValue()\n        },\n        set(value) {\n            setValue(value)\n        },\n        setWithModifiers: addDebounceOrThrottle(modifiers, setValue),\n    }\n\n    el._x_forceModelUpdate = (value) => {\n        // If nested model key is undefined, set the default value to empty string.\n        if (value === undefined && typeof expression === 'string' && expression.match(/\\./)) value = ''\n\n        // @todo: This is nasty\n        window.fromModel = true\n        mutateDom(() => bind(el, 'value', value))\n        delete window.fromModel\n    }\n\n    effect(() => {\n        // We need to make sure we're always \"getting\" the value up front,\n        // so that we don't run into a situation where because of the early\n        // the reactive value isn't gotten and therefore disables future reactions.\n        let value = getValue()\n\n        // Don't modify the value of the input if it's focused.\n        if (modifiers.includes('unintrusive') && document.activeElement.isSameNode(el)) return\n\n        el._x_forceModelUpdate(value)\n    })\n})\n\nfunction getInputValue(el, modifiers, event, currentValue) {\n    return mutateDom(() => {\n        // Check for event.detail due to an issue where IE11 handles other events as a CustomEvent.\n        // Safari autofill triggers event as CustomEvent and assigns value to target\n        // so we return event.target.value instead of event.detail\n        if (event instanceof CustomEvent && event.detail !== undefined)\n            return event.detail !== null && event.detail !== undefined ? event.detail : event.target.value\n        else if (isCheckbox(el)) {\n            // If the data we are binding to is an array, toggle its value inside the array.\n            if (Array.isArray(currentValue)) {\n                let newValue = null;\n\n                if (modifiers.includes('number')) {\n                    newValue = safeParseNumber(event.target.value)\n                } else if (modifiers.includes('boolean')) {\n                    newValue = safeParseBoolean(event.target.value)\n                } else {\n                    newValue = event.target.value\n                }\n\n                return event.target.checked\n                    ? (currentValue.includes(newValue) ? currentValue : currentValue.concat([newValue]))\n                    : currentValue.filter(el => ! checkedAttrLooseCompare(el, newValue));\n            } else {\n                return event.target.checked\n            }\n        } else if (el.tagName.toLowerCase() === 'select' && el.multiple) {\n            if (modifiers.includes('number')) {\n                return Array.from(event.target.selectedOptions).map(option => {\n                    let rawValue = option.value || option.text\n                    return safeParseNumber(rawValue)\n                })\n            } else if (modifiers.includes('boolean')) {\n                return Array.from(event.target.selectedOptions).map(option => {\n                    let rawValue = option.value || option.text\n                    return safeParseBoolean(rawValue)\n                })\n            }\n\n            return Array.from(event.target.selectedOptions).map(option => {\n                return option.value || option.text\n            })\n        } else {\n            let newValue\n\n            if (isRadio(el)) {\n                if (event.target.checked) {\n                    newValue = event.target.value\n                } else {\n                    newValue = currentValue\n                }\n            } else {\n                newValue = event.target.value\n            }\n\n            if (modifiers.includes('number')) {\n                return safeParseNumber(newValue)\n            } else if (modifiers.includes('boolean')) {\n                return safeParseBoolean(newValue)\n            } else if (modifiers.includes('trim')) {\n                return newValue.trim()\n            } else {\n                return newValue\n            }\n        }\n    })\n}\n\nfunction safeParseNumber(rawValue) {\n    let number = rawValue ? parseFloat(rawValue) : null\n\n    return isNumeric(number) ? number : rawValue\n}\n\nfunction checkedAttrLooseCompare(valueA, valueB) {\n    return valueA == valueB\n}\n\nfunction isNumeric(subject){\n    return ! Array.isArray(subject) && ! isNaN(subject)\n}\n\nfunction isGetterSetter(value) {\n    return value !== null && typeof value === 'object' && typeof value.get === 'function' && typeof value.set === 'function'\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-modelable.js",
    "content": "import { directive } from '../directives'\nimport { entangle } from '../entangle';\n\ndirective('modelable', (el, { expression }, { effect, evaluateLater, cleanup }) => {\n    let func = evaluateLater(expression)\n    let innerGet = () => { let result; func(i => result = i); return result; }\n    let evaluateInnerSet = evaluateLater(`${expression} = __placeholder`)\n    let innerSet = val => evaluateInnerSet(() => {}, { scope: { '__placeholder': val }})\n\n    let initialValue = innerGet()\n\n    innerSet(initialValue)\n\n    queueMicrotask(() => {\n        if (! el._x_model) return\n\n        // Remove native event listeners as these are now bound with x-modelable.\n        // The reason for this is that it's often useful to wrap <input> elements\n        // in x-modelable/model, but the input events from the native input\n        // override any functionality added by x-modelable causing confusion.\n        el._x_removeModelListeners['default']()\n\n        let outerGet = el._x_model.get\n        let outerSet = el._x_model.setWithModifiers\n\n        let releaseEntanglement = entangle(\n            {\n                get() { return outerGet() },\n                set(value) { outerSet(value) },\n            },\n            {\n                get() { return innerGet() },\n                set(value) { innerSet(value) },\n            },\n        )\n\n        cleanup(releaseEntanglement)\n    })\n})\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-on.js",
    "content": "import { directive, into, mapAttributes, prefix, startingWith } from '../directives'\nimport { evaluateLater } from '../evaluator'\nimport { skipDuringClone } from '../clone'\nimport on from '../utils/on'\n\nmapAttributes(startingWith('@', into(prefix('on:'))))\n\ndirective('on', skipDuringClone((el, { value, modifiers, expression }, { cleanup }) => {\n    let evaluate = expression ? evaluateLater(el, expression) : () => {}\n\n    // Forward event listeners on portals.\n    if (el.tagName.toLowerCase() === 'template') {\n        if (! el._x_forwardEvents) el._x_forwardEvents = []\n        if (! el._x_forwardEvents.includes(value)) el._x_forwardEvents.push(value)\n    }\n\n    let removeListener = on(el, value, modifiers, e => {\n        evaluate(() => {}, { scope: { '$event': e }, params: [e] })\n    })\n\n    cleanup(() => removeListener())\n}))\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-ref.js",
    "content": "import { closestRoot } from '../lifecycle'\nimport { skipDuringClone } from '../clone'\nimport { directive } from '../directives'\n\nfunction handler () {}\n\n// Skip during clone because morph runs directives on detached elements\n// where closestRoot() has no x-data ancestor. Refs re-register on the\n// live DOM via the MutationObserver path after morph patches attributes.\nhandler.inline = skipDuringClone((el, { expression }, { cleanup }) => {\n    let root = closestRoot(el)\n\n    if (! root._x_refs) root._x_refs = {}\n\n    root._x_refs[expression] = el\n\n    cleanup(() => delete root._x_refs[expression])\n})\n\ndirective('ref', handler)\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-show.js",
    "content": "import { evaluateLater } from '../evaluator'\nimport { directive } from '../directives'\nimport { mutateDom } from '../mutation'\nimport { once } from '../utils/once'\n\ndirective('show', (el, { modifiers, expression }, { effect }) => {\n    let evaluate = evaluateLater(el, expression)\n\n    // We're going to set this function on the element directly so that\n    // other plugins like \"Collapse\" can overwrite them with their own logic.\n    if (! el._x_doHide) el._x_doHide = () => {\n        mutateDom(() => {\n            el.style.setProperty('display', 'none', modifiers.includes('important') ? 'important' : undefined)\n        })\n    }\n\n    if (! el._x_doShow) el._x_doShow = () => {\n        mutateDom(() => {\n            if (el.style.length === 1 && el.style.display === 'none') {\n                el.removeAttribute('style')\n            } else {\n                el.style.removeProperty('display')\n            }\n        })\n    }\n\n    let hide = () => {\n        el._x_doHide()\n        el._x_isShown = false\n    }\n\n    let show = () => {\n        el._x_doShow()\n        el._x_isShown = true\n    }\n\n    // We are wrapping this function in a setTimeout here to prevent\n    // a race condition from happening where elements that have a\n    // @click.away always view themselves as shown on the page.\n    let clickAwayCompatibleShow = () => setTimeout(show)\n\n    let toggle = once(\n        value => value ? show() : hide(),\n        value => {\n            if (typeof el._x_toggleAndCascadeWithTransitions === 'function') {\n                el._x_toggleAndCascadeWithTransitions(el, value, show, hide)\n            } else {\n                value ? clickAwayCompatibleShow() : hide()\n            }\n        }\n    )\n\n    let oldValue\n    let firstTime = true\n\n    effect(() => evaluate(value => {\n        // Let's make sure we only call this effect if the value changed.\n        // This prevents \"blip\" transitions. (1 tick out, then in)\n        if (! firstTime && value === oldValue) return\n\n        if (modifiers.includes('immediate')) value ? clickAwayCompatibleShow() : hide()\n\n        toggle(value)\n\n        oldValue = value\n        firstTime = false\n    }))\n})\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-teleport.js",
    "content": "import { skipDuringClone } from \"../clone\"\nimport { directive } from \"../directives\"\nimport { initTree, destroyTree } from \"../lifecycle\"\nimport { mutateDom } from \"../mutation\"\nimport { addScopeToNode } from \"../scope\"\nimport { warn } from \"../utils/warn\"\n\ndirective('teleport', (el, { modifiers, expression }, { cleanup }) => {\n    if (el.tagName.toLowerCase() !== 'template') warn('x-teleport can only be used on a <template> tag', el)\n\n    let target = getTarget(expression)\n\n    let clone = el.content.cloneNode(true).firstElementChild\n\n    // Add reference to element on <template x-teleport, and visa versa.\n    el._x_teleport = clone\n    clone._x_teleportBack = el\n\n    // Add the key to the DOM so they can be more easily searched for and linked up...\n    el.setAttribute('data-teleport-template', true)\n    clone.setAttribute('data-teleport-target', true)\n\n    // Forward event listeners:\n    if (el._x_forwardEvents) {\n        el._x_forwardEvents.forEach(eventName => {\n            clone.addEventListener(eventName, e => {\n                e.stopPropagation()\n\n                el.dispatchEvent(new e.constructor(e.type, e))\n            })\n        })\n    }\n\n    addScopeToNode(clone, {}, el)\n\n    let placeInDom = (clone, target, modifiers) => {\n        if (modifiers.includes('prepend')) {\n            // insert element before the target\n            target.parentNode.insertBefore(clone, target)\n        } else if (modifiers.includes('append')) {\n            // insert element after the target\n            target.parentNode.insertBefore(clone, target.nextSibling)\n        } else {\n            // origin\n            target.appendChild(clone)\n        }\n    }\n\n    mutateDom(() => {\n        placeInDom(clone, target, modifiers)\n\n        skipDuringClone(() => {\n            initTree(clone)\n        })()\n    })\n\n    el._x_teleportPutBack = () => {\n        let target = getTarget(expression)\n\n        mutateDom(() => {\n            placeInDom(el._x_teleport, target, modifiers)\n        })\n    }\n\n    cleanup(() =>\n      mutateDom(() => {\n        clone.remove()\n        destroyTree(clone)\n      })\n    )\n})\n\nlet teleportContainerDuringClone = document.createElement('div')\n\nfunction getTarget(expression) {\n    let target = skipDuringClone(() => {\n        return document.querySelector(expression)\n    }, () => {\n        return teleportContainerDuringClone\n    })()\n\n    if (! target) warn(`Cannot find x-teleport element for selector: \"${expression}\"`)\n\n    return target\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-text.js",
    "content": "import { directive } from '../directives'\nimport { mutateDom } from '../mutation'\n\ndirective('text', (el, { expression }, { effect, evaluateLater }) => {\n    let evaluate = evaluateLater(expression)\n\n    effect(() => {\n        evaluate(value => {\n            mutateDom(() => {\n                el.textContent = value\n            })\n        })\n    })\n})\n"
  },
  {
    "path": "packages/alpinejs/src/directives/x-transition.js",
    "content": "import { releaseNextTicks, holdNextTicks } from '../nextTick'\nimport { setClasses } from '../utils/classes'\nimport { setStyles } from '../utils/styles'\nimport { directive } from '../directives'\nimport { mutateDom } from '../mutation'\nimport { once } from '../utils/once'\n\ndirective('transition', (el, { value, modifiers, expression }, { evaluate }) => {\n    if (typeof expression === 'function') expression = evaluate(expression)\n    if (expression === false) return\n    if (!expression || typeof expression === 'boolean') {\n        registerTransitionsFromHelper(el, modifiers, value)\n    } else {\n        registerTransitionsFromClassString(el, expression, value)\n    }\n})\n\nfunction registerTransitionsFromClassString(el, classString, stage) {\n    registerTransitionObject(el, setClasses, '')\n\n    let directiveStorageMap = {\n        'enter': (classes) => { el._x_transition.enter.during = classes },\n        'enter-start': (classes) => { el._x_transition.enter.start = classes },\n        'enter-end': (classes) => { el._x_transition.enter.end = classes },\n        'leave': (classes) => { el._x_transition.leave.during = classes },\n        'leave-start': (classes) => { el._x_transition.leave.start = classes },\n        'leave-end': (classes) => { el._x_transition.leave.end = classes },\n    }\n\n    directiveStorageMap[stage](classString)\n}\n\nfunction registerTransitionsFromHelper(el, modifiers, stage) {\n    registerTransitionObject(el, setStyles)\n\n    let doesntSpecify = (! modifiers.includes('in') && ! modifiers.includes('out')) && ! stage\n    let transitioningIn = doesntSpecify || modifiers.includes('in') || ['enter'].includes(stage)\n    let transitioningOut = doesntSpecify || modifiers.includes('out') || ['leave'].includes(stage)\n\n    if (modifiers.includes('in') && ! doesntSpecify) {\n        modifiers = modifiers.filter((i, index) => index < modifiers.indexOf('out'))\n    }\n\n    if (modifiers.includes('out') && ! doesntSpecify) {\n        modifiers = modifiers.filter((i, index) => index > modifiers.indexOf('out'))\n    }\n\n    let wantsAll = ! modifiers.includes('opacity') && ! modifiers.includes('scale')\n    let wantsOpacity = wantsAll || modifiers.includes('opacity')\n    let wantsScale = wantsAll || modifiers.includes('scale')\n    let opacityValue = wantsOpacity ? 0 : 1\n    let scaleValue = wantsScale ? modifierValue(modifiers, 'scale', 95) / 100 : 1\n    let delay = modifierValue(modifiers, 'delay', 0) / 1000\n    let origin = modifierValue(modifiers, 'origin', 'center')\n    let property = 'opacity, transform'\n    let durationIn = modifierValue(modifiers, 'duration', 150) / 1000\n    let durationOut = modifierValue(modifiers, 'duration', 75) / 1000\n    let easing = `cubic-bezier(0.4, 0.0, 0.2, 1)`\n\n    if (transitioningIn) {\n        el._x_transition.enter.during = {\n            transformOrigin: origin,\n            transitionDelay: `${delay}s`,\n            transitionProperty: property,\n            transitionDuration: `${durationIn}s`,\n            transitionTimingFunction: easing,\n        }\n\n        el._x_transition.enter.start = {\n            opacity: opacityValue,\n            transform: `scale(${scaleValue})`,\n        }\n\n        el._x_transition.enter.end = {\n            opacity: 1,\n            transform: `scale(1)`,\n        }\n    }\n\n    if (transitioningOut) {\n        el._x_transition.leave.during = {\n            transformOrigin: origin,\n            transitionDelay: `${delay}s`,\n            transitionProperty: property,\n            transitionDuration: `${durationOut}s`,\n            transitionTimingFunction: easing,\n        }\n\n        el._x_transition.leave.start = {\n            opacity: 1,\n            transform: `scale(1)`,\n        }\n\n        el._x_transition.leave.end = {\n            opacity: opacityValue,\n            transform: `scale(${scaleValue})`,\n        }\n    }\n}\n\nfunction registerTransitionObject(el, setFunction, defaultValue = {}) {\n    if (! el._x_transition) el._x_transition = {\n        enter: { during: defaultValue, start: defaultValue, end: defaultValue },\n\n        leave: { during: defaultValue, start: defaultValue, end: defaultValue },\n\n        in(before = () => {}, after = () => {}) {\n            transition(el, setFunction, {\n                during: this.enter.during,\n                start: this.enter.start,\n                end: this.enter.end,\n            }, before, after)\n        },\n\n        out(before = () => {}, after = () => {}) {\n            transition(el, setFunction, {\n                during: this.leave.during,\n                start: this.leave.start,\n                end: this.leave.end,\n            }, before, after)\n        },\n    }\n}\n\nwindow.Element.prototype._x_toggleAndCascadeWithTransitions = function (el, value, show, hide) {\n    // We are running this function after one tick to prevent\n    // a race condition from happening where elements that have a\n    // @click.away always view themselves as shown on the page.\n    // If the tab is active, we prioritise requestAnimationFrame which plays\n    // nicely with nested animations otherwise we use setTimeout to make sure\n    // it keeps running in background. setTimeout has a lower priority in the\n    // event loop so it would skip nested transitions but when the tab is\n    // hidden, it's not relevant.\n    const nextTick = document.visibilityState === 'visible' ? requestAnimationFrame : setTimeout;\n    let clickAwayCompatibleShow = () => nextTick(show);\n\n    if (value) {\n        if (el._x_transition && (el._x_transition.enter || el._x_transition.leave)) {\n            // This fixes a bug where if you are only transitioning OUT and you are also using @click.outside\n            // the element when shown immediately starts transitioning out. There is a test in the manual\n            // transition test file for this: /tests/cypress/manual-transition-test.html\n            (el._x_transition.enter && (Object.entries(el._x_transition.enter.during).length || Object.entries(el._x_transition.enter.start).length || Object.entries(el._x_transition.enter.end).length))\n                ? el._x_transition.in(show)\n                : clickAwayCompatibleShow()\n        } else {\n            el._x_transition\n                ? el._x_transition.in(show)\n                : clickAwayCompatibleShow()\n        }\n\n        return\n    }\n\n    // Livewire depends on el._x_hidePromise.\n    el._x_hidePromise = el._x_transition\n        ? new Promise((resolve, reject) => {\n            el._x_transition.out(() => {}, () => resolve(hide))\n\n            el._x_transitioning && el._x_transitioning.beforeCancel(() => reject({ isFromCancelledTransition: true }))\n        })\n        : Promise.resolve(hide)\n\n    queueMicrotask(() => {\n        let closest = closestHide(el)\n\n        if (closest) {\n            if (! closest._x_hideChildren) closest._x_hideChildren = []\n\n            closest._x_hideChildren.push(el)\n        } else {\n            nextTick(() => {\n                let hideAfterChildren = el => {\n                    let carry = Promise.all([\n                        el._x_hidePromise,\n                        ...(el._x_hideChildren || []).map(hideAfterChildren),\n                    ]).then(([i]) => i?.())\n\n                    delete el._x_hidePromise\n                    delete el._x_hideChildren\n\n                    return carry\n                }\n\n                hideAfterChildren(el).catch((e) => {\n                    if (! e.isFromCancelledTransition) throw e\n                })\n            })\n        }\n    })\n}\n\nfunction closestHide(el) {\n    let parent = el.parentNode\n\n    if (! parent) return\n\n    return parent._x_hidePromise ? parent : closestHide(parent)\n}\n\nexport function transition(el, setFunction, { during, start, end } = {}, before = () => {}, after = () => {}) {\n    if (el._x_transitioning) el._x_transitioning.cancel()\n\n    if (Object.keys(during).length === 0 && Object.keys(start).length === 0 && Object.keys(end).length === 0) {\n        // Execute right away if there is no transition.\n        before(); after()\n        return\n    }\n\n    let undoStart, undoDuring, undoEnd\n\n    performTransition(el, {\n        start() {\n            undoStart = setFunction(el, start)\n        },\n        during() {\n            undoDuring = setFunction(el, during)\n        },\n        before,\n        end() {\n            undoStart()\n\n            undoEnd = setFunction(el, end)\n        },\n        after,\n        cleanup() {\n            undoDuring()\n            undoEnd()\n        },\n    })\n}\n\nexport function performTransition(el, stages) {\n    // All transitions need to be truly \"cancellable\". Meaning we need to\n    // account for interruptions at ALL stages of the transitions and\n    // immediately run the rest of the transition.\n    let interrupted, reachedBefore, reachedEnd\n\n    let finish = once(() => {\n        mutateDom(() => {\n            interrupted = true\n\n            if (! reachedBefore) stages.before()\n\n            if (! reachedEnd) {\n                stages.end()\n\n                releaseNextTicks()\n            }\n\n            stages.after()\n\n            // Adding an \"isConnected\" check, in case the callback removed the element from the DOM.\n            if (el.isConnected) stages.cleanup()\n\n            delete el._x_transitioning\n        })\n    })\n\n    el._x_transitioning = {\n        beforeCancels: [],\n        beforeCancel(callback) { this.beforeCancels.push(callback) },\n        cancel: once(function () { while (this.beforeCancels.length) { this.beforeCancels.shift()() }; finish(); }),\n        finish,\n    }\n\n    mutateDom(() => {\n        stages.start()\n        stages.during()\n    })\n\n    holdNextTicks()\n\n    requestAnimationFrame(() => {\n        if (interrupted) return\n\n        // Note: Safari's transitionDuration property will list out comma separated transition durations\n        // for every single transition property. Let's grab the first one and call it a day.\n        let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000\n        let delay = Number(getComputedStyle(el).transitionDelay.replace(/,.*/, '').replace('s', '')) * 1000\n\n        if (duration === 0) duration = Number(getComputedStyle(el).animationDuration.replace('s', '')) * 1000\n\n        mutateDom(() => {\n            stages.before()\n        })\n\n        reachedBefore = true\n\n        requestAnimationFrame(() => {\n            if (interrupted) return\n\n            mutateDom(() => {\n                stages.end()\n            })\n\n            releaseNextTicks()\n\n            setTimeout(el._x_transitioning.finish, duration + delay)\n\n            reachedEnd = true\n        })\n    })\n}\n\nexport function modifierValue(modifiers, key, fallback) {\n    // If the modifier isn't present, use the default.\n    if (modifiers.indexOf(key) === -1) return fallback\n\n    // If it IS present, grab the value after it: x-show.transition.duration.500ms\n    const rawValue = modifiers[modifiers.indexOf(key) + 1]\n\n    if (! rawValue) return fallback\n\n    if (key === 'scale') {\n        // Check if the very next value is NOT a number and return the fallback.\n        // If x-show.transition.scale, we'll use the default scale value.\n        // That is how a user opts out of the opacity transition.\n        if (isNaN(rawValue)) return fallback\n    }\n\n    if (key === 'duration' || key === 'delay') {\n        // Support x-transition.duration.500ms && duration.500\n        let match = rawValue.match(/([0-9]+)ms/)\n        if (match) return match[1]\n    }\n\n    if (key === 'origin') {\n        // Support chaining origin directions: x-show.transition.top.right\n        if (['top', 'right', 'left', 'center', 'bottom'].includes(modifiers[modifiers.indexOf(key) + 2])) {\n            return [rawValue, modifiers[modifiers.indexOf(key) + 2]].join(' ')\n        }\n    }\n\n    return rawValue\n}\n"
  },
  {
    "path": "packages/alpinejs/src/directives.js",
    "content": "import { onAttributeRemoved, onElRemoved } from './mutation'\nimport { evaluate, evaluateLater } from './evaluator'\nimport { elementBoundEffect } from './reactivity'\nimport Alpine from './alpine'\n\nlet prefixAsString = 'x-'\n\nexport function prefix(subject = '') {\n    return prefixAsString + subject\n}\n\nexport function setPrefix(newPrefix) {\n    prefixAsString = newPrefix\n}\n\nlet directiveHandlers = {}\n\nexport function directive(name, callback) {\n    directiveHandlers[name] = callback\n\n    return {\n        before(directive) {\n            if (!directiveHandlers[directive]) {\n                console.warn(String.raw`Cannot find directive \\`${directive}\\`. \\`${name}\\` will use the default order of execution`);\n                return;\n            }\n            const pos = directiveOrder.indexOf(directive);\n            directiveOrder.splice(pos >= 0 ? pos : directiveOrder.indexOf('DEFAULT'), 0, name);\n        }\n    }\n}\n\nexport function directiveExists(name) {\n    return Object.keys(directiveHandlers).includes(name)\n}\n\nexport function directives(el, attributes, originalAttributeOverride) {\n    attributes = Array.from(attributes)\n\n    if (el._x_virtualDirectives) {\n        let vAttributes = Object.entries(el._x_virtualDirectives).map(([name, value]) => ({ name, value }))\n\n        let staticAttributes = attributesOnly(vAttributes)\n\n        // Handle binding normal HTML attributes (non-Alpine directives).\n        vAttributes = vAttributes.map(attribute => {\n            if (staticAttributes.find(attr => attr.name === attribute.name)) {\n                return {\n                    name: `x-bind:${attribute.name}`,\n                    value: `\"${attribute.value}\"`,\n                }\n            }\n\n            return attribute\n        })\n\n        attributes = attributes.concat(vAttributes)\n    }\n\n    let transformedAttributeMap = {}\n\n    let directives = attributes\n        .map(toTransformedAttributes((newName, oldName) => transformedAttributeMap[newName] = oldName))\n        .filter(outNonAlpineAttributes)\n        .map(toParsedDirectives(transformedAttributeMap, originalAttributeOverride))\n        .sort(byPriority)\n\n    return directives.map(directive => {\n        return getDirectiveHandler(el, directive)\n    })\n}\n\nexport function attributesOnly(attributes) {\n    return Array.from(attributes)\n        .map(toTransformedAttributes())\n        .filter(attr => ! outNonAlpineAttributes(attr))\n}\n\nlet isDeferringHandlers = false\nlet directiveHandlerStacks = new Map\nlet currentHandlerStackKey = Symbol()\n\nexport function deferHandlingDirectives(callback) {\n    isDeferringHandlers = true\n\n    let key = Symbol()\n\n    currentHandlerStackKey = key\n\n    directiveHandlerStacks.set(key, [])\n\n    let flushHandlers = () => {\n        while (directiveHandlerStacks.get(key).length) directiveHandlerStacks.get(key).shift()()\n\n        directiveHandlerStacks.delete(key)\n    }\n\n    let stopDeferring = () => { isDeferringHandlers = false; flushHandlers() }\n\n    callback(flushHandlers)\n\n    stopDeferring()\n}\n\nexport function getElementBoundUtilities(el) {\n    let cleanups = []\n\n    let cleanup = callback => cleanups.push(callback)\n\n    let [effect, cleanupEffect] = elementBoundEffect(el)\n\n    cleanups.push(cleanupEffect)\n\n    let utilities = {\n        Alpine,\n        effect,\n        cleanup,\n        evaluateLater: evaluateLater.bind(evaluateLater, el),\n        evaluate: evaluate.bind(evaluate, el),\n    }\n\n    let doCleanup = () => cleanups.forEach(i => i())\n\n    return [utilities, doCleanup]\n}\n\nexport function getDirectiveHandler(el, directive) {\n    let noop = () => {}\n\n    let handler = directiveHandlers[directive.type] || noop\n\n    let [utilities, cleanup] = getElementBoundUtilities(el)\n\n    onAttributeRemoved(el, directive.original, cleanup)\n\n    let fullHandler = () => {\n        if (el._x_ignore || el._x_ignoreSelf) return\n\n        handler.inline && handler.inline(el, directive, utilities)\n\n        handler = handler.bind(handler, el, directive, utilities)\n\n        isDeferringHandlers ? directiveHandlerStacks.get(currentHandlerStackKey).push(handler) : handler()\n    }\n\n    fullHandler.runCleanups = cleanup\n\n    return fullHandler\n}\n\nexport let startingWith = (subject, replacement) => ({ name, value }) => {\n    if (name.startsWith(subject)) name = name.replace(subject, replacement)\n\n    return { name, value }\n}\n\nexport let into = i => i\n\nfunction toTransformedAttributes(callback = () => {}) {\n    return ({ name, value }) => {\n        let { name: newName, value: newValue } = attributeTransformers.reduce((carry, transform) => {\n            return transform(carry)\n        }, { name, value })\n\n        if (newName !== name) callback(newName, name)\n\n        return { name: newName, value: newValue }\n    }\n}\n\nlet attributeTransformers = []\n\nexport function mapAttributes(callback) {\n    attributeTransformers.push(callback)\n}\n\nfunction outNonAlpineAttributes({ name }) {\n    return alpineAttributeRegex().test(name)\n}\n\nlet alpineAttributeRegex = () => (new RegExp(`^${prefixAsString}([^:^.]+)\\\\b`))\n\nfunction toParsedDirectives(transformedAttributeMap, originalAttributeOverride) {\n    return ({ name, value }) => {\n        // This prevents backend frameworks from rendering an empty attribute like\n        // x-on:click.stop as -> x-on:click.stop=\"x-on:click.stop\"...\n        if (name === value) value = ''\n\n        let typeMatch = name.match(alpineAttributeRegex())\n        let valueMatch = name.match(/:([a-zA-Z0-9\\-_:]+)/)\n        let modifiers = name.match(/\\.[^.\\]]+(?=[^\\]]*$)/g) || []\n        let original = originalAttributeOverride || transformedAttributeMap[name] || name\n\n        return {\n            type: typeMatch ? typeMatch[1] : null,\n            value: valueMatch ? valueMatch[1] : null,\n            modifiers: modifiers.map(i => i.replace('.', '')),\n            expression: value,\n            original,\n        }\n    }\n}\n\nconst DEFAULT = 'DEFAULT'\n\nlet directiveOrder = [\n    'ignore',\n    'ref',\n    'data',\n    'id',\n    'anchor',\n    'bind',\n    'init',\n    'for',\n    'model',\n    'modelable',\n    'transition',\n    'show',\n    'if',\n    DEFAULT,\n    'teleport',\n]\n\nfunction byPriority(a, b) {\n    let typeA = directiveOrder.indexOf(a.type) === -1 ? DEFAULT : a.type\n    let typeB = directiveOrder.indexOf(b.type) === -1 ? DEFAULT : b.type\n\n    return directiveOrder.indexOf(typeA) - directiveOrder.indexOf(typeB)\n}\n"
  },
  {
    "path": "packages/alpinejs/src/entangle.js",
    "content": "import { effect, release } from './reactivity'\n\nexport function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set: innerSet }) {\n    let firstRun = true\n    let outerHash\n    let innerHash\n\n    let reference = effect(() => {\n        let outer = outerGet()\n        let inner = innerGet()\n\n        if (firstRun) {\n            innerSet(cloneIfObject(outer))\n            firstRun = false\n        } else {\n            let outerHashLatest = JSON.stringify(outer)\n            let innerHashLatest = JSON.stringify(inner)\n\n            if (outerHashLatest !== outerHash) { // If outer changed...\n                innerSet(cloneIfObject(outer))\n            } else if (outerHashLatest !== innerHashLatest) { // If inner changed...\n                outerSet(cloneIfObject(inner))\n            } else { // If nothing changed...\n                // Prevent an infinite loop...\n            }\n        }\n\n        outerHash = JSON.stringify(outerGet())\n        innerHash = JSON.stringify(innerGet())\n    })\n\n    return () => {\n        release(reference)\n    }\n}\n\nfunction cloneIfObject(value) {\n    return typeof value === 'object'\n        ? JSON.parse(JSON.stringify(value))\n        : value\n}\n"
  },
  {
    "path": "packages/alpinejs/src/evaluator.js",
    "content": "import { closestDataStack, mergeProxies } from './scope'\nimport { injectMagics } from './magics'\nimport { tryCatch, handleError } from './utils/error'\n\nexport let shouldAutoEvaluateFunctions = true\n\nexport function dontAutoEvaluateFunctions(callback) {\n    let cache = shouldAutoEvaluateFunctions\n\n    shouldAutoEvaluateFunctions = false\n\n    let result = callback()\n\n    shouldAutoEvaluateFunctions = cache\n\n    return result\n}\n\nexport function evaluate(el, expression, extras = {}) {\n    let result\n\n    evaluateLater(el, expression)(value => result = value, extras)\n\n    return result\n}\n\nexport function evaluateLater(...args) {\n    return theEvaluatorFunction(...args)\n}\n\nlet theEvaluatorFunction = () => {}\n\nexport function setEvaluator(newEvaluator) {\n    theEvaluatorFunction = newEvaluator\n}\n\nlet theRawEvaluatorFunction\n\nexport function setRawEvaluator(newEvaluator) {\n    theRawEvaluatorFunction = newEvaluator\n}\n\nexport function normalEvaluator(el, expression) {\n    let overriddenMagics = {}\n\n    injectMagics(overriddenMagics, el)\n\n    let dataStack = [overriddenMagics, ...closestDataStack(el)]\n\n    let evaluator = (typeof expression === 'function')\n        ? generateEvaluatorFromFunction(dataStack, expression)\n        : generateEvaluatorFromString(dataStack, expression, el)\n\n    return tryCatch.bind(null, el, expression, evaluator)\n}\n\nexport function generateEvaluatorFromFunction(dataStack, func) {\n    return (receiver = () => {}, { scope = {}, params = [], context } = {}) => {\n        // If auto-evaluation is disabled, pass the function itself instead of calling it\n        if (! shouldAutoEvaluateFunctions) {\n            runIfTypeOfFunction(receiver, func, mergeProxies([scope, ...dataStack]), params)\n\n            return\n        }\n\n        let result = func.apply(mergeProxies([scope, ...dataStack]), params)\n\n        runIfTypeOfFunction(receiver, result)\n    }\n}\n\nlet evaluatorMemo = {}\n\nfunction generateFunctionFromString(expression, el) {\n    if (evaluatorMemo[expression]) {\n        return evaluatorMemo[expression]\n    }\n\n    let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor\n\n    // Some expressions that are useful in Alpine are not valid as the right side of an expression.\n    // Here we'll detect if the expression isn't valid for an assignment and wrap it in a self-\n    // calling function so that we don't throw an error AND a \"return\" statement can be used.\n    let rightSideSafeExpression = 0\n        // Support expressions starting with \"if\" statements like: \"if (...) doSomething()\"\n        || /^[\\n\\s]*if.*\\(.*\\)/.test(expression.trim())\n        // Support expressions starting with \"let/const\" like: \"let foo = 'bar'\"\n        || /^(let|const)\\s/.test(expression.trim())\n            ? `(async()=>{ ${expression} })()`\n            : expression\n\n    const safeAsyncFunction = () => {\n        try {\n            let func = new AsyncFunction(\n                [\"__self\", \"scope\"],\n                `with (scope) { __self.result = ${rightSideSafeExpression} }; __self.finished = true; return __self.result;`\n            )\n\n            Object.defineProperty(func, \"name\", {\n                value: `[Alpine] ${expression}`,\n            })\n\n            return func\n        } catch ( error ) {\n            handleError( error, el, expression )\n            return Promise.resolve()\n        }\n    }\n    let func = safeAsyncFunction()\n\n    evaluatorMemo[expression] = func\n\n    return func\n}\n\nfunction generateEvaluatorFromString(dataStack, expression, el) {\n    let func = generateFunctionFromString(expression, el)\n\n    return (receiver = () => {}, { scope = {}, params = [], context } = {}) => {\n        func.result = undefined\n        func.finished = false\n\n        // Run the function.\n\n        let completeScope = mergeProxies([ scope, ...dataStack ])\n\n        if (typeof func === 'function' ) {\n            let promise = func.call(context, func, completeScope).catch((error) => handleError(error, el, expression))\n\n            // Check if the function ran synchronously,\n            if (func.finished) {\n                // Return the immediate result.\n                runIfTypeOfFunction(receiver, func.result, completeScope, params, el)\n                // Once the function has run, we clear func.result so we don't create\n                // memory leaks. func is stored in the evaluatorMemo and every time\n                // it runs, it assigns the evaluated expression to result which could\n                // potentially store a reference to the DOM element that will be removed later on.\n                func.result = undefined\n            } else {\n                // If not, return the result when the promise resolves.\n                promise.then(result => {\n                    runIfTypeOfFunction(receiver, result, completeScope, params, el)\n                }).catch( error => handleError( error, el, expression ) )\n                .finally( () => func.result = undefined )\n            }\n        }\n    }\n}\n\nexport function runIfTypeOfFunction(receiver, value, scope, params, el) {\n    if (shouldAutoEvaluateFunctions && typeof value === 'function') {\n        let result = value.apply(scope, params)\n\n        if (result instanceof Promise) {\n            result.then(i => runIfTypeOfFunction(receiver, i, scope, params)).catch( error => handleError( error, el, value ) )\n        } else {\n            receiver(result)\n        }\n    } else if (typeof value === 'object' && value instanceof Promise) {\n        value.then(i => receiver(i))\n    } else {\n        receiver(value)\n    }\n}\n\nexport function evaluateRaw(...args) {\n    return theRawEvaluatorFunction(...args)\n}\n\nexport function normalRawEvaluator(el, expression, extras = {}) {\n    let overriddenMagics = {}\n\n    injectMagics(overriddenMagics, el)\n\n    let dataStack = [overriddenMagics, ...closestDataStack(el)]\n\n    let scope = mergeProxies([extras.scope ?? {}, ...dataStack])\n\n    let params = extras.params ?? []\n\n    if (expression.includes('await')) {\n        let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor\n\n        // Some expressions that are useful in Alpine are not valid as the right side of an expression.\n        // Here we'll detect if the expression isn't valid for an assignment and wrap it in a self-\n        // calling function so that we don't throw an error AND a \"return\" statement can be used.\n        let rightSideSafeExpression = 0\n            // Support expressions starting with \"if\" statements like: \"if (...) doSomething()\"\n            || /^[\\n\\s]*if.*\\(.*\\)/.test(expression.trim())\n            // Support expressions starting with \"let/const\" like: \"let foo = 'bar'\"\n            || /^(let|const)\\s/.test(expression.trim())\n                ? `(async()=>{ ${expression} })()`\n                : expression\n\n        let func = new AsyncFunction(\n            [\"scope\"],\n            `with (scope) { let __result = ${rightSideSafeExpression}; return __result }`\n        )\n\n        let result = func.call(extras.context, scope)\n\n        return result\n    } else {\n        // Some expressions that are useful in Alpine are not valid as the right side of an expression.\n        // Here we'll detect if the expression isn't valid for an assignment and wrap it in a self-\n        // calling function so that we don't throw an error AND a \"return\" statement can be used.\n        let rightSideSafeExpression = 0\n            // Support expressions starting with \"if\" statements like: \"if (...) doSomething()\"\n            || /^[\\n\\s]*if.*\\(.*\\)/.test(expression.trim())\n            // Support expressions starting with \"let/const\" like: \"let foo = 'bar'\"\n            || /^(let|const)\\s/.test(expression.trim())\n                ? `(()=>{ ${expression} })()`\n                : expression\n\n        let func = new Function(\n            [\"scope\"],\n            `with (scope) { let __result = ${rightSideSafeExpression}; return __result }`\n        )\n\n        let result = func.call(extras.context, scope)\n\n        // If the result is a function, call it\n        if (typeof result === 'function' && shouldAutoEvaluateFunctions) {\n            return result.apply(scope, params)\n        }\n\n        return result\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/ids.js",
    "content": "import { findClosest } from './lifecycle'\n\nlet globalIdMemo = {}\n\nexport function findAndIncrementId(name) {\n    if (! globalIdMemo[name]) globalIdMemo[name] = 0\n\n    return ++globalIdMemo[name]\n}\n\nexport function closestIdRoot(el, name) {\n    return findClosest(el, element => {\n        if (element._x_ids && element._x_ids[name]) return true\n    })\n}\n\nexport function setIdRoot(el, name) {\n    if (! el._x_ids) el._x_ids = {}\n    if (! el._x_ids[name]) el._x_ids[name] = findAndIncrementId(name) \n}\n"
  },
  {
    "path": "packages/alpinejs/src/index.js",
    "content": "/**\n *           _\n *     /\\   | |     (_)            (_)\n *    /  \\  | |_ __  _ _ __   ___   _ ___\n *   / /\\ \\ | | '_ \\| | '_ \\ / _ \\ | / __|\n *  / ____ \\| | |_) | | | | |  __/_| \\__ \\\n * /_/    \\_\\_| .__/|_|_| |_|\\___(_) |___/\n *            | |                 _/ |\n *            |_|                |__/\n *\n * Let's build Alpine together. It's easier than you think.\n * For starters, we'll import Alpine's core. This is the\n * object that will expose all of Alpine's public API.\n */\nimport Alpine from './alpine'\n\n/**\n * _______________________________________________________\n * The Evaluator\n * -------------------------------------------------------\n *\n * Now we're ready to bootstrap Alpine's evaluation system.\n * It's the function that converts raw JavaScript string\n * expressions like @click=\"toggle()\", into actual JS.\n */\nimport { normalEvaluator, normalRawEvaluator } from './evaluator'\n\nAlpine.setEvaluator(normalEvaluator)\nAlpine.setRawEvaluator(normalRawEvaluator)\n\n/**\n * _______________________________________________________\n * The Reactivity Engine\n * -------------------------------------------------------\n *\n * This is the reactivity core of Alpine. It's the part of\n * Alpine that triggers an element with x-text=\"message\"\n * to update its inner text when \"message\" is changed.\n */\nimport { reactive, effect, stop, toRaw } from '@vue/reactivity'\n\nAlpine.setReactivityEngine({ reactive, effect, release: stop, raw: toRaw })\n\n/**\n * _______________________________________________________\n * The Magics\n * -------------------------------------------------------\n *\n * Yeah, we're calling them magics here like they're nouns.\n * These are the properties that are magically available\n * to all the Alpine expressions, within your web app.\n */\nimport './magics/index'\n\n/**\n * _______________________________________________________\n * The Directives\n * -------------------------------------------------------\n *\n * Now that the core is all set up, we can register Alpine\n * directives like x-text or x-on that form the basis of\n * how Alpine adds behavior to an app's static markup.\n */\nimport './directives/index'\n\n/**\n * _______________________________________________________\n * The Alpine Global\n * -------------------------------------------------------\n *\n * Now that we have set everything up internally, anything\n * Alpine-related that will need to be accessed on-going\n * will be made available through the \"Alpine\" global.\n */\nexport default Alpine\n"
  },
  {
    "path": "packages/alpinejs/src/interceptor.js",
    "content": "// Warning: The concept of \"interceptors\" in Alpine is not public API and is subject to change\n// without tagging a major release.\n\nexport function initInterceptors(data) {\n    let isObject = val => typeof val === 'object' && !Array.isArray(val) && val !== null\n\n    let recurse = (obj, basePath = '') => {\n        Object.entries(Object.getOwnPropertyDescriptors(obj)).forEach(([key, { value, enumerable }]) => {\n            // Skip getters.\n            if (enumerable === false || value === undefined) return\n            if (typeof value === 'object' && value !== null && value.__v_skip) return\n\n            let path = basePath === '' ? key : `${basePath}.${key}`\n\n            if (typeof value === 'object' && value !== null && value._x_interceptor) {\n                obj[key] = value.initialize(data, path, key)\n            } else {\n                if (isObject(value) && value !== obj && ! (value instanceof Element)) {\n                    recurse(value, path)\n                }\n            }\n        })\n    }\n\n    return recurse(data)\n}\n\nexport function interceptor(callback, mutateObj = () => {}) {\n    let obj = {\n        initialValue: undefined,\n\n        _x_interceptor: true,\n\n        initialize(data, path, key) {\n            return callback(this.initialValue, () => get(data, path), (value) => set(data, path, value), path, key)\n        }\n    }\n\n    mutateObj(obj)\n\n    return initialValue => {\n        if (typeof initialValue === 'object' && initialValue !== null && initialValue._x_interceptor) {\n            // Support nesting interceptors.\n            let initialize = obj.initialize.bind(obj)\n\n            obj.initialize = (data, path, key) => {\n                let innerValue = initialValue.initialize(data, path, key)\n\n                obj.initialValue = innerValue\n\n                return initialize(data, path, key)\n            }\n        } else {\n            obj.initialValue = initialValue\n        }\n\n        return obj\n    }\n}\n\nfunction get(obj, path) {\n    return path.split('.').reduce((carry, segment) => carry[segment], obj)\n}\n\nfunction set(obj, path, value) {\n    if (typeof path === 'string') path = path.split('.')\n\n    if (path.length === 1) obj[path[0]] = value;\n       else if (path.length === 0) throw error;\n    else {\n       if (obj[path[0]])\n          return set(obj[path[0]], path.slice(1), value);\n       else {\n          obj[path[0]] = {};\n          return set(obj[path[0]], path.slice(1), value);\n       }\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/lifecycle.js",
    "content": "import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes, cleanupElement } from \"./mutation\"\nimport { deferHandlingDirectives, directiveExists, directives } from \"./directives\"\nimport { dispatch } from './utils/dispatch'\nimport { walk } from \"./utils/walk\"\nimport { warn } from './utils/warn'\n\nlet started = false\n\nexport function start() {\n    if (started) warn('Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems.')\n\n    started = true\n\n    if (! document.body) warn('Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine\\'s `<script>` tag?')\n\n    dispatch(document, 'alpine:init')\n    dispatch(document, 'alpine:initializing')\n\n    startObservingMutations()\n\n    onElAdded(el => initTree(el, walk))\n    onElRemoved(el => destroyTree(el))\n\n    onAttributesAdded((el, attrs) => {\n        directives(el, attrs).forEach(handle => handle())\n    })\n\n    let outNestedComponents = el => ! closestRoot(el.parentElement, true)\n    Array.from(document.querySelectorAll(allSelectors().join(',')))\n        .filter(outNestedComponents)\n        .forEach(el => {\n            initTree(el)\n        })\n\n    dispatch(document, 'alpine:initialized')\n\n    setTimeout(() => {\n        warnAboutMissingPlugins()\n    })\n}\n\nlet rootSelectorCallbacks = []\nlet initSelectorCallbacks = []\n\nexport function rootSelectors() {\n    return rootSelectorCallbacks.map(fn => fn())\n}\n\nexport function allSelectors() {\n    return rootSelectorCallbacks.concat(initSelectorCallbacks).map(fn => fn())\n}\n\nexport function addRootSelector(selectorCallback) { rootSelectorCallbacks.push(selectorCallback) }\nexport function addInitSelector(selectorCallback) { initSelectorCallbacks.push(selectorCallback) }\n\nexport function closestRoot(el, includeInitSelectors = false) {\n    return findClosest(el, element => {\n        const selectors = includeInitSelectors ? allSelectors() : rootSelectors()\n\n        if (selectors.some(selector => element.matches(selector))) return true\n    })\n}\n\nexport function findClosest(el, callback) {\n    if (! el) return\n\n    if (callback(el)) return el\n\n    if (el._x_teleportBack) return findClosest(el._x_teleportBack, callback)\n\n    if (el.parentNode instanceof ShadowRoot) {\n        return findClosest(el.parentNode.host, callback)\n    }\n\n    if (! el.parentElement) return\n\n    return findClosest(el.parentElement, callback)\n}\n\nexport function isRoot(el) {\n    return rootSelectors().some(selector => el.matches(selector))\n}\n\nlet initInterceptors = []\n\nexport function interceptInit(callback) { initInterceptors.push(callback) }\n\nlet markerDispenser = 1\n\nexport function initTree(el, walker = walk, intercept = () => {}) {\n    // Don't init a tree within a parent that is being ignored...\n    if (findClosest(el, i => i._x_ignore)) return\n\n    deferHandlingDirectives(() => {\n        walker(el, (el, skip) => {\n            // If the element has a marker, it's already been initialized...\n            if (el._x_marker) return\n\n            intercept(el, skip)\n\n            initInterceptors.forEach(i => i(el, skip))\n\n            directives(el, el.attributes).forEach(handle => handle())\n\n            // Add a marker to the element so we can tell if it's been initialized...\n            // This is important so that we can prevent double-initialization of\n            // elements that are moved around on the page.\n            if (!el._x_ignore) el._x_marker = markerDispenser++\n\n            el._x_ignore && skip()\n        })\n    })\n}\n\nexport function destroyTree(root, walker = walk) {\n    walker(root, el => {\n        cleanupElement(el)\n        cleanupAttributes(el)\n        delete el._x_marker\n    })\n}\n\nfunction warnAboutMissingPlugins() {\n    let pluginDirectives = [\n        [ 'ui', 'dialog', ['[x-dialog], [x-popover]'] ],\n        [ 'anchor', 'anchor', ['[x-anchor]'] ],\n        [ 'sort', 'sort', ['[x-sort]'] ],\n    ]\n\n    pluginDirectives.forEach(([ plugin, directive, selectors ]) => {\n        if (directiveExists(directive)) return\n\n        selectors.some(selector => {\n            if (document.querySelector(selector)) {\n                warn(`found \"${selector}\", but missing ${plugin} plugin`)\n\n                return true\n            }\n        })\n    })\n}\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$data.js",
    "content": "import { scope } from '../scope'\nimport { magic } from '../magics'\n\nmagic('data', el => scope(el))\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$dispatch.js",
    "content": "import { dispatch } from '../utils/dispatch'\nimport { magic } from '../magics'\n\nmagic('dispatch', el => dispatch.bind(dispatch, el))\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$el.js",
    "content": "import { magic } from \"../magics\";\n\nmagic('el', el => el)\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$id.js",
    "content": "import { magic } from '../magics'\nimport { closestIdRoot, findAndIncrementId } from '../ids'\nimport { interceptClone } from '../clone'\n\nmagic('id', (el, { cleanup }) => (name, key = null) => {\n    let cacheKey = `${name}${key ? `-${key}` : ''}`\n\n    return cacheIdByNameOnElement(el, cacheKey, cleanup, () => {\n        let root = closestIdRoot(el, name)\n\n        let id = root\n            ? root._x_ids[name]\n            : findAndIncrementId(name)\n\n        return key\n            ? `${name}-${id}-${key}`\n            : `${name}-${id}`\n    })\n})\n\ninterceptClone((from, to) => {\n    // Transfer over existing ID registrations from\n    // the existing dom tree over to the new one\n    // so that there aren't ID mismatches...\n    if (from._x_id) {\n        to._x_id = from._x_id\n    }\n})\n\nfunction cacheIdByNameOnElement(el, cacheKey, cleanup, callback)\n{\n    if (! el._x_id) el._x_id = {}\n\n    // We only want $id to run once per an element's lifecycle...\n    if (el._x_id[cacheKey]) return el._x_id[cacheKey]\n\n    let output = callback()\n\n    el._x_id[cacheKey] = output\n\n    cleanup(() => {\n        delete el._x_id[cacheKey]\n    })\n\n    return output\n}\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$nextTick.js",
    "content": "import { nextTick } from '../nextTick'\nimport { magic } from '../magics'\n\nmagic('nextTick', () => nextTick)\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$refs.js",
    "content": "import { closestRoot, findClosest } from '../lifecycle'\nimport { mergeProxies } from '../scope'\nimport { magic } from '../magics'\n\nmagic('refs', el => {\n    if (el._x_refs_proxy) return el._x_refs_proxy\n\n    el._x_refs_proxy = mergeProxies(getArrayOfRefObject(el))\n\n    return el._x_refs_proxy\n})\n\nfunction getArrayOfRefObject(el) {\n    let refObjects = []\n\n    findClosest(el, (i) => {\n        if (i._x_refs) refObjects.push(i._x_refs)\n    })\n\n    return refObjects\n}\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$root.js",
    "content": "import { closestRoot } from \"../lifecycle\";\nimport { magic } from \"../magics\";\n\nmagic('root', el => closestRoot(el))\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$store.js",
    "content": "import { getStores } from '../store'\nimport { magic } from '../magics'\n\nmagic('store', getStores)\n"
  },
  {
    "path": "packages/alpinejs/src/magics/$watch.js",
    "content": "import { magic } from '../magics'\nimport { watch } from '../reactivity'\n\nmagic('watch', (el, { evaluateLater, cleanup }) => (key, callback) => {\n    let evaluate = evaluateLater(key)\n\n    let getter = () => {\n        let value\n\n        evaluate(i => value = i)\n\n        return value\n    }\n\n    let unwatch = watch(getter, callback)\n\n    cleanup(unwatch)\n})\n"
  },
  {
    "path": "packages/alpinejs/src/magics/index.js",
    "content": "import { warn } from '../utils/warn'\nimport { magic } from '../magics'\n\nimport './$nextTick'\nimport './$dispatch'\nimport './$watch'\nimport './$store'\nimport './$data'\nimport './$root'\nimport './$refs'\nimport './$id'\nimport './$el'\n\n// Register warnings for people using plugin syntaxes and not loading the plugin itself:\nwarnMissingPluginMagic('Focus', 'focus', 'focus')\nwarnMissingPluginMagic('Persist', 'persist', 'persist')\n\nfunction warnMissingPluginMagic(name, magicName, slug) {\n    magic(magicName, (el) => warn(`You can't use [$${magicName}] without first installing the \"${name}\" plugin here: https://alpinejs.dev/plugins/${slug}`, el))\n}\n"
  },
  {
    "path": "packages/alpinejs/src/magics.js",
    "content": "import { getElementBoundUtilities } from './directives'\nimport { interceptor } from './interceptor'\nimport { onElRemoved } from './mutation'\n\nlet magics = {}\n\nexport function magic(name, callback) {\n    magics[name] = callback\n}\n\nexport function injectMagics(obj, el) {\n    let memoizedUtilities = getUtilities(el)\n\n    Object.entries(magics).forEach(([name, callback]) => {\n        Object.defineProperty(obj, `$${name}`, {\n            get() {\n                return callback(el, memoizedUtilities);\n            },\n            enumerable: false,\n        })\n    })\n\n    return obj\n}\n\nexport function getUtilities(el) {\n    let [utilities, cleanup] = getElementBoundUtilities(el)\n\n    let utils = { interceptor, ...utilities }\n\n    onElRemoved(el, cleanup)\n\n    return utils;\n}\n"
  },
  {
    "path": "packages/alpinejs/src/mutation.js",
    "content": "import { dequeueJob } from \"./scheduler\";\nlet onAttributeAddeds = []\nlet onElRemoveds = []\nlet onElAddeds = []\n\nexport function onElAdded(callback) {\n    onElAddeds.push(callback)\n}\n\nexport function onElRemoved(el, callback) {\n    if (typeof callback === 'function') {\n        if (! el._x_cleanups) el._x_cleanups = []\n        el._x_cleanups.push(callback)\n    } else {\n        callback = el\n        onElRemoveds.push(callback)\n    }\n}\n\nexport function onAttributesAdded(callback) {\n    onAttributeAddeds.push(callback)\n}\n\nexport function onAttributeRemoved(el, name, callback) {\n    if (! el._x_attributeCleanups) el._x_attributeCleanups = {}\n    if (! el._x_attributeCleanups[name]) el._x_attributeCleanups[name] = []\n\n    el._x_attributeCleanups[name].push(callback)\n}\n\nexport function cleanupAttributes(el, names) {\n    if (! el._x_attributeCleanups) return\n\n    Object.entries(el._x_attributeCleanups).forEach(([name, value]) => {\n        if (names === undefined || names.includes(name)) {\n            value.forEach(i => i())\n\n            delete el._x_attributeCleanups[name]\n        }\n    })\n}\n\nexport function cleanupElement(el) {\n    el._x_effects?.forEach(dequeueJob)\n\n    while (el._x_cleanups?.length) el._x_cleanups.pop()()\n}\n\nlet observer = new MutationObserver(onMutate)\n\nlet currentlyObserving = false\n\nexport function startObservingMutations() {\n    observer.observe(document, { subtree: true, childList: true, attributes: true, attributeOldValue: true })\n\n    currentlyObserving = true\n}\n\nexport function stopObservingMutations() {\n    flushObserver()\n\n    observer.disconnect()\n\n    currentlyObserving = false\n}\n\nlet queuedMutations = []\n\nexport function flushObserver() {\n    let records = observer.takeRecords()\n\n    queuedMutations.push(() => records.length > 0 && onMutate(records))\n\n    let queueLengthWhenTriggered = queuedMutations.length\n\n    queueMicrotask(() => {\n        // If these two lengths match, then we KNOW that this is the LAST\n        // flush in the current event loop. This way, we can process\n        // all mutations in one batch at the end of everything...\n        if (queuedMutations.length === queueLengthWhenTriggered) {\n            // Now Alpine can process all the mutations...\n            while (queuedMutations.length > 0) queuedMutations.shift()()\n        }\n    })\n}\n\nexport function mutateDom(callback) {\n    if (! currentlyObserving) return callback()\n\n    stopObservingMutations()\n\n    let result = callback()\n\n    startObservingMutations()\n\n    return result\n}\n\nlet isCollecting = false\nlet deferredMutations = []\n\nexport function deferMutations() {\n    isCollecting = true\n}\n\nexport function flushAndStopDeferringMutations() {\n    isCollecting = false\n\n    onMutate(deferredMutations)\n\n    deferredMutations = []\n}\n\nfunction onMutate(mutations) {\n    if (isCollecting) {\n        deferredMutations = deferredMutations.concat(mutations)\n\n        return\n    }\n\n    let addedNodes = []\n    let removedNodes = new Set\n    let addedAttributes = new Map\n    let removedAttributes = new Map\n\n    for (let i = 0; i < mutations.length; i++) {\n        if (mutations[i].target._x_ignoreMutationObserver) continue\n\n        if (mutations[i].type === 'childList') {\n            mutations[i].removedNodes.forEach(node => {\n                if (node.nodeType !== 1) return\n\n                // No need to process removed nodes that haven't been initialized by Alpine...\n                if (! node._x_marker) return\n\n                removedNodes.add(node)\n            })\n\n            mutations[i].addedNodes.forEach(node => {\n                if (node.nodeType !== 1) return\n\n                // If the node is a removal as well, that means it's a \"move\" operation and we'll leave it alone...\n                if (removedNodes.has(node)) {\n                    removedNodes.delete(node)\n\n                    return\n                }\n\n                // If the node has already been initialized, we'll leave it alone...\n                if (node._x_marker) return;\n\n                addedNodes.push(node)\n            })\n        }\n\n        if (mutations[i].type === 'attributes') {\n            let el = mutations[i].target\n            let name = mutations[i].attributeName\n            let oldValue = mutations[i].oldValue\n\n            let add = () => {\n                if (! addedAttributes.has(el)) addedAttributes.set(el, [])\n\n                addedAttributes.get(el).push({ name,  value: el.getAttribute(name) })\n            }\n\n            let remove = () => {\n                if (! removedAttributes.has(el)) removedAttributes.set(el, [])\n\n                removedAttributes.get(el).push(name)\n            }\n\n            // New attribute.\n            if (el.hasAttribute(name) && oldValue === null) {\n                add()\n            // Changed attribute.\n            } else if (el.hasAttribute(name)) {\n                remove()\n                add()\n            // Removed attribute.\n            } else {\n                remove()\n            }\n        }\n    }\n\n    removedAttributes.forEach((attrs, el) => {\n        cleanupAttributes(el, attrs)\n    })\n\n    addedAttributes.forEach((attrs, el) => {\n        onAttributeAddeds.forEach(i => i(el, attrs))\n    })\n\n    // There are two special scenarios we need to account for when using the mutation\n    // observer to init and destroy elements. First, when a node is \"moved\" on the page,\n    // it's registered as both an \"add\" and a \"remove\", so we want to skip those.\n    // (This is handled above by the ._x_marker conditionals...)\n    // Second, when a node is \"wrapped\", it gets registered as a \"removal\" and the wrapper\n    // as an \"addition\". We don't want to remove, then re-initialize the node, so we look\n    // and see if it's inside any added nodes (wrappers) and skip it.\n    // (This is handled below by the .contains conditional...)\n\n    for (let node of removedNodes) {\n        if (addedNodes.some(i => i.contains(node))) continue\n\n        onElRemoveds.forEach(i => i(node))\n    }\n\n    for (let node of addedNodes) {\n        if (! node.isConnected) continue\n\n        onElAddeds.forEach(i => i(node))\n    }\n\n    addedNodes = null\n    removedNodes = null\n    addedAttributes = null\n    removedAttributes = null\n}\n"
  },
  {
    "path": "packages/alpinejs/src/nextTick.js",
    "content": "\nlet tickStack = []\n\nlet isHolding = false\n\nexport function nextTick(callback = () => {}) {\n  queueMicrotask(() => {\n    isHolding || setTimeout(() => {\n      releaseNextTicks()\n    })\n  })\n\n  return new Promise((res) => {\n    tickStack.push(() => {\n        callback();\n        res();\n    });\n  })\n}\n\nexport function releaseNextTicks() {\n    isHolding = false\n\n    while (tickStack.length) tickStack.shift()()\n}\n\nexport function holdNextTicks() {\n    isHolding = true\n}\n"
  },
  {
    "path": "packages/alpinejs/src/plugin.js",
    "content": "import Alpine from \"./alpine\";\n\nexport function plugin(callback) {\n    let callbacks = Array.isArray(callback) ? callback : [callback]\n\n    callbacks.forEach(i => i(Alpine))\n}\n"
  },
  {
    "path": "packages/alpinejs/src/reactivity.js",
    "content": "\nimport { scheduler, startTransaction as startTx, commitTransaction as commitTx } from './scheduler'\n\nlet reactive, effect, release, raw\n\nlet shouldSchedule = true\nexport function disableEffectScheduling(callback) {\n    shouldSchedule = false\n\n    callback()\n\n    shouldSchedule = true\n}\n\nexport function setReactivityEngine(engine) {\n    reactive = engine.reactive\n    release = engine.release\n    effect = (callback) => engine.effect(callback, { scheduler: task => {\n        if (shouldSchedule) {\n            scheduler(task)\n        } else {\n            task()\n        }\n    } })\n    raw = engine.raw\n}\n\nexport function overrideEffect(override) { effect = override }\n\nexport function elementBoundEffect(el) {\n    let cleanup = () => {}\n\n    let wrappedEffect = (callback) => {\n        let effectReference = effect(callback)\n\n        if (! el._x_effects) {\n            el._x_effects = new Set\n\n            // Livewire depends on el._x_runEffects.\n            el._x_runEffects = () => { el._x_effects.forEach(i => i()) }\n        }\n\n        el._x_effects.add(effectReference)\n\n        cleanup = () => {\n            if (effectReference === undefined) return\n\n            el._x_effects.delete(effectReference)\n\n            release(effectReference)\n        }\n\n        return effectReference\n    }\n\n    return [wrappedEffect, () => { cleanup() }]\n}\n\nexport function watch(getter, callback) {\n    let firstTime = true\n\n    let oldValue\n    let oldValueJSON\n\n    let effectReference = effect(() => {\n        let value = getter()\n\n        // JSON.stringify touches every single property at any level enabling deep watching\n        let newJSON = JSON.stringify(value)\n\n        if (! firstTime) {\n            // For objects, always fire (deep watching may have detected nested changes).\n            // For primitives, only fire if value actually changed.\n            if (typeof value === 'object' || value !== oldValue) {\n                // We have to queue this watcher as a microtask so that\n                // the watcher doesn't pick up its own dependencies.\n\n                // For objects, parse the stored JSON snapshot to get a plain clone\n                // of the previous state. Without this, oldValue and value are the\n                // same reference and oldValue would reflect the already-mutated state.\n                let previousValue = typeof oldValue === 'object'\n                    ? JSON.parse(oldValueJSON)\n                    : oldValue\n\n                queueMicrotask(() => {\n                    callback(value, previousValue)\n                })\n            }\n        }\n\n        oldValue = value\n        oldValueJSON = newJSON\n\n        firstTime = false\n    })\n\n    return () => release(effectReference)\n}\n\nexport async function transaction(callback) {\n    startTx()\n\n    try {\n        await callback()\n        await Promise.resolve()  // Yield for mutation cleanup\n    } finally {\n        commitTx()\n    }\n}\n\nexport {\n    release,\n    reactive,\n    effect,\n    raw,\n}\n"
  },
  {
    "path": "packages/alpinejs/src/scheduler.js",
    "content": "\nlet flushPending = false\nlet flushing = false\nlet queue = []\nlet lastFlushedIndex = -1\nlet transactionActive = false\n\nexport function scheduler (callback) { queueJob(callback) }\n\nexport function startTransaction() {\n    transactionActive = true\n}\n\nexport function commitTransaction() {\n    transactionActive = false\n    queueFlush()\n}\n\nfunction queueJob(job) {\n    if (! queue.includes(job)) queue.push(job)\n\n    queueFlush()\n}\nexport function dequeueJob(job) {\n    let index = queue.indexOf(job)\n\n    if (index !== -1 && index > lastFlushedIndex) queue.splice(index, 1)\n}\n\nfunction queueFlush() {\n    if (! flushing && ! flushPending) {\n        if (transactionActive) return  // Block during transaction\n\n        flushPending = true\n\n        queueMicrotask(flushJobs)\n    }\n}\n\nexport function flushJobs() {\n    flushPending = false\n    flushing = true\n\n    for (let i = 0; i < queue.length; i++) {\n        queue[i]()\n        lastFlushedIndex = i\n    }\n\n    queue.length = 0\n    lastFlushedIndex = -1\n\n    flushing = false\n}\n"
  },
  {
    "path": "packages/alpinejs/src/scope.js",
    "content": "\nexport function scope(node) {\n    return mergeProxies(closestDataStack(node))\n}\n\nexport function addScopeToNode(node, data, referenceNode) {\n    node._x_dataStack = [data, ...closestDataStack(referenceNode || node)]\n\n    return () => {\n        node._x_dataStack = node._x_dataStack.filter(i => i !== data)\n    }\n}\n\nexport function hasScope(node) {\n    return !! node._x_dataStack\n}\n\nexport function closestDataStack(node) {\n    if (node._x_dataStack) return node._x_dataStack\n\n    if (typeof ShadowRoot === 'function' && node instanceof ShadowRoot) {\n        return closestDataStack(node.host)\n    }\n\n    if (! node.parentNode) {\n        return []\n    }\n\n    return closestDataStack(node.parentNode)\n}\n\nexport function closestDataProxy(el) {\n    return mergeProxies(closestDataStack(el))\n}\n\nexport function mergeProxies (objects) {\n    return new Proxy({ objects }, mergeProxyTrap);\n}\n\nfunction keyInPrototypeChain(obj, key) {\n    if (obj === null || obj === Object.prototype) return null\n    if (Object.prototype.hasOwnProperty.call(obj, key)) return obj\n\n    return keyInPrototypeChain(Object.getPrototypeOf(obj), key)\n}\n\nlet mergeProxyTrap = {\n    ownKeys({ objects }) {\n        return Array.from(\n            new Set(objects.flatMap((i) => Object.keys(i)))\n        )\n    },\n\n    has({ objects }, name) {\n        if (name == Symbol.unscopables) return false;\n\n        return objects.some((obj) =>\n            Object.prototype.hasOwnProperty.call(obj, name) ||\n            Reflect.has(obj, name)\n        );\n    },\n\n    get({ objects }, name, thisProxy) {\n        if (name == \"toJSON\") return collapseProxies\n\n        return Reflect.get(\n            objects.find((obj) =>\n                Reflect.has(obj, name)\n            ) || {},\n            name,\n            thisProxy\n        )\n    },\n\n    set({ objects }, name, value, thisProxy) {\n        let target;\n        for (const obj of objects) {\n            target = keyInPrototypeChain(obj, name);\n            if (target) break;\n        }\n        if (!target) target = objects[objects.length - 1];\n        const descriptor = Object.getOwnPropertyDescriptor(target, name);\n        if (descriptor?.set && descriptor?.get)\n            // Can't use Reflect.set here due to [upstream bug](https://github.com/vuejs/core/blob/31abdc8adad569d83b476c340e678c4daa901545/packages/reactivity/src/baseHandlers.ts#L148) in @vue/reactivity\n            return descriptor.set.call(thisProxy, value) || true;\n        return Reflect.set(target, name, value);\n    },\n}\n\nfunction collapseProxies() {\n    let keys = Reflect.ownKeys(this)\n\n    return keys.reduce((acc, key) => {\n        acc[key] = Reflect.get(this, key)\n\n        return acc;\n    }, {})\n}\n"
  },
  {
    "path": "packages/alpinejs/src/store.js",
    "content": "import { initInterceptors } from \"./interceptor\";\nimport { reactive } from \"./reactivity\"\n\nlet stores = {}\nlet isReactive = false\n\nexport function store(name, value) {\n    if (! isReactive) { stores = reactive(stores); isReactive = true; }\n\n    if (value === undefined) {\n        return stores[name]\n    }\n\n    stores[name] = value\n\n    initInterceptors(stores[name])\n\n    if (typeof value === 'object' && value !== null && value.hasOwnProperty('init') && typeof value.init === 'function') {\n        stores[name].init()\n    }\n}\n\nexport function getStores() { return stores }\n"
  },
  {
    "path": "packages/alpinejs/src/utils/bind.js",
    "content": "import { dontAutoEvaluateFunctions, evaluate } from '../evaluator'\nimport { reactive } from '../reactivity'\nimport { setClasses } from './classes'\nimport { setStyles } from './styles'\n\nexport default function bind(el, name, value, modifiers = []) {\n    // Register bound data as pure observable data for other APIs to use.\n    if (! el._x_bindings) el._x_bindings = reactive({})\n\n    el._x_bindings[name] = value\n\n    name = modifiers.includes('camel') ? camelCase(name) : name\n\n    switch (name) {\n        case 'value':\n            bindInputValue(el, value)\n            break;\n\n        case 'style':\n            bindStyles(el, value)\n            break;\n\n        case 'class':\n            bindClasses(el, value)\n            break;\n\n        // 'selected' and 'checked' are special attributes that aren't necessarily\n        // synced with their corresponding properties when updated, so both the\n        // attribute and property need to be updated when bound.\n        case 'selected':\n        case 'checked':\n            bindAttributeAndProperty(el, name, value)\n            break;\n\n        default:\n            bindAttribute(el, name, value)\n            break;\n    }\n}\n\nfunction bindInputValue(el, value) {\n    if (isRadio(el)) {\n        // Set radio value from x-bind:value, if no \"value\" attribute exists.\n        // If there are any initial state values, radio will have a correct\n        // \"checked\" value since x-bind:value is processed before x-model.\n        if (el.attributes.value === undefined) {\n            el.value = value\n        }\n\n        // @todo: yuck\n        if (window.fromModel) {\n            if (typeof value === 'boolean') {\n                el.checked = safeParseBoolean(el.value) === value\n            } else {\n                el.checked = checkedAttrLooseCompare(el.value, value)\n            }\n        }\n    } else if (isCheckbox(el)) {\n        // If we are explicitly binding a string to the :value, set the string,\n        // If the value is a boolean/array/number/null/undefined, leave it alone, it will be set to \"on\"\n        // automatically.\n        if (Number.isInteger(value)) {\n            el.value = value\n        } else if (! Array.isArray(value) && typeof value !== 'boolean' && ! [null, undefined].includes(value)) {\n            el.value = String(value)\n        } else {\n            if (Array.isArray(value)) {\n                el.checked = value.some(val => checkedAttrLooseCompare(val, el.value))\n            } else {\n                el.checked = !!value\n            }\n        }\n    } else if (el.tagName === 'SELECT') {\n        updateSelect(el, value)\n    } else {\n        if (el.value === value) return\n\n        el.value = value === undefined ? '' : value\n    }\n}\n\nfunction bindClasses(el, value) {\n    if (el._x_undoAddedClasses) el._x_undoAddedClasses()\n\n    el._x_undoAddedClasses = setClasses(el, value)\n}\n\nfunction bindStyles(el, value) {\n    if (el._x_undoAddedStyles) el._x_undoAddedStyles()\n\n    el._x_undoAddedStyles = setStyles(el, value)\n}\n\nfunction bindAttributeAndProperty(el, name, value) {\n    bindAttribute(el, name, value)\n    setPropertyIfChanged(el, name, value)\n}\n\nfunction bindAttribute(el, name, value) {\n    if ([null, undefined, false].includes(value) && attributeShouldntBePreservedIfFalsy(name)) {\n        el.removeAttribute(name)\n    } else {\n        if (isBooleanAttr(name)) value = name\n\n        setIfChanged(el, name, value)\n    }\n}\n\nfunction setIfChanged(el, attrName, value) {\n    if (el.getAttribute(attrName) != value) {\n        el.setAttribute(attrName, value)\n    }\n}\n\nfunction setPropertyIfChanged(el, propName, value) {\n    if (el[propName] !== value) {\n        el[propName] = value\n    }\n}\n\nfunction updateSelect(el, value) {\n    const arrayWrappedValue = [].concat(value).map(value => { return value + '' })\n\n    Array.from(el.options).forEach(option => {\n        option.selected = arrayWrappedValue.includes(option.value)\n    })\n}\n\nfunction camelCase(subject) {\n    return subject.toLowerCase().replace(/-(\\w)/g, (match, char) => char.toUpperCase())\n}\n\nfunction checkedAttrLooseCompare(valueA, valueB) {\n    return valueA == valueB\n}\n\nexport function safeParseBoolean(rawValue) {\n    if ([1, '1', 'true', 'on', 'yes', true].includes(rawValue)) {\n        return true\n    }\n\n    if ([0, '0', 'false', 'off', 'no', false].includes(rawValue)) {\n        return false\n    }\n\n    return rawValue ? Boolean(rawValue) : null\n}\n\n// As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute\nconst booleanAttributes = new Set([\n    'allowfullscreen',\n    'async',\n    'autofocus',\n    'autoplay',\n    'checked',\n    'controls',\n    'default',\n    'defer',\n    'disabled',\n    'formnovalidate',\n    'inert',\n    'ismap',\n    'itemscope',\n    'loop',\n    'multiple',\n    'muted',\n    'nomodule',\n    'novalidate',\n    'open',\n    'playsinline',\n    'readonly',\n    'required',\n    'reversed',\n    'selected',\n    'shadowrootclonable',\n    'shadowrootdelegatesfocus',\n    'shadowrootserializable',\n])\n\nfunction isBooleanAttr(attrName) {\n    return booleanAttributes.has(attrName)\n}\n\nfunction attributeShouldntBePreservedIfFalsy(name) {\n    return ! ['aria-pressed', 'aria-checked', 'aria-expanded', 'aria-selected'].includes(name)\n}\n\nexport function getBinding(el, name, fallback) {\n    // First let's get it out of Alpine bound data.\n    if (el._x_bindings && el._x_bindings[name] !== undefined) return el._x_bindings[name]\n\n    return getAttributeBinding(el, name, fallback)\n}\n\nexport function extractProp(el, name, fallback, extract = true) {\n    // First let's get it out of Alpine bound data.\n    if (el._x_bindings && el._x_bindings[name] !== undefined) return el._x_bindings[name]\n\n    if (el._x_inlineBindings && el._x_inlineBindings[name] !== undefined) {\n        let binding = el._x_inlineBindings[name]\n\n        binding.extract = extract\n\n        return dontAutoEvaluateFunctions(() => {\n            return evaluate(el, binding.expression)\n        })\n    }\n\n    return getAttributeBinding(el, name, fallback)\n}\n\nfunction getAttributeBinding(el, name, fallback) {\n    // If not, we'll return the literal attribute.\n    let attr = el.getAttribute(name)\n\n    // Nothing bound:\n    if (attr === null) return typeof fallback === 'function' ? fallback() : fallback\n\n    // The case of a custom attribute with no value. Ex: <div manual>\n    if (attr === '') return true\n\n    if (isBooleanAttr(name)) {\n        return !! [name, 'true'].includes(attr)\n    }\n\n    return attr\n}\n\nexport function isCheckbox(el) {\n    return el.type === 'checkbox' || el.localName === 'ui-checkbox' || el.localName === 'ui-switch'\n}\n\nexport function isRadio(el) {\n    return el.type === 'radio' || el.localName === 'ui-radio'\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/classes.js",
    "content": "\nexport function setClasses(el, value) {\n    if (Array.isArray(value)) {\n        return setClassesFromString(el, value.join(' '))\n    } else if (typeof value === 'object' && value !== null) {\n        return setClassesFromObject(el, value)\n    } else if (typeof value === 'function') {\n        return setClasses(el, value())\n    }\n\n    return setClassesFromString(el, value)\n}\n\nfunction splitClasses(classString) {\n    return classString.split(/\\s/).filter(Boolean)\n}\n\nfunction setClassesFromString(el, classString) {\n    let missingClasses = classString => splitClasses(classString).filter(i => ! el.classList.contains(i)).filter(Boolean)\n\n    let addClassesAndReturnUndo = classes => {\n        el.classList.add(...classes)\n\n        return () => { el.classList.remove(...classes) }\n    }\n\n    // This is to allow short-circuit expressions like: :class=\"show || 'hidden'\" && \"show && 'block'\"\n    classString = (classString === true) ? classString = '' : (classString || '')\n\n    return addClassesAndReturnUndo(missingClasses(classString))\n}\n\nfunction setClassesFromObject(el, classObject) {\n    let forAdd = Object.entries(classObject).flatMap(([classString, bool]) => bool ? splitClasses(classString) : false).filter(Boolean)\n    let forRemove = Object.entries(classObject).flatMap(([classString, bool]) => ! bool ? splitClasses(classString) : false).filter(Boolean)\n\n    let added = []\n    let removed = []\n\n    forRemove.forEach(i => {\n        if (el.classList.contains(i)) {\n            el.classList.remove(i)\n            removed.push(i)\n        }\n    })\n\n    forAdd.forEach(i => {\n        if (! el.classList.contains(i)) {\n            el.classList.add(i)\n            added.push(i)\n        }\n    })\n\n    return () => {\n        removed.forEach(i => el.classList.add(i))\n        added.forEach(i => el.classList.remove(i))\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/debounce.js",
    "content": "\nexport function debounce(func, wait) {\n    let timeout\n\n    return function() {\n        const context = this, args = arguments\n\n        const later = function () {\n            timeout = null\n\n            func.apply(context, args)\n        }\n\n        clearTimeout(timeout)\n\n        timeout = setTimeout(later, wait)\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/dispatch.js",
    "content": "\nexport function dispatch(el, name, detail = {}, options = {}) {\n    return el.dispatchEvent(\n        new CustomEvent(name, {\n            detail,\n            bubbles: true,\n            // Allows events to pass the shadow DOM barrier.\n            composed: true,\n            cancelable: true,\n            // Allows overriding the default event options.\n            ...options\n        })\n    )\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/error.js",
    "content": "export function tryCatch(el, expression, callback, ...args) {\n    try {\n        return callback(...args)\n    } catch (e) {\n        handleError( e, el, expression )\n    }\n}\n\nexport function handleError(...args) {\n    return errorHandler(...args)\n}\n\nlet errorHandler = normalErrorHandler\n\nexport function setErrorHandler(handler) {\n    errorHandler = handler\n}\n\nexport function normalErrorHandler(error , el, expression = undefined) {\n    error = Object.assign( \n        error ?? { message: 'No error message given.' }, \n        { el, expression } )\n\n    console.warn(`Alpine Expression Error: ${error.message}\\n\\n${ expression ? 'Expression: \\\"' + expression + '\\\"\\n\\n' : '' }`, el)\n\n    setTimeout( () => { throw error }, 0 )\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/on.js",
    "content": "import { debounce } from './debounce'\nimport { throttle } from './throttle'\n\nexport default function on (el, event, modifiers, callback) {\n    let listenerTarget = el\n\n    let handler = e => callback(e)\n\n    let options = {}\n\n    // This little helper allows us to add functionality to the listener's\n    // handler more flexibly in a \"middleware\" style.\n    let wrapHandler = (callback, wrapper) => (e) => wrapper(callback, e)\n\n    if (modifiers.includes(\"dot\")) event = dotSyntax(event)\n    if (modifiers.includes('camel')) event = camelCase(event)\n    if (modifiers.includes('capture')) options.capture = true\n    if (modifiers.includes('window')) listenerTarget = window\n    if (modifiers.includes('document')) listenerTarget = document\n\n    if (modifiers.includes('passive')) {\n        options.passive = modifiers[modifiers.indexOf('passive')+1] !== 'false'\n    }\n\n    // By wrapping the handler with debounce & throttle first, we ensure that the wrapping logic itself is not\n    // throttled/debounced, only the user's callback is. This way, if the user expects\n    // `e.preventDefault()` to happen, it'll still happen even if their callback gets throttled.\n    handler = addDebounceOrThrottle(modifiers, handler)\n\n    if (modifiers.includes('prevent')) handler = wrapHandler(handler, (next, e) => { e.preventDefault(); next(e) })\n    if (modifiers.includes('stop')) handler = wrapHandler(handler, (next, e) => { e.stopPropagation(); next(e) })\n\n    if (modifiers.includes(\"once\")) {\n        handler = wrapHandler(handler, (next, e) => {\n            next(e);\n\n            listenerTarget.removeEventListener(event, handler, options);\n        });\n    }\n\n    if (modifiers.includes('away') || modifiers.includes('outside')) {\n        listenerTarget = document\n\n        handler = wrapHandler(handler, (next, e) => {\n            if (el.contains(e.target)) return\n\n            if (e.target.isConnected === false) return\n\n            if (el.offsetWidth < 1 && el.offsetHeight < 1) return\n\n            // Additional check for special implementations like x-collapse\n            // where the element doesn't have display: none\n            if (el._x_isShown === false) return\n\n            next(e)\n        })\n    }\n\n    if (modifiers.includes('self')) handler = wrapHandler(handler, (next, e) => { e.target === el && next(e) })\n\n    // Flush any pending model updates before submit handlers run\n    // (e.g. x-model.blur inputs that haven't synced yet).\n    if (event === 'submit') {\n        handler = wrapHandler(handler, (next, e) => {\n            if (e.target._x_pendingModelUpdates) {\n                e.target._x_pendingModelUpdates.forEach(fn => fn())\n            }\n\n            next(e)\n        })\n    }\n\n    // Handle :keydown and :keyup listeners.\n    // Handle :click and :auxclick listeners.\n    if (isKeyEvent(event) || isClickEvent(event)) {\n        handler = wrapHandler(handler, (next, e) => {\n            if (isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers)) {\n                return\n            }\n\n            next(e)\n        })\n    }\n\n    listenerTarget.addEventListener(event, handler, options)\n\n    return () => {\n        listenerTarget.removeEventListener(event, handler, options)\n    }\n}\n\nexport function addDebounceOrThrottle(modifiers, handler) {\n    if (modifiers.includes('debounce')) {\n        let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'\n        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250\n\n        handler = debounce(handler, wait)\n    }\n    if (modifiers.includes('throttle')) {\n        let nextModifier = modifiers[modifiers.indexOf('throttle')+1] || 'invalid-wait'\n        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250\n\n        handler = throttle(handler, wait)\n    }\n    return handler\n}\n\nfunction dotSyntax(subject) {\n    return subject.replace(/-/g, \".\")\n}\n\nfunction camelCase(subject) {\n    return subject.toLowerCase().replace(/-(\\w)/g, (match, char) => char.toUpperCase())\n}\n\nfunction isNumeric(subject){\n    return ! Array.isArray(subject) && ! isNaN(subject)\n}\n\nfunction kebabCase(subject) {\n    if ([' ','_'].includes(subject\n    )) return subject\n    return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\\s]/, '-').toLowerCase()\n}\n\nfunction isKeyEvent(event) {\n    return ['keydown', 'keyup'].includes(event)\n}\n\nfunction isClickEvent(event) {\n    return ['contextmenu','click','mouse'].some(i => event.includes(i))\n}\n\nfunction isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {\n    let keyModifiers = modifiers.filter(i => {\n        // `preserve-scroll` is specifically for Livewire and is not used by Alpine...\n        // `blur`, `change`, `enter`, `lazy` are x-model event trigger modifiers, not key modifiers\n        return ! ['window', 'document', 'prevent', 'stop', 'once', 'capture', 'self', 'away', 'outside', 'passive', 'preserve-scroll', 'blur', 'change', 'lazy'].includes(i)\n    })\n\n    if (keyModifiers.includes('debounce')) {\n        let debounceIndex = keyModifiers.indexOf('debounce')\n        keyModifiers.splice(debounceIndex, isNumeric((keyModifiers[debounceIndex+1] || 'invalid-wait').split('ms')[0]) ? 2 : 1)\n    }\n\n    if (keyModifiers.includes('throttle')) {\n        let debounceIndex = keyModifiers.indexOf('throttle')\n        keyModifiers.splice(debounceIndex, isNumeric((keyModifiers[debounceIndex+1] || 'invalid-wait').split('ms')[0]) ? 2 : 1)\n    }\n\n    // If no modifier is specified, we'll call it a press.\n    if (keyModifiers.length === 0) return false\n\n    // If one is passed, AND it matches the key pressed, we'll call it a press.\n    if (keyModifiers.length === 1 && keyToModifiers(e.key).includes(keyModifiers[0])) return false\n\n    // The user is listening for key combinations.\n    const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta', 'cmd', 'super']\n    const selectedSystemKeyModifiers = systemKeyModifiers.filter(modifier => keyModifiers.includes(modifier))\n\n    keyModifiers = keyModifiers.filter(i => ! selectedSystemKeyModifiers.includes(i))\n\n    if (selectedSystemKeyModifiers.length > 0) {\n        const activelyPressedKeyModifiers = selectedSystemKeyModifiers.filter(modifier => {\n            // Alias \"cmd\" and \"super\" to \"meta\"\n            if (modifier === 'cmd' || modifier === 'super') modifier = 'meta'\n\n            return e[`${modifier}Key`]\n        })\n\n        // If all the modifiers selected are pressed, ...\n        if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) {\n\n            // AND the event is a click. It's a pass.\n            if (isClickEvent(e.type)) return false\n\n            // OR the remaining key is pressed as well. It's a press.\n            if (keyToModifiers(e.key).includes(keyModifiers[0])) return false\n        }\n    }\n\n    // We'll call it NOT a valid keypress.\n    return true\n}\n\nfunction keyToModifiers(key) {\n    if (! key) return []\n\n    key = kebabCase(key)\n\n    let modifierToKeyMap = {\n        'ctrl': 'control',\n        'slash': '/',\n        'space': ' ',\n        'spacebar': ' ',\n        'cmd': 'meta',\n        'esc': 'escape',\n        'up': 'arrow-up',\n        'down': 'arrow-down',\n        'left': 'arrow-left',\n        'right': 'arrow-right',\n        'period': '.',\n        'comma': ',',\n        'equal': '=',\n        'minus': '-',\n        'underscore': '_',\n    }\n\n    modifierToKeyMap[key] = key\n\n    return Object.keys(modifierToKeyMap).map(modifier => {\n        if (modifierToKeyMap[modifier] === key) return modifier\n    }).filter(modifier => modifier)\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/once.js",
    "content": "\nexport function once(callback, fallback = () => {}) {\n    let called = false\n\n    return function () {\n        if (! called) {\n            called = true\n\n            callback.apply(this, arguments)\n        } else {\n            fallback.apply(this, arguments)\n        }\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/styles.js",
    "content": "\nexport function setStyles(el, value) {\n    if (typeof value === 'object' && value !== null) {\n        return setStylesFromObject(el, value)\n    }\n\n    return setStylesFromString(el, value)\n}\n\nfunction setStylesFromObject(el, value) {\n    let previousStyles = {}\n\n    Object.entries(value).forEach(([key, value]) => {\n        previousStyles[key] = el.style[key]\n\n        // When we use javascript object, css properties use the camelCase\n        // syntax but when we use setProperty, we need the css format\n        // so we need to convert camelCase to kebab-case.\n        // In case key is a CSS variable, leave it as it is.\n        if (! key.startsWith('--')) {\n            key = kebabCase(key);\n        }\n\n        el.style.setProperty(key, value)\n    })\n\n    setTimeout(() => {\n        if (el.style.length === 0) {\n            el.removeAttribute('style')\n        }\n    })\n\n    return () => {\n        setStyles(el, previousStyles)\n    }\n}\n\nfunction setStylesFromString(el, value) {\n    let cache = el.getAttribute('style', value)\n\n    el.setAttribute('style', value)\n\n    return () => {\n        el.setAttribute('style', cache || '')\n    }\n}\n\nfunction kebabCase(subject) {\n    return subject.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase()\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/throttle.js",
    "content": "\nexport function throttle(func, limit) {\n    let inThrottle\n\n    return function() {\n        let context = this, args = arguments\n\n        if (! inThrottle) {\n            func.apply(context, args)\n\n            inThrottle = true\n\n            setTimeout(() => inThrottle = false, limit)\n        }\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/walk.js",
    "content": "export function walk(el, callback) {\n    if (typeof ShadowRoot === 'function' && el instanceof ShadowRoot) {\n        Array.from(el.children).forEach(el => walk(el, callback))\n\n        return\n    }\n\n    let skip = false\n\n    callback(el, () => skip = true)\n\n    if (skip) return\n\n    let node = el.firstElementChild\n\n    while (node) {\n        walk(node, callback, false)\n\n        node = node.nextElementSibling\n    }\n}\n"
  },
  {
    "path": "packages/alpinejs/src/utils/warn.js",
    "content": "\nexport function warn(message, ...args) {\n    console.warn(`Alpine Warning: ${message}`, ...args)\n}\n"
  },
  {
    "path": "packages/anchor/builds/cdn.js",
    "content": "import anchor from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(anchor)\n})\n"
  },
  {
    "path": "packages/anchor/builds/module.js",
    "content": "import anchor from '../src/index.js'\n\nexport default anchor\n\nexport { anchor }\n"
  },
  {
    "path": "packages/anchor/package.json",
    "content": "{\n    \"name\": \"@alpinejs/anchor\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Anchor an element's position relative to another\",\n    \"homepage\": \"https://alpinejs.dev/plugins/anchor\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/anchor\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"dependencies\": {\n        \"@floating-ui/dom\": \"^1.5.3\"\n    }\n}\n"
  },
  {
    "path": "packages/anchor/src/index.js",
    "content": "import { computePosition, autoUpdate, flip, offset, shift } from '@floating-ui/dom'\n\nexport default function (Alpine) {\n    Alpine.magic('anchor', el => {\n        if (! el._x_anchor) throw 'Alpine: No x-anchor directive found on element using $anchor...'\n\n        return el._x_anchor\n    })\n\n    Alpine.interceptClone((from, to) => {\n        if (from && from._x_anchor && ! to._x_anchor) {\n            to._x_anchor = from._x_anchor\n        }\n    })\n\n    Alpine.directive('anchor', Alpine.skipDuringClone((el, { expression, modifiers, value }, { evaluate, effect, cleanup }) => {\n        let { placement, offsetValue, unstyled } = getOptions(modifiers)\n\n        el._x_anchor = Alpine.reactive({ x: 0, y: 0 })\n\n        let previousReference = null\n        let release = null\n\n        let effector = effect(() => {\n            let reference = evaluate(expression)\n            if (! reference) throw 'Alpine: no element provided to x-anchor...'\n\n            if (previousReference !== reference) {\n                if (release) release()\n\n                previousReference = reference\n\n                let compute = () => {\n                    let previousValue\n\n                    computePosition(reference, el, {\n                        placement,\n                        middleware: [flip(), shift({padding: 5}), offset(offsetValue)],\n                    }).then(({ x, y }) => {\n                        unstyled || setStyles(el, x, y)\n\n                        // Only trigger Alpine reactivity when the value actually changes...\n                        if (JSON.stringify({ x, y }) !== previousValue) {\n                            el._x_anchor.x = x\n                            el._x_anchor.y = y\n                        }\n\n                        previousValue = JSON.stringify({ x, y })\n                    })\n                }\n\n                release = autoUpdate(reference, el, () => compute())\n            }\n        })\n\n        cleanup(() => {\n            effector()\n            if (release) release()\n        })\n    },\n\n    // When cloning (or \"morphing\"), we will graft the style and position data from the live tree...\n    (el, { expression, modifiers, value }, { cleanup, evaluate }) => {\n        let { placement, offsetValue, unstyled } = getOptions(modifiers)\n\n        if (el._x_anchor) {\n            unstyled || setStyles(el, el._x_anchor.x, el._x_anchor.y)\n        }\n    }))\n}\n\nfunction setStyles(el, x, y) {\n    Object.assign(el.style, {\n        left: x+'px', top: y+'px', position: 'absolute',\n    })\n}\n\nfunction getOptions(modifiers) {\n    let positions = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']\n    let placement = positions.find(i => modifiers.includes(i))\n    let offsetValue = 0\n    if (modifiers.includes('offset')) {\n        let idx = modifiers.findIndex(i => i === 'offset')\n\n        offsetValue = modifiers[idx + 1] !== undefined ? Number(modifiers[idx + 1]) : offsetValue\n    }\n    let unstyled = modifiers.includes('no-style')\n\n    return { placement, offsetValue, unstyled }\n}\n"
  },
  {
    "path": "packages/collapse/builds/cdn.js",
    "content": "import collapse from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(collapse)\n})\n"
  },
  {
    "path": "packages/collapse/builds/module.js",
    "content": "import collapse from '../src/index.js'\n\nexport default collapse\n\nexport { collapse }\n"
  },
  {
    "path": "packages/collapse/package.json",
    "content": "{\n    \"name\": \"@alpinejs/collapse\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Collapse and expand elements with robust animations\",\n    \"homepage\": \"https://alpinejs.dev/plugins/collapse\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/collapse\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/collapse/src/index.js",
    "content": "export default function (Alpine) {\n    Alpine.directive('collapse', collapse)\n\n    // If we're using a \"minimum height\", we'll need to disable\n    // x-show's default behavior of setting display: 'none'.\n    collapse.inline = (el, { modifiers }) => {\n        if (! modifiers.includes('min')) return\n\n        el._x_doShow = () => {}\n        el._x_doHide = () => {}\n    }\n\n    function collapse(el, { modifiers }) {\n        let duration = modifierValue(modifiers, 'duration', 250) / 1000\n        let floor = modifierValue(modifiers, 'min', 0)\n        let fullyHide = ! modifiers.includes('min')\n\n        if (! el._x_isShown) el.style.height = `${floor}px`\n        // We use the hidden attribute for the benefit of Tailwind\n        // users as the .space utility will ignore [hidden] elements.\n        // We also use display:none as the hidden attribute has very\n        // low CSS specificity and could be accidentally overridden\n        // by a user.\n        if (! el._x_isShown && fullyHide) el.hidden = true\n        if (! el._x_isShown) el.style.overflow = 'hidden'\n\n        // Override the setStyles function with one that won't\n        // revert updates to the height style.\n        let setFunction = (el, styles) => {\n            let revertFunction = Alpine.setStyles(el, styles);\n\n            return styles.height ? () => {} : revertFunction\n        }\n\n        let transitionStyles = {\n            transitionProperty: 'height',\n            transitionDuration: `${duration}s`,\n            transitionTimingFunction: 'cubic-bezier(0.4, 0.0, 0.2, 1)',\n        }\n\n        el._x_transition = {\n            in(before = () => {}, after = () => {}) {\n                if (fullyHide) el.hidden = false;\n                if (fullyHide) el.style.display = null\n\n                let current = el.getBoundingClientRect().height\n\n                el.style.height = 'auto'\n\n                let full = el.getBoundingClientRect().height\n\n                if (current === full) { current = floor }\n\n                Alpine.transition(el, Alpine.setStyles, {\n                    during: transitionStyles,\n                    start: { height: current+'px' },\n                    end: { height: full+'px' },\n                }, () => el._x_isShown = true, () => {\n                    if (Math.abs(el.getBoundingClientRect().height - full) < 1) {\n                        el.style.overflow = null\n                    }\n                })\n            },\n\n            out(before = () => {}, after = () => {}) {\n                let full = el.getBoundingClientRect().height\n\n                Alpine.transition(el, setFunction, {\n                    during: transitionStyles,\n                    start: { height: full+'px' },\n                    end: { height: floor+'px' },\n                }, () => el.style.overflow = 'hidden', () => {\n                    el._x_isShown = false\n\n                    // check if element is fully collapsed\n                    if (el.style.height == `${floor}px` && fullyHide) {\n                        el.style.display = 'none'\n                        el.hidden = true\n                    }\n                })\n            },\n        }\n    }\n}\n\nfunction modifierValue(modifiers, key, fallback) {\n    // If the modifier isn't present, use the default.\n    if (modifiers.indexOf(key) === -1) return fallback\n\n    // If it IS present, grab the value after it: x-show.transition.duration.500ms\n    const rawValue = modifiers[modifiers.indexOf(key) + 1]\n\n    if (! rawValue) return fallback\n\n    if (key === 'duration') {\n        // Support x-collapse.duration.500ms && duration.500\n        let match = rawValue.match(/([0-9]+)ms/)\n        if (match) return match[1]\n    }\n\n    if (key === 'min') {\n        // Support x-collapse.min.100px && min.100\n        let match = rawValue.match(/([0-9]+)px/)\n        if (match) return match[1]\n    }\n\n    return rawValue\n}\n"
  },
  {
    "path": "packages/csp/builds/cdn.js",
    "content": "import Alpine from './../src/index'\n\nwindow.Alpine = Alpine\n\nqueueMicrotask(() => {\n    Alpine.start()\n})\n"
  },
  {
    "path": "packages/csp/builds/module.js",
    "content": "import Alpine from './../src/index'\n\nexport default Alpine\n\nexport { Alpine }\n"
  },
  {
    "path": "packages/csp/package.json",
    "content": "{\n    \"name\": \"@alpinejs/csp\",\n    \"version\": \"3.15.8\",\n    \"description\": \"A CSP-friendly build of AlpineJS\",\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"dependencies\": {\n        \"@vue/reactivity\": \"~3.1.1\"\n    }\n}\n"
  },
  {
    "path": "packages/csp/src/directives/x-html.js",
    "content": "import { directive } from 'alpinejs/src/directives'\nimport { handleError } from 'alpinejs/src/utils/error'\n\ndirective('html', (el, { expression }) => {\n    handleError(new Error('Using the x-html directive is prohibited in the CSP build'), el)\n})\n"
  },
  {
    "path": "packages/csp/src/evaluator.js",
    "content": "import { generateEvaluatorFromFunction, shouldAutoEvaluateFunctions } from 'alpinejs/src/evaluator'\nimport { closestDataStack, mergeProxies } from 'alpinejs/src/scope'\nimport { tryCatch } from 'alpinejs/src/utils/error'\nimport { generateRuntimeFunction } from './parser'\nimport { injectMagics } from 'alpinejs/src/magics'\n\nexport function cspRawEvaluator(el, expression, extras = {}) {\n    let dataStack = generateDataStack(el)\n\n    let scope = mergeProxies([extras.scope ?? {}, ...dataStack])\n\n    let params = extras.params ?? []\n\n    let evaluate = generateRuntimeFunction(expression)\n\n    let result = evaluate({\n        scope,\n        forceBindingRootScopeToFunctions: true,\n    })\n\n    // If the result is a function, call it\n    if (typeof result === 'function' && shouldAutoEvaluateFunctions) {\n        return result.apply(scope, params)\n    }\n\n    return result\n}\n\nexport function cspEvaluator(el, expression) {\n    let dataStack = generateDataStack(el)\n\n    // Return if the provided expression is already a function...\n    if (typeof expression === 'function') {\n        return generateEvaluatorFromFunction(dataStack, expression)\n    }\n\n    let evaluator = generateEvaluator(el, expression, dataStack)\n\n    return tryCatch.bind(null, el, expression, evaluator)\n}\n\nfunction generateDataStack(el) {\n    let overriddenMagics = {}\n\n    injectMagics(overriddenMagics, el)\n\n    return [overriddenMagics, ...closestDataStack(el)]\n}\n\nfunction generateEvaluator(el, expression, dataStack) {\n    if (el instanceof HTMLIFrameElement) {\n        throw new Error('Evaluating expressions on an iframe is prohibited in the CSP build')\n    }\n\n    if (el instanceof HTMLScriptElement) {\n        throw new Error('Evaluating expressions on a script is prohibited in the CSP build')\n    }\n\n    return (receiver = () => {}, { scope = {}, params = [] } = {}) => {\n        let completeScope = mergeProxies([scope, ...dataStack])\n\n        let evaluate = generateRuntimeFunction(expression)\n\n        let returnValue = evaluate({\n            scope: completeScope,\n            forceBindingRootScopeToFunctions: true,\n        })\n\n        if (shouldAutoEvaluateFunctions && typeof returnValue === 'function') {\n            let nextReturnValue = returnValue.apply(returnValue, params)\n\n            if (nextReturnValue instanceof Promise) {\n                nextReturnValue.then(i =>  receiver(i))\n            } else {\n                receiver(nextReturnValue)\n            }\n        } else if (typeof returnValue === 'object' && returnValue instanceof Promise) {\n            returnValue.then(i => receiver(i))\n        } else {\n            receiver(returnValue)\n        }\n    }\n}\n"
  },
  {
    "path": "packages/csp/src/index.js",
    "content": "/**\n * Alpine CSP Build.\n *\n * Alpine allows you to use JavaScript directly inside your HTML. This is an\n * incredibly powerful features. However, it violates the \"unsafe-eval\"\n * Content Security Policy. This alternate Alpine build provides a\n * more constrained API for Alpine that is also CSP-friendly...\n */\nimport Alpine from 'alpinejs/src/alpine'\n\n/**\n * _______________________________________________________\n * The Evaluator\n * -------------------------------------------------------\n *\n * By default, Alpine's evaluator \"eval\"-like utilties to\n * interpret strings as runtime JS. We're going to use\n * a more CSP-friendly evaluator for this instead.\n */\nimport { cspEvaluator, cspRawEvaluator } from './evaluator'\n\nAlpine.setEvaluator(cspEvaluator)\nAlpine.setRawEvaluator(cspRawEvaluator)\n\n/**\n * The rest of this file bootstraps Alpine the way it is\n * normally bootstrapped in the default build. We will\n * set and define it's directives, magics, etc...\n */\nimport { reactive, effect, stop, toRaw } from '@vue/reactivity'\n\nAlpine.setReactivityEngine({ reactive, effect, release: stop, raw: toRaw })\n\nimport 'alpinejs/src/magics/index'\nimport 'alpinejs/src/directives/index'\n\n/**\n * The `x-html` directive needs to be disabled here\n * because it is not CSP friendly. To disable it,\n * we'll override it with noop implementation.\n */\nimport './directives/x-html'\n\nexport default Alpine\n"
  },
  {
    "path": "packages/csp/src/parser.js",
    "content": "let safemap = new WeakMap()\nlet globals = new Set()\n\nObject.getOwnPropertyNames(globalThis).forEach(key => {\n    // Prevent Safari deprecation warning...\n    if (key === 'styleMedia') return\n\n    globals.add(globalThis[key])\n})\n\nclass Token {\n    constructor(type, value, start, end) {\n        this.type = type;\n        this.value = value;\n        this.start = start;\n        this.end = end;\n    }\n}\n\nclass Tokenizer {\n    constructor(input) {\n        this.input = input;\n        this.position = 0;\n        this.tokens = [];\n    }\n\n    tokenize() {\n        while (this.position < this.input.length) {\n            this.skipWhitespace();\n            if (this.position >= this.input.length) break;\n\n            const char = this.input[this.position];\n\n            if (this.isDigit(char)) {\n                this.readNumber();\n            } else if (this.isAlpha(char) || char === '_' || char === '$') {\n                this.readIdentifierOrKeyword();\n            } else if (char === '\"' || char === \"'\") {\n                this.readString();\n            } else if (char === '/' && this.peek() === '/') {\n                this.skipLineComment();\n            } else {\n                this.readOperatorOrPunctuation();\n            }\n        }\n\n        this.tokens.push(new Token('EOF', null, this.position, this.position));\n        return this.tokens;\n    }\n\n    skipWhitespace() {\n        while (this.position < this.input.length && /\\s/.test(this.input[this.position])) {\n            this.position++;\n        }\n    }\n\n    skipLineComment() {\n        while (this.position < this.input.length && this.input[this.position] !== '\\n') {\n            this.position++;\n        }\n    }\n\n    isDigit(char) {\n        return /[0-9]/.test(char);\n    }\n\n    isAlpha(char) {\n        return /[a-zA-Z]/.test(char);\n    }\n\n    isAlphaNumeric(char) {\n        return /[a-zA-Z0-9_$]/.test(char);\n    }\n\n    peek(offset = 1) {\n        return this.input[this.position + offset] || '';\n    }\n\n    readNumber() {\n        const start = this.position;\n        let hasDecimal = false;\n\n        while (this.position < this.input.length) {\n            const char = this.input[this.position];\n            if (this.isDigit(char)) {\n                this.position++;\n            } else if (char === '.' && !hasDecimal) {\n                hasDecimal = true;\n                this.position++;\n            } else {\n                break;\n            }\n        }\n\n        const value = this.input.slice(start, this.position);\n        this.tokens.push(new Token('NUMBER', parseFloat(value), start, this.position));\n    }\n\n    readIdentifierOrKeyword() {\n        const start = this.position;\n\n        while (this.position < this.input.length && this.isAlphaNumeric(this.input[this.position])) {\n            this.position++;\n        }\n\n        const value = this.input.slice(start, this.position);\n        const keywords = ['true', 'false', 'null', 'undefined', 'new', 'typeof', 'void', 'delete', 'in', 'instanceof'];\n\n        if (keywords.includes(value)) {\n            if (value === 'true' || value === 'false') {\n                this.tokens.push(new Token('BOOLEAN', value === 'true', start, this.position));\n            } else if (value === 'null') {\n                this.tokens.push(new Token('NULL', null, start, this.position));\n            } else if (value === 'undefined') {\n                this.tokens.push(new Token('UNDEFINED', undefined, start, this.position));\n            } else {\n                this.tokens.push(new Token('KEYWORD', value, start, this.position));\n            }\n        } else {\n            this.tokens.push(new Token('IDENTIFIER', value, start, this.position));\n        }\n    }\n\n    readString() {\n        const start = this.position;\n        const quote = this.input[this.position];\n        this.position++; // Skip opening quote\n\n        let value = '';\n        let escaped = false;\n\n        while (this.position < this.input.length) {\n            const char = this.input[this.position];\n\n            if (escaped) {\n                switch (char) {\n                    case 'n': value += '\\n'; break;\n                    case 't': value += '\\t'; break;\n                    case 'r': value += '\\r'; break;\n                    case '\\\\': value += '\\\\'; break;\n                    case quote: value += quote; break;\n                    default: value += char;\n                }\n                escaped = false;\n            } else if (char === '\\\\') {\n                escaped = true;\n            } else if (char === quote) {\n                this.position++; // Skip closing quote\n                this.tokens.push(new Token('STRING', value, start, this.position));\n                return;\n            } else {\n                value += char;\n            }\n\n            this.position++;\n        }\n\n        throw new Error(`Unterminated string starting at position ${start}`);\n    }\n\n    readOperatorOrPunctuation() {\n        const start = this.position;\n        const char = this.input[this.position];\n        const next = this.peek();\n        const nextNext = this.peek(2);\n\n        // Three-character operators\n        if (char === '=' && next === '=' && nextNext === '=') {\n            this.position += 3;\n            this.tokens.push(new Token('OPERATOR', '===', start, this.position));\n        } else if (char === '!' && next === '=' && nextNext === '=') {\n            this.position += 3;\n            this.tokens.push(new Token('OPERATOR', '!==', start, this.position));\n        }\n        // Two-character operators\n        else if (char === '=' && next === '=') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '==', start, this.position));\n        } else if (char === '!' && next === '=') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '!=', start, this.position));\n        } else if (char === '<' && next === '=') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '<=', start, this.position));\n        } else if (char === '>' && next === '=') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '>=', start, this.position));\n        } else if (char === '&' && next === '&') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '&&', start, this.position));\n        } else if (char === '|' && next === '|') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '||', start, this.position));\n        } else if (char === '+' && next === '+') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '++', start, this.position));\n        } else if (char === '-' && next === '-') {\n            this.position += 2;\n            this.tokens.push(new Token('OPERATOR', '--', start, this.position));\n        }\n        // Single-character operators and punctuation\n        else {\n            this.position++;\n            const type = '()[]{},.;:?'.includes(char) ? 'PUNCTUATION' : 'OPERATOR';\n            this.tokens.push(new Token(type, char, start, this.position));\n        }\n    }\n}\n\nclass Parser {\n    constructor(tokens) {\n        this.tokens = tokens;\n        this.position = 0;\n    }\n\n    parse() {\n        if (this.isAtEnd()) {\n            throw new Error('Empty expression');\n        }\n        const expr = this.parseExpression();\n\n        // Allow optional trailing semicolon\n        this.match('PUNCTUATION', ';');\n\n        if (!this.isAtEnd()) {\n            throw new Error(`Unexpected token: ${this.current().value}`);\n        }\n        return expr;\n    }\n\n    parseExpression() {\n        return this.parseAssignment();\n    }\n\n    parseAssignment() {\n        const expr = this.parseTernary();\n\n        if (this.match('OPERATOR', '=')) {\n            const value = this.parseAssignment();\n            if (expr.type === 'Identifier' || expr.type === 'MemberExpression') {\n                return {\n                    type: 'AssignmentExpression',\n                    left: expr,\n                    operator: '=',\n                    right: value\n                };\n            }\n            throw new Error('Invalid assignment target');\n        }\n\n        return expr;\n    }\n\n    parseTernary() {\n        const expr = this.parseLogicalOr();\n\n        if (this.match('PUNCTUATION', '?')) {\n            const consequent = this.parseExpression();\n            this.consume('PUNCTUATION', ':');\n            const alternate = this.parseExpression();\n            return {\n                type: 'ConditionalExpression',\n                test: expr,\n                consequent,\n                alternate\n            };\n        }\n\n        return expr;\n    }\n\n    parseLogicalOr() {\n        let expr = this.parseLogicalAnd();\n\n        while (this.match('OPERATOR', '||')) {\n            const operator = this.previous().value;\n            const right = this.parseLogicalAnd();\n            expr = {\n                type: 'BinaryExpression',\n                operator,\n                left: expr,\n                right\n            };\n        }\n\n        return expr;\n    }\n\n    parseLogicalAnd() {\n        let expr = this.parseEquality();\n\n        while (this.match('OPERATOR', '&&')) {\n            const operator = this.previous().value;\n            const right = this.parseEquality();\n            expr = {\n                type: 'BinaryExpression',\n                operator,\n                left: expr,\n                right\n            };\n        }\n\n        return expr;\n    }\n\n    parseEquality() {\n        let expr = this.parseRelational();\n\n        while (this.match('OPERATOR', '==', '!=', '===', '!==')) {\n            const operator = this.previous().value;\n            const right = this.parseRelational();\n            expr = {\n                type: 'BinaryExpression',\n                operator,\n                left: expr,\n                right\n            };\n        }\n\n        return expr;\n    }\n\n    parseRelational() {\n        let expr = this.parseAdditive();\n\n        while (this.match('OPERATOR', '<', '>', '<=', '>=')) {\n            const operator = this.previous().value;\n            const right = this.parseAdditive();\n            expr = {\n                type: 'BinaryExpression',\n                operator,\n                left: expr,\n                right\n            };\n        }\n\n        return expr;\n    }\n\n    parseAdditive() {\n        let expr = this.parseMultiplicative();\n\n        while (this.match('OPERATOR', '+', '-')) {\n            const operator = this.previous().value;\n            const right = this.parseMultiplicative();\n            expr = {\n                type: 'BinaryExpression',\n                operator,\n                left: expr,\n                right\n            };\n        }\n\n        return expr;\n    }\n\n    parseMultiplicative() {\n        let expr = this.parseUnary();\n\n        while (this.match('OPERATOR', '*', '/', '%')) {\n            const operator = this.previous().value;\n            const right = this.parseUnary();\n            expr = {\n                type: 'BinaryExpression',\n                operator,\n                left: expr,\n                right\n            };\n        }\n\n        return expr;\n    }\n\n    parseUnary() {\n        // Handle prefix increment/decrement\n        if (this.match('OPERATOR', '++', '--')) {\n            const operator = this.previous().value;\n            const argument = this.parseUnary();\n            return {\n                type: 'UpdateExpression',\n                operator,\n                argument,\n                prefix: true\n            };\n        }\n\n        // Handle other unary operators\n        if (this.match('OPERATOR', '!', '-', '+')) {\n            const operator = this.previous().value;\n            const argument = this.parseUnary();\n            return {\n                type: 'UnaryExpression',\n                operator,\n                argument,\n                prefix: true\n            };\n        }\n\n        return this.parsePostfix();\n    }\n\n    parsePostfix() {\n        let expr = this.parseMember();\n\n        // Handle postfix increment/decrement\n        if (this.match('OPERATOR', '++', '--')) {\n            const operator = this.previous().value;\n            return {\n                type: 'UpdateExpression',\n                operator,\n                argument: expr,\n                prefix: false\n            };\n        }\n\n        return expr;\n    }\n\n    parseMember() {\n        let expr = this.parsePrimary();\n\n        while (true) {\n            if (this.match('PUNCTUATION', '.')) {\n                const property = this.consume('IDENTIFIER');\n                expr = {\n                    type: 'MemberExpression',\n                    object: expr,\n                    property: { type: 'Identifier', name: property.value },\n                    computed: false\n                };\n            } else if (this.match('PUNCTUATION', '[')) {\n                const property = this.parseExpression();\n                this.consume('PUNCTUATION', ']');\n                expr = {\n                    type: 'MemberExpression',\n                    object: expr,\n                    property,\n                    computed: true\n                };\n            } else if (this.match('PUNCTUATION', '(')) {\n                const args = this.parseArguments();\n                expr = {\n                    type: 'CallExpression',\n                    callee: expr,\n                    arguments: args\n                };\n            } else {\n                break;\n            }\n        }\n\n        return expr;\n    }\n\n    parseArguments() {\n        const args = [];\n\n        if (!this.check('PUNCTUATION', ')')) {\n            do {\n                args.push(this.parseExpression());\n            } while (this.match('PUNCTUATION', ','));\n        }\n\n        this.consume('PUNCTUATION', ')');\n        return args;\n    }\n\n    parsePrimary() {\n        // Numbers\n        if (this.match('NUMBER')) {\n            return { type: 'Literal', value: this.previous().value };\n        }\n\n        // Strings\n        if (this.match('STRING')) {\n            return { type: 'Literal', value: this.previous().value };\n        }\n\n        // Booleans\n        if (this.match('BOOLEAN')) {\n            return { type: 'Literal', value: this.previous().value };\n        }\n\n        // Null\n        if (this.match('NULL')) {\n            return { type: 'Literal', value: null };\n        }\n\n        // Undefined\n        if (this.match('UNDEFINED')) {\n            return { type: 'Literal', value: undefined };\n        }\n\n        // Identifiers\n        if (this.match('IDENTIFIER')) {\n            return { type: 'Identifier', name: this.previous().value };\n        }\n\n        // Grouping expressions\n        if (this.match('PUNCTUATION', '(')) {\n            const expr = this.parseExpression();\n            this.consume('PUNCTUATION', ')');\n            return expr;\n        }\n\n        // Array literals\n        if (this.match('PUNCTUATION', '[')) {\n            return this.parseArrayLiteral();\n        }\n\n        // Object literals\n        if (this.match('PUNCTUATION', '{')) {\n            return this.parseObjectLiteral();\n        }\n\n        throw new Error(`Unexpected token: ${this.current().type} \"${this.current().value}\"`);\n    }\n\n    parseArrayLiteral() {\n        const elements = [];\n\n        while (!this.check('PUNCTUATION', ']') && !this.isAtEnd()) {\n            elements.push(this.parseExpression());\n            if (this.match('PUNCTUATION', ',')) {\n                // Handle trailing comma\n                if (this.check('PUNCTUATION', ']')) {\n                    break;\n                }\n            } else {\n                break;\n            }\n        }\n\n        this.consume('PUNCTUATION', ']');\n        return {\n            type: 'ArrayExpression',\n            elements\n        };\n    }\n\n    parseObjectLiteral() {\n        const properties = [];\n\n        while (!this.check('PUNCTUATION', '}') && !this.isAtEnd()) {\n            let key;\n            let computed = false;\n\n            if (this.match('STRING')) {\n                key = { type: 'Literal', value: this.previous().value };\n            } else if (this.match('IDENTIFIER')) {\n                const name = this.previous().value;\n                key = { type: 'Identifier', name };\n            } else if (this.match('PUNCTUATION', '[')) {\n                key = this.parseExpression();\n                computed = true;\n                this.consume('PUNCTUATION', ']');\n            } else {\n                throw new Error('Expected property key');\n            }\n\n            this.consume('PUNCTUATION', ':');\n            const value = this.parseExpression();\n\n            properties.push({\n                type: 'Property',\n                key,\n                value,\n                computed,\n                shorthand: false\n            });\n\n            if (this.match('PUNCTUATION', ',')) {\n                // Handle trailing comma\n                if (this.check('PUNCTUATION', '}')) {\n                    break;\n                }\n            } else {\n                break;\n            }\n        }\n\n        this.consume('PUNCTUATION', '}');\n        return {\n            type: 'ObjectExpression',\n            properties\n        };\n    }\n\n    match(...args) {\n        for (let i = 0; i < args.length; i++) {\n            const arg = args[i];\n            if (i === 0 && args.length > 1) {\n                // First arg is type when multiple args provided\n                const type = arg;\n                for (let j = 1; j < args.length; j++) {\n                    if (this.check(type, args[j])) {\n                        this.advance();\n                        return true;\n                    }\n                }\n                return false;\n            } else if (args.length === 1) {\n                // Single arg is just type\n                if (this.checkType(arg)) {\n                    this.advance();\n                    return true;\n                }\n                return false;\n            }\n        }\n        return false;\n    }\n\n    check(type, value) {\n        if (this.isAtEnd()) return false;\n        if (value !== undefined) {\n            return this.current().type === type && this.current().value === value;\n        }\n        return this.current().type === type;\n    }\n\n    checkType(type) {\n        if (this.isAtEnd()) return false;\n        return this.current().type === type;\n    }\n\n    advance() {\n        if (!this.isAtEnd()) this.position++;\n        return this.previous();\n    }\n\n    isAtEnd() {\n        return this.current().type === 'EOF';\n    }\n\n    current() {\n        return this.tokens[this.position];\n    }\n\n    previous() {\n        return this.tokens[this.position - 1];\n    }\n\n    consume(type, value) {\n        if (value !== undefined) {\n            if (this.check(type, value)) return this.advance();\n            throw new Error(`Expected ${type} \"${value}\" but got ${this.current().type} \"${this.current().value}\"`);\n        }\n        if (this.check(type)) return this.advance();\n        throw new Error(`Expected ${type} but got ${this.current().type} \"${this.current().value}\"`);\n    }\n}\n\nclass Evaluator {\n    evaluate({ node, scope = {}, context = null, forceBindingRootScopeToFunctions = true }) {\n        switch (node.type) {\n            case 'Literal':\n                return node.value;\n\n            case 'Identifier':\n                if (node.name in scope) {\n                    const value = scope[node.name];\n\n                    this.checkForDangerousValues(value)\n\n                    // If it's a function and we're accessing it directly (not calling it),\n                    // bind it to scope to preserve 'this' context for later calls\n                    if (typeof value === 'function') {\n                        return value.bind(scope);\n                    }\n\n                    return value;\n                }\n\n                throw new Error(`Undefined variable: ${node.name}`);\n\n            case 'MemberExpression':\n                const object = this.evaluate({ node: node.object, scope, context, forceBindingRootScopeToFunctions });\n                if (object == null) {\n                    throw new Error('Cannot read property of null or undefined');\n                }\n\n                let property;\n                if (node.computed) {\n                    property = this.evaluate({ node: node.property, scope, context, forceBindingRootScopeToFunctions });\n                } else {\n                    property = node.property.name;\n                }\n\n                this.checkForDangerousKeywords(property)\n\n                let memberValue = object[property];\n\n                this.checkForDangerousValues(memberValue)\n\n                // If the accessed value is a function, bind it based on forceBindingRootScopeToFunctions flag\n                if (typeof memberValue === 'function') {\n                    if (forceBindingRootScopeToFunctions) {\n                        return memberValue.bind(scope);\n                    } else {\n                        return memberValue.bind(object);\n                    }\n                }\n\n                return memberValue;\n\n            case 'CallExpression':\n                const args = node.arguments.map(arg => this.evaluate({ node: arg, scope, context, forceBindingRootScopeToFunctions }));\n\n                let returnValue;\n\n                if (node.callee.type === 'MemberExpression') {\n                    // For member expressions, get the object and function separately to preserve context\n                    const obj = this.evaluate({ node: node.callee.object, scope, context, forceBindingRootScopeToFunctions });\n                    \n                    let prop;\n                    if (node.callee.computed) {\n                        prop = this.evaluate({ node: node.callee.property, scope, context, forceBindingRootScopeToFunctions });\n                    } else {\n                        prop = node.callee.property.name\n                    }\n\n                    this.checkForDangerousKeywords(prop)\n\n                    let func = obj[prop];\n                    if (typeof func !== 'function') {\n                        throw new Error('Value is not a function');\n                    }\n\n                    // For member expressions, always use the object as the 'this' context\n                    returnValue = func.apply(obj, args);\n                } else {\n                    // For direct function calls (identifiers), get the original function and apply context\n                    if (node.callee.type === 'Identifier') {\n                        const name = node.callee.name;\n\n                        let func;\n                        if (name in scope) {\n                            func = scope[name];\n                        } else {\n                            throw new Error(`Undefined variable: ${name}`);\n                        }\n\n                        if (typeof func !== 'function') {\n                            throw new Error('Value is not a function');\n                        }\n\n                        // For direct calls, use provided context or the scope\n                        const thisContext = context !== null ? context : scope;\n                        returnValue = func.apply(thisContext, args);\n                    } else {\n                        // For other expressions\n                        const callee = this.evaluate({ node: node.callee, scope, context, forceBindingRootScopeToFunctions });\n                        if (typeof callee !== 'function') {\n                            throw new Error('Value is not a function');\n                        }\n\n                        // For other expressions, use provided context\n                        returnValue = callee.apply(context, args);\n                    }\n                }\n\n                this.checkForDangerousValues(returnValue)\n                \n                return returnValue\n\n            case 'UnaryExpression':\n                const argument = this.evaluate({ node: node.argument, scope, context, forceBindingRootScopeToFunctions });\n                switch (node.operator) {\n                    case '!': return !argument;\n                    case '-': return -argument;\n                    case '+': return +argument;\n                    default:\n                        throw new Error(`Unknown unary operator: ${node.operator}`);\n                }\n\n            case 'UpdateExpression':\n                if (node.argument.type === 'Identifier') {\n                    const name = node.argument.name;\n                    if (!(name in scope)) {\n                        throw new Error(`Undefined variable: ${name}`);\n                    }\n\n                    const oldValue = scope[name];\n                    if (node.operator === '++') {\n                        scope[name] = oldValue + 1;\n                    } else if (node.operator === '--') {\n                        scope[name] = oldValue - 1;\n                    }\n\n                    return node.prefix ? scope[name] : oldValue;\n                } else if (node.argument.type === 'MemberExpression') {\n                    const obj = this.evaluate({ node: node.argument.object, scope, context, forceBindingRootScopeToFunctions });\n                    const prop = node.argument.computed\n                        ? this.evaluate({ node: node.argument.property, scope, context, forceBindingRootScopeToFunctions })\n                        : node.argument.property.name;\n\n                    const oldValue = obj[prop];\n                    if (node.operator === '++') {\n                        obj[prop] = oldValue + 1;\n                    } else if (node.operator === '--') {\n                        obj[prop] = oldValue - 1;\n                    }\n\n                    return node.prefix ? obj[prop] : oldValue;\n                }\n                throw new Error('Invalid update expression target');\n\n            case 'BinaryExpression':\n                const left = this.evaluate({ node: node.left, scope, context, forceBindingRootScopeToFunctions });\n                const right = this.evaluate({ node: node.right, scope, context, forceBindingRootScopeToFunctions });\n\n                switch (node.operator) {\n                    case '+': return left + right;\n                    case '-': return left - right;\n                    case '*': return left * right;\n                    case '/': return left / right;\n                    case '%': return left % right;\n                    case '==': return left == right;\n                    case '!=': return left != right;\n                    case '===': return left === right;\n                    case '!==': return left !== right;\n                    case '<': return left < right;\n                    case '>': return left > right;\n                    case '<=': return left <= right;\n                    case '>=': return left >= right;\n                    case '&&': return left && right;\n                    case '||': return left || right;\n                    default:\n                        throw new Error(`Unknown binary operator: ${node.operator}`);\n                }\n\n            case 'ConditionalExpression':\n                const test = this.evaluate({ node: node.test, scope, context, forceBindingRootScopeToFunctions });\n                return test\n                    ? this.evaluate({ node: node.consequent, scope, context, forceBindingRootScopeToFunctions })\n                    : this.evaluate({ node: node.alternate, scope, context, forceBindingRootScopeToFunctions });\n\n            case 'AssignmentExpression':\n                const value = this.evaluate({ node: node.right, scope, context, forceBindingRootScopeToFunctions });\n\n                if (node.left.type === 'Identifier') {\n                    scope[node.left.name] = value;\n                    return value;\n                } else if (node.left.type === 'MemberExpression') {\n                    throw new Error('Property assignments are prohibited in the CSP build')\n                }\n                throw new Error('Invalid assignment target');\n\n            case 'ArrayExpression':\n                return node.elements.map(el => this.evaluate({ node: el, scope, context, forceBindingRootScopeToFunctions }));\n\n            case 'ObjectExpression':\n                const result = {};\n                for (const prop of node.properties) {\n                    const key = prop.computed\n                        ? this.evaluate({ node: prop.key, scope, context, forceBindingRootScopeToFunctions })\n                        : prop.key.type === 'Identifier'\n                            ? prop.key.name\n                            : this.evaluate({ node: prop.key, scope, context, forceBindingRootScopeToFunctions });\n                    const value = this.evaluate({ node: prop.value, scope, context, forceBindingRootScopeToFunctions });\n                    result[key] = value;\n                }\n                return result;\n\n            default:\n                throw new Error(`Unknown node type: ${node.type}`);\n        }\n    }\n\n    checkForDangerousKeywords(keyword) {\n        let blacklist = [\n            'constructor', 'prototype', '__proto__',\n            '__defineGetter__', '__defineSetter__',\n            'insertAdjacentHTML',\n        ]\n        \n        if (blacklist.includes(keyword)) {\n            throw new Error(`Accessing \"${keyword}\" is prohibited in the CSP build`)\n        }\n    }\n\n    checkForDangerousValues(prop) {\n        if (prop === null) {\n            return\n        }\n        \n        if (typeof prop !== 'object' && typeof prop !== 'function') {\n            return\n        }\n\n        if (safemap.has(prop)) {\n            return\n        }\n        \n        if (prop instanceof HTMLIFrameElement || prop instanceof HTMLScriptElement) {\n            throw new Error('Accessing iframes and scripts is prohibited in the CSP build')\n        }\n\n        if (globals.has(prop)) {\n            throw new Error('Accessing global variables is prohibited in the CSP build')\n        }\n\n        safemap.set(prop, true)\n\n        return true\n    }\n}\n\nexport function generateRuntimeFunction(expression) {\n    try {\n        const tokenizer = new Tokenizer(expression);\n        const tokens = tokenizer.tokenize();\n        const parser = new Parser(tokens);\n        const ast = parser.parse();\n        const evaluator = new Evaluator();\n\n        return function(options = {}) {\n            const { scope = {}, context = null, forceBindingRootScopeToFunctions = false } = options;\n            // Use the scope directly - mutations are expected for assignments\n            return evaluator.evaluate({ node: ast, scope, context, forceBindingRootScopeToFunctions });\n        };\n    } catch (error) {\n        throw new Error(`CSP Parser Error: ${error.message}`);\n    }\n}\n\n// Also export the individual components for testing\nexport { Tokenizer, Parser, Evaluator };"
  },
  {
    "path": "packages/docs/package.json",
    "content": "{\n    \"name\": \"@alpinejs/docs\",\n    \"version\": \"3.15.8\",\n    \"description\": \"The documentation for Alpine\",\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "packages/docs/src/en/advanced/async.md",
    "content": "---\norder: 4\ntitle: Async\n---\n\n# Async\n\nAlpine is built to support asynchronous functions in most places it supports standard ones.\n\nFor example, let's say you have a simple function called `getLabel()` that you use as the input to an `x-text` directive:\n\n```js\nfunction getLabel() {\n    return 'Hello World!'\n}\n```\n```alpine\n<span x-text=\"getLabel()\"></span>\n```\n\nBecause `getLabel` is synchronous, everything works as expected.\n\nNow let's pretend that `getLabel` makes a network request to retrieve the label and can't return one instantaneously (asynchronous). By making `getLabel` an async function, you can call it from Alpine using JavaScript's `await` syntax.\n\n```js\nasync function getLabel() {\n    let response = await fetch('/api/label')\n\n    return await response.text()\n}\n```\n```alpine\n<span x-text=\"await getLabel()\"></span>\n```\n\nAdditionally, if you prefer calling methods in Alpine without the trailing parenthesis, you can leave them out and Alpine will detect that the provided function is async and handle it accordingly. For example:\n\n```alpine\n<span x-text=\"getLabel\"></span>\n```\n"
  },
  {
    "path": "packages/docs/src/en/advanced/csp.md",
    "content": "---\norder: 1\ntitle: CSP\n---\n\n# CSP (Content-Security Policy) Build\n\nIn order for Alpine to execute JavaScript expressions from HTML attributes like `x-on:click=\"console.log()\"`, it needs to use utilities that violate the \"unsafe-eval\" [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) that some applications enforce for security purposes.\n\n> Under the hood, Alpine doesn't actually use eval() itself because it's slow and problematic. Instead it uses Function declarations, which are much better, but still violate \"unsafe-eval\".\n\nAlpine offers an alternate build that doesn't violate \"unsafe-eval\" and supports most of Alpine's inline expression syntax.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this build by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include this build's CDN as a `<script>` tag just like you would normally with standard Alpine build:\n\n```alpine\n<!-- Alpine's CSP-friendly Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/csp@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can alternatively install this build from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/csp\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from '@alpinejs/csp'\n\nwindow.Alpine = Alpine\n\nAlpine.start()\n```\n\n<a name=\"basic-example\"></a>\n## Basic Example\n\nHere's a working counter component using Alpine's CSP build. Notice how most expressions work exactly like regular Alpine:\n\n```alpine\n<html>\n    <head>\n        <meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'; script-src 'nonce-a23gbfz9e'\">\n        <script defer nonce=\"a23gbfz9e\" src=\"https://cdn.jsdelivr.net/npm/@alpinejs/csp@3.x.x/dist/cdn.min.js\"></script>\n    </head>\n    <body>\n        <div x-data=\"{ count: 0, message: 'Hello' }\">\n            <button x-on:click=\"count++\">Increment</button>\n            <button x-on:click=\"count = 0\">Reset</button>\n\n            <span x-text=\"count\"></span>\n            <span x-text=\"message + ' World'\"></span>\n            <span x-show=\"count > 5\">Count is greater than 5!</span>\n        </div>\n    </body>\n</html>\n```\n\n<a name=\"whats-supported\"></a>\n## What's Supported\n\nThe CSP build supports most JavaScript expressions you'd want to use in Alpine:\n\n### Object and Array Literals\n```alpine\n<!-- ✅ These work -->\n<div x-data=\"{ user: { name: 'John', age: 30 }, items: [1, 2, 3] }\">\n    <span x-text=\"user.name\"></span>\n    <span x-text=\"items[0]\"></span>\n</div>\n```\n\n### Basic Operations\n```alpine\n<!-- ✅ These work -->\n<div x-data=\"{ count: 5, name: 'Alpine' }\">\n    <span x-text=\"count + 10\"></span>\n    <span x-text=\"count > 3\"></span>\n    <span x-text=\"count === 5 ? 'Yes' : 'No'\"></span>\n    <span x-text=\"'Hello ' + name\"></span>\n    <div x-show=\"!loading && count > 0\"></div>\n</div>\n```\n\n### Assignments and Updates\n```alpine\n<!-- ✅ These work -->\n<div x-data=\"{ count: 0, user: { name: '' } }\">\n    <button x-on:click=\"count++\">Increment</button>\n    <button x-on:click=\"count = 0\">Reset</button>\n    <input x-model=\"user.name\">\n</div>\n```\n\n### Method Calls\n```alpine\n<!-- ✅ These work -->\n<div x-data=\"{ items: ['a', 'b'] }\">\n    <button x-on:click=\"items.push('c')\">Add Item</button>\n</div>\n```\n\n<a name=\"whats-not-supported\"></a>\n## What's Not Supported\n\nSome advanced and potentially dangerous JavaScript features aren't supported:\n\n### Complex Expressions\n```alpine\n<!-- ❌ These don't work -->\n<div x-data=\"{ user: { name: '' } }\">\n    <!-- Property assignments -->\n    <button x-on:click=\"user.name = 'John'\">Bad</button>\n\n    <!-- Arrow functions -->\n    <button x-on:click=\"() => console.log('hi')\">Bad</button>\n\n    <!-- Destructuring -->\n    <div x-text=\"{ name } = user\">Bad</div>\n\n    <!-- Template literals -->\n    <div x-text=\"`Hello ${name}`\">Bad</div>\n\n    <!-- Spread operator -->\n    <div x-data=\"{ ...defaults }\">Bad</div>\n</div>\n```\n\n### Global Variables and Functions\n```alpine\n<!-- ❌ These don't work -->\n<div x-data>\n    <button x-on:click=\"console.log('hi')\"></button>\n    <span x-text=\"document.title\"></span>\n    <span x-text=\"window.innerWidth\"></span>\n    <span x-text=\"Math.max(count, 100)\"></span>\n    <span x-text=\"parseInt('123') + count\"></span>\n    <span x-text=\"JSON.stringify({ value: count })\"></span>\n</div>\n```\n\n### HTML Injection\n```alpine\n<!-- ❌ These don't work -->\n<div x-data=\"{ message: 'Hello <span>World</span>' }\">\n    <span x-html=\"message\"></span>\n    <span x-init=\"$el.insertAdjacentHTML('beforeend', message)\"></span>\n</div>\n```\n\n<a name=\"when-to-extract-logic\"></a>\n## When to Extract Logic\n\nWhile the CSP build supports simple inline expressions, you'll want to extract complex logic into dedicated functions or Alpine.data() components for better organization:\n\n```alpine\n<!-- Instead of this -->\n<div x-data=\"{ users: [] }\" x-show=\"users.filter(u => u.active && u.role === 'admin').length > 0\">\n```\n\n```alpine\n<!-- Do this -->\n<div x-data=\"userManager\" x-show=\"hasActiveAdmins\">\n\n<script nonce=\"...\">\n    Alpine.data('userManager', () => ({\n        users: [],\n\n        get hasActiveAdmins() {\n            return this.users.filter(u => u.active && u.role === 'admin').length > 0\n        }\n    }))\n</script>\n```\n\nThis approach makes your code more readable, testable, and maintainable, especially for complex applications.\n\n<a name=\"csp-headers\"></a>\n## CSP Headers\n\nHere's an example CSP header that works with Alpine's CSP build:\n\n```\nContent-Security-Policy: default-src 'self'; script-src 'nonce-[random]' 'strict-dynamic';\n```\n\nThe key is removing `'unsafe-eval'` from your `script-src` directive while still allowing your nonce-based scripts to run."
  },
  {
    "path": "packages/docs/src/en/advanced/extending.md",
    "content": "---\norder: 3\ntitle: Extending\n---\n\n# Extending\n\nAlpine has a very open codebase that allows for extension in a number of ways. In fact, every available directive and magic in Alpine itself uses these exact APIs. In theory you could rebuild all of Alpine's functionality using them yourself.\n\n<a name=\"lifecycle-concerns\"></a>\n## Lifecycle concerns\nBefore we dive into each individual API, let's first talk about where in your codebase you should consume these APIs.\n\nBecause these APIs have an impact on how Alpine initializes the page, they must be registered AFTER Alpine is downloaded and available on the page, but BEFORE it has initialized the page itself.\n\nThere are two different techniques depending on if you are importing Alpine into a bundle, or including it directly via a `<script>` tag. Let's look at them both:\n\n<a name=\"via-script-tag\"></a>\n### Via a script tag\n\nIf you are including Alpine via a script tag, you will need to register any custom extension code inside an `alpine:init` event listener.\n\nHere's an example:\n\n```alpine\n<html>\n    <script src=\"/js/alpine.js\" defer></script>\n\n    <div x-data x-foo></div>\n\n    <script>\n        document.addEventListener('alpine:init', () => {\n            Alpine.directive('foo', ...)\n        })\n    </script>\n</html>\n```\n\nIf you want to extract your extension code into an external file, you will need to make sure that file's `<script>` tag is located BEFORE Alpine's like so:\n\n```alpine\n<html>\n    <script src=\"/js/foo.js\" defer></script>\n    <script src=\"/js/alpine.js\" defer></script>\n\n    <div x-data x-foo></div>\n</html>\n```\n\n<a name=\"via-npm\"></a>\n### Via an NPM module\n\nIf you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the `Alpine` global object, and when you initialize Alpine by calling `Alpine.start()`. For example:\n\n```js\nimport Alpine from 'alpinejs'\n\nAlpine.directive('foo', ...)\n\nwindow.Alpine = Alpine\nwindow.Alpine.start()\n```\n\nNow that we know where to use these extension APIs, let's look more closely at how to use each one:\n\n<a name=\"custom-directives\"></a>\n## Custom directives\n\nAlpine allows you to register your own custom directives using the `Alpine.directive()` API.\n\n<a name=\"method-signature\"></a>\n### Method Signature\n\n```js\nAlpine.directive('[name]', (el, { value, modifiers, expression }, { Alpine, effect, cleanup }) => {})\n```\n\n&nbsp; | &nbsp;\n---|---\nname | The name of the directive. The name \"foo\" for example would be consumed as `x-foo`\nel | The DOM element the directive is added to\nvalue | If provided, the part of the directive after a colon. Ex: `'bar'` in `x-foo:bar`\nmodifiers | An array of dot-separated trailing additions to the directive. Ex: `['baz', 'lob']` from `x-foo.baz.lob`\nexpression | The attribute value portion of the directive. Ex: `law` from `x-foo=\"law\"`\nAlpine | The Alpine global object\neffect | A function to create reactive effects that will auto-cleanup after this directive is removed from the DOM\ncleanup | A function you can pass bespoke callbacks to that will run when this directive is removed from the DOM\n\n<a name=\"simple-example\"></a>\n### Simple Example\n\nHere's an example of a simple directive we're going to create called: `x-uppercase`:\n\n```js\nAlpine.directive('uppercase', el => {\n    el.textContent = el.textContent.toUpperCase()\n})\n```\n```alpine\n<div x-data>\n    <span x-uppercase>Hello World!</span>\n</div>\n```\n\n<a name=\"evaluating-expressions\"></a>\n### Evaluating expressions\n\nWhen registering a custom directive, you may want to evaluate a user-supplied JavaScript expression:\n\nFor example, let's say you wanted to create a custom directive as a shortcut to `console.log()`. Something like:\n\n```alpine\n<div x-data=\"{ message: 'Hello World!' }\">\n    <div x-log=\"message\"></div>\n</div>\n```\n\nYou need to retrieve the actual value of `message` by evaluating it as a JavaScript expression with the `x-data` scope.\n\nFortunately, Alpine exposes its system for evaluating JavaScript expressions with an `evaluate()` API. Here's an example:\n\n```js\nAlpine.directive('log', (el, { expression }, { evaluate }) => {\n    // expression === 'message'\n\n    console.log(\n        evaluate(expression)\n    )\n})\n```\n\nNow, when Alpine initializes the `<div x-log...>`, it will retrieve the expression passed into the directive (\"message\" in this case), and evaluate it in the context of the current element's Alpine component scope.\n\n<a name=\"introducing-reactivity\"></a>\n### Introducing reactivity\n\nBuilding on the `x-log` example from before, let's say we wanted `x-log` to log the value of `message` and also log it if the value changes.\n\nGiven the following template:\n\n```alpine\n<div x-data=\"{ message: 'Hello World!' }\">\n    <div x-log=\"message\"></div>\n\n    <button @click=\"message = 'yolo'\">Change</button>\n</div>\n```\n\nWe want \"Hello World!\" to be logged initially, then we want \"yolo\" to be logged after pressing the `<button>`.\n\nWe can adjust the implementation of `x-log` and introduce two new APIs to achieve this: `evaluateLater()` and `effect()`:\n\n```js\nAlpine.directive('log', (el, { expression }, { evaluateLater, effect }) => {\n    let getThingToLog = evaluateLater(expression)\n\n    effect(() => {\n        getThingToLog(thingToLog => {\n            console.log(thingToLog)\n        })\n    })\n})\n```\n\nLet's walk through the above code, line by line.\n\n```js\nlet getThingToLog = evaluateLater(expression)\n```\n\nHere, instead of immediately evaluating `message` and retrieving the result, we will convert the string expression (\"message\") into an actual JavaScript function that we can run at any time. If you're going to evaluate a JavaScript expression more than once, it is highly recommended to first generate a JavaScript function and use that rather than calling `evaluate()` directly. The reason being that the process to interpret a plain string as a JavaScript function is expensive and should be avoided when unnecessary.\n\n```js\neffect(() => {\n    ...\n})\n```\n\nBy passing in a callback to `effect()`, we are telling Alpine to run the callback immediately, then track any dependencies it uses (`x-data` properties like `message` in our case). Now as soon as one of the dependencies changes, this callback will be re-run. This gives us our \"reactivity\".\n\nYou may recognize this functionality from `x-effect`. It is the same mechanism under the hood.\n\nYou may also notice that `Alpine.effect()` exists and wonder why we're not using it here. The reason is that the `effect` function provided via the method parameter has special functionality that cleans itself up when the directive is removed from the page for any reason.\n\nFor example, if for some reason the element with `x-log` on it got removed from the page, by using `effect()` instead of `Alpine.effect()` when the `message` property is changed, the value will no longer be logged to the console.\n\n[→ Read more about reactivity in Alpine](/advanced/reactivity)\n\n```js\ngetThingToLog(thingToLog => {\n    console.log(thingToLog)\n})\n```\n\nNow we will call `getThingToLog`, which if you recall is the actual JavaScript function version of the string expression: \"message\".\n\nYou might expect `getThingToCall()` to return the result right away, but instead Alpine requires you to pass in a callback to receive the result.\n\nThe reason for this is to support async expressions like `await getMessage()`. By passing in a \"receiver\" callback instead of getting the result immediately, you are allowing your directive to work with async expressions as well.\n\n[→ Read more about async in Alpine](/advanced/async)\n\n<a name=\"cleaning-up\"></a>\n### Cleaning Up\n\nLet's say you needed to register an event listener from a custom directive. After that directive is removed from the page for any reason, you would want to remove the event listener as well.\n\nAlpine makes this simple by providing you with a `cleanup` function when registering custom directives.\n\nHere's an example:\n\n```js\nAlpine.directive('...', (el, {}, { cleanup }) => {\n    let handler = () => {}\n\n    window.addEventListener('click', handler)\n\n    cleanup(() => {\n        window.removeEventListener('click', handler)\n    })\n\n})\n```\n\nNow if the directive is removed from this element or the element is removed itself, the event listener will be removed as well.\n\n<a name=\"custom-order\"></a>\n### Custom order\n\nBy default, any new directive will run after the majority of the standard ones (with the exception of `x-teleport`). This is usually acceptable but some times you might need to run your custom directive before another specific one.\nThis can be achieved by chaining the `.before() function to `Alpine.directive()` and specifying which directive needs to run after your custom one.\n\n```js\nAlpine.directive('foo', (el, { value, modifiers, expression }) => {\n    Alpine.addScopeToNode(el, {foo: 'bar'})\n}).before('bind')\n```\n```alpine\n<div x-data>\n    <span x-foo x-bind:foo=\"foo\"></span>\n</div>\n```\n> Note, the directive name must be written without the `x-` prefix (or any other custom prefix you may use).\n\n<a name=\"custom-magics\"></a>\n## Custom magics\n\nAlpine allows you to register custom \"magics\" (properties or methods) using `Alpine.magic()`. Any magic you register will be available to all your application's Alpine code with the `$` prefix.\n\n<a name=\"method-signature\"></a>\n### Method Signature\n\n```js\nAlpine.magic('[name]', (el, { Alpine }) => {})\n```\n\n&nbsp; | &nbsp;\n---|---\nname | The name of the magic. The name \"foo\" for example would be consumed as `$foo`\nel | The DOM element the magic was triggered from\nAlpine | The Alpine global object\n\n<a name=\"magic-properties\"></a>\n### Magic Properties\n\nHere's a basic example of a \"$now\" magic helper to easily get the current time from anywhere in Alpine:\n\n```js\nAlpine.magic('now', () => {\n    return (new Date).toLocaleTimeString()\n})\n```\n```alpine\n<span x-text=\"$now\"></span>\n```\n\nNow the `<span>` tag will contain the current time, resembling something like \"12:00:00 PM\".\n\nAs you can see `$now` behaves like a static property, but under the hood is actually a getter that evaluates every time the property is accessed.\n\nBecause of this, you can implement magic \"functions\" by returning a function from the getter.\n\n<a name=\"magic-functions\"></a>\n### Magic Functions\n\nFor example, if we wanted to create a `$clipboard()` magic function that accepts a string to copy to clipboard, we could implement it like so:\n\n```js\nAlpine.magic('clipboard', () => {\n    return subject => navigator.clipboard.writeText(subject)\n})\n```\n```alpine\n<button @click=\"$clipboard('hello world')\">Copy \"Hello World\"</button>\n```\n\nNow that accessing `$clipboard` returns a function itself, we can immediately call it and pass it an argument like we see in the template with `$clipboard('hello world')`.\n\nYou can use the more brief syntax (a double arrow function) for returning a function from a function if you'd prefer:\n\n```js\nAlpine.magic('clipboard', () => subject => {\n    navigator.clipboard.writeText(subject)\n})\n```\n\n<a name=\"writing-and-sharing-plugins\"></a>\n## Writing and sharing plugins\n\nBy now you should see how friendly and simple it is to register your own custom directives and magics in your application, but what about sharing that functionality with others via an NPM package or something?\n\nYou can get started quickly with Alpine's official \"plugin-blueprint\" package. It's as simple as cloning the repository and running `npm install && npm run build` to get a plugin authored.\n\nFor demonstration purposes, let's create a pretend Alpine plugin from scratch called `Foo` that includes both a directive (`x-foo`) and a magic (`$foo`).\n\nWe'll start producing this plugin for consumption as a simple `<script>` tag alongside Alpine, then we'll level it up to a module for importing into a bundle:\n\n<a name=\"script-include\"></a>\n### Script include\n\nLet's start in reverse by looking at how our plugin will be included into a project:\n\n```alpine\n<html>\n    <script src=\"/js/foo.js\" defer></script>\n    <script src=\"/js/alpine.js\" defer></script>\n\n    <div x-data x-init=\"$foo()\">\n        <span x-foo=\"'hello world'\">\n    </div>\n</html>\n```\n\nNotice how our script is included BEFORE Alpine itself. This is important, otherwise, Alpine would have already been initialized by the time our plugin got loaded.\n\nNow let's look inside of `/js/foo.js`'s contents:\n\n```js\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.directive('foo', ...)\n\n    window.Alpine.magic('foo', ...)\n})\n```\n\nThat's it! Authoring a plugin for inclusion via a script tag is extremely simple with Alpine.\n\n<a name=\"bundle-module\"></a>\n### Bundle module\n\nNow let's say you wanted to author a plugin that someone could install via NPM and include into their bundle.\n\nLike the last example, we'll walk through this in reverse, starting with what it will look like to consume this plugin:\n\n```js\nimport Alpine from 'alpinejs'\n\nimport foo from 'foo'\nAlpine.plugin(foo)\n\nwindow.Alpine = Alpine\nwindow.Alpine.start()\n```\n\nYou'll notice a new API here: `Alpine.plugin()`. This is a convenience method Alpine exposes to prevent consumers of your plugin from having to register multiple different directives and magics themselves.\n\nNow let's look at the source of the plugin and what gets exported from `foo`:\n\n```js\nexport default function (Alpine) {\n    Alpine.directive('foo', ...)\n    Alpine.magic('foo', ...)\n}\n```\n\nYou'll see that `Alpine.plugin` is incredibly simple. It accepts a callback and immediately invokes it while providing the `Alpine` global as a parameter for use inside of it.\n\nThen you can go about extending Alpine as you please.\n"
  },
  {
    "path": "packages/docs/src/en/advanced/reactivity.md",
    "content": "---\norder: 2\ntitle: Reactivity\n---\n\n# Reactivity\n\nAlpine is \"reactive\" in the sense that when you change a piece of data, everything that depends on that data \"reacts\" automatically to that change.\n\nEvery bit of reactivity that takes place in Alpine, happens because of two very important reactive functions in Alpine's core: `Alpine.reactive()`, and `Alpine.effect()`.\n\n> Alpine uses VueJS's reactivity engine under the hood to provide these functions.\n> [→ Read more about @vue/reactivity](https://github.com/vuejs/vue-next/tree/master/packages/reactivity)\n\nUnderstanding these two functions will give you super powers as an Alpine developer, but also just as a web developer in general.\n\n<a name=\"alpine-reactive\"></a>\n## Alpine.reactive()\n\nLet's first look at `Alpine.reactive()`. This function accepts a JavaScript object as its parameter and returns a \"reactive\" version of that object. For example:\n\n```js\nlet data = { count: 1 }\n\nlet reactiveData = Alpine.reactive(data)\n```\n\nUnder the hood, when `Alpine.reactive` receives `data`, it wraps it inside a custom JavaScript proxy.\n\nA proxy is a special kind of object in JavaScript that can intercept \"get\" and \"set\" calls to a JavaScript object.\n\n[→ Read more about JavaScript proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\n\nAt face value, `reactiveData` should behave exactly like `data`. For example:\n\n```js\nconsole.log(data.count) // 1\nconsole.log(reactiveData.count) // 1\n\nreactiveData.count = 2\n\nconsole.log(data.count) // 2\nconsole.log(reactiveData.count) // 2\n```\n\nWhat you see here is that because `reactiveData` is a thin wrapper around `data`, any attempts to get or set a property will behave exactly as if you had interacted with `data` directly.\n\nThe main difference here is that any time you modify or retrieve (get or set) a value from `reactiveData`, Alpine is aware of it and can execute any other logic that depends on this data.\n\n`Alpine.reactive` is only the first half of the story. `Alpine.effect` is the other half, let's dig in.\n\n<a name=\"alpine-effect\"></a><a name=\"alpine-effect\"></a>\n## Alpine.effect()\n\n`Alpine.effect` accepts a single callback function. As soon as `Alpine.effect` is called, it will run the provided function, but actively look for any interactions with reactive data. If it detects an interaction (a get or set from the aforementioned reactive proxy) it will keep track of it and make sure to re-run the callback if any of reactive data changes in the future. For example:\n\n```js\nlet data = Alpine.reactive({ count: 1 })\n\nAlpine.effect(() => {\n    console.log(data.count)\n})\n```\n\nWhen this code is first run, \"1\" will be logged to the console. Any time `data.count` changes, it's value will be logged to the console again.\n\nThis is the mechanism that unlocks all of the reactivity at the core of Alpine.\n\nTo connect the dots further, let's look at a simple \"counter\" component example without using Alpine syntax at all, only using `Alpine.reactive` and `Alpine.effect`:\n\n```alpine\n<button>Increment</button>\n\nCount: <span></span>\n```\n```js\nlet button = document.querySelector('button')\nlet span = document.querySelector('span')\n\nlet data = Alpine.reactive({ count: 1 })\n\nAlpine.effect(() => {\n    span.textContent = data.count\n})\n\nbutton.addEventListener('click', () => {\n    data.count = data.count + 1\n})\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ count: 1 }\" class=\"demo\">\n    <button @click=\"count++\">Increment</button>\n\n    <div>Count: <span x-text=\"count\"></span></div>\n</div>\n<!-- END_VERBATIM -->\n\nAs you can see, you can make any data reactive, and you can also wrap any functionality in `Alpine.effect`.\n\nThis combination unlocks an incredibly powerful programming paradigm for web development. Run wild and free.\n"
  },
  {
    "path": "packages/docs/src/en/advanced.md",
    "content": "---\norder: 8\ntitle: Advanced\ntype: sub-directory\n---\n"
  },
  {
    "path": "packages/docs/src/en/directives/bind.md",
    "content": "---\norder: 4\ntitle: bind\n---\n\n# x-bind\n\n`x-bind` allows you to set HTML attributes on elements based on the result of JavaScript expressions.\n\nFor example, here's a component where we will use `x-bind` to set the placeholder value of an input.\n\n```alpine\n<div x-data=\"{ placeholderText: 'Type here...' }\">\n    <input type=\"text\" x-bind:placeholder=\"placeholderText\">\n</div>\n```\n\n<a name=\"shorthand-syntax\"></a>\n## Shorthand syntax\n\nIf `x-bind:` is too verbose for your liking, you can use the shorthand: `:`. For example, here is the same input element as above, but refactored to use the shorthand syntax.\n\n```alpine\n<input type=\"text\" :placeholder=\"placeholderText\">\n```\n\n> Despite not being included in the above snippet, `x-bind` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n\n<a name=\"binding-classes\"></a>\n## Binding classes\n\n`x-bind` is most often useful for setting specific classes on an element based on your Alpine state.\n\nHere's a simple example of a simple dropdown toggle, but instead of using `x-show`, we'll use a \"hidden\" class to toggle an element.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-on:click=\"open = ! open\">Toggle Dropdown</button>\n\n    <div :class=\"open ? '' : 'hidden'\">\n        Dropdown Contents...\n    </div>\n</div>\n```\n\nNow, when `open` is `false`, the \"hidden\" class will be added to the dropdown.\n\n<a name=\"shorthand-conditionals\"></a>\n### Shorthand conditionals\n\nIn cases like these, if you prefer a less verbose syntax you can use JavaScript's short-circuit evaluation instead of standard conditionals:\n\n```alpine\n<div :class=\"show ? '' : 'hidden'\">\n<!-- Is equivalent to: -->\n<div :class=\"show || 'hidden'\">\n```\n\nThe inverse is also available to you. Suppose instead of `open`, we use a variable with the opposite value: `closed`.\n\n```alpine\n<div :class=\"closed ? 'hidden' : ''\">\n<!-- Is equivalent to: -->\n<div :class=\"closed && 'hidden'\">\n```\n\n<a name=\"class-object-syntax\"></a>\n### Class object syntax\n\nAlpine offers an additional syntax for toggling classes if you prefer. By passing a JavaScript object where the classes are the keys and booleans are the values, Alpine will know which classes to apply and which to remove. For example:\n\n```alpine\n<div :class=\"{ 'hidden': ! show }\">\n```\n\nThis technique offers a unique advantage to other methods. When using object-syntax, Alpine will NOT preserve original classes applied to an element's `class` attribute.\n\nFor example, if you wanted to apply the \"hidden\" class to an element before Alpine loads, AND use Alpine to toggle its existence you can only achieve that behavior using object-syntax:\n\n```alpine\n<div class=\"hidden\" :class=\"{ 'hidden': ! show }\">\n```\n\nIn case that confused you, let's dig deeper into how Alpine handles `x-bind:class` differently than other attributes.\n\n<a name=\"special-behavior\"></a>\n### Special behavior\n\n`x-bind:class` behaves differently than other attributes under the hood.\n\nConsider the following case.\n\n```alpine\n<div class=\"opacity-50\" :class=\"hide && 'hidden'\">\n```\n\nIf \"class\" were any other attribute, the `:class` binding would overwrite any existing class attribute, causing `opacity-50` to be overwritten by either `hidden` or `''`.\n\nHowever, Alpine treats `class` bindings differently. It's smart enough to preserve existing classes on an element.\n\nFor example, if `hide` is true, the above example will result in the following DOM element:\n\n```alpine\n<div class=\"opacity-50 hidden\">\n```\n\nIf `hide` is false, the DOM element will look like:\n\n```alpine\n<div class=\"opacity-50\">\n```\n\nThis behavior should be invisible and intuitive to most users, but it is worth mentioning explicitly for the inquiring developer or any special cases that might crop up.\n\n<a name=\"binding-styles\"></a>\n## Binding styles\n\nSimilar to the special syntax for binding classes with JavaScript objects, Alpine also offers an object-based syntax for binding `style` attributes.\n\nJust like the class objects, this syntax is entirely optional. Only use it if it affords you some advantage.\n\n```alpine\n<div :style=\"{ color: 'red', display: 'flex' }\">\n\n<!-- Will render: -->\n<div style=\"color: red; display: flex;\" ...>\n```\n\nConditional inline styling is possible using expressions just like with x-bind:class. Short circuit operators can be used here as well by using a styles object as the second operand.\n```alpine\n<div x-bind:style=\"true && { color: 'red' }\">\n\n<!-- Will render: -->\n<div style=\"color: red;\">\n```\n\nOne advantage of this approach is being able to mix it in with existing styles on an element:\n\n```alpine\n<div style=\"padding: 1rem;\" :style=\"{ color: 'red', display: 'flex' }\">\n\n<!-- Will render: -->\n<div style=\"padding: 1rem; color: red; display: flex;\" ...>\n```\n\nAnd like most expressions in Alpine, you can always use the result of a JavaScript expression as the reference:\n\n```alpine\n<div x-data=\"{ styles: { color: 'red', display: 'flex' }}\">\n    <div :style=\"styles\">\n</div>\n\n<!-- Will render: -->\n<div ...>\n    <div style=\"color: red; display: flex;\" ...>\n</div>\n```\n\n<a name=\"bind-directives\"></a>\n## Binding Alpine Directives Directly\n\n`x-bind` allows you to bind an object of different directives and attributes to an element.\n\nThe object keys can be anything you would normally write as an attribute name in Alpine. This includes Alpine directives and modifiers, but also plain HTML attributes. The object values are either plain strings, or in the case of dynamic Alpine directives, callbacks to be evaluated by Alpine.\n\n```alpine\n<div x-data=\"dropdown\">\n    <button x-bind=\"trigger\">Open Dropdown</button>\n\n    <span x-bind=\"dialogue\">Dropdown Contents</span>\n</div>\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.data('dropdown', () => ({\n            open: false,\n\n            trigger: {\n                ['x-ref']: 'trigger',\n                ['@click']() {\n                    this.open = true\n                },\n            },\n\n            dialogue: {\n                ['x-show']() {\n                    return this.open\n                },\n                ['@click.outside']() {\n                    this.open = false\n                },\n            },\n        }))\n    })\n</script>\n```\n\nThere are a couple of caveats to this usage of `x-bind`:\n\n> When the directive being \"bound\" or \"applied\" is `x-for`, you should return a normal expression string from the callback. For example: `['x-for']() { return 'item in items' }`\n"
  },
  {
    "path": "packages/docs/src/en/directives/cloak.md",
    "content": "---\norder: 12\ntitle: cloak\n---\n\n# x-cloak\n\nSometimes, when you're using AlpineJS for a part of your template, there is a \"blip\" where you might see your uninitialized template after the page loads, but before Alpine loads.\n\n`x-cloak` addresses this scenario by hiding the element it's attached to until Alpine is fully loaded on the page.\n\nFor `x-cloak` to work however, you must add the following CSS to the page.\n\n```css\n[x-cloak] { display: none !important; }\n```\n\nThe following example will hide the `<span>` tag until its `x-show` is specifically set to true, preventing any \"blip\" of the hidden element onto screen as Alpine loads.\n\n```alpine\n<span x-cloak x-show=\"false\">This will not 'blip' onto screen at any point</span>\n```\n\n`x-cloak` doesn't just work on elements hidden by `x-show` or `x-if`: it also ensures that elements containing data are hidden until the data is correctly set. The following example will hide the `<span>` tag until Alpine has set its text content to the `message` property.\n\n```alpine\n<span x-cloak x-text=\"message\"></span>\n```\n\nWhen Alpine loads on the page, it removes all `x-cloak` property from the element, which also removes the `display: none;` applied by CSS, therefore showing the element.\n\n## Alternative to global syntax\n\nIf you'd like to achieve this same behavior, but avoid having to include a global style, you can use the following cool, but admittedly odd trick:\n\n```alpine\n<template x-if=\"true\">\n    <span x-text=\"message\"></span>\n</template>\n```\n\nThis will achieve the same goal as `x-cloak` by just leveraging the way `x-if` works.\n\nBecause `<template>` elements are \"hidden\" in browsers by default, you won't see the `<span>` until Alpine has had a chance to render the `x-if=\"true\"` and show it.\n\nAgain, this solution is not for everyone, but it's worth mentioning for special cases.\n"
  },
  {
    "path": "packages/docs/src/en/directives/data.md",
    "content": "---\norder: 1\ntitle: data\n---\n\n# x-data\n\nEverything in Alpine starts with the `x-data` directive.\n\n`x-data` defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.\n\nHere's an example of a contrived dropdown component:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle Content</button>\n\n    <div x-show=\"open\">\n        Content...\n    </div>\n</div>\n```\n\nDon't worry about the other directives in this example (`@click` and `x-show`), we'll get to those in a bit. For now, let's focus on `x-data`.\n\n<a name=\"scope\"></a>\n## Scope\n\nProperties defined in an `x-data` directive are available to all element children. Even ones inside other, nested `x-data` components.\n\nFor example:\n\n```alpine\n<div x-data=\"{ foo: 'bar' }\">\n    <span x-text=\"foo\"><!-- Will output: \"bar\" --></span>\n\n    <div x-data=\"{ bar: 'baz' }\">\n        <span x-text=\"foo\"><!-- Will output: \"bar\" --></span>\n\n        <div x-data=\"{ foo: 'bob' }\">\n            <span x-text=\"foo\"><!-- Will output: \"bob\" --></span>\n        </div>\n    </div>\n</div>\n```\n\n<a name=\"methods\"></a>\n## Methods\n\nBecause `x-data` is evaluated as a normal JavaScript object, in addition to state, you can store methods and even getters.\n\nFor example, let's extract the \"Toggle Content\" behavior into a method on  `x-data`.\n\n```alpine\n<div x-data=\"{ open: false, toggle() { this.open = ! this.open } }\">\n    <button @click=\"toggle()\">Toggle Content</button>\n\n    <div x-show=\"open\">\n        Content...\n    </div>\n</div>\n```\n\nNotice the added `toggle() { this.open = ! this.open }` method on `x-data`. This method can now be called from anywhere inside the component.\n\nYou'll also notice the usage of `this.` to access state on the object itself. This is because Alpine evaluates this data object like any standard JavaScript object with a `this` context.\n\nIf you prefer, you can leave the calling parenthesis off of the `toggle` method completely. For example:\n\n```alpine\n<!-- Before -->\n<button @click=\"toggle()\">...</button>\n\n<!-- After -->\n<button @click=\"toggle\">...</button>\n```\n\n<a name=\"getters\"></a>\n## Getters\n\nJavaScript [getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) are handy when the sole purpose of a method is to return data based on other state.\n\nThink of them like \"computed properties\" (although, they are not cached like Vue's computed properties).\n\nLet's refactor our component to use a getter called `isOpen` instead of accessing `open` directly.\n\n```alpine\n<div x-data=\"{\n    open: false,\n    get isOpen() { return this.open },\n    toggle() { this.open = ! this.open },\n}\">\n    <button @click=\"toggle()\">Toggle Content</button>\n\n    <div x-show=\"isOpen\">\n        Content...\n    </div>\n</div>\n```\n\nNotice the \"Content\" now depends on the `isOpen` getter instead of the `open` property directly.\n\nIn this case there is no tangible benefit. But in some cases, getters are helpful for providing a more expressive syntax in your components.\n\n<a name=\"data-less-components\"></a>\n## Data-less components\n\nOccasionally, you want to create an Alpine component, but you don't need any data.\n\nIn these cases, you can always pass in an empty object.\n\n```alpine\n<div x-data=\"{}\">\n```\n\nHowever, if you wish, you can also eliminate the attribute value entirely if it looks better to you.\n\n```alpine\n<div x-data>\n```\n\n<a name=\"single-element-components\"></a>\n## Single-element components\n\nSometimes you may only have a single element inside your Alpine component, like the following:\n\n```alpine\n<div x-data=\"{ open: true }\">\n    <button @click=\"open = false\" x-show=\"open\">Hide Me</button>\n</div>\n```\n\nIn these cases, you can declare `x-data` directly on that single element:\n\n```alpine\n<button x-data=\"{ open: true }\" @click=\"open = false\" x-show=\"open\">\n    Hide Me\n</button>\n```\n\n<a name=\"re-usable-data\"></a>\n## Re-usable Data\n\nIf you find yourself duplicating the contents of `x-data`, or you find the inline syntax verbose, you can extract the `x-data` object out to a dedicated component using `Alpine.data`.\n\nHere's a quick example:\n\n```alpine\n<div x-data=\"dropdown\">\n    <button @click=\"toggle\">Toggle Content</button>\n\n    <div x-show=\"open\">\n        Content...\n    </div>\n</div>\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.data('dropdown', () => ({\n            open: false,\n\n            toggle() {\n                this.open = ! this.open\n            },\n        }))\n    })\n</script>\n```\n\n[→ Read more about `Alpine.data(...)`](/globals/alpine-data)\n"
  },
  {
    "path": "packages/docs/src/en/directives/effect.md",
    "content": "---\norder: 11\ntitle: effect\n---\n\n# x-effect\n\n`x-effect` is a useful directive for re-evaluating an expression when one of its dependencies change. You can think of it as a watcher where you don't have to specify what property to watch, it will watch all properties used within it.\n\nIf this definition is confusing for you, that's ok. It's better explained through an example:\n\n```alpine\n<div x-data=\"{ label: 'Hello' }\" x-effect=\"console.log(label)\">\n    <button @click=\"label += ' World!'\">Change Message</button>\n</div>\n```\n\nWhen this component is loaded, the `x-effect` expression will be run and \"Hello\" will be logged into the console.\n\nBecause Alpine knows about any property references contained within `x-effect`, when the button is clicked and `label` is changed, the effect will be re-triggered and \"Hello World!\" will be logged to the console.\n"
  },
  {
    "path": "packages/docs/src/en/directives/for.md",
    "content": "---\norder: 8\ntitle: for\n---\n\n# x-for\n\nAlpine's `x-for` directive allows you to create DOM elements by iterating through a list. Here's a simple example of using it to create a list of colors based on an array.\n\n```alpine\n<ul x-data=\"{ colors: ['Red', 'Orange', 'Yellow'] }\">\n    <template x-for=\"color in colors\">\n        <li x-text=\"color\"></li>\n    </template>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <ul x-data=\"{ colors: ['Red', 'Orange', 'Yellow'] }\">\n        <template x-for=\"color in colors\">\n            <li x-text=\"color\"></li>\n        </template>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\nYou may also pass objects to `x-for`.\n\n```alpine\n<ul x-data=\"{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }\">\n    <template x-for=\"(value, index) in car\">\n        <li>\n            <span x-text=\"index\"></span>: <span x-text=\"value\"></span>\n        </li>\n    </template>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <ul x-data=\"{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }\">\n        <template x-for=\"(value, index) in car\">\n            <li>\n                <span x-text=\"index\"></span>: <span x-text=\"value\"></span>\n            </li>\n        </template>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\nThere are two rules worth noting about `x-for`:\n\n> `x-for` MUST be declared on a `<template>` element.\n> That `<template>` element MUST contain only one root element\n\n<a name=\"keys\"></a>\n## Keys\n\nIt is important to specify unique keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.\n\n```alpine\n<ul x-data=\"{ colors: [\n    { id: 1, label: 'Red' },\n    { id: 2, label: 'Orange' },\n    { id: 3, label: 'Yellow' },\n]}\">\n    <template x-for=\"color in colors\" :key=\"color.id\">\n        <li x-text=\"color.label\"></li>\n    </template>\n</ul>\n```\n\nNow if the colors are added, removed, re-ordered, or their \"id\"s change, Alpine will preserve or destroy the iterated `<li>`elements accordingly.\n\n<a name=\"accessing-indexes\"></a>\n## Accessing indexes\n\nIf you need to access the index of each item in the iteration, you can do so using the `([item], [index]) in [items]` syntax like so:\n\n```alpine\n<ul x-data=\"{ colors: ['Red', 'Orange', 'Yellow'] }\">\n    <template x-for=\"(color, index) in colors\">\n        <li>\n            <span x-text=\"index + ': '\"></span>\n            <span x-text=\"color\"></span>\n        </li>\n    </template>\n</ul>\n```\n\nYou can also access the index inside a dynamic `:key` expression.\n\n```alpine\n<template x-for=\"(color, index) in colors\" :key=\"index\">\n```\n\n<a name=\"iterating-over-a-range\"></a>\n## Iterating over a range\n\nIf you need to simply loop `n` number of times, rather than iterate through an array, Alpine offers a short syntax.\n\n```alpine\n<ul>\n    <template x-for=\"i in 10\">\n        <li x-text=\"i\"></li>\n    </template>\n</ul>\n```\n\n`i` in this case can be named anything you like.\n\n> Despite not being included in the above snippet, `x-for` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n\n<a name=\"contents-of-a-template\"></a>\n## Contents of a `<template>`\n\nAs mentioned above, an `<template>` tag must contain only one root element.\n\nFor example, the following code will not work:\n\n```alpine\n<template x-for=\"color in colors\">\n    <span>The next color is </span><span x-text=\"color\">\n</template>\n```\n\nbut this code will work:\n```alpine\n<template x-for=\"color in colors\">\n    <p>\n        <span>The next color is </span><span x-text=\"color\">\n    </p>\n</template>\n```\n"
  },
  {
    "path": "packages/docs/src/en/directives/html.md",
    "content": "---\norder: 7\ntitle: html\n---\n\n# x-html\n\n`x-html` sets the \"innerHTML\" property of an element to the result of a given expression.\n\n> ⚠️ Only use on trusted content and never on user-provided content. ⚠️\n> Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.\n\nHere's a basic example of using `x-html` to display a user's username.\n\n```alpine\n<div x-data=\"{ username: '<strong>calebporzio</strong>' }\">\n    Username: <span x-html=\"username\"></span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ username: '<strong>calebporzio</strong>' }\">\n        Username: <span x-html=\"username\"></span>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNow the `<span>` tag's inner HTML will be set to \"<strong>calebporzio</strong>\".\n"
  },
  {
    "path": "packages/docs/src/en/directives/id.md",
    "content": "---\norder: 17\ntitle: id\n---\n\n# x-id\n\n`x-id` allows you to declare a new \"scope\" for any new IDs generated using `$id()`. It accepts an array of strings (ID names) and adds a suffix to each `$id('...')` generated within it that is unique to other IDs on the page.\n\n`x-id` is meant to be used in conjunction with the `$id(...)` magic.\n\n[Visit the $id documentation](/magics/id) for a better understanding of this feature.\n\nHere's a brief example of this directive in use:\n\n```alpine\n<div x-id=\"['text-input']\">\n    <label :for=\"$id('text-input')\">Username</label>\n    <!-- for=\"text-input-1\" -->\n\n    <input type=\"text\" :id=\"$id('text-input')\">\n    <!-- id=\"text-input-1\" -->\n</div>\n\n<div x-id=\"['text-input']\">\n    <label :for=\"$id('text-input')\">Username</label>\n    <!-- for=\"text-input-2\" -->\n\n    <input type=\"text\" :id=\"$id('text-input')\">\n    <!-- id=\"text-input-2\" -->\n</div>\n```\n\n> Despite not being included in the above snippet, `x-id` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n"
  },
  {
    "path": "packages/docs/src/en/directives/if.md",
    "content": "---\norder: 16\ntitle: if\n---\n\n# x-if\n\n`x-if` is used for toggling elements on the page, similarly to `x-show`, however it completely adds and removes the element it's applied to rather than just changing its CSS display property to \"none\".\n\nBecause of this difference in behavior, `x-if` should not be applied directly to the element, but instead to a `<template>` tag that encloses the element. This way, Alpine can keep a record of the element once it's removed from the page.\n\n```alpine\n<template x-if=\"open\">\n    <div>Contents...</div>\n</template>\n```\n\n> Despite not being included in the above snippet, `x-if` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n\n## Caveats\n\nUnlike `x-show`, `x-if`, does NOT support transitioning toggles with `x-transition`.\n\n`<template>` tags can only contain one root element.\n"
  },
  {
    "path": "packages/docs/src/en/directives/ignore.md",
    "content": "---\norder: 11\ntitle: ignore\n---\n\n# x-ignore\n\nBy default, Alpine will crawl and initialize the entire DOM tree of an element containing `x-init` or `x-data`.\n\nIf for some reason, you don't want Alpine to touch a specific section of your HTML, you can prevent it from doing so using `x-ignore`.\n\n```alpine\n<div x-data=\"{ label: 'From Alpine' }\">\n    <div x-ignore>\n        <span x-text=\"label\"></span>\n    </div>\n</div>\n```\n\nIn the above example, the `<span>` tag will not contain \"From Alpine\" because we told Alpine to ignore the contents of the `div` completely.\n"
  },
  {
    "path": "packages/docs/src/en/directives/init.md",
    "content": "---\norder: 2\ntitle: init\n---\n\n# x-init\n\nThe `x-init` directive allows you to hook into the initialization phase of any element in Alpine.\n\n```alpine\n<div x-init=\"console.log('I\\'m being initialized!')\"></div>\n```\n\nIn the above example, \"I\\'m being initialized!\" will be output in the console before it makes further DOM updates.\n\nConsider another example where `x-init` is used to fetch some JSON and store it in `x-data` before the component is processed.\n\n```alpine\n<div\n    x-data=\"{ posts: [] }\"\n    x-init=\"posts = await (await fetch('/posts')).json()\"\n>...</div>\n```\n\n<a name=\"next-tick\"></a>\n## $nextTick\n\nSometimes, you want to wait until after Alpine has completely finished rendering to execute some code.\n\nThis would be something like `useEffect(..., [])` in react, or `mount` in Vue.\n\nBy using Alpine's internal `$nextTick` magic, you can make this happen.\n\n```alpine\n<div x-init=\"$nextTick(() => { ... })\"></div>\n```\n\n<a name=\"standalone-x-init\"></a>\n## Standalone `x-init`\n\nYou can add `x-init` to any elements inside or outside an `x-data` HTML block. For example:\n\n```alpine\n<div x-data>\n    <span x-init=\"console.log('I can initialize')\"></span>\n</div>\n\n<span x-init=\"console.log('I can initialize too')\"></span>\n```\n\n<a name=\"auto-evaluate-init-method\"></a>\n## Auto-evaluate init() method\n\nIf the `x-data` object of a component contains an `init()` method, it will be called automatically. For example:\n\n```alpine\n<div x-data=\"{\n    init() {\n        console.log('I am called automatically')\n    }\n}\">\n    ...\n</div>\n```\n\nThis is also the case for components that were registered using the `Alpine.data()` syntax.\n\n```js\nAlpine.data('dropdown', () => ({\n    init() {\n        console.log('I will get evaluated when initializing each \"dropdown\" component.')\n    },\n}))\n```\n\nIf you have both an `x-data` object containing an `init()` method and an `x-init` directive, the `x-data` method will be called before the directive.\n\n```alpine\n<div\n    x-data=\"{\n        init() {\n            console.log('I am called first')\n        }\n    }\"\n    x-init=\"console.log('I am called second')\"\n    >\n    ...\n</div>\n```\n"
  },
  {
    "path": "packages/docs/src/en/directives/model.md",
    "content": "---\norder: 7\ntitle: model\n---\n\n# x-model\n\n`x-model` allows you to bind the value of an input element to Alpine data.\n\nHere's a simple example of using `x-model` to bind the value of a text field to a piece of data in Alpine.\n\n```alpine\n<div x-data=\"{ message: '' }\">\n    <input type=\"text\" x-model=\"message\">\n\n    <span x-text=\"message\"></span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ message: '' }\">\n        <input type=\"text\" x-model=\"message\" placeholder=\"Type message...\">\n\n        <div class=\"pt-4\" x-text=\"message\"></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n\nNow as the user types into the text field, the `message` will be reflected in the `<span>` tag.\n\n`x-model` is two-way bound, meaning it both \"sets\" and \"gets\". In addition to changing data, if the data itself changes, the element will reflect the change.\n\n\nWe can use the same example as above but this time, we'll add a button to change the value of the `message` property.\n\n```alpine\n<div x-data=\"{ message: '' }\">\n    <input type=\"text\" x-model=\"message\">\n\n    <button x-on:click=\"message = 'changed'\">Change Message</button>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ message: '' }\">\n        <input type=\"text\" x-model=\"message\" placeholder=\"Type message...\">\n\n        <button x-on:click=\"message = 'changed'\">Change Message</button>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNow when the `<button>` is clicked, the input element's value will instantly be updated to \"changed\".\n\n`x-model` works with the following input elements:\n\n* `<input type=\"text\">`\n* `<textarea>`\n* `<input type=\"checkbox\">`\n* `<input type=\"radio\">`\n* `<select>`\n* `<input type=\"range\">`\n\n<a name=\"text-inputs\"></a>\n## Text inputs\n\n```alpine\n<input type=\"text\" x-model=\"message\">\n\n<span x-text=\"message\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ message: '' }\">\n        <input type=\"text\" x-model=\"message\" placeholder=\"Type message\">\n\n        <div class=\"pt-4\" x-text=\"message\"></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n> Despite not being included in the above snippet, `x-model` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n\n<a name=\"textarea-inputs\"></a>\n## Textarea inputs\n\n```alpine\n<textarea x-model=\"message\"></textarea>\n\n<span x-text=\"message\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ message: '' }\">\n        <textarea x-model=\"message\" placeholder=\"Type message\"></textarea>\n\n        <div class=\"pt-4\" x-text=\"message\"></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"checkbox-inputs\"></a>\n## Checkbox inputs\n\n<a name=\"single-checkbox-with-boolean\"></a>\n### Single checkbox with boolean\n\n```alpine\n<input type=\"checkbox\" id=\"checkbox\" x-model=\"show\">\n\n<label for=\"checkbox\" x-text=\"show\"></label>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ open: '' }\">\n        <input type=\"checkbox\" id=\"checkbox\" x-model=\"open\">\n\n        <label for=\"checkbox\" x-text=\"open\"></label>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"multiple-checkboxes-bound-to-array\"></a>\n### Multiple checkboxes bound to array\n\n```alpine\n<input type=\"checkbox\" value=\"red\" x-model=\"colors\">\n<input type=\"checkbox\" value=\"orange\" x-model=\"colors\">\n<input type=\"checkbox\" value=\"yellow\" x-model=\"colors\">\n\nColors: <span x-text=\"colors\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ colors: [] }\">\n        <input type=\"checkbox\" value=\"red\" x-model=\"colors\">\n        <input type=\"checkbox\" value=\"orange\" x-model=\"colors\">\n        <input type=\"checkbox\" value=\"yellow\" x-model=\"colors\">\n\n        <div class=\"pt-4\">Colors: <span x-text=\"colors\"></span></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"radio-inputs\"></a>\n## Radio inputs\n\n```alpine\n<input type=\"radio\" value=\"yes\" x-model=\"answer\">\n<input type=\"radio\" value=\"no\" x-model=\"answer\">\n\nAnswer: <span x-text=\"answer\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ answer: '' }\">\n        <input type=\"radio\" value=\"yes\" x-model=\"answer\">\n        <input type=\"radio\" value=\"no\" x-model=\"answer\">\n\n        <div class=\"pt-4\">Answer: <span x-text=\"answer\"></span></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"select-inputs\"></a>\n## Select inputs\n\n\n<a name=\"single-select\"></a>\n### Single select\n\n```alpine\n<select x-model=\"color\">\n    <option>Red</option>\n    <option>Orange</option>\n    <option>Yellow</option>\n</select>\n\nColor: <span x-text=\"color\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ color: '' }\">\n        <select x-model=\"color\">\n            <option>Red</option>\n            <option>Orange</option>\n            <option>Yellow</option>\n        </select>\n\n        <div class=\"pt-4\">Color: <span x-text=\"color\"></span></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"single-select-with-placeholder\"></a>\n### Single select with placeholder\n\n```alpine\n<select x-model=\"color\">\n    <option value=\"\" disabled>Select A Color</option>\n    <option>Red</option>\n    <option>Orange</option>\n    <option>Yellow</option>\n</select>\n\nColor: <span x-text=\"color\"></span>\n```\n\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ color: '' }\">\n        <select x-model=\"color\">\n            <option value=\"\" disabled>Select A Color</option>\n            <option>Red</option>\n            <option>Orange</option>\n            <option>Yellow</option>\n        </select>\n\n        <div class=\"pt-4\">Color: <span x-text=\"color\"></span></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"multiple-select\"></a>\n### Multiple select\n\n```alpine\n<select x-model=\"color\" multiple>\n    <option>Red</option>\n    <option>Orange</option>\n    <option>Yellow</option>\n</select>\n\nColors: <span x-text=\"color\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ color: '' }\">\n        <select x-model=\"color\" multiple>\n            <option>Red</option>\n            <option>Orange</option>\n            <option>Yellow</option>\n        </select>\n\n        <div class=\"pt-4\">Color: <span x-text=\"color\"></span></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"dynamically-populated-select-options\"></a>\n### Dynamically populated Select Options\n\n```alpine\n<select x-model=\"color\">\n    <template x-for=\"color in ['Red', 'Orange', 'Yellow']\">\n        <option x-text=\"color\"></option>\n    </template>\n</select>\n\nColor: <span x-text=\"color\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ color: '' }\">\n        <select x-model=\"color\">\n            <template x-for=\"color in ['Red', 'Orange', 'Yellow']\">\n                <option x-text=\"color\"></option>\n            </template>\n        </select>\n\n        <div class=\"pt-4\">Color: <span x-text=\"color\"></span></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"range-inputs\"></a>\n## Range inputs\n\n```alpine\n<input type=\"range\" x-model=\"range\" min=\"0\" max=\"1\" step=\"0.1\">\n\n<span x-text=\"range\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ range: 0.5 }\">\n        <input type=\"range\" x-model=\"range\" min=\"0\" max=\"1\" step=\"0.1\">\n\n        <div class=\"pt-4\" x-text=\"range\"></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n\n<a name=\"modifiers\"></a>\n## Modifiers\n\n<a name=\"lazy\"></a>\n### `.lazy`\n\nOn text inputs, by default, `x-model` updates the property on every keystroke. By adding the `.lazy` modifier, you can force an `x-model` input to only update the property when user focuses away from the input element.\n\nThis is handy for things like real-time form-validation where you might not want to show an input validation error until the user \"tabs\" away from a field.\n\n```alpine\n<input type=\"text\" x-model.lazy=\"username\">\n<span x-show=\"username.length > 20\">The username is too long.</span>\n```\n\n<a name=\"change\"></a>\n### `.change`\n\n`.change` syncs the data only when the input loses focus and its value has changed (the native `change` event). This is functionally equivalent to `.lazy`.\n\n```alpine\n<input type=\"text\" x-model.change=\"username\">\n```\n\n<a name=\"blur\"></a>\n### `.blur`\n\n`.blur` syncs the data when the input loses focus, regardless of whether the value has changed.\n\n```alpine\n<input type=\"text\" x-model.blur=\"email\">\n```\n\n<a name=\"enter\"></a>\n### `.enter`\n\n`.enter` syncs the data when the user presses the Enter key. This is useful for search fields where you want to trigger an action only when the user explicitly submits.\n\n```alpine\n<input type=\"text\" x-model.enter=\"search\">\n```\n\n> Note: `.enter` does not prevent the default behavior. If the input is inside a form, the form will still submit.\n\n<a name=\"combining-event-modifiers\"></a>\n### Combining Event Modifiers\n\nThe `.change`, `.blur`, and `.enter` modifiers can be combined to sync on multiple events. This is useful when you want to give users flexibility in how they submit data.\n\n```alpine\n<!-- Sync on blur OR enter -->\n<input type=\"text\" x-model.blur.enter=\"search\" placeholder=\"Press Enter or click away\">\n\n<!-- Sync on change, blur, OR enter -->\n<input type=\"text\" x-model.change.blur.enter=\"message\">\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ search: '' }\">\n        <input type=\"text\" x-model.blur.enter=\"search\" placeholder=\"Press Enter or click away\">\n\n        <div class=\"pt-4\">Search: <span x-text=\"search\"></span></div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"number\"></a>\n### `.number`\n\nBy default, any data stored in a property via `x-model` is stored as a string. To force Alpine to store the value as a JavaScript number, add the `.number` modifier.\n\n```alpine\n<input type=\"text\" x-model.number=\"age\">\n<span x-text=\"typeof age\"></span>\n```\n\n<a name=\"boolean\"></a>\n### `.boolean`\n\nBy default, any data stored in a property via `x-model` is stored as a string. To force Alpine to store the value as a JavaScript boolean, add the `.boolean` modifier. Both integers (1/0) and strings (true/false) are valid boolean values.\n\n```alpine\n<select x-model.boolean=\"isActive\">\n    <option value=\"true\">Yes</option>\n    <option value=\"false\">No</option>\n</select>\n<span x-text=\"typeof isActive\"></span>\n```\n\n<a name=\"debounce\"></a>\n### `.debounce`\n\nBy adding `.debounce` to `x-model`, you can easily debounce the updating of bound input.\n\nThis is useful for things like real-time search inputs that fetch new data from the server every time the search property changes.\n\n```alpine\n<input type=\"text\" x-model.debounce=\"search\">\n```\n\nThe default debounce time is 250 milliseconds, you can easily customize this by adding a time modifier like so.\n\n```alpine\n<input type=\"text\" x-model.debounce.500ms=\"search\">\n```\n\n<a name=\"throttle\"></a>\n### `.throttle`\n\nSimilar to `.debounce` you can limit the property update triggered by `x-model` to only updating on a specified interval.\n\n<input type=\"text\" x-model.throttle=\"search\">\n\nThe default throttle interval is 250 milliseconds, you can easily customize this by adding a time modifier like so.\n\n```alpine\n<input type=\"text\" x-model.throttle.500ms=\"search\">\n```\n\n<a name=\"fill\"></a>\n### `.fill`\n\nBy default, if an input has a value attribute, it is ignored by Alpine and instead, the value of the input is set to the value of the property bound using `x-model`.\n\nBut if a bound property is empty, then you can use an input's value attribute to populate the property by adding the `.fill` modifier.\n\n<div x-data=\"{ message: null }\">\n  <input type=\"text\" x-model.fill=\"message\" value=\"This is the default message.\">\n</div>\n\n<a name=\"programmatic access\"></a>\n## Programmatic access\n\nAlpine exposes under-the-hood utilities for getting and setting properties bound with `x-model`. This is useful for complex Alpine utilities that may want to override the default x-model behavior, or instances where you want to allow `x-model` on a non-input element.\n\nYou can access these utilities through a property called `_x_model` on the `x-model`ed element. `_x_model` has two methods to get and set the bound property:\n\n* `el._x_model.get()` (returns the value of the bound property)\n* `el._x_model.set()` (sets the value of the bound property)\n\n```alpine\n<div x-data=\"{ username: 'calebporzio' }\">\n    <div x-ref=\"div\" x-model=\"username\"></div>\n\n    <button @click=\"$refs.div._x_model.set('phantomatrix')\">\n        Change username to: 'phantomatrix'\n    </button>\n\n    <span x-text=\"$refs.div._x_model.get()\"></span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ username: 'calebporzio' }\">\n        <div x-ref=\"div\" x-model=\"username\"></div>\n\n        <button @click=\"$refs.div._x_model.set('phantomatrix')\">\n            Change username to: 'phantomatrix'\n        </button>\n\n        <span x-text=\"$refs.div._x_model.get()\"></span>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n"
  },
  {
    "path": "packages/docs/src/en/directives/modelable.md",
    "content": "---\norder: 7\ntitle: modelable\n---\n\n# x-modelable\n\n`x-modelable` allows you to expose any Alpine property as the target of the `x-model` directive.\n\nHere's a simple example of using `x-modelable` to expose a variable for binding with `x-model`.\n\n```alpine\n<div x-data=\"{ number: 5 }\">\n    <div x-data=\"{ count: 0 }\" x-modelable=\"count\" x-model=\"number\">\n        <button @click=\"count++\">Increment</button>\n    </div>\n\n    Number: <span x-text=\"number\"></span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ number: 5 }\">\n        <div x-data=\"{ count: 0 }\" x-modelable=\"count\" x-model=\"number\">\n            <button @click=\"count++\">Increment</button>\n        </div>\n\n        Number: <span x-text=\"number\"></span>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nAs you can see the outer scope property \"number\" is now bound to the inner scope property \"count\".\n\nTypically this feature would be used in conjunction with a backend templating framework like Laravel Blade. It's useful for abstracting away Alpine components into backend templates and exposing state to the outside through `x-model` as if it were a native input.\n"
  },
  {
    "path": "packages/docs/src/en/directives/on.md",
    "content": "---\norder: 5\ntitle: on\n---\n\n# x-on\n\n`x-on` allows you to easily run code on dispatched DOM events.\n\nHere's an example of simple button that shows an alert when clicked.\n\n```alpine\n<button x-on:click=\"alert('Hello World!')\">Say Hi</button>\n```\n\n> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use [`x-bind`](/directives/bind#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).\n\n<a name=\"shorthand-syntax\"></a>\n## Shorthand syntax\n\nIf `x-on:` is too verbose for your tastes, you can use the shorthand syntax: `@`.\n\nHere's the same component as above, but using the shorthand syntax instead:\n\n```alpine\n<button @click=\"alert('Hello World!')\">Say Hi</button>\n```\n\n> Despite not being included in the above snippet, `x-on` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n\n<a name=\"the-event-object\"></a>\n## The event object\n\nIf you wish to access the native JavaScript event object from your expression, you can use Alpine's magic `$event` property.\n\n```alpine\n<button @click=\"alert($event.target.getAttribute('message'))\" message=\"Hello World\">Say Hi</button>\n```\n\nIn addition, Alpine also passes the event object to any methods referenced without trailing parenthesis. For example:\n\n```alpine\n<button @click=\"handleClick\">...</button>\n\n<script>\n    function handleClick(e) {\n        // Now you can access the event object (e) directly\n    }\n</script>\n```\n\n<a name=\"keyboard-events\"></a>\n## Keyboard events\n\nAlpine makes it easy to listen for `keydown` and `keyup` events on specific keys.\n\nHere's an example of listening for the `Enter` key inside an input element.\n\n```alpine\n<input type=\"text\" @keyup.enter=\"alert('Submitted!')\">\n```\n\nYou can also chain these key modifiers to achieve more complex listeners.\n\nHere's a listener that runs when the `Shift` key is held and `Enter` is pressed, but not when `Enter` is pressed alone.\n\n```alpine\n<input type=\"text\" @keyup.shift.enter=\"alert('Submitted!')\">\n```\n\nYou can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.\n\n```alpine\n<input type=\"text\" @keyup.page-down=\"alert('Submitted!')\">\n```\n\nFor easy reference, here is a list of common keys you may want to listen for.\n\n| Modifier                       | Keyboard Key                       |\n| ------------------------------ | ---------------------------------- |\n| `.shift`                       | Shift                              |\n| `.enter`                       | Enter                              |\n| `.space`                       | Space                              |\n| `.ctrl`                        | Ctrl                               |\n| `.cmd`                         | Cmd                                |\n| `.meta`                        | Cmd on Mac, Windows key on Windows |\n| `.alt`                         | Alt                                |\n| `.up` `.down` `.left` `.right` | Up/Down/Left/Right arrows          |\n| `.escape`                      | Escape                             |\n| `.tab`                         | Tab                                |\n| `.caps-lock`                   | Caps Lock                          |\n| `.equal`                       | Equal, `=`                         |\n| `.period`                      | Period, `.`                        |\n| `.comma`                       | Comma, `,`                         |\n| `.slash`                       | Forward Slash, `/`                 |\n\n<a name=\"mouse-events\"></a>\n## Mouse events\n\nLike the above Keyboard Events, Alpine allows the use of some key modifiers for handling `click` events.\n\n| Modifier | Event Key |\n| -------- | --------- |\n| `.shift` | shiftKey  |\n| `.ctrl`  | ctrlKey   |\n| `.cmd`   | metaKey   |\n| `.meta`  | metaKey   |\n| `.alt`   | altKey    |\n\nThese work on `click`, `auxclick`, `context` and `dblclick` events, and even `mouseover`, `mousemove`, `mouseenter`, `mouseleave`, `mouseout`, `mouseup` and `mousedown`.\n\nHere's an example of a button that changes behaviour when the `Shift` key is held down.\n\n```alpine\n<button type=\"button\"\n    x-data=\"{ message: 'select' }\"\n    @click=\"message = 'selected'\"\n    @click.shift=\"message = 'added to selection'\"\n    @mousemove.shift=\"message = 'add to selection'\"\n    @mouseout=\"message = 'select'\"\n    x-text=\"message\"></button>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ message: '' }\">\n        <button type=\"button\"\n            x-data=\"{ message: 'select' }\"\n            @click=\"message = 'selected'\"\n            @click.shift=\"message = 'added to selection'\"\n            @mousemove.shift=\"message = 'add to selection'\"\n            @mouseout=\"message = 'select'\"\n            x-text=\"message\"></button>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n> Note: Normal click events with some modifiers (like `ctrl`) will automatically become `contextmenu` events in most browsers. Similarly, `right-click` events will trigger a `contextmenu` event, but will also trigger an `auxclick` event if the `contextmenu` event is prevented.\n\n<a name=\"custom-events\"></a>\n## Custom events\n\nAlpine event listeners are a wrapper for native DOM event listeners. Therefore, they can listen for ANY DOM event, including custom events.\n\nHere's an example of a component that dispatches a custom DOM event and listens for it as well.\n\n```alpine\n<div x-data @foo=\"alert('Button Was Clicked!')\">\n    <button @click=\"$event.target.dispatchEvent(new CustomEvent('foo', { bubbles: true }))\">...</button>\n</div>\n```\n\nWhen the button is clicked, the `@foo` listener will be called.\n\nBecause the `.dispatchEvent` API is verbose, Alpine offers a `$dispatch` helper to simplify things.\n\nHere's the same component re-written with the `$dispatch` magic property.\n\n```alpine\n<div x-data @foo=\"alert('Button Was Clicked!')\">\n    <button @click=\"$dispatch('foo')\">...</button>\n</div>\n```\n\n[→ Read more about `$dispatch`](/magics/dispatch)\n\n<a name=\"modifiers\"></a>\n## Modifiers\n\nAlpine offers a number of directive modifiers to customize the behavior of your event listeners.\n\n<a name=\"prevent\"></a>\n### .prevent\n\n`.prevent` is the equivalent of calling `.preventDefault()` inside a listener on the browser event object.\n\n```alpine\n<form @submit.prevent=\"console.log('submitted')\" action=\"/foo\">\n    <button>Submit</button>\n</form>\n```\n\nIn the above example, with the `.prevent`, clicking the button will NOT submit the form to the `/foo` endpoint. Instead, Alpine's listener will handle it and \"prevent\" the event from being handled any further.\n\n<a name=\"stop\"></a>\n### .stop\n\nSimilar to `.prevent`, `.stop` is the equivalent of calling `.stopPropagation()` inside a listener on the browser event object.\n\n```alpine\n<div @click=\"console.log('I will not get logged')\">\n    <button @click.stop>Click Me</button>\n</div>\n```\n\nIn the above example, clicking the button WON'T log the message. This is because we are stopping the propagation of the event immediately and not allowing it to \"bubble\" up to the `<div>` with the `@click` listener on it.\n\n<a name=\"outside\"></a>\n### .outside\n\n`.outside` is a convenience helper for listening for a click outside of the element it is attached to. Here's a simple dropdown component example to demonstrate:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle</button>\n\n    <div x-show=\"open\" @click.outside=\"open = false\">\n        Contents...\n    </div>\n</div>\n```\n\nIn the above example, after showing the dropdown contents by clicking the \"Toggle\" button, you can close the dropdown by clicking anywhere on the page outside the content.\n\nThis is because `.outside` is listening for clicks that DON'T originate from the element it's registered on.\n\n> It's worth noting that the `.outside` expression will only be evaluated when the element it's registered on is visible on the page. Otherwise, there would be nasty race conditions where clicking the \"Toggle\" button would also fire the `@click.outside` handler when it is not visible.\n\n<a name=\"window\"></a>\n### .window\n\nWhen the `.window` modifier is present, Alpine will register the event listener on the root `window` object on the page instead of the element itself.\n\n```alpine\n<div @keyup.escape.window=\"...\">...</div>\n```\n\nThe above snippet will listen for the \"escape\" key to be pressed ANYWHERE on the page.\n\nAdding `.window` to listeners is extremely useful for these sorts of cases where a small part of your markup is concerned with events that take place on the entire page.\n\n<a name=\"document\"></a>\n### .document\n\n`.document` works similarly to `.window` only it registers listeners on the `document` global, instead of the `window` global.\n\n<a name=\"once\"></a>\n### .once\n\nBy adding `.once` to a listener, you are ensuring that the handler is only called ONCE.\n\n```alpine\n<button @click.once=\"console.log('I will only log once')\">...</button>\n```\n\n<a name=\"debounce\"></a>\n### .debounce\n\nSometimes it is useful to \"debounce\" an event handler so that it only is called after a certain period of inactivity (250 milliseconds by default).\n\nFor example if you have a search field that fires network requests as the user types into it, adding a debounce will prevent the network requests from firing on every single keystroke.\n\n```alpine\n<input @input.debounce=\"fetchResults\">\n```\n\nNow, instead of calling `fetchResults` after every keystroke, `fetchResults` will only be called after 250 milliseconds of no keystrokes.\n\nIf you wish to lengthen or shorten the debounce time, you can do so by trailing a duration after the `.debounce` modifier like so:\n\n```alpine\n<input @input.debounce.500ms=\"fetchResults\">\n```\n\nNow, `fetchResults` will only be called after 500 milliseconds of inactivity.\n\n<a name=\"throttle\"></a>\n### .throttle\n\n`.throttle` is similar to `.debounce` except it will release a handler call every 250 milliseconds instead of deferring it indefinitely.\n\nThis is useful for cases where there may be repeated and prolonged event firing and using `.debounce` won't work because you want to still handle the event every so often.\n\nFor example:\n\n```alpine\n<div @scroll.window.throttle=\"handleScroll\">...</div>\n```\n\nThe above example is a great use case of throttling. Without `.throttle`, the `handleScroll` method would be fired hundreds of times as the user scrolls down a page. This can really slow down a site. By adding `.throttle`, we are ensuring that `handleScroll` only gets called every 250 milliseconds.\n\n> Fun Fact: This exact strategy is used on this very documentation site to update the currently highlighted section in the right sidebar.\n\nJust like with `.debounce`, you can add a custom duration to your throttled event:\n\n```alpine\n<div @scroll.window.throttle.750ms=\"handleScroll\">...</div>\n```\n\nNow, `handleScroll` will only be called every 750 milliseconds.\n\n<a name=\"self\"></a>\n### .self\n\nBy adding `.self` to an event listener, you are ensuring that the event originated on the element it is declared on, and not from a child element.\n\n```alpine\n<button @click.self=\"handleClick\">\n    Click Me\n\n    <img src=\"...\">\n</button>\n```\n\nIn the above example, we have an `<img>` tag inside the `<button>` tag. Normally, any click originating within the `<button>` element (like on `<img>` for example), would be picked up by a `@click` listener on the button.\n\nHowever, in this case, because we've added a `.self`, only clicking the button itself will call `handleClick`. Only clicks originating on the `<img>` element will not be handled.\n\n<a name=\"camel\"></a>\n### .camel\n\n```alpine\n<div @custom-event.camel=\"handleCustomEvent\">\n    ...\n</div>\n```\n\nSometimes you may want to listen for camelCased events such as `customEvent` in our example. Because camelCasing inside HTML attributes is not supported, adding the `.camel` modifier is necessary for Alpine to camelCase the event name internally.\n\nBy adding `.camel` in the above example, Alpine is now listening for `customEvent` instead of `custom-event`.\n\n<a name=\"dot\"></a>\n### .dot\n\n```alpine\n<div @custom-event.dot=\"handleCustomEvent\">\n    ...\n</div>\n```\n\nSimilar to the `.camelCase` modifier there may be situations where you want to listen for events that have dots in their name (like `custom.event`). Since dots within the event name are reserved by Alpine you need to write them with dashes and add the `.dot` modifier.\n\nIn the code example above `custom-event.dot` will correspond to the event name `custom.event`.\n\n<a name=\"passive\"></a>\n### .passive\n\nBrowsers optimize scrolling on pages to be fast and smooth even when JavaScript is being executed on the page. However, improperly implemented touch and wheel listeners can block this optimization and cause poor site performance.\n\nIf you are listening for touch events, it's important to add `.passive` to your listeners to not block scroll performance.\n\n```alpine\n<div @touchstart.passive=\"...\">...</div>\n```\n\n[→ Read more about passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners)\n\n<a name=\"passive-false\"></a>\n### .passive.false\n\nIn modern browsers, touch and wheel event listeners are passive by default. Pass `.passive.false` to make these events cancelable, so that you can call `preventDefault` on them.\n\n```alpine\n<div @touchmove.passive.false=\"$event.preventDefault()\">...</div>\n```\n\n### .capture\n\nAdd this modifier if you want to execute this listener in the event's capturing phase, e.g. before the event bubbles from the target element up the DOM.\n\n```alpine\n<div @click.capture=\"console.log('I will log first')\">\n    <button @click=\"console.log('I will log second')\"></button>\n</div>\n```\n\n[→ Read more about the capturing and bubbling phase of events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture)\n"
  },
  {
    "path": "packages/docs/src/en/directives/ref.md",
    "content": "---\norder: 11\ntitle: ref\n---\n\n# x-ref\n\n`x-ref` in combination with `$refs` is a useful utility for easily accessing DOM elements directly. It's most useful as a replacement for APIs like `getElementById` and `querySelector`.\n\n```alpine\n<button @click=\"$refs.text.remove()\">Remove Text</button>\n\n<span x-ref=\"text\">Hello 👋</span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data>\n        <button @click=\"$refs.text.remove()\">Remove Text</button>\n\n        <div class=\"pt-4\" x-ref=\"text\">Hello 👋</div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n> Despite not being included in the above snippet, `x-ref` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n"
  },
  {
    "path": "packages/docs/src/en/directives/show.md",
    "content": "---\norder: 3\ntitle: show\n---\n\n# x-show\n\n`x-show` is one of the most useful and powerful directives in Alpine. It provides an expressive way to show and hide DOM elements.\n\nHere's an example of a simple dropdown component using `x-show`.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-on:click=\"open = ! open\">Toggle Dropdown</button>\n\n    <div x-show=\"open\">\n        Dropdown Contents...\n    </div>\n</div>\n```\n\nWhen the \"Toggle Dropdown\" button is clicked, the dropdown will show and hide accordingly.\n\n> If the \"default\" state of an `x-show` on page load is \"false\", you may want to use `x-cloak` on the page to avoid \"page flicker\" (The effect that happens when the browser renders your content before Alpine is finished initializing and hiding it.) You can learn more about `x-cloak` in its documentation.\n\n<a name=\"with-transitions\"></a>\n## With transitions\n\nIf you want to apply smooth transitions to the `x-show` behavior, you can use it in conjunction with `x-transition`. You can learn more about that directive [here](/directives/transition), but here's a quick example of the same component as above, just with transitions applied.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-on:click=\"open = ! open\">Toggle Dropdown</button>\n\n    <div x-show=\"open\" x-transition>\n        Dropdown Contents...\n    </div>\n</div>\n```\n\n<a name=\"using-the-important-modifier\"></a>\n## Using the important modifier\n\nSometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the `display` property with the `!important` flag, it will take precedence over the inline style set by Alpine.\n\nIn these cases you may use the `.important` modifier to set the inline style to `display: none !important`.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-on:click=\"open = ! open\">Toggle Dropdown</button>\n\n    <div x-show.important=\"open\">\n        Dropdown Contents...\n    </div>\n</div>\n```\n"
  },
  {
    "path": "packages/docs/src/en/directives/teleport.md",
    "content": "---\norder: 12\ntitle: teleport\ndescription: Send Alpine templates to other parts of the DOM\ngraph_image: https://alpinejs.dev/social_teleport.jpg\n---\n\n# x-teleport\n\nThe `x-teleport` directive allows you to transport part of your Alpine template to another part of the DOM on the page entirely.\n\nThis is useful for things like modals (especially nesting them), where it's helpful to break out of the z-index of the current Alpine component.\n\n<a name=\"x-teleport\"></a>\n## x-teleport\n\nBy attaching `x-teleport` to a `<template>` element, you are telling Alpine to \"append\" that element to the provided selector.\n\n> The `x-teleport` selector can be any string you would normally pass into something like `document.querySelector`. It will find the first element that matches, be it a tag name (`body`), class name (`.my-class`), ID (`#my-id`), or any other valid CSS selector.\n\n[→ Read more about `document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)\n\nHere's a contrived modal example:\n\n```alpine\n<body>\n    <div x-data=\"{ open: false }\">\n        <button @click=\"open = ! open\">Toggle Modal</button>\n\n        <template x-teleport=\"body\">\n            <div x-show=\"open\">\n                Modal contents...\n            </div>\n        </template>\n    </div>\n\n    <div>Some other content placed AFTER the modal markup.</div>\n\n    ...\n\n</body>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-ref=\"root\" id=\"modal2\">\n    <div x-data=\"{ open: false }\">\n        <button @click=\"open = ! open\">Toggle Modal</button>\n\n        <template x-teleport=\"#modal2\">\n            <div x-show=\"open\">\n                Modal contents...\n            </div>\n        </template>\n\n    </div>\n\n    <div class=\"py-4\">Some other content placed AFTER the modal markup.</div>\n</div>\n<!-- END_VERBATIM -->\n\nNotice how when toggling the modal, the actual modal contents show up AFTER the \"Some other content...\" element? This is because when Alpine is initializing, it sees `x-teleport=\"body\"` and appends and initializes that element to the provided element selector.\n\n<a name=\"forwarding-events\"></a>\n## Forwarding events\n\nAlpine tries its best to make the experience of teleporting seamless. Anything you would normally do in a template, you should be able to do inside an `x-teleport` template. Teleported content can access the normal Alpine scope of the component as well as other features like `$refs`, `$root`, etc...\n\nHowever, native DOM events have no concept of teleportation, so if, for example, you trigger a \"click\" event from inside a teleported element, that event will bubble up the DOM tree as it normally would.\n\nTo make this experience more seamless, you can \"forward\" events by simply registering event listeners on the `<template x-teleport...>` element itself like so:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle Modal</button>\n\n    <template x-teleport=\"body\" @click=\"open = false\">\n        <div x-show=\"open\">\n            Modal contents...\n            (click to close)\n        </div>\n    </template>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-ref=\"root\" id=\"modal3\">\n    <div x-data=\"{ open: false }\">\n        <button @click=\"open = ! open\">Toggle Modal</button>\n\n        <template x-teleport=\"#modal3\" @click=\"open = false\">\n            <div x-show=\"open\">\n                Modal contents...\n                <div>(click to close)</div>\n            </div>\n        </template>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNotice how we are now able to listen for events dispatched from within the teleported element from outside the `<template>` element itself?\n\nAlpine does this by looking for event listeners registered on `<template x-teleport...>` and stops those events from propagating past the live, teleported, DOM element. Then, it creates a copy of that event and re-dispatches it from `<template x-teleport...>`.\n\n<a name=\"nesting\"></a>\n## Nesting\n\nTeleporting is especially helpful if you are trying to nest one modal within another. Alpine makes it simple to do so:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle Modal</button>\n\n    <template x-teleport=\"body\">\n        <div x-show=\"open\">\n            Modal contents...\n\n            <div x-data=\"{ open: false }\">\n                <button @click=\"open = ! open\">Toggle Nested Modal</button>\n\n                <template x-teleport=\"body\">\n                    <div x-show=\"open\">\n                        Nested modal contents...\n                    </div>\n                </template>\n            </div>\n        </div>\n    </template>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-ref=\"root\" id=\"modal4\">\n    <div x-data=\"{ open: false }\">\n        <button @click=\"open = ! open\">Toggle Modal</button>\n\n        <template x-teleport=\"#modal4\">\n            <div x-show=\"open\">\n                <div class=\"py-4\">Modal contents...</div>\n\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle Nested Modal</button>\n\n                    <template x-teleport=\"#modal4\">\n                        <div class=\"pt-4\" x-show=\"open\">\n                            Nested modal contents...\n                        </div>\n                    </template>\n                </div>\n            </div>\n        </template>\n    </div>\n\n    <template x-teleport-target=\"modals3\"></template>\n</div>\n<!-- END_VERBATIM -->\n\nAfter toggling \"on\" both modals, they are authored as children, but will be rendered as sibling elements on the page, not within one another.\n"
  },
  {
    "path": "packages/docs/src/en/directives/text.md",
    "content": "---\norder: 6\ntitle: text\n---\n\n# x-text\n\n`x-text` sets the text content of an element to the result of a given expression.\n\nHere's a basic example of using `x-text` to display a user's username.\n\n```alpine\n<div x-data=\"{ username: 'calebporzio' }\">\n    Username: <strong x-text=\"username\"></strong>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ username: 'calebporzio' }\">\n        Username: <strong x-text=\"username\"></strong>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNow the `<strong>` tag's inner text content will be set to \"calebporzio\".\n"
  },
  {
    "path": "packages/docs/src/en/directives/transition.md",
    "content": "---\norder: 10\ntitle: transition\n---\n\n# x-transition\n\nAlpine provides a robust transitions utility out of the box. With a few `x-transition` directives, you can create smooth transitions between when an element is shown or hidden.\n\nThere are two primary ways to handle transitions in Alpine:\n\n* [The Transition Helper](#the-transition-helper)\n* [Applying CSS Classes](#applying-css-classes)\n\n<a name=\"the-transition-helper\"></a>\n## The transition helper\n\nThe simplest way to achieve a transition using Alpine is by adding `x-transition` to an element with `x-show` on it. For example:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle</button>\n\n    <div x-show=\"open\" x-transition>\n        Hello 👋\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ open: false }\">\n        <button @click=\"open = ! open\">Toggle</button>\n\n        <div x-show=\"open\" x-transition>\n            Hello 👋\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nAs you can see, by default, `x-transition` applies pleasant transition defaults to fade and scale the revealing element.\n\nYou can override these defaults with modifiers attached to `x-transition`. Let's take a look at those.\n\n<a name=\"customizing-duration\"></a>\n### Customizing duration\n\nInitially, the duration is set to be 150 milliseconds when entering, and 75 milliseconds when leaving.\n\nYou can configure the duration you want for a transition with the `.duration` modifier:\n\n```alpine\n<div ... x-transition.duration.500ms>\n```\n\nThe above `<div>` will transition for 500 milliseconds when entering, and 500 milliseconds when leaving.\n\nIf you wish to customize the durations specifically for entering and leaving, you can do that like so:\n\n```alpine\n<div ...\n    x-transition:enter.duration.500ms\n    x-transition:leave.duration.400ms\n>\n```\n\n> Despite not being included in the above snippet, `x-transition` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)\n\n<a name=\"customizing-delay\"></a>\n### Customizing delay\n\nYou can delay a transition using the `.delay` modifier like so:\n\n```alpine\n<div ... x-transition.delay.50ms>\n```\n\nThe above example will delay the transition and in and out of the element by 50 milliseconds.\n\n<a name=\"customizing-opacity\"></a>\n### Customizing opacity\n\nBy default, Alpine's `x-transition` applies both a scale and opacity transition to achieve a \"fade\" effect.\n\nIf you wish to only apply the opacity transition (no scale), you can accomplish that like so:\n\n```alpine\n<div ... x-transition.opacity>\n```\n\n<a name=\"customizing-scale\"></a>\n### Customizing scale\n\nSimilar to the `.opacity` modifier, you can configure `x-transition` to ONLY scale (and not transition opacity as well) like so:\n\n```alpine\n<div ... x-transition.scale>\n```\n\nThe `.scale` modifier also offers the ability to configure its scale values AND its origin values:\n\n```alpine\n<div ... x-transition.scale.80>\n```\n\nThe above snippet will scale the element up and down by 80%.\n\nAgain, you may customize these values separately for enter and leaving transitions like so:\n\n```alpine\n<div ...\n    x-transition:enter.scale.80\n    x-transition:leave.scale.90\n>\n```\n\nTo customize the origin of the scale transition, you can use the `.origin` modifier:\n\n```alpine\n<div ... x-transition.scale.origin.top>\n```\n\nNow the scale will be applied using the top of the element as the origin, instead of the center by default.\n\nLike you may have guessed, the possible values for this customization are: `top`, `bottom`, `left`, and `right`.\n\nIf you wish, you can also combine two origin values. For example, if you want the origin of the scale to be \"top right\", you can use: `.origin.top.right` as the modifier.\n\n\n<a name=\"applying-css-classes\"></a>\n## Applying CSS classes\n\nFor direct control over exactly what goes into your transitions, you can apply CSS classes at different stages of the transition.\n\n> The following examples use [TailwindCSS](https://tailwindcss.com/docs/transition-property) utility classes.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle</button>\n\n    <div\n        x-show=\"open\"\n        x-transition:enter=\"transition ease-out duration-300\"\n        x-transition:enter-start=\"opacity-0 scale-90\"\n        x-transition:enter-end=\"opacity-100 scale-100\"\n        x-transition:leave=\"transition ease-in duration-300\"\n        x-transition:leave-start=\"opacity-100 scale-100\"\n        x-transition:leave-end=\"opacity-0 scale-90\"\n    >Hello 👋</div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle</button>\n\n    <div\n        x-show=\"open\"\n        x-transition:enter=\"transition ease-out duration-300\"\n        x-transition:enter-start=\"opacity-0 transform scale-90\"\n        x-transition:enter-end=\"opacity-100 transform scale-100\"\n        x-transition:leave=\"transition ease-in duration-300\"\n        x-transition:leave-start=\"opacity-100 transform scale-100\"\n        x-transition:leave-end=\"opacity-0 transform scale-90\"\n    >Hello 👋</div>\n</div>\n</div>\n<!-- END_VERBATIM -->\n\n| Directive      | Description |\n| ---            | --- |\n| `:enter`       | Applied during the entire entering phase. |\n| `:enter-start` | Added before element is inserted, removed one frame after element is inserted. |\n| `:enter-end`   | Added one frame after element is inserted (at the same time `enter-start` is removed), removed when transition/animation finishes.\n| `:leave`       | Applied during the entire leaving phase. |\n| `:leave-start` | Added immediately when a leaving transition is triggered, removed after one frame. |\n| `:leave-end`   | Added one frame after a leaving transition is triggered (at the same time `leave-start` is removed), removed when the transition/animation finishes.\n"
  },
  {
    "path": "packages/docs/src/en/directives.md",
    "content": "---\norder: 4\ntitle: Directives\nprefix: x-\nfont-type: mono\ntype: sub-directory\n---\n"
  },
  {
    "path": "packages/docs/src/en/essentials/events.md",
    "content": "---\norder: 4\ntitle: Events\n---\n\n# Events\n\nAlpine makes it simple to listen for browser events and react to them.\n\n<a name=\"listening-for-simple-events\"></a>\n## Listening for simple events\n\nBy using `x-on`, you can listen for browser events that are dispatched on or within an element.\n\nHere's a basic example of listening for a click on a button:\n\n```alpine\n<button x-on:click=\"console.log('clicked')\">...</button>\n```\n\nAs an alternative, you can use the event shorthand syntax if you prefer: `@`. Here's the same example as before, but using the shorthand syntax (which we'll be using from now on):\n\n```alpine\n<button @click=\"...\">...</button>\n```\n\nIn addition to `click`, you can listen for any browser event by name. For example: `@mouseenter`, `@keyup`, etc... are all valid syntax.\n\n<a name=\"listening-for-specific-keys\"></a>\n## Listening for specific keys\n\nLet's say you wanted to listen for the `enter` key to be pressed inside an `<input>` element. Alpine makes this easy by adding the `.enter` like so:\n\n```alpine\n<input @keyup.enter=\"...\">\n```\n\nYou can even combine key modifiers to listen for key combinations like pressing `enter` while holding `shift`:\n\n```alpine\n<input @keyup.shift.enter=\"...\">\n```\n\n<a name=\"preventing-default\"></a>\n## Preventing default\n\nWhen reacting to browser events, it is often necessary to \"prevent default\" (prevent the default behavior of the browser event).\n\nFor example, if you want to listen for a form submission but prevent the browser from submitting a form request, you can use `.prevent`:\n\n```alpine\n<form @submit.prevent=\"...\">...</form>\n```\n\nYou can also apply `.stop` to achieve the equivalent of `event.stopPropagation()`.\n\n<a name=\"accessing-the-event-object\"></a>\n## Accessing the event object\n\nSometimes you may want to access the native browser event object inside your own code. To make this easy, Alpine automatically injects an `$event` magic variable:\n\n```alpine\n<button @click=\"$event.target.remove()\">Remove Me</button>\n```\n\n<a name=\"dispatching-custom-events\"></a>\n## Dispatching custom events\n\nIn addition to listening for browser events, you can dispatch them as well. This is extremely useful for communicating with other Alpine components or triggering events in tools outside of Alpine itself.\n\nAlpine exposes a magic helper called `$dispatch` for this:\n\n```alpine\n<div @foo=\"console.log('foo was dispatched')\">\n    <button @click=\"$dispatch('foo')\"></button>\n</div>\n```\n\nAs you can see, when the button is clicked, Alpine will dispatch a browser event called \"foo\", and our `@foo` listener on the `<div>` will pick it up and react to it.\n\n<a name=\"listening-for-events-on-window\"></a>\n## Listening for events on window\n\nBecause of the nature of events in the browser, it is sometimes useful to listen to events on the top-level window object.\n\nThis allows you to communicate across components completely like the following example:\n\n\n```alpine\n<div x-data>\n    <button @click=\"$dispatch('foo')\"></button>\n</div>\n\n<div x-data @foo.window=\"console.log('foo was dispatched')\">...</div>\n```\n\nIn the above example, if we click the button in the first component, Alpine will dispatch the \"foo\" event. Because of the way events work in the browser, they \"bubble\" up through parent elements all the way to the top-level \"window\".\n\nNow, because in our second component we are listening for \"foo\" on the window (with `.window`), when the button is clicked, this listener will pick it up and log the \"foo was dispatched\" message.\n\n[→ Read more about x-on](/directives/on)\n"
  },
  {
    "path": "packages/docs/src/en/essentials/installation.md",
    "content": "---\norder: 1\ntitle: Installation\n---\n\n# Installation\n\nThere are 2 ways to include Alpine into your project:\n\n* Including it from a `<script>` tag\n* Importing it as a module\n\nEither is perfectly valid. It all depends on the project's needs and the developer's taste.\n\n<a name=\"from-a-script-tag\"></a>\n## From a script tag\n\nThis is by far the simplest way to get started with Alpine. Include the following `<script>` tag in the head of your HTML page.\n\n```alpine\n<html>\n    <head>\n        ...\n\n        <script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n    </head>\n    ...\n</html>\n```\n\n> Don't forget the \"defer\" attribute in the `<script>` tag.\n\nNotice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.\n\n```alpine\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.15.8/dist/cdn.min.js\"></script>\n```\n\nThat's it! Alpine is now available for use inside your page.\n\nNote that you will still need to define a component with `x-data` in order for any Alpine.js attributes to work. See <https://github.com/alpinejs/alpine/discussions/3805> for more information.\n\n<a name=\"as-a-module\"></a>\n## As a module\n\nIf you prefer the more robust approach, you can install Alpine via NPM and import it into a bundle.\n\nRun the following command to install it.\n\n```shell\nnpm install alpinejs\n```\n\nNow import Alpine into your bundle and initialize it like so:\n\n```js\nimport Alpine from 'alpinejs'\n\nwindow.Alpine = Alpine\n\nAlpine.start()\n```\n\n> The `window.Alpine = Alpine` bit is optional, but is nice to have for freedom and flexibility. Like when tinkering with Alpine from the devtools for example.\n\n> If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the `Alpine` global object, and when you initialize Alpine by calling `Alpine.start()`.\n\n> Ensure that `Alpine.start()` is only called once per page. Calling it more than once will result in multiple \"instances\" of Alpine running at the same time.\n\n\n[→ Read more about extending Alpine](/advanced/extending)\n"
  },
  {
    "path": "packages/docs/src/en/essentials/lifecycle.md",
    "content": "---\norder: 5\ntitle: Lifecycle\n---\n\n# Lifecycle\n\nAlpine has a handful of different techniques for hooking into different parts of its lifecycle. Let's go through the most useful ones to familiarize yourself with:\n\n<a name=\"element-initialization\"></a>\n## Element initialization\n\nAnother extremely useful lifecycle hook in Alpine is the `x-init` directive.\n\n`x-init` can be added to any element on a page and will execute any JavaScript you call inside it when Alpine begins initializing that element.\n\n```alpine\n<button x-init=\"console.log('Im initing')\">\n```\n\nIn addition to the directive, Alpine will automatically call any `init()` methods stored on a data object. For example:\n\n```js\nAlpine.data('dropdown', () => ({\n    init() {\n        // I get called before the element using this data initializes.\n    }\n}))\n```\n\n<a name=\"after-a-state-change\"></a>\n## After a state change\n\nAlpine allows you to execute code when a piece of data (state) changes. It offers two different APIs for such a task: `$watch` and `x-effect`.\n\n<a name=\"watch\"></a>\n### `$watch`\n\n```alpine\n<div x-data=\"{ open: false }\" x-init=\"$watch('open', value => console.log(value))\">\n```\n\nAs you can see above, `$watch` allows you to hook into data changes using a dot-notation key. When that piece of data changes, Alpine will call the passed callback and pass it the new value. along with the old value before the change.\n\n[→ Read more about $watch](/magics/watch)\n\n<a name=\"x-effect\"></a>\n### `x-effect`\n\n`x-effect` uses the same mechanism under the hood as `$watch` but has very different usage.\n\nInstead of specifying which data key you wish to watch, `x-effect` will call the provided code and intelligently look for any Alpine data used within it. Now when one of those pieces of data changes, the `x-effect` expression will be re-run.\n\nHere's the same bit of code from the `$watch` example rewritten using `x-effect`:\n\n```alpine\n<div x-data=\"{ open: false }\" x-effect=\"console.log(open)\">\n```\n\nNow, this expression will be called right away, and re-called every time `open` is updated.\n\nThe two main behavioral differences with this approach are:\n\n1. The provided code will be run right away AND when data changes (`$watch` is \"lazy\" -- won't run until the first data change)\n2. No knowledge of the previous value. (The callback provided to `$watch` receives both the new value AND the old one)\n\n[→ Read more about x-effect](/directives/effect)\n\n<a name=\"alpine-initialization\"></a>\n## Alpine initialization\n\n<a name=\"alpine-initializing\"></a>\n### `alpine:init`\n\nEnsuring a bit of code executes after Alpine is loaded, but BEFORE it initializes itself on the page is a necessary task.\n\nThis hook allows you to register custom data, directives, magics, etc. before Alpine does its thing on a page.\n\nYou can hook into this point in the lifecycle by listening for an event that Alpine dispatches called: `alpine:init`\n\n```js\ndocument.addEventListener('alpine:init', () => {\n    Alpine.data(...)\n})\n```\n\n<a name=\"alpine-initialized\"></a>\n### `alpine:initialized`\n\nAlpine also offers a hook that you can use to execute code AFTER it's done initializing called `alpine:initialized`:\n\n```js\ndocument.addEventListener('alpine:initialized', () => {\n    //\n})\n```\n"
  },
  {
    "path": "packages/docs/src/en/essentials/state.md",
    "content": "---\norder: 2\ntitle: State\n---\n\n# State\n\nState (JavaScript data that Alpine watches for changes) is at the core of everything you do in Alpine. You can provide local data to a chunk of HTML, or make it globally available for use anywhere on a page using `x-data` or `Alpine.store()` respectively.\n\n<a name=\"local-state-x-data\"></a>\n## Local state\n\nAlpine allows you to declare an HTML block's state in a single `x-data` attribute without ever leaving your markup.\n\nHere's a basic example:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    ...\n</div>\n```\n\nNow any other Alpine syntax on or within this element will be able to access `open`. And like you'd guess, when `open` changes for any reason, everything that depends on it will react automatically.\n\n[→ Read more about `x-data`](/directives/data)\n\n<a name=\"nesting-data\"></a>\n### Nesting data\n\nData is nestable in Alpine. For example, if you have two elements with Alpine data attached (one inside the other), you can access the parent's data from inside the child element.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <div x-data=\"{ label: 'Content:' }\">\n        <span x-text=\"label\"></span>\n        <span x-show=\"open\"></span>\n    </div>\n</div>\n```\n\nThis is similar to scoping in JavaScript itself (code within a function can access variables declared outside that function.)\n\nLike you may have guessed, if the child has a data property matching the name of a parent's property, the child property will take precedence.\n\n<a name=\"single-element-data\"></a>\n### Single-element data\n\nAlthough this may seem obvious to some, it's worth mentioning that Alpine data can be used within the same element. For example:\n\n```alpine\n<button x-data=\"{ label: 'Click Here' }\" x-text=\"label\"></button>\n```\n\n<a name=\"data-less-alpine\"></a>\n### Data-less Alpine\n\nSometimes you may want to use Alpine functionality, but don't need any reactive data. In these cases, you can opt out of passing an expression to `x-data` entirely. For example:\n\n```alpine\n<button x-data @click=\"alert('I\\'ve been clicked!')\">Click Me</button>\n```\n\n<a name=\"re-usable-data\"></a>\n### Re-usable data\n\nWhen using Alpine, you may find the need to re-use a chunk of data and/or its corresponding template.\n\nIf you are using a backend framework like Rails or Laravel, Alpine first recommends that you extract the entire block of HTML into a template partial or include.\n\nIf for some reason that isn't ideal for you or you're not in a back-end templating environment, Alpine allows you to globally register and re-use the data portion of a component using `Alpine.data(...)`.\n\n```js\nAlpine.data('dropdown', () => ({\n    open: false,\n\n    toggle() {\n        this.open = ! this.open\n    }\n}))\n```\n\nNow that you've registered the \"dropdown\" data, you can use it inside your markup in as many places as you like:\n\n```alpine\n<div x-data=\"dropdown\">\n    <button @click=\"toggle\">Expand</button>\n\n    <span x-show=\"open\">Content...</span>\n</div>\n\n<div x-data=\"dropdown\">\n    <button @click=\"toggle\">Expand</button>\n\n    <span x-show=\"open\">Some Other Content...</span>\n</div>\n```\n\n[→ Read more about using `Alpine.data()`](/globals/alpine-data)\n\n<a name=\"global-state\"></a>\n## Global state\n\nIf you wish to make some data available to every component on the page, you can do so using Alpine's \"global store\" feature.\n\nYou can register a store using `Alpine.store(...)`, and reference one with the magic `$store()` method.\n\nLet's look at a simple example. First we'll register the store globally:\n\n```js\nAlpine.store('tabs', {\n    current: 'first',\n\n    items: ['first', 'second', 'third'],\n})\n```\n\nNow we can access or modify its data from anywhere on our page:\n\n```alpine\n<div x-data>\n    <template x-for=\"tab in $store.tabs.items\">\n        ...\n    </template>\n</div>\n\n<div x-data>\n    <button @click=\"$store.tabs.current = 'first'\">First Tab</button>\n    <button @click=\"$store.tabs.current = 'second'\">Second Tab</button>\n    <button @click=\"$store.tabs.current = 'third'\">Third Tab</button>\n</div>\n```\n\n[→ Read more about `Alpine.store()`](/globals/alpine-store)\n"
  },
  {
    "path": "packages/docs/src/en/essentials/templating.md",
    "content": "---\norder: 3\ntitle: Templating\n---\n\n# Templating\n\nAlpine offers a handful of useful directives for manipulating the DOM on a web page.\n\nLet's cover a few of the basic templating directives here, but be sure to look through the available directives in the sidebar for an exhaustive list.\n\n<a name=\"text-content\"></a>\n## Text content\n\nAlpine makes it easy to control the text content of an element with the `x-text` directive.\n\n```alpine\n<div x-data=\"{ title: 'Start Here' }\">\n    <h1 x-text=\"title\"></h1>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ title: 'Start Here' }\" class=\"demo\">\n    <strong x-text=\"title\"></strong>\n</div>\n<!-- END_VERBATIM -->\n\nNow, Alpine will set the text content of the `<h1>` with the value of `title` (\"Start Here\"). When `title` changes, so will the contents of `<h1>`.\n\nLike all directives in Alpine, you can use any JavaScript expression you like. For example:\n\n```alpine\n<span x-text=\"1 + 2\"></span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-data>\n    <span x-text=\"1 + 2\"></span>\n</div>\n<!-- END_VERBATIM -->\n\nThe `<span>` will now contain the sum of \"1\" and \"2\".\n\n[→ Read more about `x-text`](/directives/text)\n\n<a name=\"toggling-elements\"></a>\n## Toggling elements\n\nToggling elements is a common need in web pages and applications. Dropdowns, modals, dialogues, \"show-more\"s, etc... are all good examples.\n\nAlpine offers the `x-show` and `x-if` directives for toggling elements on a page.\n\n<a name=\"x-show\"></a>\n### `x-show`\n\nHere's a simple toggle component using `x-show`.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Expand</button>\n\n    <div x-show=\"open\">\n        Content...\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <button @click=\"open = ! open\" :aria-pressed=\"open\">Expand</button>\n\n    <div x-show=\"open\">\n        Content...\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNow the entire `<div>` containing the contents will be shown and hidden based on the value of `open`.\n\nUnder the hood, Alpine adds the CSS property `display: none;` to the element when it should be hidden.\n\n[→ Read more about `x-show`](/directives/show)\n\nThis works well for most cases, but sometimes you may want to completely add and remove the element from the DOM entirely. This is what `x-if` is for.\n\n<a name=\"x-if\"></a>\n### `x-if`\n\nHere is the same toggle from before, but this time using `x-if` instead of `x-show`.\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Expand</button>\n\n    <template x-if=\"open\">\n        <div>\n            Content...\n        </div>\n    </template>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <button @click=\"open = ! open\" :aria-pressed=\"open\">Expand</button>\n\n    <template x-if=\"open\">\n        <div>\n            Content...\n        </div>\n    </template>\n</div>\n<!-- END_VERBATIM -->\n\nNotice that `x-if` must be declared on a `<template>` tag. This is so that Alpine can leverage the existing browser behavior of the `<template>` element and use it as the source of the target `<div>` to be added and removed from the page.\n\nWhen `open` is true, Alpine will append the `<div>` to the `<template>` tag, and remove it when `open` is false.\n\n[→ Read more about `x-if`](/directives/if)\n\n<a name=\"toggling-with-transitions\"></a>\n## Toggling with transitions\n\nAlpine makes it simple to smoothly transition between \"shown\" and \"hidden\" states using the `x-transition` directive.\n\n> `x-transition` only works with `x-show`, not with `x-if`.\n\nHere is, again, the simple toggle example, but this time with transitions applied:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Expands</button>\n\n    <div x-show=\"open\" x-transition>\n        Content...\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <button @click=\"open = ! open\">Expands</button>\n\n    <div class=\"flex\">\n        <div x-show=\"open\" x-transition style=\"will-change: transform;\">\n            Content...\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nLet's zoom in on the portion of the template dealing with transitions:\n\n```alpine\n<div x-show=\"open\" x-transition>\n```\n\n`x-transition` by itself will apply sensible default transitions (fade and scale) to the toggle.\n\nThere are two ways to customize these transitions:\n\n* Transition helpers\n* Transition CSS classes.\n\nLet's take a look at each of these approaches:\n\n<a name=\"transition-helpers\"></a>\n### Transition helpers\n\nLet's say you wanted to make the duration of the transition longer, you can manually specify that using the `.duration` modifier like so:\n\n```alpine\n<div x-show=\"open\" x-transition.duration.500ms>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <button @click=\"open = ! open\">Expands</button>\n\n    <div class=\"flex\">\n        <div x-show=\"open\" x-transition.duration.500ms style=\"will-change: transform;\">\n            Content...\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNow the transition will last 500 milliseconds.\n\nIf you want to specify different values for in and out transitions, you can use `x-transition:enter` and `x-transition:leave`:\n\n```alpine\n<div\n    x-show=\"open\"\n    x-transition:enter.duration.500ms\n    x-transition:leave.duration.1000ms\n>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <button @click=\"open = ! open\">Expands</button>\n\n    <div class=\"flex\">\n        <div x-show=\"open\" x-transition:enter.duration.500ms x-transition:leave.duration.1000ms style=\"will-change: transform;\">\n            Content...\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nAdditionally, you can add either `.opacity` or `.scale` to only transition that property. For example:\n\n```alpine\n<div x-show=\"open\" x-transition.opacity>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <button @click=\"open = ! open\">Expands</button>\n\n    <div class=\"flex\">\n        <div x-show=\"open\" x-transition:enter.opacity.duration.500 x-transition:leave.opacity.duration.250>\n            Content...\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n[→ Read more about transition helpers](/directives/transition#the-transition-helper)\n\n<a name=\"transition-classes\"></a>\n### Transition classes\n\nIf you need more fine-grained control over the transitions in your application, you can apply specific CSS classes at specific phases of the transition using the following syntax (this example uses [Tailwind CSS](https://tailwindcss.com/)):\n\n```alpine\n<div\n    x-show=\"open\"\n    x-transition:enter=\"transition ease-out duration-300\"\n    x-transition:enter-start=\"opacity-0 transform scale-90\"\n    x-transition:enter-end=\"opacity-100 transform scale-100\"\n    x-transition:leave=\"transition ease-in duration-300\"\n    x-transition:leave-start=\"opacity-100 transform scale-100\"\n    x-transition:leave-end=\"opacity-0 transform scale-90\"\n>...</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <button @click=\"open = ! open\">Expands</button>\n\n    <div class=\"flex\">\n        <div\n            x-show=\"open\"\n            x-transition:enter=\"transition ease-out duration-300\"\n            x-transition:enter-start=\"opacity-0 transform scale-90\"\n            x-transition:enter-end=\"opacity-100 transform scale-100\"\n            x-transition:leave=\"transition ease-in duration-300\"\n            x-transition:leave-start=\"opacity-100 transform scale-100\"\n            x-transition:leave-end=\"opacity-0 transform scale-90\"\n            style=\"will-change: transform\"\n        >\n            Content...\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n[→ Read more about transition classes](/directives/transition#applying-css-classes)\n\n<a name=\"binding-attributes\"></a>\n## Binding attributes\n\nYou can add HTML attributes like `class`, `style`, `disabled`, etc... to elements in Alpine using the `x-bind` directive.\n\nHere is an example of a dynamically bound `class` attribute:\n\n```alpine\n<button\n    x-data=\"{ red: false }\"\n    x-bind:class=\"red ? 'bg-red' : ''\"\n    @click=\"red = ! red\"\n>\n    Toggle Red\n</button>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <button\n        x-data=\"{ red: false }\"\n        x-bind:style=\"red && 'background: red'\"\n        @click=\"red = ! red\"\n    >\n        Toggle Red\n    </button>\n</div>\n<!-- END_VERBATIM -->\n\n\nAs a shortcut, you can leave out the `x-bind` and use the shorthand `:` syntax directly:\n\n```alpine\n<button ... :class=\"red ? 'bg-red' : ''\">\n```\n\nToggling classes on and off based on data inside Alpine is a common need. Here's an example of toggling a class using Alpine's `class` binding object syntax: (Note: this syntax is only available for `class` attributes)\n\n```alpine\n<div x-data=\"{ open: true }\">\n    <span :class=\"{ 'hidden': ! open }\">...</span>\n</div>\n```\n\nNow the `hidden` class will be added to the element if `open` is false, and removed if `open` is true.\n\n<a name=\"looping-elements\"></a>\n## Looping elements\n\nAlpine allows for iterating parts of your template based on JavaScript data using the `x-for` directive. Here is a simple example:\n\n```alpine\n<div x-data=\"{ statuses: ['open', 'closed', 'archived'] }\">\n    <template x-for=\"status in statuses\">\n        <div x-text=\"status\"></div>\n    </template>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ statuses: ['open', 'closed', 'archived'] }\" class=\"demo\">\n    <template x-for=\"status in statuses\">\n        <div x-text=\"status\"></div>\n    </template>\n</div>\n<!-- END_VERBATIM -->\n\nSimilar to `x-if`, `x-for` must be applied to a `<template>` tag. Internally, Alpine will append the contents of `<template>` tag for every iteration in the loop.\n\nAs you can see the new `status` variable is available in the scope of the iterated templates.\n\n[→ Read more about `x-for`](/directives/for)\n\n<a name=\"inner-html\"></a>\n## Inner HTML\n\nAlpine makes it easy to control the HTML content of an element with the `x-html` directive.\n\n```alpine\n<div x-data=\"{ title: '<h1>Start Here</h1>' }\">\n    <div x-html=\"title\"></div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ title: '<h1>Start Here</h1>' }\" class=\"demo\">\n    <div x-html=\"title\"></div>\n</div>\n<!-- END_VERBATIM -->\n\nNow, Alpine will set the text content of the `<div>` with the element `<h1>Start Here</h1>`. When `title` changes, so will the contents of `<h1>`.\n\n> ⚠️ Only use on trusted content and never on user-provided content. ⚠️\n> Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.\n\n[→ Read more about `x-html`](/directives/html)\n"
  },
  {
    "path": "packages/docs/src/en/essentials.md",
    "content": "---\norder: 3\ntitle: Essentials\ntype: sub-directory\n---\n"
  },
  {
    "path": "packages/docs/src/en/globals/alpine-bind.md",
    "content": "---\norder: 3\ntitle: bind()\n---\n\n# Alpine.bind\n\n`Alpine.bind(...)` provides a way to re-use [`x-bind`](/directives/bind#bind-directives) objects within your application.\n\nHere's a simple example. Rather than binding attributes manually with Alpine:\n\n```alpine\n<button type=\"button\" @click=\"doSomething()\" :disabled=\"shouldDisable\"></button>\n```\n\nYou can bundle these attributes up into a reusable object and use `x-bind` to bind to that:\n\n```alpine\n<button x-bind=\"SomeButton\"></button>\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.bind('SomeButton', () => ({\n            type: 'button',\n\n            '@click'() {\n                this.doSomething()\n            },\n\n            ':disabled'() {\n                return this.shouldDisable\n            },\n        }))\n    })\n</script>\n```\n"
  },
  {
    "path": "packages/docs/src/en/globals/alpine-data.md",
    "content": "---\norder: 1\ntitle: data()\n---\n\n# Alpine.data\n\n`Alpine.data(...)` provides a way to re-use `x-data` contexts within your application.\n\nHere's a contrived `dropdown` component for example:\n\n```alpine\n<div x-data=\"dropdown\">\n    <button @click=\"toggle\">...</button>\n\n    <div x-show=\"open\">...</div>\n</div>\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.data('dropdown', () => ({\n            open: false,\n\n            toggle() {\n                this.open = ! this.open\n            }\n        }))\n    })\n</script>\n```\n\nAs you can see we've extracted the properties and methods we would usually define directly inside `x-data` into a separate Alpine component object.\n\n<a name=\"registering-from-a-bundle\"></a>\n## Registering from a bundle\n\nIf you've chosen to use a build step for your Alpine code, you should register your components in the following way:\n\n```js\nimport Alpine from 'alpinejs'\nimport dropdown from './dropdown.js'\n\nAlpine.data('dropdown', dropdown)\n\nAlpine.start()\n```\n\nThis assumes you have a file called `dropdown.js` with the following contents:\n\n```js\nexport default () => ({\n    open: false,\n\n    toggle() {\n        this.open = ! this.open\n    }\n})\n```\n\n<a name=\"initial-parameters\"></a>\n## Initial parameters\n\nIn addition to referencing `Alpine.data` providers by their name plainly (like `x-data=\"dropdown\"`), you can also reference them as functions (`x-data=\"dropdown()\"`). By calling them as functions directly, you can pass in additional parameters to be used when creating the initial data object like so:\n\n```alpine\n<div x-data=\"dropdown(true)\">\n```\n```js\nAlpine.data('dropdown', (initialOpenState = false) => ({\n    open: initialOpenState\n}))\n```\n\nNow, you can re-use the `dropdown` object, but provide it with different parameters as you need to.\n\n<a name=\"init-functions\"></a>\n## Init functions\n\nIf your component contains an `init()` method, Alpine will automatically execute it before it renders the component. For example:\n\n```js\nAlpine.data('dropdown', () => ({\n    init() {\n        // This code will be executed before Alpine\n        // initializes the rest of the component.\n    }\n}))\n```\n\n<a name=\"destroy-functions\"></a>\n## Destroy functions\n\nIf your component contains a `destroy()` method, Alpine will automatically execute it before cleaning up the component.\n\nA primary example for this is when registering an event handler with another library or a browser API that isn't available through Alpine.\nSee the following example code on how to use the `destroy()` method to clean up such a handler.\n\n```js\nAlpine.data('timer', () => ({\n    timer: null,\n    counter: 0,\n    init() {\n      // Register an event handler that references the component instance\n      this.timer = setInterval(() => {\n        console.log('Increased counter to', ++this.counter);\n      }, 1000);\n    },\n    destroy() {\n        // Detach the handler, avoiding memory and side-effect leakage\n        clearInterval(this.timer);\n    },\n}))\n```\n\nAn example where a component is destroyed is when using one inside an `x-if`:\n\n```html\n<span x-data=\"{ enabled: false }\">\n    <button @click.prevent=\"enabled = !enabled\">Toggle</button>\n\n    <template x-if=\"enabled\">\n        <span x-data=\"timer\" x-text=\"counter\"></span>\n    </template>\n</span>\n```\n\n<a name=\"using-magic-properties\"></a>\n## Using magic properties\n\nIf you want to access magic methods or properties from a component object, you can do so using the `this` context:\n\n```js\nAlpine.data('dropdown', () => ({\n    open: false,\n\n    init() {\n        this.$watch('open', () => {...})\n    }\n}))\n```\n\n<a name=\"encapsulating-directives-with-x-bind\"></a>\n## Encapsulating directives with `x-bind`\n\nIf you wish to re-use more than just the data object of a component, you can encapsulate entire Alpine template directives using `x-bind`.\n\nThe following is an example of extracting the templating details of our previous dropdown component using `x-bind`:\n\n```alpine\n<div x-data=\"dropdown\">\n    <button x-bind=\"trigger\"></button>\n\n    <div x-bind=\"dialogue\"></div>\n</div>\n```\n\n```js\nAlpine.data('dropdown', () => ({\n    open: false,\n\n    trigger: {\n        ['@click']() {\n            this.open = ! this.open\n        },\n    },\n\n    dialogue: {\n        ['x-show']() {\n            return this.open\n        },\n    },\n}))\n```\n"
  },
  {
    "path": "packages/docs/src/en/globals/alpine-store.md",
    "content": "---\norder: 2\ntitle: store()\n---\n\n# Alpine.store\n\nAlpine offers global state management through the `Alpine.store()` API.\n\n<a name=\"registering-a-store\"></a>\n## Registering A Store\n\nYou can either define an Alpine store inside of an `alpine:init` listener (in the case of including Alpine via a `<script>` tag), OR you can define it before manually calling `Alpine.start()` (in the case of importing Alpine into a build):\n\n**From a script tag:**\n```alpine\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.store('darkMode', {\n            on: false,\n\n            toggle() {\n                this.on = ! this.on\n            }\n        })\n    })\n</script>\n```\n\n**From a bundle:**\n```js\nimport Alpine from 'alpinejs'\n\nAlpine.store('darkMode', {\n    on: false,\n\n    toggle() {\n        this.on = ! this.on\n    }\n})\n\nAlpine.start()\n```\n\n<a name=\"accessing stores\"></a>\n## Accessing stores\n\nYou can access data from any store within Alpine expressions using the `$store` magic property:\n\n```alpine\n<div x-data :class=\"$store.darkMode.on && 'bg-black'\">...</div>\n```\n\nYou can also modify properties within the store and everything that depends on those properties will automatically react. For example:\n\n```alpine\n<button x-data @click=\"$store.darkMode.toggle()\">Toggle Dark Mode</button>\n```\n\nAdditionally, you can access a store externally using `Alpine.store()` by omitting the second parameter like so:\n\n```alpine\n<script>\n    Alpine.store('darkMode').toggle()\n</script>\n```\n\n<a name=\"initializing-stores\"></a>\n## Initializing stores\n\nIf you provide `init()` method in an Alpine store, it will be executed right after the store is registered. This is useful for initializing any state inside the store with sensible starting values.\n\n```alpine\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.store('darkMode', {\n            init() {\n                this.on = window.matchMedia('(prefers-color-scheme: dark)').matches\n            },\n\n            on: false,\n\n            toggle() {\n                this.on = ! this.on\n            }\n        })\n    })\n</script>\n```\n\nNotice the newly added `init()` method in the example above. With this addition, the `on` store variable will be set to the browser's color scheme preference before Alpine renders anything on the page.\n\n<a name=\"single-value-stores\"></a>\n## Single-value stores\n\nIf you don't need an entire object for a store, you can set and use any kind of data as a store.\n\nHere's the example from above but using it more simply as a boolean value:\n\n```alpine\n<button x-data @click=\"$store.darkMode = ! $store.darkMode\">Toggle Dark Mode</button>\n\n...\n\n<div x-data :class=\"$store.darkMode && 'bg-black'\">\n    ...\n</div>\n\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.store('darkMode', false)\n    })\n</script>\n```\n"
  },
  {
    "path": "packages/docs/src/en/globals.md",
    "content": "---\norder: 6\ntitle: Globals\nfont-type: mono\nprefix: Alpine.\ntype: sub-directory\n---\n"
  },
  {
    "path": "packages/docs/src/en/magics/data.md",
    "content": "---\norder: 8\nprefix: $\ntitle: data\n---\n\n# $data\n\n`$data` is a magic property that gives you access to the current Alpine data scope (generally provided by `x-data`).\n\nMost of the time, you can just access Alpine data within expressions directly. for example `x-data=\"{ message: 'Hello Caleb!' }\"` will allow you to do things like `x-text=\"message\"`.\n\nHowever, sometimes it is helpful to have an actual object that encapsulates all scope that you can pass around to other functions:\n\n```alpine\n<div x-data=\"{ greeting: 'Hello' }\">\n    <div x-data=\"{ name: 'Caleb' }\">\n        <button @click=\"sayHello($data)\">Say Hello</button>\n    </div>\n</div>\n\n<script>\n    function sayHello({ greeting, name }) {\n        alert(greeting + ' ' + name + '!')\n    }\n</script>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ greeting: 'Hello' }\" class=\"demo\">\n    <div x-data=\"{ name: 'Caleb' }\">\n        <button @click=\"sayHello($data)\">Say Hello</button>\n    </div>\n</div>\n\n<script>\n    function sayHello({ greeting, name }) {\n        alert(greeting + ' ' + name + '!')\n    }\n</script>\n<!-- END_VERBATIM -->\n\nNow when the button is pressed, the browser will alert `Hello Caleb!` because it was passed a data object that contained all the Alpine scope of the expression that called it (`@click=\"...\"`).\n\nMost applications won't need this magic property, but it can be very helpful for deeper, more complicated Alpine utilities.\n"
  },
  {
    "path": "packages/docs/src/en/magics/dispatch.md",
    "content": "---\norder: 5\ntitle: dispatch\n---\n\n# $dispatch\n\n`$dispatch` is a helpful shortcut for dispatching browser events.\n\n```alpine\n<div @notify=\"alert('Hello World!')\">\n    <button @click=\"$dispatch('notify')\">\n        Notify\n    </button>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data @notify=\"alert('Hello World!')\">\n        <button @click=\"$dispatch('notify')\">\n            Notify\n        </button>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nYou can also pass data along with the dispatched event if you wish. This data will be accessible as the `.detail` property of the event:\n\n```alpine\n<div @notify=\"alert($event.detail.message)\">\n    <button @click=\"$dispatch('notify', { message: 'Hello World!' })\">\n        Notify\n    </button>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data @notify=\"alert($event.detail.message)\">\n        <button @click=\"$dispatch('notify', { message: 'Hello World!' })\">Notify</button>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n\nUnder the hood, `$dispatch` is a wrapper for the more verbose API: `element.dispatchEvent(new CustomEvent(...))`\n\n**Note on event propagation**\n\nNotice that, because of [event bubbling](https://en.wikipedia.org/wiki/Event_bubbling), when you need to capture events dispatched from nodes that are under the same nesting hierarchy, you'll need to use the [`.window`](https://github.com/alpinejs/alpine#x-on) modifier:\n\n**Example:**\n\n```alpine\n<!-- 🚫 Won't work -->\n<div x-data>\n    <span @notify=\"...\"></span>\n    <button @click=\"$dispatch('notify')\">Notify</button>\n</div>\n\n<!-- ✅ Will work (because of .window) -->\n<div x-data>\n    <span @notify.window=\"...\"></span>\n    <button @click=\"$dispatch('notify')\">Notify</button>\n</div>\n```\n\n> The first example won't work because when `notify` is dispatched, it'll propagate to its common ancestor, the `div`, not its sibling, the `<span>`. The second example will work because the sibling is listening for `notify` at the `window` level, which the custom event will eventually bubble up to.\n\n<a name=\"dispatching-to-components\"></a>\n## Dispatching to other components\n\nYou can also take advantage of the previous technique to make your components talk to each other:\n\n**Example:**\n\n```alpine\n<div\n    x-data=\"{ title: 'Hello' }\"\n    @set-title.window=\"title = $event.detail\"\n>\n    <h1 x-text=\"title\"></h1>\n</div>\n\n<div x-data>\n    <button @click=\"$dispatch('set-title', 'Hello World!')\">Click me</button>\n</div>\n<!-- When clicked, the content of the h1 will set to \"Hello World!\". -->\n```\n\n<a name=\"dispatching-to-x-model\"></a>\n## Dispatching to x-model\n\nYou can also use `$dispatch()` to trigger data updates for `x-model` data bindings. For example:\n\n```alpine\n<div x-data=\"{ title: 'Hello' }\">\n    <span x-model=\"title\">\n        <button @click=\"$dispatch('input', 'Hello World!')\">Click me</button>\n        <!-- After the button is pressed, `x-model` will catch the bubbling \"input\" event, and update title. -->\n    </span>\n</div>\n```\n\nThis opens up the door for making custom input components whose value can be set via `x-model`.\n\n<a name=\"cancelable-events\"></a>\n## Cancelable events\n\nYou can use the returned value of `$dispatch` to check if the event was canceled or not. This is useful when you want to prevent the default behavior of an action.\n\n```alpine\n<div x-data x-on:open=\"$event.preventDefault()\">\n    <div x-data=\"{ open: false }\">\n        <button @click=\"if($dispatch('open')){ open = true; }\">Click me</button>\n        <!-- When the button is pressed an event is dispatched and only if the result is truthy (not prevented by any handler) the content will be shown. -->\n        \n        <div x-show=\"open\">\n            <h1>Hello</h1>\n        </div>\n    </div>\n</div>\n```\n\nThis could be useful when you want to prevent opening/closing a modal or something like that by using event handlers.\n\n<a name=\"overwriting-options\"></a>\n## Overwriting options\n\nYou can use the third parameter of `$dispatch` to overwrite the default options of the event. For example, you can set `bubbles` to `false`:\n\n```alpine\n<!-- 🚫 Won't work because the event is being listened on the parent element -->\n<div x-data=\"{ title: 'Hello' }\" x-on:update-title=\"title = $event.detail\">\n    <button @click=\"$dispatch('update-title', 'Hello World!', {bubbles: false})\">Click me</button>\n</div>\n\n<!-- ✅ Will work because the event is being listened on the same element -->\n<div x-data=\"{ title: 'Hello' }\">\n    <button x-on:update-title=\"title = $event.detail\" @click=\"$dispatch('update-title', 'Hello World!', {bubbles: false})\">Click me</button>\n</div>\n```\n\nThis is useful when you want to prevent the event from bubbling up to the parent elements.\n"
  },
  {
    "path": "packages/docs/src/en/magics/el.md",
    "content": "---\norder: 1\nprefix: $\ntitle: el\n---\n\n# $el\n\n`$el` is a magic property that can be used to retrieve the current DOM node.\n\n```alpine\n<button @click=\"$el.innerHTML = 'Hello World!'\">Replace me with \"Hello World!\"</button>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data>\n        <button @click=\"$el.textContent = 'Hello World!'\">Replace me with \"Hello World!\"</button>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n"
  },
  {
    "path": "packages/docs/src/en/magics/id.md",
    "content": "---\norder: 9\nprefix: $\ntitle: id\n---\n\n# $id\n\n`$id` is a magic property that can be used to generate an element's ID and ensure that it won't conflict with other IDs of the same name on the same page.\n\nThis utility is extremely helpful when building re-usable components (presumably in a back-end template) that might occur multiple times on a page, and make use of ID attributes.\n\nThings like input components, modals, listboxes, etc. will all benefit from this utility.\n\n<a name=\"basic-usage\"></a>\n## Basic usage\n\nSuppose you have two input elements on a page, and you want them to have a unique ID from each other, you can do the following:\n\n```alpine\n<input type=\"text\" :id=\"$id('text-input')\">\n<!-- id=\"text-input-1\" -->\n\n<input type=\"text\" :id=\"$id('text-input')\">\n<!-- id=\"text-input-2\" -->\n```\n\nAs you can see, `$id` takes in a string and spits out an appended suffix that is unique on the page.\n\n<a name=\"groups-with-x-id\"></a>\n## Grouping with x-id\n\nNow let's say you want to have those same two input elements, but this time you want `<label>` elements for each of them.\n\nThis presents a problem, you now need to be able to reference the same ID twice. One for the `<label>`'s `for` attribute, and the other for the `id` on the input.\n\nHere is a way that you might think to accomplish this and is totally valid:\n\n```alpine\n<div x-data=\"{ id: $id('text-input') }\">\n    <label :for=\"id\"> <!-- \"text-input-1\" -->\n    <input type=\"text\" :id=\"id\"> <!-- \"text-input-1\" -->\n</div>\n\n<div x-data=\"{ id: $id('text-input') }\">\n    <label :for=\"id\"> <!-- \"text-input-2\" -->\n    <input type=\"text\" :id=\"id\"> <!-- \"text-input-2\" -->\n</div>\n```\n\nThis approach is fine, however, having to name and store the ID in your component scope feels cumbersome.\n\nTo accomplish this same task in a more flexible way, you can use Alpine's `x-id` directive to declare an \"id scope\" for a set of IDs:\n\n```alpine\n<div x-id=\"['text-input']\">\n    <label :for=\"$id('text-input')\"> <!-- \"text-input-1\" -->\n    <input type=\"text\" :id=\"$id('text-input')\"> <!-- \"text-input-1\" -->\n</div>\n\n<div x-id=\"['text-input']\">\n    <label :for=\"$id('text-input')\"> <!-- \"text-input-2\" -->\n    <input type=\"text\" :id=\"$id('text-input')\"> <!-- \"text-input-2\" -->\n</div>\n```\n\nAs you can see, `x-id` accepts an array of ID names. Now any usages of `$id()` within that scope, will all use the same ID. Think of them as \"id groups\".\n\n<a name=\"nesting\"></a>\n## Nesting\n\nAs you might have intuited, you can freely nest these `x-id` groups, like so:\n\n```alpine\n<div x-id=\"['text-input']\">\n    <label :for=\"$id('text-input')\"> <!-- \"text-input-1\" -->\n    <input type=\"text\" :id=\"$id('text-input')\"> <!-- \"text-input-1\" -->\n\n    <div x-id=\"['text-input']\">\n        <label :for=\"$id('text-input')\"> <!-- \"text-input-2\" -->\n        <input type=\"text\" :id=\"$id('text-input')\"> <!-- \"text-input-2\" -->\n    </div>\n</div>\n```\n\n<a name=\"keyed-ids\"></a>\n## Keyed IDs (For Looping)\n\nSometimes, it is helpful to specify an additional suffix on the end of an ID for the purpose of identifying it within a loop.\n\nFor this, `$id()` accepts an optional second parameter that will be added as a suffix on the end of the generated ID.\n\nA common example of this need is something like a listbox component that uses the `aria-activedescendant` attribute to tell assistive technologies which element is \"active\" in the list:\n\n```alpine\n<ul\n    x-id=\"['list-item']\"\n    :aria-activedescendant=\"$id('list-item', activeItem.id)\"\n>\n    <template x-for=\"item in items\" :key=\"item.id\">\n        <li :id=\"$id('list-item', item.id)\">...</li>\n    </template>\n</ul>\n```\n\nThis is an incomplete example of a listbox, but it should still be helpful to demonstrate a scenario where you might need each ID in a group to still be unique to the page, but also be keyed within a loop so that you can reference individual IDs within that group.\n"
  },
  {
    "path": "packages/docs/src/en/magics/nextTick.md",
    "content": "---\norder: 6\nprefix: $\ntitle: nextTick\n---\n\n# $nextTick\n\n`$nextTick` is a magic property that allows you to only execute a given expression AFTER Alpine has made its reactive DOM updates. This is useful for times you want to interact with the DOM state AFTER it's reflected any data updates you've made.\n\n```alpine\n<div x-data=\"{ title: 'Hello' }\">\n    <button\n        @click=\"\n            title = 'Hello World!';\n            $nextTick(() => { console.log($el.innerText) });\n        \"\n        x-text=\"title\"\n    ></button>\n</div>\n```\n\nIn the above example, rather than logging \"Hello\" to the console, \"Hello World!\" will be logged because `$nextTick` was used to wait until Alpine was finished updating the DOM.\n\n<a name=\"promises\"></a>\n\n## Promises\n\n`$nextTick` returns a promise, allowing the use of `$nextTick` to pause an async function until after pending dom updates. When used like this, `$nextTick` also does not require an argument to be passed.\n\n```alpine\n<div x-data=\"{ title: 'Hello' }\">\n    <button\n        @click=\"\n            title = 'Hello World!';\n            await $nextTick();\n            console.log($el.innerText);\n        \"\n        x-text=\"title\"\n    ></button>\n</div>\n```\n"
  },
  {
    "path": "packages/docs/src/en/magics/refs.md",
    "content": "---\norder: 2\nprefix: $\ntitle: refs\n---\n\n# $refs\n\n`$refs` is a magic property that can be used to retrieve DOM elements marked with `x-ref` inside the component. This is useful when you need to manually manipulate DOM elements. It's often used as a more succinct, scoped, alternative to `document.querySelector`.\n\n```alpine\n<button @click=\"$refs.text.remove()\">Remove Text</button>\n\n<span x-ref=\"text\">Hello 👋</span>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data>\n        <button @click=\"$refs.text.remove()\">Remove Text</button>\n\n        <div class=\"pt-4\" x-ref=\"text\">Hello 👋</div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNow, when the `<button>` is pressed, the `<span>` will be removed.\n\n<a name=\"limitations\"></a>\n### Limitations\n\nIn V2 it was possible to bind `$refs` to elements dynamically, like seen below:\n\n```alpine\n<template x-for=\"item in items\" :key=\"item.id\" >\n    <div :x-ref=\"item.name\">\n    some content ...\n    </div>\n</template>\n```\n\nHowever, in V3, `$refs` can only be accessed for elements that are created statically. So for the example above: if you were expecting the value of `item.name` inside of `$refs` to be something like *Batteries*, you should be aware that `$refs` will actually contain the literal string `'item.name'` and not *Batteries*.\n"
  },
  {
    "path": "packages/docs/src/en/magics/root.md",
    "content": "---\norder: 7\nprefix: $\ntitle: root\n---\n\n# $root\n\n`$root` is a magic property that can be used to retrieve the root element of any Alpine component. In other words the closest element up the DOM tree that contains `x-data`.\n\n```alpine\n<div x-data data-message=\"Hello World!\">\n    <button @click=\"alert($root.dataset.message)\">Say Hi</button>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data data-message=\"Hello World!\" class=\"demo\">\n    <button @click=\"alert($root.dataset.message)\">Say Hi</button>\n</div>\n<!-- END_VERBATIM -->\n"
  },
  {
    "path": "packages/docs/src/en/magics/store.md",
    "content": "---\norder: 3\nprefix: $\ntitle: store\n---\n\n# $store\n\nYou can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](/globals/alpine-store). For example:\n\n```alpine\n<button x-data @click=\"$store.darkMode.toggle()\">Toggle Dark Mode</button>\n\n...\n\n<div x-data :class=\"$store.darkMode.on && 'bg-black'\">\n    ...\n</div>\n\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.store('darkMode', {\n            on: false,\n\n            toggle() {\n                this.on = ! this.on\n            }\n        })\n    })\n</script>\n```\n\nGiven that we've registered the `darkMode` store and set `on` to \"false\", when the `<button>` is pressed, `on` will be \"true\" and the background color of the page will change to black.\n\n<a name=\"single-value-stores\"></a>\n## Single-value stores\n\nIf you don't need an entire object for a store, you can set and use any kind of data as a store.\n\nHere's the example from above but using it more simply as a boolean value:\n\n```alpine\n<button x-data @click=\"$store.darkMode = ! $store.darkMode\">Toggle Dark Mode</button>\n\n...\n\n<div x-data :class=\"$store.darkMode && 'bg-black'\">\n    ...\n</div>\n\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.store('darkMode', false)\n    })\n</script>\n```\n\n[→ Read more about Alpine stores](/globals/alpine-store)\n"
  },
  {
    "path": "packages/docs/src/en/magics/watch.md",
    "content": "---\norder: 4\ntitle: watch\n---\n\n# $watch\n\nYou can \"watch\" a component property using the `$watch` magic method. For example:\n\n```alpine\n<div x-data=\"{ open: false }\" x-init=\"$watch('open', value => console.log(value))\">\n    <button @click=\"open = ! open\">Toggle Open</button>\n</div>\n```\n\nIn the above example, when the button is pressed and `open` is changed, the provided callback will fire and `console.log` the new value:\n\nYou can watch deeply nested properties using \"dot\" notation\n\n```alpine\n<div x-data=\"{ foo: { bar: 'baz' }}\" x-init=\"$watch('foo.bar', value => console.log(value))\">\n    <button @click=\"foo.bar = 'bob'\">Toggle Open</button>\n</div>\n```\n\nWhen the `<button>` is pressed, `foo.bar` will be set to \"bob\", and \"bob\" will be logged to the console.\n\n<a name=\"getting-the-old-value\"></a>\n### Getting the \"old\" value\n\n`$watch` keeps track of the previous value of the property being watched, You can access it using the optional second argument to the callback like so:\n\n```alpine\n<div x-data=\"{ open: false }\" x-init=\"$watch('open', (value, oldValue) => console.log(value, oldValue))\">\n    <button @click=\"open = ! open\">Toggle Open</button>\n</div>\n```\n\n<a name=\"deep-watching\"></a>\n### Deep watching\n\n`$watch` automatically watches from changes at any level but you should keep in mind that, when a change is detected, the watcher will return the value of the observed property, not the value of the subproperty that has changed.\n\n```alpine\n<div x-data=\"{ foo: { bar: 'baz' }}\" x-init=\"$watch('foo', (value, oldValue) => console.log(value, oldValue))\">\n    <button @click=\"foo.bar = 'bob'\">Update</button>\n</div>\n```\n\nWhen the `<button>` is pressed, `foo.bar` will be set to \"bob\", and \"{bar: 'bob'} {bar: 'baz'}\" will be logged to the console (new and old value).\n\n> ⚠️ Changing a property of a \"watched\" object as a side effect of the `$watch` callback will generate an infinite loop and eventually error. \n\n```alpine\n<!-- 🚫 Infinite loop -->\n<div x-data=\"{ foo: { bar: 'baz', bob: 'lob' }}\" x-init=\"$watch('foo', value => foo.bob = foo.bar)\">\n    <button @click=\"foo.bar = 'bob'\">Update</button>\n</div>\n```\n"
  },
  {
    "path": "packages/docs/src/en/magics.md",
    "content": "---\norder: 5\ntitle: Magics\nprefix: $\nfont-type: mono\ntype: sub-directory\n---\n"
  },
  {
    "path": "packages/docs/src/en/plugins/anchor.md",
    "content": "---\norder: 7\ntitle: Anchor\ndescription: Anchor an element's positioning to another element on the page\ngraph_image: https://alpinejs.dev/social_anchor.jpg\n---\n\n# Anchor Plugin\n\nAlpine's Anchor plugin allows you to easily anchor an element's positioning to another element on the page.\n\nThis functionality is useful when creating dropdown menus, popovers, dialogs, and tooltips with Alpine.\n\nThe \"anchoring\" functionality used in this plugin is provided by the [Floating UI](https://floating-ui.com/) project.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Anchor from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/anchor\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport anchor from '@alpinejs/anchor'\n\nAlpine.plugin(anchor)\n\n...\n```\n\n<a name=\"x-anchor\"></a>\n## x-anchor\n\nThe primary API for using this plugin is the `x-anchor` directive.\n\nTo use this plugin, add the `x-anchor` directive to any element and pass it a reference to the element you want to anchor it's position to (often a button on the page).\n\nBy default, `x-anchor` will set the element's CSS to `position: absolute` and the appropriate `top` and `left` values. If the anchored element is normally displayed below the reference element but doesn't have room on the page, it's styling will be adjusted to render above the element.\n\nFor example, here's a simple dropdown anchored to the button that toggles it:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n\n    <div x-show=\"open\" x-anchor=\"$refs.button\">\n        Dropdown content\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo overflow-hidden\">\n    <div class=\"flex justify-center\">\n        <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n    </div>\n\n    <div x-show=\"open\" x-anchor=\"$refs.button\" class=\"bg-white rounded p-4 border shadow z-10\">\n        Dropdown content\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"positioning\"></a>\n## Positioning\n\n`x-anchor` allows you to customize the positioning of the anchored element using the following modifiers:\n\n* Bottom: `.bottom`, `.bottom-start`, `.bottom-end`\n* Top: `.top`, `.top-start`, `.top-end`\n* Left: `.left`, `.left-start`, `.left-end`\n* Right: `.right`, `.right-start`, `.right-end`\n\nHere is an example of using `.bottom-start` to position a dropdown below and to the right of the reference element:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n\n    <div x-show=\"open\" x-anchor.bottom-start=\"$refs.button\">\n        Dropdown content\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo overflow-hidden\">\n    <div class=\"flex justify-center\">\n        <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n    </div>\n\n    <div x-show=\"open\" x-anchor.bottom-start=\"$refs.button\" class=\"bg-white rounded p-4 border shadow z-10\">\n        Dropdown content\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"offset\"></a>\n## Offset\n\nYou can add an offset to your anchored element using the `.offset.[px value]` modifier like so:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n\n    <div x-show=\"open\" x-anchor.offset.10=\"$refs.button\">\n        Dropdown content\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo overflow-hidden\">\n    <div class=\"flex justify-center\">\n        <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n    </div>\n\n    <div x-show=\"open\" x-anchor.offset.10=\"$refs.button\" class=\"bg-white rounded p-4 border shadow z-10\">\n        Dropdown content\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"manual-styling\"></a>\n## Manual styling\n\nBy default, `x-anchor` applies the positioning styles to your element under the hood. If you'd prefer full control over styling, you can pass the `.no-style` modifer and use the `$anchor` magic to access the values inside another Alpine expression.\n\nBelow is an example of bypassing `x-anchor`'s internal styling and instead applying the styles yourself using `x-bind:style`:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n\n    <div\n        x-show=\"open\"\n        x-anchor.no-style=\"$refs.button\"\n        x-bind:style=\"{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }\"\n    >\n        Dropdown content\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo overflow-hidden\">\n    <div class=\"flex justify-center\">\n        <button x-ref=\"button\" @click=\"open = ! open\">Toggle</button>\n    </div>\n\n    <div\n        x-show=\"open\"\n        x-anchor.no-style=\"$refs.button\"\n        x-bind:style=\"{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }\"\n        class=\"bg-white rounded p-4 border shadow z-10\"\n    >\n        Dropdown content\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"from-id\"></a>\n## Anchor to an ID\n\nThe examples thus far have all been anchoring to other elements using Alpine refs.\n\nBecause `x-anchor` accepts a reference to any DOM element, you can use utilities like `document.getElementById()` to anchor to an element by its `id` attribute:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button id=\"trigger\" @click=\"open = ! open\">Toggle</button>\n\n    <div x-show=\"open\" x-anchor=\"document.getElementById('trigger')\">\n        Dropdown content\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo overflow-hidden\">\n    <div class=\"flex justify-center\">\n        <button class=\"trigger\" @click=\"open = ! open\">Toggle</button>\n    </div>\n\n\n    <div x-show=\"open\" x-anchor=\"document.querySelector('.trigger')\">\n        Dropdown content\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n"
  },
  {
    "path": "packages/docs/src/en/plugins/collapse.md",
    "content": "---\norder: 6\ntitle: Collapse\ndescription: Collapse and expand elements with robust animations\ngraph_image: https://alpinejs.dev/social_collapse.jpg\n---\n\n# Collapse Plugin\n\nAlpine's Collapse plugin allows you to expand and collapse elements using smooth animations.\n\nBecause this behavior and implementation differs from Alpine's standard transition system, this functionality was made into a dedicated plugin.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Collapse from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/collapse\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport collapse from '@alpinejs/collapse'\n\nAlpine.plugin(collapse)\n\n...\n```\n\n<a name=\"x-collapse\"></a>\n## x-collapse\n\nThe primary API for using this plugin is the `x-collapse` directive.\n\n`x-collapse` can only exist on an element that already has an `x-show` directive. When added to an `x-show` element, `x-collapse` will smoothly \"collapse\" and \"expand\" the element when it's visibility is toggled by animating its height property.\n\nFor example:\n\n```alpine\n<div x-data=\"{ expanded: false }\">\n    <button @click=\"expanded = ! expanded\">Toggle Content</button>\n\n    <p x-show=\"expanded\" x-collapse>\n        ...\n    </p>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ expanded: false }\" class=\"demo\">\n    <button @click=\"expanded = ! expanded\">Toggle Content</button>\n\n    <div x-show=\"expanded\" x-collapse>\n        <div class=\"pt-4\">\n            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"modifiers\"></a>\n## Modifiers\n\n<a name=\"dot-duration\"></a>\n### .duration\n\nYou can customize the duration of the collapse/expand transition by appending the `.duration` modifier like so:\n\n```alpine\n<div x-data=\"{ expanded: false }\">\n    <button @click=\"expanded = ! expanded\">Toggle Content</button>\n\n    <p x-show=\"expanded\" x-collapse.duration.1000ms>\n        ...\n    </p>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ expanded: false }\" class=\"demo\">\n    <button @click=\"expanded = ! expanded\">Toggle Content</button>\n\n    <div x-show=\"expanded\" x-collapse.duration.1000ms>\n        <div class=\"pt-4\">\n            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"dot-min\"></a>\n### .min\n\nBy default, `x-collapse`'s \"collapsed\" state sets the height of the element to `0px` and also sets `display: none;`.\n\nSometimes, it's helpful to \"cut-off\" an element rather than fully hide it. By using the `.min` modifier, you can set a minimum height for `x-collapse`'s \"collapsed\" state. For example:\n\n```alpine\n<div x-data=\"{ expanded: false }\">\n    <button @click=\"expanded = ! expanded\">Toggle Content</button>\n\n    <p x-show=\"expanded\" x-collapse.min.50px>\n        ...\n    </p>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ expanded: false }\" class=\"demo\">\n    <button @click=\"expanded = ! expanded\">Toggle Content</button>\n\n    <div x-show=\"expanded\" x-collapse.min.50px>\n        <div class=\"pt-4\">\n            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n"
  },
  {
    "path": "packages/docs/src/en/plugins/focus.md",
    "content": "---\norder: 5\ntitle: Focus\ndescription: Easily manage focus within the page\ngraph_image: https://alpinejs.dev/social_focus.jpg\n---\n\n> Notice: This Plugin was previously called \"Trap\". Trap's functionality has been absorbed into this plugin along with additional functionality. You can swap Trap for Focus without any breaking changes.\n\n# Focus Plugin\n\nAlpine's Focus plugin allows you to manage focus on a page.\n\n> This plugin internally makes heavy use of the open source tool: [Tabbable](https://github.com/focus-trap/tabbable). Big thanks to that team for providing a much needed solution to this problem.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Focus from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/focus\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport focus from '@alpinejs/focus'\n\nAlpine.plugin(focus)\n\n...\n```\n\n<a name=\"x-trap\"></a>\n## x-trap\n\nFocus offers a dedicated API for trapping focus within an element: the `x-trap` directive.\n\n`x-trap` accepts a JS expression. If the result of that expression is true, then the focus will be trapped inside that element until the expression becomes false, then at that point, focus will be returned to where it was previously.\n\nFor example:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = true\">Open Dialog</button>\n\n    <span x-show=\"open\" x-trap=\"open\">\n        <p>...</p>\n\n        <input type=\"text\" placeholder=\"Some input...\">\n\n        <input type=\"text\" placeholder=\"Some other input...\">\n\n        <button @click=\"open = false\">Close Dialog</button>\n    </span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <div :class=\"open && 'opacity-50'\">\n        <button x-on:click=\"open = true\">Open Dialog</button>\n    </div>\n\n    <div x-show=\"open\" x-trap=\"open\" class=\"mt-4 space-y-4 p-4 border bg-yellow-100\" @keyup.escape.window=\"open = false\">\n        <strong>\n            <div>Focus is now \"trapped\" inside this dialog, meaning you can only click/focus elements within this yellow dialog. If you press tab repeatedly, the focus will stay within this dialog.</div>\n        </strong>\n\n        <div>\n            <input type=\"text\" placeholder=\"Some input...\">\n        </div>\n\n        <div>\n            <input type=\"text\" placeholder=\"Some other input...\">\n        </div>\n\n        <div>\n            <button @click=\"open = false\">Close Dialog</button>\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"nesting\"></a>\n### Nesting dialogs\n\nSometimes you may want to nest one dialog inside another. `x-trap` makes this trivial and handles it automatically.\n\n`x-trap` keeps track of newly \"trapped\" elements and stores the last actively focused element. Once the element is \"untrapped\" then the focus will be returned to where it was originally.\n\nThis mechanism is recursive, so you can trap focus within an already trapped element infinite times, then \"untrap\" each element successively.\n\nHere is nesting in action:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = true\">Open Dialog</button>\n\n    <span x-show=\"open\" x-trap=\"open\">\n\n        ...\n\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = true\">Open Nested Dialog</button>\n\n            <span x-show=\"open\" x-trap=\"open\">\n\n                ...\n\n                <button @click=\"open = false\">Close Nested Dialog</button>\n            </span>\n        </div>\n\n        <button @click=\"open = false\">Close Dialog</button>\n    </span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ open: false }\" class=\"demo\">\n    <div :class=\"open && 'opacity-50'\">\n        <button x-on:click=\"open = true\">Open Dialog</button>\n    </div>\n\n    <div x-show=\"open\" x-trap=\"open\" class=\"mt-4 space-y-4 p-4 border bg-yellow-100\" @keyup.escape.window=\"open = false\">\n        <div>\n            <input type=\"text\" placeholder=\"Some input...\">\n        </div>\n\n        <div>\n            <input type=\"text\" placeholder=\"Some other input...\">\n        </div>\n\n        <div x-data=\"{ open: false }\">\n            <div :class=\"open && 'opacity-50'\">\n                <button x-on:click=\"open = true\">Open Nested Dialog</button>\n            </div>\n\n            <div x-show=\"open\" x-trap=\"open\" class=\"mt-4 space-y-4 p-4 border border-gray-500 bg-yellow-200\" @keyup.escape.window=\"open = false\">\n                <strong>\n                    <div>Focus is now \"trapped\" inside this nested dialog. You cannot focus anything inside the outer dialog while this is open. If you close this dialog, focus will be returned to the last known active element.</div>\n                </strong>\n\n                <div>\n                    <input type=\"text\" placeholder=\"Some input...\">\n                </div>\n\n                <div>\n                    <input type=\"text\" placeholder=\"Some other input...\">\n                </div>\n\n                <div>\n                    <button @click=\"open = false\">Close Nested Dialog</button>\n                </div>\n            </div>\n        </div>\n\n        <div>\n            <button @click=\"open = false\">Close Dialog</button>\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"modifiers\"></a>\n### Modifiers\n\n<a name=\"inert\"></a>\n#### .inert\n\nWhen building things like dialogs/modals, it's recommended to hide all the other elements on the page from screen readers when trapping focus.\n\nBy adding `.inert` to `x-trap`, when focus is trapped, all other elements on the page will receive `aria-hidden=\"true\"` attributes, and when focus trapping is disabled, those attributes will also be removed.\n\n```alpine\n<!-- When `open` is `false`: -->\n<body x-data=\"{ open: false }\">\n    <div x-trap.inert=\"open\" ...>\n        ...\n    </div>\n\n    <div>\n        ...\n    </div>\n</body>\n\n<!-- When `open` is `true`: -->\n<body x-data=\"{ open: true }\">\n    <div x-trap.inert=\"open\" ...>\n        ...\n    </div>\n\n    <div aria-hidden=\"true\">\n        ...\n    </div>\n</body>\n```\n\n<a name=\"noscroll\"></a>\n#### .noscroll\n\nWhen building dialogs/modals with Alpine, it's recommended that you disable scrolling for the surrounding content when the dialog is open.\n\n`x-trap` allows you to do this automatically with the `.noscroll` modifiers.\n\nBy adding `.noscroll`, Alpine will remove the scrollbar from the page and block users from scrolling down the page while a dialog is open.\n\nFor example:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = true\">Open Dialog</button>\n\n    <div x-show=\"open\" x-trap.noscroll=\"open\">\n        Dialog Contents\n\n        <button @click=\"open = false\">Close Dialog</button>\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ open: false }\">\n        <button @click=\"open = true\">Open Dialog</button>\n\n        <div x-show=\"open\" x-trap.noscroll=\"open\" class=\"border mt-4 p-4\">\n            <div class=\"mb-4 text-bold\">Dialog Contents</div>\n\n            <p class=\"mb-4 text-gray-600 text-sm\">Notice how you can no longer scroll on this page while this dialog is open.</p>\n\n            <button class=\"mt-4\" @click=\"open = false\">Close Dialog</button>\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"noreturn\"></a>\n#### .noreturn\n\nSometimes you may not want focus to be returned to where it was previously. Consider a dropdown that's triggered upon focusing an input, returning focus to the input on close will just trigger the dropdown to open again.\n\n`x-trap` allows you to disable this behavior with the `.noreturn` modifier.\n\nBy adding `.noreturn`, Alpine will not return focus upon x-trap evaluating to false.\n\nFor example:\n\n```alpine\n<div x-data=\"{ open: false }\" x-trap.noreturn=\"open\">\n    <input type=\"search\" placeholder=\"search for something\" />\n\n    <div x-show=\"open\">\n        Search results\n\n        <button @click=\"open = false\">Close</button>\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div\n        x-data=\"{ open: false }\"\n        x-trap.noreturn=\"open\"\n        @click.outside=\"open = false\"\n        @keyup.escape.prevent.stop=\"open = false\"\n    >\n        <input type=\"search\" placeholder=\"search for something\"\n            @focus=\"open = true\"\n            @keyup.escape.prevent=\"$el.blur()\"\n        />\n\n        <div x-show=\"open\">\n            <div class=\"mb-4 text-bold\">Search results</div>\n\n            <p class=\"mb-4 text-gray-600 text-sm\">Notice when closing this dropdown, focus is not returned to the input.</p>\n\n            <button class=\"mt-4\" @click=\"open = false\">Close Dialog</button>\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"noautofocus\"></a>\n#### .noautofocus\n\nBy default, when `x-trap` traps focus within an element, it focuses the first focussable element within that element. This is a sensible default, however there are times where you may want to disable this behavior and not automatically focus any elements when `x-trap` engages.\n\nBy adding `.noautofocus`, Alpine will not automatically focus any elements when trapping focus.\n\n<a name=\"focus-magic\"></a>\n## $focus\n\nThis plugin offers many smaller utilities for managing focus within a page. These utilities are exposed via the `$focus` magic.\n\n| Property | Description |\n| ---       | --- |\n| `focus(el)`   | Focus the passed element (handling annoyances internally: using nextTick, etc.) |\n| `focusable(el)`   | Detect whether or not an element is focusable |\n| `focusables()`   | Get all \"focusable\" elements within the current element |\n| `focused()`   | Get the currently focused element on the page |\n| `lastFocused()`   | Get the last focused element on the page |\n| `within(el)`   | Specify an element to scope the `$focus` magic to (the current element by default) |\n| `first()`   | Focus the first focusable element |\n| `last()`   | Focus the last focusable element |\n| `next()`   | Focus the next focusable element |\n| `previous()`   | Focus the previous focusable element |\n| `noscroll()`   | Prevent scrolling to the element about to be focused |\n| `wrap()`   | When retrieving \"next\" or \"previous\" use \"wrap around\" (ex. returning the first element if getting the \"next\" element of the last element) |\n| `getFirst()`   | Retrieve the first focusable element |\n| `getLast()`   | Retrieve the last focusable element |\n| `getNext()`   | Retrieve the next focusable element |\n| `getPrevious()`   | Retrieve the previous focusable element |\n\nLet's walk through a few examples of these utilities in use. The example below allows the user to control focus within the group of buttons using the arrow keys. You can test this by clicking on a button, then using the arrow keys to move focus around:\n\n```alpine\n<div\n    @keydown.right=\"$focus.next()\"\n    @keydown.left=\"$focus.previous()\"\n>\n    <button>First</button>\n    <button>Second</button>\n    <button>Third</button>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n<div\n    x-data\n    @keydown.right=\"$focus.next()\"\n    @keydown.left=\"$focus.previous()\"\n>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">First</button>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">Second</button>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">Third</button>\n</div>\n(Click a button, then use the arrow keys to move left and right)\n</div>\n<!-- END_VERBATIM -->\n\nNotice how if the last button is focused, pressing \"right arrow\" won't do anything. Let's add the `.wrap()` method so that focus \"wraps around\":\n\n```alpine\n<div\n    @keydown.right=\"$focus.wrap().next()\"\n    @keydown.left=\"$focus.wrap().previous()\"\n>\n    <button>First</button>\n    <button>Second</button>\n    <button>Third</button>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n<div\n    x-data\n    @keydown.right=\"$focus.wrap().next()\"\n    @keydown.left=\"$focus.wrap().previous()\"\n>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">First</button>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">Second</button>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">Third</button>\n</div>\n(Click a button, then use the arrow keys to move left and right)\n</div>\n<!-- END_VERBATIM -->\n\nNow, let's add two buttons, one to focus the first element in the button group, and another focus the last element:\n\n```alpine\n<button @click=\"$focus.within($refs.buttons).first()\">Focus \"First\"</button>\n<button @click=\"$focus.within($refs.buttons).last()\">Focus \"Last\"</button>\n\n<div\n    x-ref=\"buttons\"\n    @keydown.right=\"$focus.wrap().next()\"\n    @keydown.left=\"$focus.wrap().previous()\"\n>\n    <button>First</button>\n    <button>Second</button>\n    <button>Third</button>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-data>\n<button @click=\"$focus.within($refs.buttons).first()\">Focus \"First\"</button>\n<button @click=\"$focus.within($refs.buttons).last()\">Focus \"Last\"</button>\n\n<hr class=\"mt-2 mb-2\"/>\n\n<div\n    x-ref=\"buttons\"\n    @keydown.right=\"$focus.wrap().next()\"\n    @keydown.left=\"$focus.wrap().previous()\"\n>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">First</button>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">Second</button>\n    <button class=\"focus:outline-none focus:ring-2 focus:ring-cyan-400\">Third</button>\n</div>\n</div>\n<!-- END_VERBATIM -->\n\nNotice that we needed to add a `.within()` method for each button so that `$focus` knows to scope itself to a different element (the `div` wrapping the buttons).\n"
  },
  {
    "path": "packages/docs/src/en/plugins/intersect.md",
    "content": "---\norder: 2\ntitle: Intersect\ndescription: An Alpine convenience wrapper for Intersection Observer that allows you to easily react when an element enters the viewport.\ngraph_image: https://alpinejs.dev/social_intersect.jpg\n---\n\n# Intersect Plugin\n\nAlpine's Intersect plugin is a convenience wrapper for [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) that allows you to easily react when an element enters the viewport.\n\nThis is useful for: lazy loading images and other content, triggering animations, infinite scrolling, logging \"views\" of content, etc.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Intersect from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/intersect\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport intersect from '@alpinejs/intersect'\n\nAlpine.plugin(intersect)\n\n...\n```\n\n<a name=\"x-intersect\"></a>\n## x-intersect\n\nThe primary API for using this plugin is `x-intersect`. You can add `x-intersect` to any element within an Alpine component, and when that component enters the viewport (is scrolled into view), the provided expression will execute.\n\nFor example, in the following snippet, `shown` will remain `false` until the element is scrolled into view. At that point, the expression will execute and `shown` will become `true`:\n\n```alpine\n<div x-data=\"{ shown: false }\" x-intersect=\"shown = true\">\n    <div x-show=\"shown\" x-transition>\n        I'm in the viewport!\n    </div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" style=\"height: 60px; overflow-y: scroll;\" x-data x-ref=\"root\">\n    <a href=\"#\" @click.prevent=\"$refs.root.scrollTo({ top: $refs.root.scrollHeight, behavior: 'smooth' })\">Scroll Down 👇</a>\n    <div style=\"height: 50vh\"></div>\n    <div x-data=\"{ shown: false }\" x-intersect=\"shown = true\" id=\"yoyo\">\n        <div x-show=\"shown\" x-transition.duration.1000ms>\n            I'm in the viewport!\n        </div>\n        <div x-show=\"! shown\">&nbsp;</div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"x-intersect-enter\"></a>\n### x-intersect:enter\n\nThe `:enter` suffix is an alias of `x-intersect`, and works the same way:\n\n```alpine\n<div x-intersect:enter=\"shown = true\">...</div>\n```\n\nYou may choose to use this for clarity when also using the `:leave` suffix.\n\n<a name=\"x-intersect-leave\"></a>\n### x-intersect:leave\n\nAppending `:leave` runs your expression when the element leaves the viewport.\n\n```alpine\n<div x-intersect:leave=\"shown = true\">...</div>\n```\n> By default, this means the *whole element* is not in the viewport. Use `x-intersect:leave.full` to run your expression when only *parts of the element* are not in the viewport.\n\n[→ Read more about the underlying `IntersectionObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\n\n<a name=\"modifiers\"></a>\n## Modifiers\n\n<a name=\"once\"></a>\n### .once\n\nSometimes it's useful to evaluate an expression only the first time an element enters the viewport and not subsequent times. For example when triggering \"enter\" animations. In these cases, you can add the `.once` modifier to `x-intersect` to achieve this.\n\n```alpine\n<div x-intersect.once=\"shown = true\">...</div>\n```\n\n<a name=\"half\"></a>\n### .half\n\nEvaluates the expression once the intersection threshold exceeds `0.5`.\n\nUseful for elements where it's important to show at least part of the element.\n\n```alpine\n<div x-intersect.half=\"shown = true\">...</div> // when `0.5` of the element is in the viewport\n```\n\n<a name=\"full\"></a>\n### .full\n\nEvaluates the expression once the intersection threshold exceeds `0.99`.\n\nUseful for elements where it's important to show the whole element.\n\n```alpine\n<div x-intersect.full=\"shown = true\">...</div> // when `0.99` of the element is in the viewport\n```\n\n<a name=\"threshold\"></a>\n### .threshold\n\nAllows you to control the `threshold` property of the underlying `IntersectionObserver`:\n\nThis value should be in the range of \"0-100\". A value of \"0\" means: trigger an \"intersection\" if ANY part of the element enters the viewport (the default behavior). While a value of \"100\" means: don't trigger an \"intersection\" unless the entire element has entered the viewport.\n\nAny value in between is a percentage of those two extremes.\n\nFor example if you want to trigger an intersection after half of the element has entered the page, you can use `.threshold.50`:\n\n```alpine\n<div x-intersect.threshold.50=\"shown = true\">...</div> // when 50% of the element is in the viewport\n```\n\nIf you wanted to trigger only when 5% of the element has entered the viewport, you could use: `.threshold.05`, and so on and so forth.\n\n<a name=\"margin\"></a>\n### .margin\n\nAllows you to control the `rootMargin` property of the underlying `IntersectionObserver`.\nThis effectively tweaks the size of the viewport boundary. Positive values\nexpand the boundary beyond the viewport, and negative values shrink it inward. The values\nwork like CSS margin: one value for all sides; two values for top/bottom, left/right; or\nfour values for top, right, bottom, left. You can use `px` and `%` values, or use a bare number to\nget a pixel value.\n\n```alpine\n<div x-intersect.margin.200px=\"loaded = true\">...</div> // Load when the element is within 200px of the viewport\n```\n\n```alpine\n<div x-intersect:leave.margin.10%.25px.25.25px=\"loaded = false\">...</div> // Unload when the element gets within 10% of the top of the viewport, or within 25px of the other three edges\n```\n\n```alpine\n<div x-intersect.margin.-100px=\"visible = true\">...</div> // Mark as visible when element is more than 100 pixels into the viewport.\n```\n"
  },
  {
    "path": "packages/docs/src/en/plugins/mask.md",
    "content": "---\norder: 1\ntitle: Mask\ndescription: Automatically format text fields as users type\ngraph_image: https://alpinejs.dev/social_mask.jpg\n---\n\n# Mask Plugin\n\nAlpine's Mask plugin allows you to automatically format a text input field as a user types.\n\nThis is useful for many different types of inputs: phone numbers, credit cards, dollar amounts, account numbers, dates, etc.\n\n<a name=\"installation\"></a>\n\n## Installation\n\n<div x-data=\"{ expanded: false }\">\n<div class=\" relative\">\n<div x-show=\"! expanded\" class=\"absolute inset-0 flex justify-start items-end bg-gradient-to-t from-white to-[#ffffff66]\"></div>\n<div x-show=\"expanded\" x-collapse.min.80px class=\"markdown\">\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/mask@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Mask from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/mask\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport mask from '@alpinejs/mask'\n\nAlpine.plugin(mask)\n\n...\n```\n\n</div>\n</div>\n<button :aria-expanded=\"expanded\" @click=\"expanded = ! expanded\" class=\"text-cyan-600 font-medium underline\">\n    <span x-text=\"expanded ? 'Hide' : 'Show more'\">Show</span> <span x-text=\"expanded ? '↑' : '↓'\">↓</span>\n</button>\n</div>\n\n<a name=\"x-mask\"></a>\n\n## x-mask\n\nThe primary API for using this plugin is the `x-mask` directive.\n\nLet's start by looking at the following simple example of a date field:\n\n```alpine\n<input x-mask=\"99/99/9999\" placeholder=\"MM/DD/YYYY\">\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <input x-data x-mask=\"99/99/9999\" placeholder=\"MM/DD/YYYY\">\n</div>\n<!-- END_VERBATIM -->\n\nNotice how the text you type into the input field must adhere to the format provided by `x-mask`. In addition to enforcing numeric characters, the forward slashes `/` are also automatically added if a user doesn't type them first.\n\nThe following wildcard characters are supported in masks:\n\n| Wildcard | Description                      |\n| -------- | -------------------------------- |\n| `*`      | Any character                    |\n| `a`      | Only alpha characters (a-z, A-Z) |\n| `9`      | Only numeric characters (0-9)    |\n\n<a name=\"mask-functions\"></a>\n\n## Dynamic Masks\n\nSometimes simple mask literals (i.e. `(999) 999-9999`) are not sufficient. In these cases, `x-mask:dynamic` allows you to dynamically generate masks on the fly based on user input.\n\nHere's an example of a credit card input that needs to change it's mask based on if the number starts with the numbers \"34\" or \"37\" (which means it's an Amex card and therefore has a different format).\n\n```alpine\n<input x-mask:dynamic=\"\n    $input.startsWith('34') || $input.startsWith('37')\n        ? '9999 999999 99999' : '9999 9999 9999 9999'\n\">\n```\n\nAs you can see in the above example, every time a user types in the input, that value is passed to the expression as `$input`. Based on the `$input`, a different mask is utilized in the field.\n\nTry it for yourself by typing a number that starts with \"34\" and one that doesn't.\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <input x-data x-mask:dynamic=\"\n        $input.startsWith('34') || $input.startsWith('37')\n            ? '9999 999999 99999' : '9999 9999 9999 9999'\n    \">\n</div>\n<!-- END_VERBATIM -->\n\n`x-mask:dynamic` also accepts a function as a result of the expression and will automatically pass it the `$input` as the first parameter. For example:\n\n```alpine\n<input x-mask:dynamic=\"creditCardMask\">\n\n<script>\nfunction creditCardMask(input) {\n    return input.startsWith('34') || input.startsWith('37')\n        ? '9999 999999 99999'\n        : '9999 9999 9999 9999'\n}\n</script>\n```\n\n<a name=\"money-inputs\"></a>\n\n## Money Inputs\n\nBecause writing your own dynamic mask expression for money inputs is fairly complex, Alpine offers a prebuilt one and makes it available as `$money()`.\n\nHere is a fully functioning money input mask:\n\n```alpine\n<input x-mask:dynamic=\"$money($input)\">\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-data>\n    <input type=\"text\" x-mask:dynamic=\"$money($input)\" placeholder=\"0.00\">\n</div>\n<!-- END_VERBATIM -->\n\nIf you wish to swap the periods for commas and vice versa (as is required in certain currencies), you can do so using the second optional parameter:\n\n```alpine\n<input x-mask:dynamic=\"$money($input, ',')\">\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-data>\n    <input type=\"text\" x-mask:dynamic=\"$money($input, ',')\"  placeholder=\"0,00\">\n</div>\n<!-- END_VERBATIM -->\n\nYou may also choose to override the thousands separator by supplying a third optional argument:\n\n```alpine\n<input x-mask:dynamic=\"$money($input, '.', ' ')\">\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-data>\n    <input type=\"text\" x-mask:dynamic=\"$money($input, '.', ' ')\"  placeholder=\"3 000.00\">\n</div>\n<!-- END_VERBATIM -->\n\n\nYou can also override the default precision of 2 digits by using any desired number of digits as the fourth optional argument:\n\n```alpine\n<input x-mask:dynamic=\"$money($input, '.', ',', 4)\">\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\" x-data>\n    <input type=\"text\" x-mask:dynamic=\"$money($input, '.', ',', 4)\"  placeholder=\"0.0001\">\n</div>\n<!-- END_VERBATIM -->\n"
  },
  {
    "path": "packages/docs/src/en/plugins/morph.md",
    "content": "---\norder: 8\ntitle: Morph\ndescription: Morph an element into the provided HTML\ngraph_image: https://alpinejs.dev/social_morph.jpg\n---\n\n# Morph Plugin\n\nAlpine's Morph plugin allows you to \"morph\" an element on the page into the provided HTML template, all while preserving any browser or Alpine state within the \"morphed\" element.\n\nThis is useful for updating HTML from a server request without losing Alpine's on-page state. A utility like this is at the core of full-stack frameworks like [Laravel Livewire](https://laravel-livewire.com/) and [Phoenix LiveView](https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript).\n\nThe best way to understand its purpose is with the following interactive visualization. Give it a try!\n\n<!-- START_VERBATIM -->\n<div x-data=\"{ slide: 1 }\" class=\"border rounded\">\n    <div>\n        <img :src=\"'/img/morphs/morph'+slide+'.png'\">\n    </div>\n\n    <div class=\"flex w-full justify-between\" style=\"padding-bottom: 1rem\">\n        <div class=\"w-1/2 px-4\">\n            <button @click=\"slide = (slide === 1) ? 13 : slide - 1\" class=\"w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white\">Previous</button>\n        </div>\n        <div class=\"w-1/2 px-4\">\n            <button @click=\"slide = (slide % 13) + 1\" class=\"w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white\">Next</button>\n        </div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/morph@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Morph from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/morph\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport morph from '@alpinejs/morph'\n\nwindow.Alpine = Alpine\nAlpine.plugin(morph)\n\n...\n```\n\n<a name=\"alpine-morph\"></a>\n## Alpine.morph()\n\nThe `Alpine.morph(el, newHtml)` allows you to imperatively morph a dom node based on passed in HTML. It accepts the following parameters:\n\n| Parameter | Description |\n| ---       | --- |\n| `el`      | A DOM element on the page. |\n| `newHtml` | A string of HTML to use as the template to morph the dom element into. |\n| `options` (optional) | An options object used mainly for [injecting lifecycle hooks](#lifecycle-hooks). |\n\nHere's an example of using `Alpine.morph()` to update an Alpine component with new HTML: (In real apps, this new HTML would likely be coming from the server)\n\n```alpine\n<div x-data=\"{ message: 'Change me, then press the button!' }\">\n    <input type=\"text\" x-model=\"message\">\n    <span x-text=\"message\"></span>\n</div>\n\n<button>Run Morph</button>\n\n<script>\n    document.querySelector('button').addEventListener('click', () => {\n        let el = document.querySelector('div')\n\n        Alpine.morph(el, `\n            <div x-data=\"{ message: 'Change me, then press the button!' }\">\n                <h2>See how new elements have been added</h2>\n\n                <input type=\"text\" x-model=\"message\">\n                <span x-text=\"message\"></span>\n\n                <h2>but the state of this component hasn't changed? Magical.</h2>\n            </div>\n        `)\n    })\n</script>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ message: 'Change me, then press the button!' }\" id=\"morph-demo-1\" class=\"space-y-2\">\n        <input type=\"text\" x-model=\"message\" class=\"w-full\">\n        <span x-text=\"message\"></span>\n    </div>\n\n    <button id=\"morph-button-1\" class=\"mt-4\">Run Morph</button>\n</div>\n\n<script>\n    document.querySelector('#morph-button-1').addEventListener('click', () => {\n        let el = document.querySelector('#morph-demo-1')\n\n        Alpine.morph(el, `\n            <div x-data=\"{ message: 'Change me, then press the button!' }\" id=\"morph-demo-1\" class=\"space-y-2\">\n                <h4>See how new elements have been added</h4>\n                <input type=\"text\" x-model=\"message\" class=\"w-full\">\n                <span x-text=\"message\"></span>\n                <h4>but the state of this component hasn't changed? Magical.</h4>\n            </div>\n        `)\n    })\n</script>\n<!-- END_VERBATIM -->\n\n<a name=\"lifecycle-hooks\"></a>\n### Lifecycle Hooks\n\nThe \"Morph\" plugin works by comparing two DOM trees, the live element, and the passed in HTML.\n\nMorph walks both trees simultaneously and compares each node and its children. If it finds differences, it \"patches\" (changes) the current DOM tree to match the passed in HTML's tree.\n\nWhile the default algorithm is very capable, there are cases where you may want to hook into its lifecycle and observe or change its behavior as it's happening.\n\nBefore we jump into the available Lifecycle hooks themselves, let's first list out all the potential parameters they receive and explain what each one is:\n\n| Parameter | Description |\n| ---       | --- |\n| `el` | This is always the actual, current, DOM element on the page that will be \"patched\" (changed by Morph). |\n| `toEl` | This is a \"template element\". It's a temporary element representing what the live `el` will be patched to. It will never actually live on the page and should only be used for reference purposes. |\n| `childrenOnly()` | This is a function that can be called inside the hook to tell Morph to skip the current element and only \"patch\" its children. |\n| `skip()` | A function that when called within the hook will \"skip\" comparing/patching itself and the children of the current element. |\n\nHere are the available lifecycle hooks (passed in as the third parameter to `Alpine.morph(..., options)`):\n\n| Option | Description |\n| ---       | --- |\n| `updating(el, toEl, childrenOnly, skip)` | Called before patching the `el` with the comparison `toEl`.  |\n| `updated(el, toEl)` | Called after Morph has patched `el`. |\n| `removing(el, skip)` | Called before Morph removes an element from the live DOM. |\n| `removed(el)` | Called after Morph has removed an element from the live DOM. |\n| `adding(el, skip)` | Called before adding a new element. |\n| `added(el)` | Called after adding a new element to the live DOM tree. |\n| `key(el)` | A re-usable function to determine how Morph \"keys\" elements in the tree before comparing/patching. [More on that here](#keys) |\n| `lookahead` | A boolean value telling Morph to enable an extra feature in its algorithm that \"looks ahead\" to make sure a DOM element that's about to be removed should instead just be \"moved\" to a later sibling. |\n\nHere is code of all these lifecycle hooks for a more concrete reference:\n\n```js\nAlpine.morph(el, newHtml, {\n    updating(el, toEl, childrenOnly, skip) {\n        //\n    },\n\n    updated(el, toEl) {\n        //\n    },\n\n    removing(el, skip) {\n        //\n    },\n\n    removed(el) {\n        //\n    },\n\n    adding(el, skip) {\n        //\n    },\n\n    added(el) {\n        //\n    },\n\n    key(el) {\n        // By default Alpine uses the `key=\"\"` HTML attribute.\n        return el.id\n    },\n\n    lookahead: true, // Default: false\n})\n```\n\n<a name=\"keys\"></a>\n### Keys\n\nDom-diffing utilities like Morph try their best to accurately \"morph\" the original DOM into the new HTML. However, there are cases where it's impossible to determine if an element should be just changed, or replaced completely.\n\nBecause of this limitation, Morph has a \"key\" system that allows developers to \"force\" preserving certain elements rather than replacing them.\n\nThe most common use-case for them is a list of siblings within a loop. Below is an example of why keys are necessary sometimes:\n\n```html\n<!-- \"Live\" Dom on the page: -->\n<ul>\n    <li>Mark</li>\n    <li>Tom</li>\n    <li>Travis</li>\n</ul>\n\n<!-- New HTML to \"morph to\": -->\n<ul>\n    <li>Travis</li>\n    <li>Mark</li>\n    <li>Tom</li>\n</ul>\n```\n\nGiven the above situation, Morph has no way to know that the \"Travis\" node has been moved in the DOM tree. It just thinks that \"Mark\" has been changed to \"Travis\" and \"Travis\" changed to \"Tom\".\n\nThis is not what we actually want, we want Morph to preserve the original elements and instead of changing them, MOVE them within the `<ul>`.\n\nBy adding keys to each node, we can accomplish this like so:\n\n```html\n<!-- \"Live\" Dom on the page: -->\n<ul>\n    <li key=\"1\">Mark</li>\n    <li key=\"2\">Tom</li>\n    <li key=\"3\">Travis</li>\n</ul>\n\n<!-- New HTML to \"morph to\": -->\n<ul>\n    <li key=\"3\">Travis</li>\n    <li key=\"1\">Mark</li>\n    <li key=\"2\">Tom</li>\n</ul>\n```\n\nNow that there are \"keys\" on the `<li>`s, Morph will match them in both trees and move them accordingly.\n\nYou can configure what Morph considers a \"key\" with the `key:` configuration option. [More on that here](#lifecycle-hooks)\n\n<a name=\"alpine-morph-between\"></a>\n## Alpine.morphBetween()\n\nThe `Alpine.morphBetween(startMarker, endMarker, newHtml, options)` method allows you to morph a range of DOM nodes between two marker elements based on passed in HTML. This is useful when you want to update only a specific section of the DOM without providing a single root node.\n\n| Parameter | Description |\n| ---       | --- |\n| `startMarker` | A DOM node (typically a comment node) that marks the beginning of the range to morph |\n| `endMarker` | A DOM node (typically a comment node) that marks the end of the range to morph |\n| `newHtml` | A string of HTML or a DOM element to replace the content between the markers |\n| `options` | An object of options (same as `Alpine.morph()`) |\n"
  },
  {
    "path": "packages/docs/src/en/plugins/persist.md",
    "content": "---\norder: 4\ntitle: Persist\ndescription: Easily persist data across page loads using localStorage\ngraph_image: https://alpinejs.dev/social_persist.jpg\n---\n\n# Persist Plugin\n\nAlpine's Persist plugin allows you to persist Alpine state across page loads.\n\nThis is useful for persisting search filters, active tabs, and other features where users will be frustrated if their configuration is reset after refreshing or leaving and revisiting a page.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Persist from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/persist\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport persist from '@alpinejs/persist'\n\nAlpine.plugin(persist)\n\n...\n```\n\n<a name=\"magic-persist\"></a>\n## $persist\n\nThe primary API for using this plugin is the magic `$persist` method.\n\nYou can wrap any value inside `x-data` with `$persist` like below to persist its value across page loads:\n\n```alpine\n<div x-data=\"{ count: $persist(0) }\">\n    <button x-on:click=\"count++\">Increment</button>\n\n    <span x-text=\"count\"></span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ count: $persist(0) }\">\n        <button x-on:click=\"count++\">Increment</button>\n        <span x-text=\"count\"></span>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nIn the above example, because we wrapped `0` in `$persist()`, Alpine will now intercept changes made to `count` and persist them across page loads.\n\nYou can try this for yourself by incrementing the \"count\" in the above example, then refreshing this page and observing that the \"count\" maintains its state and isn't reset to \"0\".\n\n<a name=\"how-it-works\"></a>\n## How does it work?\n\nIf a value is wrapped in `$persist`, on initialization Alpine will register its own watcher for that value. Now everytime that value changes for any reason, Alpine will store the new value in [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).\n\nNow when a page is reloaded, Alpine will check localStorage (using the name of the property as the key) for a value. If it finds one, it will set the property value from localStorage immediately.\n\nYou can observe this behavior by opening your browser devtool's localStorage viewer:\n\n<a href=\"https://developer.chrome.com/docs/devtools/storage/localstorage/\"><img src=\"/img/persist_devtools.png\" alt=\"Chrome devtools showing the localStorage view with count set to 0\"></a>\n\nYou'll observe that by simply visiting this page, Alpine already set the value of \"count\" in localStorage. You'll also notice it prefixes the property name \"count\" with \"_x_\" as a way of namespacing these values so Alpine doesn't conflict with other tools using localStorage.\n\nNow change the \"count\" in the following example and observe the changes made by Alpine to localStorage:\n\n```alpine\n<div x-data=\"{ count: $persist(0) }\">\n    <button x-on:click=\"count++\">Increment</button>\n\n    <span x-text=\"count\"></span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ count: $persist(0) }\">\n        <button x-on:click=\"count++\">Increment</button>\n        <span x-text=\"count\"></span>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n> `$persist` works with primitive values as well as with arrays and objects.\nHowever, it is worth noting that localStorage must be cleared when the type of the variable changes.<br>\n> Given the previous example, if we change count to a value of `$persist({ value: 0 })`, then localStorage must be cleared or the variable 'count' renamed.\n\n<a name=\"custom-key\"></a>\n## Setting a custom key\n\nBy default, Alpine uses the property key that `$persist(...)` is being assigned to (\"count\" in the above examples).\n\nConsider the scenario where you have multiple Alpine components across pages or even on the same page that all use \"count\" as the property key.\n\nAlpine will have no way of differentiating between these components.\n\nIn these cases, you can set your own custom key for any persisted value using the `.as` modifier like so:\n\n\n```alpine\n<div x-data=\"{ count: $persist(0).as('other-count') }\">\n    <button x-on:click=\"count++\">Increment</button>\n\n    <span x-text=\"count\"></span>\n</div>\n```\n\nNow Alpine will store and retrieve the above \"count\" value using the key \"other-count\".\n\nHere's a view of Chrome Devtools to see for yourself:\n\n<img src=\"/img/persist_custom_key_devtools.png\" alt=\"Chrome devtools showing the localStorage view with count set to 0\">\n\n<a name=\"custom-storage\"></a>\n## Using a custom storage\n\nBy default, data is saved to localStorage, it does not have an expiration time and it's kept even when the page is closed.\n\nConsider the scenario where you want to clear the data once the user close the tab. In this case you can persist data to sessionStorage using the `.using` modifier like so:\n\n\n```alpine\n<div x-data=\"{ count: $persist(0).using(sessionStorage) }\">\n    <button x-on:click=\"count++\">Increment</button>\n\n    <span x-text=\"count\"></span>\n</div>\n```\n\nYou can also define your custom storage object exposing a getItem function and a setItem function. For example, you can decide to use a session cookie as storage doing so:\n\n\n```alpine\n<script>\n    window.cookieStorage = {\n        getItem(key) {\n            let cookies = document.cookie.split(\";\");\n            for (let i = 0; i < cookies.length; i++) {\n                let cookie = cookies[i].split(\"=\");\n                if (key == cookie[0].trim()) {\n                    return decodeURIComponent(cookie[1]);\n                }\n            }\n            return null;\n        },\n        setItem(key, value) {\n            document.cookie = key+' = '+encodeURIComponent(value)\n        }\n    }\n</script>\n\n<div x-data=\"{ count: $persist(0).using(cookieStorage) }\">\n    <button x-on:click=\"count++\">Increment</button>\n\n    <span x-text=\"count\"></span>\n</div>\n```\n\n<a name=\"using-persist-with-alpine-data\"></a>\n## Using $persist with Alpine.data\n\nIf you want to use `$persist` with `Alpine.data`, you need to use a standard function instead of an arrow function so Alpine can bind a custom `this` context when it initially evaluates the component scope.\n\n```js\nAlpine.data('dropdown', function () {\n    return {\n        open: this.$persist(false)\n    }\n})\n```\n\n<a name=\"using-alpine-persist-global\"></a>\n## Using the Alpine.$persist global\n\n`Alpine.$persist` is exposed globally so it can be used outside of `x-data` contexts. This is useful to persist data from other sources such as `Alpine.store`.\n\n```js\nAlpine.store('darkMode', {\n    on: Alpine.$persist(true).as('darkMode_on')\n});\n```\n"
  },
  {
    "path": "packages/docs/src/en/plugins/resize.md",
    "content": "---\norder: 3\ntitle: Resize\ndescription: An Alpine convenience wrapper for the Resize Observer API that allows you to easily react when an element is resized.\ngraph_image: https://alpinejs.dev/social_resize.jpg\n---\n\n# Resize Plugin\n\nAlpine's Resize plugin is a convenience wrapper for the [Resize Observer](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) that allows you to easily react when an element changes size.\n\nThis is useful for: custom size-based animations, intelligent sticky positioning, conditionally adding attributes based on the element's size, etc.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/resize@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Resize from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/resize\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport resize from '@alpinejs/resize'\n\nAlpine.plugin(resize)\n\n...\n```\n\n<a name=\"x-resize\"></a>\n## x-resize\n\nThe primary API for using this plugin is `x-resize`. You can add `x-resize` to any element within an Alpine component, and when that element is resized for any reason, the provided expression will execute with two magic properties: `$width` and `$height`.\n\nFor example, here's a simple example of using `x-resize` to display the width and height of an element as it changes size.\n\n```alpine\n<div\n    x-data=\"{ width: 0, height: 0 }\"\n    x-resize=\"width = $width; height = $height\"\n>\n    <p x-text=\"'Width: ' + width + 'px'\"></p>\n    <p x-text=\"'Height: ' + height + 'px'\"></p>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ width: 0, height: 0 }\" x-resize=\"width = $width; height = $height\">\n        <i>Resize your browser window to see the width and height values change.</i>\n        <br><br>\n        <p x-text=\"'Width: ' + width + 'px'\"></p>\n        <p x-text=\"'Height: ' + height + 'px'\"></p>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"modifiers\"></a>\n## Modifiers\n\n<a name=\"document\"></a>\n### .document\n\nIt's often useful to observe the entire document's size, rather than a specific element. To do this, you can add the `.document` modifier to `x-resize`:\n\n```alpine\n<div x-resize.document=\"...\">\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ width: 0, height: 0 }\" x-resize.document=\"width = $width; height = $height\">\n        <i>Resize your browser window to see the document width and height values change.</i>\n        <br><br>\n        <p x-text=\"'Width: ' + width + 'px'\"></p>\n        <p x-text=\"'Height: ' + height + 'px'\"></p>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n"
  },
  {
    "path": "packages/docs/src/en/plugins/sort.md",
    "content": "---\norder: 9\ntitle: Sort\ndescription: Easily re-order elements by dragging them with your mouse\ngraph_image: https://alpinejs.dev/social_sort.jpg\n---\n\n# Sort Plugin\n\nAlpine's Sort plugin allows you to easily re-order elements by dragging them with your mouse.\n\nThis functionality is useful for things like Kanban boards, to-do lists, sortable table columns, etc.\n\nThe drag functionality used in this plugin is provided by the [SortableJS](https://github.com/SortableJS/Sortable) project.\n\n<a name=\"installation\"></a>\n## Installation\n\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\n\nYou can include the CDN build of this plugin as a `<script>` tag; just make sure to include it BEFORE Alpine's core JS file.\n\n```alpine\n<!-- Alpine Plugins -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\n\nYou can install Sort from NPM for use inside your bundle like so:\n\n```shell\nnpm install @alpinejs/sort\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport sort from '@alpinejs/sort'\n\nAlpine.plugin(sort)\n\n...\n```\n\n<a name=\"basic-usage\"></a>\n## Basic usage\n\nThe primary API for using this plugin is the `x-sort` directive. By adding `x-sort` to an element, its children containing `x-sort:item` become sortable—meaning you can drag them around with your mouse, and they will change positions.\n\n```alpine\n<ul x-sort>\n    <li x-sort:item>foo</li>\n    <li x-sort:item>bar</li>\n    <li x-sort:item>baz</li>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort>\n        <li x-sort:item class=\"cursor-pointer\">foo</li>\n        <li x-sort:item class=\"cursor-pointer\">bar</li>\n        <li x-sort:item class=\"cursor-pointer\">baz</li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"sort-handlers\"></a>\n## Sort handlers\n\nYou can react to sorting changes by passing a handler function to `x-sort` and adding keys to each item using `x-sort:item`. Here is an example of a simple handler function that shows an alert dialog with the changed item's key and its new position:\n\n```alpine\n<ul x-sort=\"alert($item + ' - ' + $position)\">\n    <li x-sort:item=\"1\">foo</li>\n    <li x-sort:item=\"2\">bar</li>\n    <li x-sort:item=\"3\">baz</li>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort=\"alert($item + ' - ' + $position)\">\n        <li x-sort:item=\"1\" class=\"cursor-pointer\">foo</li>\n        <li x-sort:item=\"2\" class=\"cursor-pointer\">bar</li>\n        <li x-sort:item=\"3\" class=\"cursor-pointer\">baz</li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\nThe `x-sort` handler will be called every time the sort order of the items change. The `$item` magic will contain the key of the sorted element (derived from `x-sort:item`), and `$position` will contain the new position of the item (starting at index `0`).\n\nYou can also pass a handler function to `x-sort` and that function will receive the `item` and `position` as the first and second parameter:\n\n```alpine\n<div x-data=\"{ handle: (item, position) => { ... } }\">\n    <ul x-sort=\"handle\">\n        <li x-sort:item=\"1\">foo</li>\n        <li x-sort:item=\"2\">bar</li>\n        <li x-sort:item=\"3\">baz</li>\n    </ul>\n</div>\n```\n\nHandler functions are often used to persist the new order of items in the database so that the sorting order of a list is preserved between page refreshes.\n\n<a name=\"sorting-groups\"></a>\n## Sorting groups\n\nThis plugin allows you to drag items from one `x-sort` sortable list into another one by adding a matching `x-sort:group` value to both lists:\n\n```alpine\n<div>\n    <ul x-sort x-sort:group=\"todos\">\n        <li x-sort:item=\"1\">foo</li>\n        <li x-sort:item=\"2\">bar</li>\n        <li x-sort:item=\"3\">baz</li>\n    </ul>\n\n    <ol x-sort x-sort:group=\"todos\">\n        <li x-sort:item=\"4\">foo</li>\n        <li x-sort:item=\"5\">bar</li>\n        <li x-sort:item=\"6\">baz</li>\n    </ol>\n</div>\n```\n\nBecause both sortable lists above use the same group name (`todos`), you can drag items from one list onto another.\n\n> When using sort handlers like `x-sort=\"handle\"` and dragging an item from one group to another, only the destination list's handler will be called with the key and new position.\n\n<a name=\"drag-handles\"></a>\n## Drag handles\n\nBy default, each `x-sort:item` element is draggable by clicking and dragging anywhere within it. However, you may want to designate a smaller, more specific element as the \"drag handle\" so that the rest of the element can be interacted with like normal, and only the handle will respond to mouse dragging:\n\n```alpine\n<ul x-sort>\n    <li x-sort:item>\n        <span x-sort:handle> - </span>foo\n    </li>\n\n    <li x-sort:item>\n        <span x-sort:handle> - </span>bar\n    </li>\n\n    <li x-sort:item>\n        <span x-sort:handle> - </span>baz\n    </li>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort>\n        <li x-sort:item>\n            <span x-sort:handle class=\"cursor-pointer\"> - </span>foo\n        </li>\n        <li x-sort:item>\n            <span x-sort:handle class=\"cursor-pointer\"> - </span>bar\n        </li>\n        <li x-sort:item>\n            <span x-sort:handle class=\"cursor-pointer\"> - </span>baz\n        </li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\nAs you can see in the above example, the hyphen \"-\" is draggable, but the item text (\"foo\") is not.\n\n<a name=\"ignoring-elements\"></a>\n## Ignoring elements\n\nSometimes you want to prevent certain elements within a sortable item from initiating a drag operation. This is especially useful when you have interactive elements like buttons, dropdowns, or links that users should be able to click without accidentally dragging the sortable item.\n\nYou can use the `x-sort:ignore` directive to mark elements that should not trigger dragging:\n\n```alpine\n<ul x-sort>\n    <li x-sort:item>\n        <!-- ... -->\n\n        <button x-sort:ignore>Edit</button>\n    </li>\n\n    <li x-sort:item>\n        <!-- ... -->\n\n        <button x-sort:ignore>Edit</button>\n    </li>\n\n    <li x-sort:item>\n        <!-- ... -->\n\n        <button x-sort:ignore>Edit</button>\n    </li>\n</ul>\n```\n\nIn the above example, users can click and drag the item itself, but clicking on the \"Edit\" button will not initiate a drag operation.\n\n> **Note:** Elements with `x-sort:ignore` will still function normally (buttons can be clicked, inputs can be focused, etc.) - they are only excluded from drag operations.\n\n<a name=\"ghost-elements\"></a>\n## Ghost elements\n\nWhen a user drags an item, the element will follow their mouse to appear as though they are physically dragging the element.\n\nBy default, a \"hole\" (empty space) will be left in the original element's place during the drag.\n\nIf you would like to show a \"ghost\" of the original element in its place instead of an empty space, you can add the `.ghost` modifier to `x-sort`:\n\n```alpine\n<ul x-sort.ghost>\n    <li x-sort:item>foo</li>\n    <li x-sort:item>bar</li>\n    <li x-sort:item>baz</li>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort.ghost>\n        <li x-sort:item class=\"cursor-pointer\">foo</li>\n        <li x-sort:item class=\"cursor-pointer\">bar</li>\n        <li x-sort:item class=\"cursor-pointer\">baz</li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"ghost-styling\"></a>\n### Styling the ghost element\n\nBy default, the \"ghost\" element has a `.sortable-ghost` CSS class attached to it while the original element is being dragged.\n\nThis makes it easy to add any custom styling you would like:\n\n```alpine\n<style>\n.sortable-ghost {\n    opacity: .5 !important;\n}\n</style>\n\n<ul x-sort.ghost>\n    <li x-sort:item>foo</li>\n    <li x-sort:item>bar</li>\n    <li x-sort:item>baz</li>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort.ghost x-sort:config=\"{ ghostClass: 'opacity-50' }\">\n        <li x-sort:item class=\"cursor-pointer\">foo</li>\n        <li x-sort:item class=\"cursor-pointer\">bar</li>\n        <li x-sort:item class=\"cursor-pointer\">baz</li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"sorting-class\"></a>\n## Sorting class on body\n\nWhile an element is being dragged around, Alpine will automatically add a `.sorting` class to the `<body>` element of the page.\n\nThis is useful for styling any element on the page conditionally using only CSS.\n\nFor example you could have a warning that only displays while a user is sorting items:\n\n```html\n<div id=\"sort-warning\">\n    Page functionality is limited while sorting\n</div>\n```\n\nTo show this only while sorting, you can use the `body.sorting` CSS selector:\n\n```css\n#sort-warning {\n    display: none;\n}\n\nbody.sorting #sort-warning {\n    display: block;\n}\n```\n\n<a name=\"css-hover-bug\"></a>\n## CSS hover bug\n\nCurrently, there is a [bug in Chrome and Safari](https://issues.chromium.org/issues/41129937) (not Firefox) that causes issues with hover styles.\n\nConsider HTML like the following, where each item in the list is styled differently based on a hover state (here we're using Tailwind's `.hover` class to conditionally add a border):\n\n```html\n<div x-sort>\n    <div x-sort:item class=\"hover:border\">foo</div>\n    <div x-sort:item class=\"hover:border\">bar</div>\n    <div x-sort:item class=\"hover:border\">baz</div>\n</div>\n```\n\nIf you drag one of the elements in the list below you will see that the hover effect will be errantly applied to any element in the original element's place:\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort class=\"flex flex-col items-start\">\n        <li x-sort:item class=\"hover:border border-black cursor-pointer\">foo</li>\n        <li x-sort:item class=\"hover:border border-black cursor-pointer\">bar</li>\n        <li x-sort:item class=\"hover:border border-black cursor-pointer\">baz</li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\nTo fix this, you can leverage the `.sorting` class applied to the body while sorting to limit the hover effect to only be applied while `.sorting` does NOT exist on `body`.\n\nHere is how you can do this directly inline using Tailwind arbitrary variants:\n\n```html\n<div x-sort>\n    <div x-sort:item class=\"[body:not(.sorting)_&]:hover:border\">foo</div>\n    <div x-sort:item class=\"[body:not(.sorting)_&]:hover:border\">bar</div>\n    <div x-sort:item class=\"[body:not(.sorting)_&]:hover:border\">baz</div>\n</div>\n```\n\nNow you can see below that the hover effect is only applied to the dragging element and not the others in the list.\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort class=\"flex flex-col items-start\">\n        <li x-sort:item class=\"[body:not(.sorting)_&]:hover:border border-black cursor-pointer\">foo</li>\n        <li x-sort:item class=\"[body:not(.sorting)_&]:hover:border border-black cursor-pointer\">bar</li>\n        <li x-sort:item class=\"[body:not(.sorting)_&]:hover:border border-black cursor-pointer\">baz</li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\n<a name=\"custom-configuration\"></a>\n## Custom configuration\n\nAlpine chooses sensible defaults for configuring [SortableJS](https://github.com/SortableJS/Sortable?tab=readme-ov-file#options) under the hood. However, you can add or override any of these options yourself using `x-sort:config`:\n\n```alpine\n<ul x-sort x-sort:config=\"{ animation: 0 }\">\n    <li x-sort:item>foo</li>\n    <li x-sort:item>bar</li>\n    <li x-sort:item>baz</li>\n</ul>\n```\n\n<!-- START_VERBATIM -->\n<div x-data>\n    <ul x-sort x-sort:config=\"{ animation: 0 }\">\n        <li x-sort:item class=\"cursor-pointer\">foo</li>\n        <li x-sort:item class=\"cursor-pointer\">bar</li>\n        <li x-sort:item class=\"cursor-pointer\">baz</li>\n    </ul>\n</div>\n<!-- END_VERBATIM -->\n\n> Any config options passed will overwrite Alpine defaults. In this case of `animation`, this is fine, however be aware that overwriting `handle`, `group`, `filter`, `onSort`, `onStart`, or `onEnd` may break functionality.\n\n[View the full list of SortableJS configuration options here →](https://github.com/SortableJS/Sortable?tab=readme-ov-file#options)\n"
  },
  {
    "path": "packages/docs/src/en/plugins.md",
    "content": "---\norder: 7\ntitle: Plugins\nfont-type: mono\ntype: sub-directory\n---\n"
  },
  {
    "path": "packages/docs/src/en/start-here.md",
    "content": "---\norder: 1\ntitle: Start Here\n---\n\n# Start Here\n\nCreate a blank HTML file somewhere on your computer with a name like: `i-love-alpine.html`\n\nUsing a text editor, fill the file with these contents:\n\n```alpine\n<html>\n<head>\n    <script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n</head>\n<body>\n    <h1 x-data=\"{ message: 'I ❤️ Alpine' }\" x-text=\"message\"></h1>\n</body>\n</html>\n```\n\nOpen your file in a web browser, if you see `I ❤️ Alpine`, you're ready to rumble!\n\nNow that you're all set up to play around, let's look at three practical examples as a foundation for teaching you the basics of Alpine. By the end of this exercise, you should be more than equipped to start building stuff on your own. Let's goooooo.\n\n<!-- START_VERBATIM -->\n<ul class=\"flex flex-col space-y-2 list-inside !list-decimal\">\n    <li><a href=\"#building-a-counter\">Building a counter</a></li>\n    <li><a href=\"#building-a-dropdown\">Building a dropdown</a></li>\n    <li><a href=\"#building-a-search-input\">Building a search Input</a></li>\n</ul>\n<!-- END_VERBATIM -->\n\n<a name=\"building-a-counter\"></a>\n## Building a counter\n\nLet's start with a simple \"counter\" component to demonstrate the basics of state and event listening in Alpine, two core features.\n\nInsert the following into the `<body>` tag:\n\n```alpine\n<div x-data=\"{ count: 0 }\">\n    <button x-on:click=\"count++\">Increment</button>\n\n    <span x-text=\"count\"></span>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ count: 0 }\">\n        <button x-on:click=\"count++\">Increment</button>\n        <span x-text=\"count\"></span>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nNow, you can see with 3 bits of Alpine sprinkled into this HTML, we've created an interactive \"counter\" component.\n\nLet's walk through what's happening briefly:\n\n<a name=\"declaring-data\"></a>\n### Declaring data\n\n```alpine\n<div x-data=\"{ count: 0 }\">\n```\n\nEverything in Alpine starts with an `x-data` directive. Inside of `x-data`, in plain JavaScript, you declare an object of data that Alpine will track.\n\nEvery property inside this object will be made available to other directives inside this HTML element. In addition, when one of these properties changes, everything that relies on it will change as well.\n\n> `x-data` is required on a parent element for most Alpine directives to work.\n\n[→ Read more about `x-data`](/directives/data)\n\nLet's look at `x-on` and see how it can access and modify the `count` property from above:\n\n<a name=\"listening-for-events\"></a>\n### Listening for events\n\n```alpine\n<button x-on:click=\"count++\">Increment</button>\n```\n\n`x-on` is a directive you can use to listen for any event on an element. We're listening for a `click` event in this case, so ours looks like `x-on:click`.\n\nYou can listen for other events as you'd imagine. For example, listening for a `mouseenter` event would look like this: `x-on:mouseenter`.\n\nWhen a `click` event happens, Alpine will call the associated JavaScript expression, `count++` in our case. As you can see, we have direct access to data declared in the `x-data` expression.\n\n> You will often see `@` instead of `x-on:`. This is a shorter, friendlier syntax that many prefer. From now on, this documentation will likely use `@` instead of `x-on:`.\n\n[→ Read more about `x-on`](/directives/on)\n\n<a name=\"reacting-to-changes\"></a>\n### Reacting to changes\n\n```alpine\n<span x-text=\"count\"></span>\n```\n\n`x-text` is an Alpine directive you can use to set the text content of an element to the result of a JavaScript expression.\n\nIn this case, we're telling Alpine to always make sure that the contents of this `span` tag reflect the value of the `count` property.\n\nIn case it's not clear, `x-text`, like most directives accepts a plain JavaScript expression as an argument. So for example, you could instead set its contents to: `x-text=\"count * 2\"` and the text content of the `span` will now always be 2 times the value of `count`.\n\n[→ Read more about `x-text`](/directives/text)\n\n<a name=\"building-a-dropdown\"></a>\n## Building a dropdown\n\nNow that we've seen some basic functionality, let's keep going and look at an important directive in Alpine: `x-show`, by building a contrived \"dropdown\" component.\n\nInsert the following code into the `<body>` tag:\n\n```alpine\n<div x-data=\"{ open: false }\">\n    <button @click=\"open = ! open\">Toggle</button>\n\n    <div x-show=\"open\" @click.outside=\"open = false\">Contents...</div>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div x-data=\"{ open: false }\">\n        <button @click=\"open = ! open\">Toggle</button>\n        <div x-show=\"open\" @click.outside=\"open = false\">Contents...</div>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nIf you load this component, you should see that the \"Contents...\" are hidden by default. You can toggle showing them on the page by clicking the \"Toggle\" button.\n\nThe `x-data` and `x-on` directives should be familiar to you from the previous example, so we'll skip those explanations.\n\n<a name=\"toggling-elements\"></a>\n### Toggling elements\n\n```alpine\n<div x-show=\"open\" ...>Contents...</div>\n```\n\n`x-show` is an extremely powerful directive in Alpine that can be used to show and hide a block of HTML on a page based on the result of a JavaScript expression, in our case: `open`.\n\n[→ Read more about `x-show`](/directives/show)\n\n<a name=\"listening-for-a-click-outside\"></a>\n### Listening for a click outside\n\n```alpine\n<div ... @click.outside=\"open = false\">Contents...</div>\n```\n\nYou'll notice something new in this example: `.outside`. Many directives in Alpine accept \"modifiers\" that are chained onto the end of the directive and are separated by periods.\n\nIn this case, `.outside` tells Alpine to instead of listening for a click INSIDE the `<div>`, to listen for the click only if it happens OUTSIDE the `<div>`.\n\nThis is a convenience helper built into Alpine because this is a common need and implementing it by hand is annoying and complex.\n\n[→ Read more about `x-on` modifiers](/directives/on#modifiers)\n\n<a name=\"building-a-search-input\"></a>\n## Building a search input\n\nLet's now build a more complex component and introduce a handful of other directives and patterns.\n\nInsert the following code into the `<body>` tag:\n\n```alpine\n<div\n    x-data=\"{\n        search: '',\n\n        items: ['foo', 'bar', 'baz'],\n\n        get filteredItems() {\n            return this.items.filter(\n                i => i.startsWith(this.search)\n            )\n        }\n    }\"\n>\n    <input x-model=\"search\" placeholder=\"Search...\">\n\n    <ul>\n        <template x-for=\"item in filteredItems\" :key=\"item\">\n            <li x-text=\"item\"></li>\n        </template>\n    </ul>\n</div>\n```\n\n<!-- START_VERBATIM -->\n<div class=\"demo\">\n    <div\n        x-data=\"{\n            search: '',\n\n            items: ['foo', 'bar', 'baz'],\n\n            get filteredItems() {\n                return this.items.filter(\n                    i => i.startsWith(this.search)\n                )\n            }\n        }\"\n    >\n        <input x-model=\"search\" placeholder=\"Search...\">\n\n        <ul class=\"pl-6 pt-2\">\n            <template x-for=\"item in filteredItems\" :key=\"item\">\n                <li x-text=\"item\"></li>\n            </template>\n        </ul>\n    </div>\n</div>\n<!-- END_VERBATIM -->\n\nBy default, all of the \"items\" (foo, bar, and baz) will be shown on the page, but you can filter them by typing into the text input. As you type, the list of items will change to reflect what you're searching for.\n\nNow there's quite a bit happening here, so let's go through this snippet piece by piece.\n\n<a name=\"multi-line-formatting\"></a>\n### Multi line formatting\n\nThe first thing I'd like to point out is that `x-data` now has a lot more going on in it than before. To make it easier to write and read, we've split it up into multiple lines in our HTML. This is completely optional and we'll talk more in a bit about how to avoid this problem altogether, but for now, we'll keep all of this JavaScript directly in the HTML.\n\n<a name=\"binding-to-inputs\"></a>\n### Binding to inputs\n\n```alpine\n<input x-model=\"search\" placeholder=\"Search...\">\n```\n\nYou'll notice a new directive we haven't seen yet: `x-model`.\n\n`x-model` is used to \"bind\" the value of an input element with a data property: \"search\" from `x-data=\"{ search: '', ... }\"` in our case.\n\nThis means that anytime the value of the input changes, the value of \"search\" will change to reflect that.\n\n`x-model` is capable of much more than this simple example.\n\n[→ Read more about `x-model`](/directives/model)\n\n<a name=\"computed-properties-using-getters\"></a>\n### Computed properties using getters\n\nThe next bit I'd like to draw your attention to is the `items` and `filteredItems` properties from the `x-data` directive.\n\n```js\n{\n    ...\n    items: ['foo', 'bar', 'baz'],\n\n    get filteredItems() {\n        return this.items.filter(\n            i => i.startsWith(this.search)\n        )\n    }\n}\n```\n\nThe `items` property should be self-explanatory. Here we are setting the value of `items` to a JavaScript array of 3 different items (foo, bar, and baz).\n\nThe interesting part of this snippet is the `filteredItems` property.\n\nDenoted by the `get` prefix for this property, `filteredItems` is a \"getter\" property in this object. This means we can access `filteredItems` as if it was a normal property in our data object, but when we do, JavaScript will evaluate the provided function under the hood and return the result.\n\nIt's completely acceptable to forgo the `get` and just make this a method that you can call from the template, but some prefer the nicer syntax of the getter.\n\n[→ Read more about JavaScript getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)\n\nNow let's look inside the `filteredItems` getter and make sure we understand what's going on there:\n\n```js\nreturn this.items.filter(\n    i => i.startsWith(this.search)\n)\n```\n\nThis is all plain JavaScript. We are first getting the array of items (foo, bar, and baz) and filtering them using the provided callback: `i => i.startsWith(this.search)`.\n\nBy passing in this callback to `filter`, we are telling JavaScript to only return the items that start with the string: `this.search`, which like we saw with `x-model` will always reflect the value of the input.\n\nYou may notice that up until now, we haven't had to use `this.` to reference properties. However, because we are working directly inside the `x-data` object, we must reference any properties using `this.[property]` instead of simply `[property]`.\n\nBecause Alpine is a \"reactive\" framework. Any time the value of `this.search` changes, parts of the template that use `filteredItems` will automatically be updated.\n\n<a name=\"looping-elements\"></a>\n### Looping elements\n\nNow that we understand the data part of our component, let's understand what's happening in the template that allows us to loop through `filteredItems` on the page.\n\n```alpine\n<ul>\n    <template x-for=\"item in filteredItems\">\n        <li x-text=\"item\"></li>\n    </template>\n</ul>\n```\n\nThe first thing to notice here is the `x-for` directive. `x-for` expressions take the following form: `[item] in [items]` where [items] is any array of data, and [item] is the name of the variable that will be assigned to an iteration inside the loop.\n\nAlso notice that `x-for` is declared on a `<template>` element and not directly on the `<li>`. This is a requirement of using `x-for`. It allows Alpine to leverage the existing behavior of `<template>` tags in the browser to its advantage.\n\nNow any element inside the `<template>` tag will be repeated for every item inside `filteredItems` and all expressions evaluated inside the loop will have direct access to the iteration variable (`item` in this case).\n\n[→ Read more about `x-for`](/directives/for)\n\n<a name=\"recap\"></a>\n## Recap\n\nIf you've made it this far, you've been exposed to the following directives in Alpine:\n\n* x-data\n* x-on\n* x-text\n* x-show\n* x-model\n* x-for\n\nThat's a great start, however, there are many more directives to sink your teeth into. The best way to absorb Alpine is to read through this documentation. No need to comb over every word, but if you at least glance through every page you will be MUCH more effective when using Alpine.\n\nHappy Coding!\n"
  },
  {
    "path": "packages/docs/src/en/upgrade-guide.md",
    "content": "---\norder: 2\ntitle: Upgrade From V2\n---\n\n# Upgrade from V2\n\nBelow is an exhaustive guide on the breaking changes in Alpine V3, but if you'd prefer something more lively, you can review all the changes as well as new features in V3 by watching the Alpine Day 2021 \"Future of Alpine\" keynote:\n\n<!-- START_VERBATIM -->\n<div class=\"relative w-full\" style=\"padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;\">\n    <iframe\n            class=\"absolute top-0 left-0 right-0 bottom-0 w-full h-full\"\n            src=\"https://www.youtube.com/embed/WixS4JXMwIQ?modestbranding=1&autoplay=1\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowfullscreen\n    ></iframe>\n</div>\n<!-- END_VERBATIM -->\n\nUpgrading from Alpine V2 to V3 should be fairly painless. In many cases, NOTHING has to be done to your codebase to use V3. Below is an exhaustive list of breaking changes and deprecations in descending order of how likely users are to be affected by them:\n\n> Note if you use Laravel Livewire and Alpine together, to use V3 of Alpine, you will need to upgrade to Livewire v2.5.1 or greater.\n\n<a name=\"breaking-changes\"></a>\n## Breaking Changes\n* [`$el` is now always the current element](#el-no-longer-root)\n* [Automatically evaluate `init()` functions defined on data object](#auto-init)\n* [Need to call `Alpine.start()` after import](#need-to-call-alpine-start)\n* [`x-show.transition` is now `x-transition`](#removed-show-dot-transition)\n* [`x-if` no longer supports `x-transition`](#x-if-no-transitions)\n* [`x-data` cascading scope](#x-data-scope)\n* [`x-init` no longer accepts a callback return](#x-init-no-callback)\n* [Returning `false` from event handlers no longer implicitly \"preventDefault\"s](#no-false-return-from-event-handlers)\n* [`x-spread` is now `x-bind`](#x-spread-now-x-bind)\n* [`x-ref` no longer supports binding](#x-ref-no-more-dynamic)\n* [Use global lifecycle events instead of `Alpine.deferLoadingAlpine()`](#use-global-events-now)\n* [IE11 no longer supported](#no-ie-11)\n\n<a name=\"el-no-longer-root\"></a>\n### `$el` is now always the current element\n\n`$el` now always represents the element that an expression was executed on, not the root element of the component. This will replace most usages of `x-ref` and in the cases where you still want to access the root of a component, you can do so using `$root`. For example:\n\n```alpine\n<!-- 🚫 Before -->\n<div x-data>\n    <button @click=\"console.log($el)\"></button>\n    <!-- In V2, $el would have been the <div>, now it's the <button> -->\n</div>\n\n<!-- ✅ After -->\n<div x-data>\n    <button @click=\"console.log($root)\"></button>\n</div>\n```\n\nFor a smoother upgrade experience, you can replace all instances of `$el` with a custom magic called `$root`.\n\n[→ Read more about $el in V3](/magics/el)  \n[→ Read more about $root in V3](/magics/root)\n\n<a name=\"auto-init\"></a>\n### Automatically evaluate `init()` functions defined on data object\n\nA common pattern in V2 was to manually call an `init()` (or similarly named method) on an `x-data` object.\n\nIn V3, Alpine will automatically call `init()` methods on data objects.\n\n```alpine\n<!-- 🚫 Before -->\n<div x-data=\"foo()\" x-init=\"init()\"></div>\n\n<!-- ✅ After -->\n<div x-data=\"foo()\"></div>\n\n<script>\n    function foo() {\n        return {\n            init() {\n                //\n            }\n        }\n    }\n</script>\n```\n\n[→ Read more about auto-evaluating init functions](/globals/alpine-data#init-functions)\n\n<a name=\"need-to-call-alpine-start\"></a>\n### Need to call Alpine.start() after import\n\nIf you were importing Alpine V2 from NPM, you will now need to manually call `Alpine.start()` for V3. This doesn't affect you if you use Alpine's build file or CDN from a `<template>` tag.\n\n```js\n// 🚫 Before\nimport 'alpinejs'\n\n// ✅ After\nimport Alpine from 'alpinejs'\n\nwindow.Alpine = Alpine\n\nAlpine.start()\n```\n\n[→ Read more about initializing Alpine V3](/essentials/installation#as-a-module)\n\n<a name=\"removed-show-dot-transition\"></a>\n### `x-show.transition` is now `x-transition`\n\nAll of the conveniences provided by `x-show.transition...` helpers are still available, but now from a more unified API: `x-transition`:\n\n```alpine\n<!-- 🚫 Before -->\n<div x-show.transition=\"open\"></div>\n<!-- ✅ After -->\n<div x-show=\"open\" x-transition></div>\n\n<!-- 🚫 Before -->\n<div x-show.transition.duration.500ms=\"open\"></div>\n<!-- ✅ After -->\n<div x-show=\"open\" x-transition.duration.500ms></div>\n\n<!-- 🚫 Before -->\n<div x-show.transition.in.duration.500ms.out.duration.750ms=\"open\"></div>\n<!-- ✅ After -->\n<div\n    x-show=\"open\"\n    x-transition:enter.duration.500ms\n    x-transition:leave.duration.750ms\n></div>\n```\n\n[→ Read more about x-transition](/directives/transition)\n\n<a name=\"x-if-no-transitions\"></a>\n### `x-if` no longer supports `x-transition`\n\nThe ability to transition elements in and add before/after being removed from the DOM is no longer available in Alpine.\n\nThis was a feature very few people even knew existed let alone used.\n\nBecause the transition system is complex, it makes more sense from a maintenance perspective to only support transitioning elements with `x-show`.\n\n```alpine\n<!-- 🚫 Before -->\n<template x-if.transition=\"open\">\n    <div>...</div>\n</template>\n\n<!-- ✅ After -->\n<div x-show=\"open\" x-transition>...</div>\n```\n\n[→ Read more about x-if](/directives/if)\n\n<a name=\"x-data-scope\"></a>\n### `x-data` cascading scope\n\nScope defined in `x-data` is now available to all children unless overwritten by a nested `x-data` expression.\n\n```alpine\n<!-- 🚫 Before -->\n<div x-data=\"{ foo: 'bar' }\">\n    <div x-data=\"{}\">\n        <!-- foo is undefined -->\n    </div>\n</div>\n\n<!-- ✅ After -->\n<div x-data=\"{ foo: 'bar' }\">\n    <div x-data=\"{}\">\n        <!-- foo is 'bar' -->\n    </div>\n</div>\n```\n\n[→ Read more about x-data scoping](/directives/data#scope)\n\n<a name=\"x-init-no-callback\"></a>\n### `x-init` no longer accepts a callback return\n\nBefore V3, if `x-init` received a return value that is `typeof` \"function\", it would execute the callback after Alpine finished initializing all other directives in the tree. Now, you must manually call `$nextTick()` to achieve that behavior. `x-init` is no longer \"return value aware\".\n\n```alpine\n<!-- 🚫 Before -->\n<div x-data x-init=\"() => { ... }\">...</div>\n\n<!-- ✅ After -->\n<div x-data x-init=\"$nextTick(() => { ... })\">...</div>\n```\n\n[→ Read more about $nextTick](/magics/next-tick)\n\n<a name=\"no-false-return-from-event-handlers\"></a>\n### Returning `false` from event handlers no longer implicitly \"preventDefault\"s\n\nAlpine V2 observes a return value of `false` as a desire to run `preventDefault` on the event. This conforms to the standard behavior of native, inline listeners: `<... oninput=\"someFunctionThatReturnsFalse()\">`. Alpine V3 no longer supports this API. Most people don't know it exists and therefore is surprising behavior.\n\n```alpine\n<!-- 🚫 Before -->\n<div x-data=\"{ blockInput() { return false } }\">\n    <input type=\"text\" @input=\"blockInput()\">\n</div>\n\n<!-- ✅ After -->\n<div x-data=\"{ blockInput(e) { e.preventDefault() }\">\n    <input type=\"text\" @input=\"blockInput($event)\">\n</div>\n```\n\n[→ Read more about x-on](/directives/on)\n\n<a name=\"x-spread-now-x-bind\"></a>\n### `x-spread` is now `x-bind`\n\nOne of Alpine's stories for re-using functionality is abstracting Alpine directives into objects and applying them to elements with `x-spread`. This behavior is still the same, except now `x-bind` (with no specified attribute) is the API instead of `x-spread`.\n\n```alpine\n<!-- 🚫 Before -->\n<div x-data=\"dropdown()\">\n    <button x-spread=\"trigger\">Toggle</button>\n\n    <div x-spread=\"dialogue\">...</div>\n</div>\n\n<!-- ✅ After -->\n<div x-data=\"dropdown()\">\n    <button x-bind=\"trigger\">Toggle</button>\n\n    <div x-bind=\"dialogue\">...</div>\n</div>\n\n\n<script>\n    function dropdown() {\n        return {\n            open: false,\n\n            trigger: {\n                'x-on:click'() { this.open = ! this.open },\n            },\n\n            dialogue: {\n                'x-show'() { return this.open },\n                'x-bind:class'() { return 'foo bar' },\n            },\n        }\n    }\n</script>\n```\n\n[→ Read more about binding directives using x-bind](/directives/bind#bind-directives)\n\n<a name=\"use-global-events-now\"></a>\n### Use global lifecycle events instead of `Alpine.deferLoadingAlpine()`\n\n```alpine\n<!-- 🚫 Before -->\n<script>\n    window.deferLoadingAlpine = startAlpine => {\n        // Will be executed before initializing Alpine.\n\n        startAlpine()\n\n        // Will be executed after initializing Alpine.\n    }\n</script>\n\n<!-- ✅ After -->\n<script>\n    document.addEventListener('alpine:init', () => {\n        // Will be executed before initializing Alpine.\n    })\n\n    document.addEventListener('alpine:initialized', () => {\n        // Will be executed after initializing Alpine.\n    })\n</script>\n```\n\n[→ Read more about Alpine lifecycle events](/essentials/lifecycle#alpine-initialization)\n\n\n<a name=\"x-ref-no-more-dynamic\"></a>\n### `x-ref` no longer supports binding\n\nIn Alpine V2 for below code\n\n```alpine\n<div x-data=\"{options: [{value: 1}, {value: 2}, {value: 3}] }\">\n    <div x-ref=\"0\">0</div>\n    <template x-for=\"option in options\">\n        <div :x-ref=\"option.value\" x-text=\"option.value\"></div>\n    </template>\n\n    <button @click=\"console.log($refs[0], $refs[1], $refs[2], $refs[3]);\">Display $refs</button>\n</div>\n```\n\nafter clicking button all `$refs` were displayed. However, in Alpine V3 it's possible to access only `$refs` for elements created statically, so only first ref will be returned as expected.\n\n\n<a name=\"no-ie-11\"></a>\n### IE11 no longer supported\n\nAlpine will no longer officially support Internet Explorer 11. If you need support for IE11, we recommend still using Alpine V2.\n\n## Deprecated APIs\n\nThe following 2 APIs will still work in V3, but are considered deprecated and are likely to be removed at some point in the future.\n\n<a name=\"away-replace-with-outside\"></a>\n### Event listener modifier `.away` should be replaced with `.outside`\n\n```alpine\n<!-- 🚫 Before -->\n<div x-show=\"open\" @click.away=\"open = false\">\n    ...\n</div>\n\n<!-- ✅ After -->\n<div x-show=\"open\" @click.outside=\"open = false\">\n    ...\n</div>\n```\n\n<a name=\"alpine-data-instead-of-global-functions\"></a>\n### Prefer `Alpine.data()` to global Alpine function data providers\n\n```alpine\n<!-- 🚫 Before -->\n<div x-data=\"dropdown()\">\n    ...\n</div>\n\n<script>\n    function dropdown() {\n        return {\n            ...\n        }\n    }\n</script>\n\n<!-- ✅ After -->\n<div x-data=\"dropdown\">\n    ...\n</div>\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.data('dropdown', () => ({\n            ...\n        }))\n    })\n</script>\n```\n\n> Note that you need to define `Alpine.data()` extensions BEFORE you call `Alpine.start()`. For more information, refer to the [Lifecycle Concerns](https://alpinejs.dev/advanced/extending#lifecycle-concerns) and [Installation as a Module](https://alpinejs.dev/essentials/installation#as-a-module) documentation pages. \n"
  },
  {
    "path": "packages/focus/.gitignore",
    "content": ""
  },
  {
    "path": "packages/focus/builds/cdn.js",
    "content": "import trap from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(trap)\n})\n"
  },
  {
    "path": "packages/focus/builds/module.js",
    "content": "import focus from '../src/index.js'\n\nexport default focus\n\nexport { focus }\n"
  },
  {
    "path": "packages/focus/package.json",
    "content": "{\n    \"name\": \"@alpinejs/focus\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Manage focus within a page\",\n    \"homepage\": \"https://alpinejs.dev/plugins/focus\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/focus\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"dependencies\": {\n        \"focus-trap\": \"^8.0.0\",\n        \"tabbable\": \"^6.4.0\"\n    }\n}\n"
  },
  {
    "path": "packages/focus/src/index.js",
    "content": "import { createFocusTrap } from 'focus-trap'\nimport { focusable, isFocusable } from 'tabbable'\n\nexport default function (Alpine) {\n    let lastFocused\n    let currentFocused\n\n    window.addEventListener('focusin', () => {\n        lastFocused = currentFocused\n        currentFocused = document.activeElement\n    })\n\n    Alpine.magic('focus', el => {\n        let within = el\n\n        return {\n            __noscroll: false,\n            __wrapAround: false,\n            within(el) { within = el; return this },\n            withoutScrolling() { this.__noscroll = true; return this },\n            noscroll() { this.__noscroll = true; return this },\n            withWrapAround() { this.__wrapAround = true; return this },\n            wrap() { return this.withWrapAround() },\n            focusable(el) {\n                return isFocusable(el)\n            },\n            previouslyFocused() {\n                return lastFocused\n            },\n            lastFocused() {\n                return lastFocused\n            },\n            focused() {\n                return currentFocused\n            },\n            focusables() {\n                if (Array.isArray(within)) return within\n\n                return focusable(within, { displayCheck: 'none' })\n            },\n            all() { return this.focusables() },\n            isFirst(el) {\n                let els = this.all()\n\n                return els[0] && els[0].isSameNode(el)\n            },\n            isLast(el) {\n                let els = this.all()\n\n                return els.length && els.slice(-1)[0].isSameNode(el)\n            },\n            getFirst() { return this.all()[0] },\n            getLast() { return this.all().slice(-1)[0] },\n            getNext() {\n                let list = this.all()\n                let current = document.activeElement\n\n                // Can't find currently focusable element in list.\n                if (list.indexOf(current) === -1) return\n\n                // This is the last element in the list and we want to wrap around.\n                if (this.__wrapAround && list.indexOf(current) === list.length - 1) {\n                    return list[0]\n                }\n\n                return list[list.indexOf(current) + 1]\n            },\n            getPrevious() {\n                let list = this.all()\n                let current = document.activeElement\n\n                // Can't find currently focusable element in list.\n                if (list.indexOf(current) === -1) return\n\n                // This is the first element in the list and we want to wrap around.\n                if (this.__wrapAround && list.indexOf(current) === 0) {\n                    return list.slice(-1)[0]\n                }\n\n                return list[list.indexOf(current) - 1]\n            },\n            first() { this.focus(this.getFirst()) },\n            last() { this.focus(this.getLast()) },\n            next() { this.focus(this.getNext()) },\n            previous() { this.focus(this.getPrevious()) },\n            prev() { return this.previous() },\n            focus(el) {\n                if (! el) return\n\n                setTimeout(() => {\n                    if (! el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0')\n\n                    el.focus({ preventScroll: this.__noscroll })\n                })\n            }\n        }\n    })\n\n    Alpine.directive('trap', Alpine.skipDuringClone(\n        (el, { expression, modifiers }, { effect, evaluateLater, cleanup }) => {\n            let evaluator = evaluateLater(expression)\n\n            let oldValue = false\n\n            let options = {\n                escapeDeactivates: false,\n                allowOutsideClick: true,\n                fallbackFocus: () => el,\n            }\n\n            let undoInert = () => {}\n\n            if (modifiers.includes('noautofocus')) {\n                options.initialFocus = false\n            } else {\n                let autofocusEl = el.querySelector('[autofocus]')\n\n                if (autofocusEl) options.initialFocus = autofocusEl\n            }\n\n            if (modifiers.includes('inert')) {\n                options.onPostActivate = () => {\n                    Alpine.nextTick(() => {\n                        undoInert = setInert(el);\n                    });\n                }\n            }\n\n            let trap = createFocusTrap(el, options)\n\n            let undoDisableScrolling = () => {}\n\n            const releaseFocus = () => {\n                undoInert()\n                undoInert = () => {}\n\n                undoDisableScrolling()\n                undoDisableScrolling = () => {}\n\n                trap.deactivate({\n                    returnFocus: !modifiers.includes('noreturn')\n                })\n            }\n\n            effect(() => evaluator(value => {\n                if (oldValue === value) return\n\n                // Start trapping.\n                if (value && ! oldValue) {\n                    if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling()\n\n                    // Activate the trap after a generous tick. (Needed to play nice with transitions...)\n                    setTimeout(() => {\n                        trap.activate()\n                    }, 15)\n                }\n\n                // Stop trapping.\n                if (! value && oldValue) {\n                    releaseFocus()\n                }\n\n                oldValue = !! value\n            }))\n\n            cleanup(releaseFocus)\n        },\n        // When cloning, we only want to add aria-hidden attributes to the\n        // DOM and not try to actually trap, as trapping can mess with the\n        // live DOM and isn't just isolated to the cloned DOM.\n        (el, { expression, modifiers }, { evaluate }) => {\n            if (modifiers.includes('inert') && evaluate(expression)) setInert(el)\n        },\n    ))\n}\n\nfunction setInert(el) {\n    let undos = []\n\n    crawlSiblingsUp(el, (sibling) => {\n        let cache = sibling.hasAttribute('aria-hidden')\n\n        sibling.setAttribute('aria-hidden', 'true')\n\n        undos.push(() => cache || sibling.removeAttribute('aria-hidden'))\n    })\n\n    return () => {\n        while(undos.length) undos.pop()()\n    }\n}\n\nfunction crawlSiblingsUp(el, callback) {\n    if (el.isSameNode(document.body) || ! el.parentNode) return\n\n    Array.from(el.parentNode.children).forEach(sibling => {\n        if (sibling.isSameNode(el)) {\n            crawlSiblingsUp(el.parentNode, callback)\n        } else {\n            callback(sibling)\n        }\n    })\n}\n\nfunction disableScrolling() {\n    let overflow = document.documentElement.style.overflow\n    let paddingRight = document.documentElement.style.paddingRight\n\n    let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth\n\n    document.documentElement.style.overflow = 'hidden'\n    document.documentElement.style.paddingRight = `${scrollbarWidth}px`\n\n    return () => {\n        document.documentElement.style.overflow = overflow\n        document.documentElement.style.paddingRight = paddingRight\n    }\n}\n"
  },
  {
    "path": "packages/history/builds/cdn.js",
    "content": "import history from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(history)\n})\n"
  },
  {
    "path": "packages/history/builds/module.js",
    "content": "import history from '../src/index.js'\nimport { track } from '../src/index.js'\n\nexport default history\n\nexport { history, track }\n"
  },
  {
    "path": "packages/history/package.json",
    "content": "{\n    \"name\": \"@alpinejs/history\",\n    \"version\": \"3.0.0-alpha.0\",\n    \"description\": \"Sync Alpine data with the browser's query string\",\n    \"homepage\": \"https://alpinejs.dev/\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/history\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"dependencies\": {\n        \"@vue/reactivity\": \"^3.0.2\"\n    }\n}\n"
  },
  {
    "path": "packages/history/src/index.js",
    "content": "// This plugin has been moved into the livewire/livewire repository until it's more stable and ready to tag.\n"
  },
  {
    "path": "packages/intersect/builds/cdn.js",
    "content": "import intersect from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(intersect)\n})\n"
  },
  {
    "path": "packages/intersect/builds/module.js",
    "content": "import intersect from './../src/index.js'\n\nexport default intersect\n\nexport { intersect }\n"
  },
  {
    "path": "packages/intersect/package.json",
    "content": "{\n    \"name\": \"@alpinejs/intersect\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Trigger JavaScript when an element enters the viewport\",\n    \"homepage\": \"https://alpinejs.dev/plugins/intersect\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/intersect\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/intersect/src/index.js",
    "content": "export default function (Alpine) {\n    Alpine.directive('intersect', Alpine.skipDuringClone((el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {\n        let evaluate = evaluateLater(expression)\n\n        let options = {\n            rootMargin: getRootMargin(modifiers),\n            threshold: getThreshold(modifiers),\n        }\n\n        let observer = new IntersectionObserver(entries => {\n            entries.forEach(entry => {\n                // Ignore entry if intersecting in leave mode, or not intersecting in enter mode\n                if (entry.isIntersecting === (value === 'leave')) return\n\n                evaluate()\n\n                modifiers.includes('once') && observer.disconnect()\n            })\n        }, options)\n\n        observer.observe(el)\n\n        cleanup(() => {\n            observer.disconnect()\n        })\n    }))\n}\n\nfunction getThreshold(modifiers) {\n    if (modifiers.includes('full')) return 0.99\n    if (modifiers.includes('half')) return 0.5\n    if (! modifiers.includes('threshold')) return 0\n\n    let threshold = modifiers[modifiers.indexOf('threshold') + 1]\n\n    if (threshold === '100') return 1\n    if (threshold === '0') return 0\n\n    return Number(`.${threshold}`)\n}\n\nexport function getLengthValue(rawValue) {\n    // Supported: -10px, -20 (implied px), 30 (implied px), 40px, 50%\n    let match = rawValue.match(/^(-?[0-9]+)(px|%)?$/)\n    return match ? match[1] + (match[2] || 'px') : undefined\n}\n\nexport function getRootMargin(modifiers) {\n    const key = 'margin'\n    const fallback = '0px 0px 0px 0px'\n    const index = modifiers.indexOf(key)\n\n    // If the modifier isn't present, use the default.\n    if (index === -1) return fallback\n\n    // Grab the 4 subsequent length values after it: x-intersect.margin.300px.0.50%.0\n    let values = []\n        for (let i = 1; i < 5; i++) {\n            values.push(getLengthValue(modifiers[index + i] || ''))\n        }\n\n    // Filter out undefined values (not a valid length)\n    values = values.filter((v) => v !== undefined)\n\n    return values.length ? values.join(' ').trim() : fallback\n}\n"
  },
  {
    "path": "packages/mask/builds/cdn.js",
    "content": "import mask from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(mask)\n})\n"
  },
  {
    "path": "packages/mask/builds/module.js",
    "content": "import mask, { formatInput } from '../src/index.js'\n\nexport default mask\n\nexport { mask, formatInput }\n"
  },
  {
    "path": "packages/mask/package.json",
    "content": "{\n    \"name\": \"@alpinejs/mask\",\n    \"version\": \"3.15.8\",\n    \"description\": \"An Alpine plugin for input masking\",\n    \"homepage\": \"https://alpinejs.dev/plugins/mask\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/mask\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\"\n}\n"
  },
  {
    "path": "packages/mask/src/index.js",
    "content": "\nexport default function (Alpine) {\n    Alpine.directive('mask', (el, { value, expression }, { effect, evaluateLater, cleanup }) => {\n        let templateFn = () => expression\n        let lastInputValue = ''\n\n        queueMicrotask(() => {\n            if (['function', 'dynamic'].includes(value)) {\n                // This is an x-mask:function directive.\n\n                let evaluator = evaluateLater(expression)\n\n                effect(() => {\n                    templateFn = input => {\n                        let result\n\n                        // We need to prevent \"auto-evaluation\" of functions like\n                        // x-on expressions do so that we can use them as mask functions.\n                        Alpine.dontAutoEvaluateFunctions(() => {\n                            evaluator(value => {\n                                result = typeof value === 'function' ? value(input) : value\n                            }, { scope: {\n                                // These are \"magics\" we'll make available to the x-mask:function:\n                                '$input': input,\n                                '$money': formatMoney.bind({ el }),\n                            }})\n                        })\n\n                        return result\n                    }\n\n                    // Run on initialize which serves a dual purpose:\n                    // - Initializing the mask on the input if it has an initial value.\n                    // - Running the template function to set up reactivity, so that\n                    //   when a dependency inside it changes, the input re-masks.\n                    processInputValue(el, false)\n                })\n            } else {\n                processInputValue(el, false)\n            }\n\n            // Override x-model's initial value...\n            if (el._x_model) {\n                // If the x-model value is the same, don't override it as that will trigger updates...\n                if (el._x_model.get() !== el.value) {\n                    // If the x-model value is `null` and the input value is an empty\n                    // string, don't override it as that will trigger updates...\n                    if (!(el._x_model.get() === null && el.value === '')) {\n                        el._x_model.set(el.value)\n                    }\n                }\n\n                let updater = el._x_forceModelUpdate\n                el._x_forceModelUpdate = (value) => {\n                    value = String(value)\n                    let template = templateFn(value)\n                    if (template && template !== 'false') {\n                        value = formatInput(template, value)\n                    }\n                    lastInputValue = value\n                    updater(value)\n                    el._x_model.set(value)\n                }\n            }\n        })\n\n        const controller = new AbortController()\n\n        cleanup(() => {\n            controller.abort()\n        })\n\n        el.addEventListener('input', () => processInputValue(el), {\n            signal: controller.signal,\n            // Setting this as a capture phase listener to ensure it runs\n            // before wire:model or x-model added as a latent binding...\n            capture: true,\n        })\n\n        // Don't \"restoreCursorPosition\" on \"blur\", because Safari\n        // will re-focus the input and cause a focus trap.\n        el.addEventListener('blur', () => processInputValue(el, false), { signal: controller.signal })\n\n        function processInputValue (el, shouldRestoreCursor = true) {\n            let input = el.value\n\n            let template = templateFn(input)\n\n            // If a template value is `falsy`, then don't process the input value\n            if(!template || template === 'false') return false\n\n            // If they hit backspace, don't process input.\n            if (lastInputValue.length - el.value.length === 1) {\n                return lastInputValue = el.value\n            }\n\n            let setInput = () => {\n                lastInputValue = el.value = formatInput(template,input)\n            }\n\n            if (shouldRestoreCursor) {\n                // When an input element's value is set, it moves the cursor to the end\n                // therefore we need to track, estimate, and restore the cursor after\n                // a change was made.\n                restoreCursorPosition(el, template, () => {\n                    setInput()\n                })\n            } else {\n                setInput()\n            }\n        }\n    }).before('model')\n}\n\nexport function restoreCursorPosition(el, template, callback) {\n    let cursorPosition = el.selectionStart\n    let unformattedValue = el.value\n\n    callback()\n\n    let beforeLeftOfCursorBeforeFormatting = unformattedValue.slice(0, cursorPosition)\n\n    let newPosition = formatInput(\n            template, beforeLeftOfCursorBeforeFormatting\n    ).length\n\n    el.setSelectionRange(newPosition, newPosition)\n}\n\nlet regexes = {\n    '9': /[0-9]/,\n    'a': /[a-zA-Z]/,\n    '*': /[a-zA-Z0-9]/,\n}\n\nexport function formatInput(template, input) {\n    let templateMark = 0\n    let inputMark = 0\n    let output = ''\n\n    // Walk the template and input chars simultaneously one by one...\n    while (templateMark < template.length && inputMark < input.length) {\n        let templateChar = template[templateMark]\n        let inputChar = input[inputMark]\n\n        // We've encountered a template placeholder...\n        if (templateChar in regexes) {\n            // If the input is \"allowed\" based on the placeholder...\n            if (regexes[templateChar].test(inputChar)) {\n                output += inputChar\n\n                templateMark++\n            }\n\n            inputMark++\n        } else { // We've encountered a template literal...\n            output += templateChar\n\n            templateMark++\n\n            if (templateChar === input[inputMark]) inputMark++\n        }\n    }\n\n    return output\n}\n\nexport function formatMoney(input, delimiter = '.', thousands, precision = 2) {\n    if (input === '-') return '-'\n    if (/^\\D+$/.test(input)) return '9'\n\n    if (thousands === null || thousands === undefined) {\n        thousands = delimiter === \",\" ? \".\" : \",\"\n    }\n\n    let addThousands = (input, thousands) => {\n        let output = ''\n        let counter = 0\n\n        for (let i = input.length - 1; i >= 0; i--) {\n            if (input[i] === thousands) continue;\n\n            if (counter === 3) {\n                output = input[i] + thousands + output\n                counter = 0\n            } else {\n                output = input[i] + output\n            }\n            counter++\n        }\n\n        return output\n    }\n\n    let minus = input.startsWith('-') ? '-' : ''\n    let strippedInput = input.replaceAll(new RegExp(`[^0-9\\\\${delimiter}]`, 'g'), '')\n    let template = Array.from({ length: strippedInput.split(delimiter)[0].length }).fill('9').join('')\n\n    template = `${minus}${addThousands(template, thousands)}`\n\n    if (precision > 0 && input.includes(delimiter))\n        template += `${delimiter}` + '9'.repeat(precision)\n\n    queueMicrotask(() => {\n        if (this.el.value.endsWith(delimiter)) return\n\n        if (this.el.value[this.el.selectionStart - 1] === delimiter) {\n            this.el.setSelectionRange(this.el.selectionStart - 1, this.el.selectionStart - 1)\n        }\n    })\n\n    return template\n}\n"
  },
  {
    "path": "packages/morph/builds/cdn.js",
    "content": "import morph from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(morph)\n})\n"
  },
  {
    "path": "packages/morph/builds/module.js",
    "content": "import morph from '../src/index.js'\n\nexport default morph\n\nexport { morph }\n"
  },
  {
    "path": "packages/morph/package.json",
    "content": "{\n    \"name\": \"@alpinejs/morph\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Diff and patch a block of HTML on a page with an HTML template\",\n    \"homepage\": \"https://alpinejs.dev/plugins/morph\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/morph\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\"\n}\n"
  },
  {
    "path": "packages/morph/src/index.js",
    "content": "import { morph, morphBetween } from './morph'\n\nexport default function (Alpine) {\n    Alpine.morph = morph\n    Alpine.morphBetween = morphBetween\n}\n\nexport { morph, morphBetween }\n"
  },
  {
    "path": "packages/morph/src/morph.js",
    "content": "let resolveStep = () => {}\n\nlet logger = () => {}\n\nexport function morph(from, toHtml, options) {\n    monkeyPatchDomSetAttributeToAllowAtSymbols()\n\n    // We're defining these globals and methods inside this function (instead of outside)\n    // because it's an async function and if run twice, they would overwrite\n    // each other.\n\n    let context = createMorphContext(options)\n\n    // Finally we morph the element\n\n    let toEl = typeof toHtml === 'string' ? createElement(toHtml) : toHtml\n\n    if (window.Alpine && window.Alpine.closestDataStack && ! from._x_dataStack) {\n        // Just in case a part of this template uses Alpine scope from somewhere\n        // higher in the DOM tree, we'll find that state and replace it on the root\n        // element so everything is synced up accurately.\n        toEl._x_dataStack = window.Alpine.closestDataStack(from)\n\n        // We will kick off a clone on the root element.\n        toEl._x_dataStack && window.Alpine.cloneNode(from, toEl)\n    }\n\n    context.patch(from, toEl)\n\n    return from\n}\n\nexport function morphBetween(startMarker, endMarker, toHtml, options = {}) {\n    monkeyPatchDomSetAttributeToAllowAtSymbols()\n\n    let context = createMorphContext(options)\n\n    // Setup from block...\n    let fromContainer = startMarker.parentNode\n    let fromBlock = new Block(startMarker, endMarker)\n\n    // Setup to block...\n    let toContainer = typeof toHtml === 'string'\n        ? (() => {\n            let container = document.createElement('div')\n            container.insertAdjacentHTML('beforeend', toHtml)\n            return container\n        })()\n        : toHtml\n\n    let toStartMarker = document.createComment('[morph-start]')\n    let toEndMarker = document.createComment('[morph-end]')\n\n    toContainer.insertBefore(toStartMarker, toContainer.firstChild)\n    toContainer.appendChild(toEndMarker)\n\n    let toBlock = new Block(toStartMarker, toEndMarker)\n\n    if (window.Alpine && window.Alpine.closestDataStack) {\n        toContainer._x_dataStack = window.Alpine.closestDataStack(fromContainer)\n        toContainer._x_dataStack && window.Alpine.cloneNode(fromContainer, toContainer)\n    }\n\n    // Run the patch\n    context.patchChildren(fromBlock, toBlock)\n}\n\nfunction createMorphContext(options = {}) {\n    let defaultGetKey = el => el.getAttribute('key')\n    let noop = () => {}\n\n    let context = {\n        key: options.key || defaultGetKey,\n        lookahead: options.lookahead || false,\n        updating: options.updating || noop,\n        updated: options.updated || noop,\n        removing: options.removing || noop,\n        removed: options.removed || noop,\n        adding: options.adding || noop,\n        added: options.added || noop\n    }\n\n    context.patch = function(from, to) {\n        if (context.differentElementNamesTypesOrKeys(from, to)) {\n            return context.swapElements(from, to)\n        }\n\n        let updateChildrenOnly = false\n        let skipChildren = false\n\n        // If we used `shouldSkip()` here and append the `skipChildren` function on the end, it will cause the signature of the `updating`\n        // hook to change. For example, when it was `shouldSkip()` the signature was `updating: (el, toEl, childrenOnly, skip)`. But if\n        // we append `skipChildren()`, it would make the signature `updating: (el, toEl, childrenOnly, skipChildren, skip)`. This is\n        // a breaking change due to how the `shouldSkip()` function is structured.\n        //\n        // So we're using `shouldSkipChildren()` instead which doesn't have this problem as it allows us to pass in the `skipChildren()`\n        // function as an earlier parameter and then append it to the `updating` hook signature manually. The signature of `updating`\n        // hook is now `updating: (el, toEl, childrenOnly, skip, skipChildren)`.\n\n        let skipUntil = predicate => context.skipUntilCondition = predicate\n\n        if (shouldSkipChildren(context.updating, () => skipChildren = true, skipUntil, from, to, () => updateChildrenOnly = true)) return\n\n        // Initialize the server-side HTML element with Alpine...\n        if (from.nodeType === 1 && window.Alpine) {\n            window.Alpine.cloneNode(from, to)\n\n            if (from._x_teleport && to._x_teleport) {\n                context.patch(from._x_teleport, to._x_teleport)\n            }\n        }\n\n        if (textOrComment(to)) {\n            context.patchNodeValue(from, to)\n\n            context.updated(from, to)\n\n            return\n        }\n\n        if (! updateChildrenOnly) {\n            context.patchAttributes(from, to)\n        }\n\n        context.updated(from, to)\n\n        if (! skipChildren) {\n            context.patchChildren(from, to)\n        }\n    }\n\n    context.differentElementNamesTypesOrKeys = function(from, to) {\n        return from.nodeType != to.nodeType\n            || from.nodeName != to.nodeName\n            || context.getKey(from) != context.getKey(to)\n    }\n\n    context.swapElements = function(from, to) {\n        if (shouldSkip(context.removing, from)) return\n\n        let toCloned = to.cloneNode(true)\n\n        if (shouldSkip(context.adding, toCloned)) return\n\n        from.replaceWith(toCloned)\n\n        context.removed(from)\n        context.added(toCloned)\n    }\n\n    context.patchNodeValue = function(from, to) {\n        let value = to.nodeValue\n\n        if (from.nodeValue !== value) {\n            // Change text node...\n            from.nodeValue = value\n        }\n    }\n\n    context.patchAttributes = function(from, to) {\n        if (from._x_transitioning) return\n\n        if (from._x_isShown && ! to._x_isShown) {\n            return\n        }\n        if (! from._x_isShown && to._x_isShown) {\n            return\n        }\n\n        let domAttributes = Array.from(from.attributes)\n        let toAttributes = Array.from(to.attributes)\n\n        for (let i = domAttributes.length - 1; i >= 0; i--) {\n            let name = domAttributes[i].name;\n\n            if (! to.hasAttribute(name)) {\n                if (name === 'open' && from.nodeName === 'DIALOG' && from.open) {\n                    from.close()\n                } else {\n                    from.removeAttribute(name)\n                }\n            }\n        }\n\n        for (let i = toAttributes.length - 1; i >= 0; i--) {\n            let name = toAttributes[i].name\n            let value = toAttributes[i].value\n\n            if (from.getAttribute(name) !== value) {\n                from.setAttribute(name, value)\n            }\n        }\n    }\n\n    context.patchChildren = function(from, to) {\n        let fromKeys = context.keyToMap(from.children)\n        let fromKeyHoldovers = {}\n\n        let currentTo = getFirstNode(to)\n        let currentFrom = getFirstNode(from)\n\n        while (currentTo) {\n            // If the \"from\" element has a dynamically bound \"id\" (x-bind:id=\"...\"),\n            // Let's transfer it to the \"to\" element so that there isn't a key mismatch...\n            seedingMatchingId(currentTo, currentFrom)\n\n            let toKey = context.getKey(currentTo)\n            let fromKey = context.getKey(currentFrom)\n\n            if (context.skipUntilCondition) {\n                let fromDone = ! currentFrom || context.skipUntilCondition(currentFrom)\n                let toDone   = ! currentTo   || context.skipUntilCondition(currentTo)\n                if (fromDone && toDone) {\n                    context.skipUntilCondition = null\n                } else {\n                    if (! fromDone) currentFrom = currentFrom && getNextSibling(from, currentFrom)\n                    if (! toDone)   currentTo   = currentTo   && getNextSibling(to, currentTo)\n                    continue\n                }\n            }\n\n            // Add new elements...\n            if (! currentFrom) {\n                if (toKey && fromKeyHoldovers[toKey]) {\n                    // Add element (from key)...\n                    let holdover = fromKeyHoldovers[toKey]\n\n                    from.appendChild(holdover)\n\n                    currentFrom = holdover\n                    fromKey = context.getKey(currentFrom)\n                } else {\n                    if(! shouldSkip(context.adding, currentTo)) {\n                        // Add element...\n                        let clone = currentTo.cloneNode(true)\n\n                        from.appendChild(clone)\n\n                        context.added(clone)\n                    }\n\n                    currentTo = getNextSibling(to, currentTo)\n\n                    continue\n                }\n            }\n\n            // Handle conditional markers (presumably added by backends like Livewire)...\n            let isIf = node => node && node.nodeType === 8 && node.textContent === '[if BLOCK]><![endif]'\n            let isEnd = node => node && node.nodeType === 8 && node.textContent === '[if ENDBLOCK]><![endif]'\n\n            if (isIf(currentTo) && isIf(currentFrom)) {\n                let nestedIfCount = 0\n\n                let fromBlockStart = currentFrom\n\n                while (currentFrom) {\n                    let next = getNextSibling(from, currentFrom)\n\n                    if (isIf(next)) {\n                        nestedIfCount++\n                    } else if (isEnd(next) && nestedIfCount > 0) {\n                        nestedIfCount--\n                    } else if (isEnd(next) && nestedIfCount === 0) {\n                        currentFrom = next\n\n                        break;\n                    }\n\n                    currentFrom = next\n                }\n\n                let fromBlockEnd = currentFrom\n\n                nestedIfCount = 0\n\n                let toBlockStart = currentTo\n\n                while (currentTo) {\n                    let next = getNextSibling(to, currentTo)\n\n                    if (isIf(next)) {\n                        nestedIfCount++\n                    } else if (isEnd(next) && nestedIfCount > 0) {\n                        nestedIfCount--\n                    } else if (isEnd(next) && nestedIfCount === 0) {\n                        currentTo = next\n\n                        break;\n                    }\n\n                    currentTo = next\n                }\n\n                let toBlockEnd = currentTo\n\n                let fromBlock = new Block(fromBlockStart, fromBlockEnd)\n                let toBlock = new Block(toBlockStart, toBlockEnd)\n\n                context.patchChildren(fromBlock, toBlock)\n\n                continue\n            }\n\n            // Lookaheads should only apply to non-text-or-comment elements...\n            if (currentFrom.nodeType === 1 && context.lookahead && ! currentFrom.isEqualNode(currentTo)) {\n                let nextToElementSibling = getNextSibling(to, currentTo)\n\n                let found = false\n\n                while (! found && nextToElementSibling) {\n                    if (nextToElementSibling.nodeType === 1 && currentFrom.isEqualNode(nextToElementSibling)) {\n                        found = true; // This \";\" needs to be here...\n\n                        currentFrom = context.addNodeBefore(from, currentTo, currentFrom)\n\n                        fromKey = context.getKey(currentFrom)\n                    }\n\n                    nextToElementSibling = getNextSibling(to, nextToElementSibling)\n                }\n            }\n\n            if (toKey !== fromKey) {\n                if (! toKey && fromKey) {\n                    // No \"to\" key...\n                    fromKeyHoldovers[fromKey] = currentFrom; // This \";\" needs to be here...\n                    currentFrom = context.addNodeBefore(from, currentTo, currentFrom)\n                    fromKeyHoldovers[fromKey].remove()\n                    currentFrom = getNextSibling(from, currentFrom)\n                    currentTo = getNextSibling(to, currentTo)\n\n                    continue\n                }\n\n                if (toKey && ! fromKey) {\n                    if (fromKeys[toKey]) {\n                        // No \"from\" key...\n                        currentFrom.replaceWith(fromKeys[toKey])\n                        currentFrom = fromKeys[toKey]\n                        fromKey = context.getKey(currentFrom)\n                    }\n                }\n\n                if (toKey && fromKey) {\n                    let fromKeyNode = fromKeys[toKey]\n\n                    if (fromKeyNode) {\n                        // Move \"from\" key...\n                        fromKeyHoldovers[fromKey] = currentFrom\n                        currentFrom.replaceWith(fromKeyNode)\n                        currentFrom = fromKeyNode\n                        fromKey = context.getKey(currentFrom)\n                    } else {\n                        // Swap elements with keys...\n                        fromKeyHoldovers[fromKey] = currentFrom; // This \";\" needs to be here...\n                        currentFrom = context.addNodeBefore(from, currentTo, currentFrom)\n                        fromKeyHoldovers[fromKey].remove()\n                        currentFrom = getNextSibling(from, currentFrom)\n                        currentTo = getNextSibling(to, currentTo)\n\n                        continue\n                    }\n                }\n            }\n\n            // Get next from sibling before patching in case the node is replaced\n            let currentFromNext = currentFrom && getNextSibling(from, currentFrom) //dom.next(from, fromChildren, currentFrom))\n\n            // Patch elements\n            context.patch(currentFrom, currentTo)\n\n            currentTo = currentTo && getNextSibling(to, currentTo) // dom.next(from, toChildren, currentTo))\n\n            currentFrom = currentFromNext\n        }\n\n        // Cleanup extra forms.\n        let removals = []\n\n        // We need to collect the \"removals\" first before actually\n        // removing them so we don't mess with the order of things.\n        while (currentFrom) {\n            if (! shouldSkip(context.removing, currentFrom)) removals.push(currentFrom)\n\n            // currentFrom = dom.next(fromChildren, currentFrom)\n            currentFrom = getNextSibling(from, currentFrom)\n        }\n\n        // Now we can do the actual removals.\n        while (removals.length) {\n            let domForRemoval = removals.shift()\n\n            domForRemoval.remove()\n\n            context.removed(domForRemoval)\n        }\n    }\n\n    context.getKey = function(el) {\n        return el && el.nodeType === 1 && context.key(el)\n    }\n\n    context.keyToMap = function(els) {\n        let map = {}\n\n        for (let el of els) {\n            let theKey = context.getKey(el)\n\n            if (theKey) {\n                map[theKey] = el\n            }\n        }\n\n        return map\n    }\n\n    context.addNodeBefore = function(parent, node, beforeMe) {\n        if(! shouldSkip(context.adding, node)) {\n            let clone = node.cloneNode(true)\n\n            parent.insertBefore(clone, beforeMe)\n\n            context.added(clone)\n\n            return clone\n        }\n\n        return node\n    }\n\n    return context\n}\n\n// These are legacy holdovers that don't do anything anymore...\nmorph.step = () => {}\nmorph.log = () => {}\n\nfunction shouldSkip(hook, ...args) {\n    let skip = false\n\n    hook(...args, () => skip = true)\n\n    return skip\n}\n\n// Due to the structure of the `shouldSkip()` function, we can't pass in the `skipChildren`\n// function as an argument as it would change the signature of the existing hooks. So we\n// are using this function instead which doesn't have this problem as we can pass the\n// `skipChildren` function in as an earlier argument and then append it to the end\n// of the hook signature manually.\nfunction shouldSkipChildren(hook, skipChildren, skipUntil, ...args) {\n    let skip = false\n    hook(...args, () => skip = true, skipChildren, skipUntil)\n    return skip\n}\n\nlet patched = false\n\nexport function createElement(html) {\n    const template = document.createElement('template')\n    template.innerHTML = html\n    return template.content.firstElementChild\n}\n\nexport function textOrComment(el) {\n    return el.nodeType === 3\n        || el.nodeType === 8\n}\n\n// \"Block\"s are used when morphing with conditional markers.\n// They allow us to patch isolated portions of a list of\n// siblings in a DOM tree...\nclass Block {\n    constructor(start, end) {\n        // We're assuming here that the start and end caps are comment blocks...\n        this.startComment = start\n        this.endComment = end\n    }\n\n    get children() {\n        let children = [];\n\n        let currentNode = this.startComment.nextSibling\n\n        while (currentNode && currentNode !== this.endComment) {\n            children.push(currentNode)\n\n            currentNode = currentNode.nextSibling\n        }\n\n        return children\n    }\n\n    appendChild(child) {\n        this.endComment.before(child)\n    }\n\n    get firstChild() {\n        let first = this.startComment.nextSibling\n\n        if (first === this.endComment) return\n\n        return first\n    }\n\n    nextNode(reference) {\n        let next = reference.nextSibling\n\n        if (next === this.endComment) return\n\n        return next\n    }\n\n    insertBefore(newNode, reference) {\n        reference.before(newNode)\n\n        return newNode\n    }\n}\n\nfunction getFirstNode(parent) {\n    return parent.firstChild\n}\n\nfunction getNextSibling(parent, reference) {\n    let next\n\n    if (parent instanceof Block) {\n        next =  parent.nextNode(reference)\n    } else {\n        next = reference.nextSibling\n    }\n\n    return next\n}\n\nfunction monkeyPatchDomSetAttributeToAllowAtSymbols() {\n    if (patched) return\n\n    patched = true\n\n    // Because morphdom may add attributes to elements containing \"@\" symbols\n    // like in the case of an Alpine `@click` directive, we have to patch\n    // the standard Element.setAttribute method to allow this to work.\n    let original = Element.prototype.setAttribute\n\n    let hostDiv = document.createElement('div')\n\n    Element.prototype.setAttribute = function newSetAttribute(name, value) {\n        if (! name.includes('@')) {\n            return original.call(this, name, value)\n        }\n\n        let escapedValue = value.replace(/&/g, '&amp;').replace(/\"/g, '&quot;')\n\n        hostDiv.innerHTML = `<span ${name}=\"${escapedValue}\"></span>`\n\n        let attr = hostDiv.firstElementChild.getAttributeNode(name)\n\n        hostDiv.firstElementChild.removeAttributeNode(attr)\n\n        this.setAttributeNode(attr)\n    }\n}\n\nfunction seedingMatchingId(to, from) {\n    let fromId = from && from._x_bindings && from._x_bindings.id\n\n    if (! fromId) return\n    if (! to.setAttribute) return\n\n    to.setAttribute('id', fromId)\n    to.id = fromId\n}\n"
  },
  {
    "path": "packages/morph/src/old_morph.js",
    "content": "import { dom, createElement, textOrComment} from './dom.js'\n\nlet resolveStep = () => {}\n\nlet logger = () => {}\n\nexport async function morph(from, toHtml, options) {\n    // We're defining these globals and methods inside this function (instead of outside)\n    // because it's an async function and if run twice, they would overwrite\n    // each other.\n\n    let fromEl\n    let toEl\n    let key\n        ,lookahead\n        ,updating\n        ,updated\n        ,removing\n        ,removed\n        ,adding\n        ,added\n        ,debug\n\n\n    function breakpoint(message) {\n        if (! debug) return\n\n        logger((message || '').replace('\\n', '\\\\n'), fromEl, toEl)\n\n        return new Promise(resolve => resolveStep = () => resolve())\n    }\n\n    function assignOptions(options = {}) {\n        let defaultGetKey = el => el.getAttribute('key')\n        let noop = () => {}\n\n        updating = options.updating || noop\n        updated = options.updated || noop\n        removing = options.removing || noop\n        removed = options.removed || noop\n        adding = options.adding || noop\n        added = options.added || noop\n        key = options.key || defaultGetKey\n        lookahead = options.lookahead || false\n        debug = options.debug || false\n    }\n\n    async function patch(from, to) {\n        // This is a time saver, however, it won't catch differences in nested <template> tags.\n        // I'm leaving this here as I believe it's an important speed improvement, I just\n        // don't see a way to enable it currently:\n        //\n        // if (from.isEqualNode(to)) return\n\n        if (differentElementNamesTypesOrKeys(from, to)) {\n            let result = patchElement(from, to)\n\n            await breakpoint('Swap elements')\n\n            return result\n        }\n\n        let updateChildrenOnly = false\n\n        if (shouldSkip(updating, from, to, () => updateChildrenOnly = true)) return\n\n        window.Alpine && initializeAlpineOnTo(from, to, () => updateChildrenOnly = true)\n\n        if (textOrComment(to)) {\n            await patchNodeValue(from, to)\n            updated(from, to)\n\n            return\n        }\n\n        if (! updateChildrenOnly) {\n            await patchAttributes(from, to)\n        }\n\n        updated(from, to)\n\n        await patchChildren(from, to)\n    }\n\n    function differentElementNamesTypesOrKeys(from, to) {\n        return from.nodeType != to.nodeType\n            || from.nodeName != to.nodeName\n            || getKey(from) != getKey(to)\n    }\n\n    function patchElement(from, to) {\n        if (shouldSkip(removing, from)) return\n\n        let toCloned = to.cloneNode(true)\n\n        if (shouldSkip(adding, toCloned)) return\n\n        dom(from).replace(toCloned)\n\n        removed(from)\n        added(toCloned)\n    }\n\n    async function patchNodeValue(from, to) {\n        let value = to.nodeValue\n\n        if (from.nodeValue !== value) {\n            from.nodeValue = value\n\n            await breakpoint('Change text node to: ' + value)\n        }\n    }\n\n    async function patchAttributes(from, to) {\n        if (from._x_isShown && ! to._x_isShown) {\n            return\n        }\n        if (! from._x_isShown && to._x_isShown) {\n            return\n        }\n\n        let domAttributes = Array.from(from.attributes)\n        let toAttributes = Array.from(to.attributes)\n\n        for (let i = domAttributes.length - 1; i >= 0; i--) {\n            let name = domAttributes[i].name;\n\n            if (! to.hasAttribute(name)) {\n                from.removeAttribute(name)\n\n                await breakpoint('Remove attribute')\n            }\n        }\n\n        for (let i = toAttributes.length - 1; i >= 0; i--) {\n            let name = toAttributes[i].name\n            let value = toAttributes[i].value\n\n            if (from.getAttribute(name) !== value) {\n                from.setAttribute(name, value)\n\n                await breakpoint(`Set [${name}] attribute to: \"${value}\"`)\n            }\n        }\n    }\n\n    async function patchChildren(from, to) {\n        let domChildren = from.childNodes\n        let toChildren = to.childNodes\n\n        let toKeyToNodeMap = keyToMap(toChildren)\n        let domKeyDomNodeMap = keyToMap(domChildren)\n\n        let currentTo = dom(to).nodes().first()\n        let currentFrom = dom(from).nodes().first()\n\n        let domKeyHoldovers = {}\n\n        let isInsideWall = false\n\n        while (currentTo) {\n            // If \"<!-- end -->\"\n            if (\n                currentTo.nodeType === 8\n                && currentTo.textContent === ' end '\n            ) {\n                isInsideWall = false\n                currentTo = dom(currentTo).nodes().next()\n                currentFrom = dom(currentFrom).nodes().next()\n                continue\n            }\n\n            if (insideWall)\n\n            if (isInsideWall) {\n                console.log(currentFrom, currentTo)\n            }\n\n            let toKey = getKey(currentTo)\n            let domKey = getKey(currentFrom)\n\n            // Add new elements\n            if (! currentFrom) {\n                if (toKey && domKeyHoldovers[toKey]) {\n                    let holdover = domKeyHoldovers[toKey]\n\n                    dom(from).append(holdover)\n                    currentFrom = holdover\n\n                    await breakpoint('Add element (from key)')\n                } else {\n                    let added = addNodeTo(currentTo, from) || {}\n\n                    await breakpoint('Add element: ' + (added.outerHTML || added.nodeValue))\n\n                    currentTo = dom(currentTo).nodes().next()\n\n                    continue\n                }\n            }\n\n            // If \"<!-- if -->\"\n            if (\n                currentTo.nodeType === 8\n                && currentTo.textContent === ' if '\n                && currentFrom.nodeType === 8\n                && currentFrom.textContent === ' if '\n            ) {\n                isInsideWall = true\n                currentTo = dom(currentTo).nodes().next()\n                currentFrom = dom(currentFrom).nodes().next()\n                continue\n            }\n\n            if (lookahead) {\n                let nextToElementSibling = dom(currentTo).next()\n\n                let found = false\n\n                while (!found && nextToElementSibling) {\n                    if (currentFrom.isEqualNode(nextToElementSibling)) {\n                        found = true\n\n                        currentFrom = addNodeBefore(currentTo, currentFrom)\n\n                        domKey = getKey(currentFrom)\n\n                        await breakpoint('Move element (lookahead)')\n                    }\n\n                    nextToElementSibling = dom(nextToElementSibling).next()\n                }\n            }\n\n            if (toKey !== domKey) {\n                if (! toKey && domKey) {\n                    domKeyHoldovers[domKey] = currentFrom\n                    currentFrom = addNodeBefore(currentTo, currentFrom)\n                    domKeyHoldovers[domKey].remove()\n                    currentFrom = dom(currentFrom).nodes().next()\n                    currentTo = dom(currentTo).nodes().next()\n\n                    await breakpoint('No \"to\" key')\n\n                    continue\n                }\n\n                if (toKey && ! domKey) {\n                    if (domKeyDomNodeMap[toKey]) {\n                        currentFrom = dom(currentFrom).replace(domKeyDomNodeMap[toKey])\n\n                        await breakpoint('No \"from\" key')\n                    }\n                }\n\n                if (toKey && domKey) {\n                    domKeyHoldovers[domKey] = currentFrom\n                    let domKeyNode = domKeyDomNodeMap[toKey]\n\n                    if (domKeyNode) {\n                        currentFrom = dom(currentFrom).replace(domKeyNode)\n\n                        await breakpoint('Move \"from\" key')\n                    } else {\n                        domKeyHoldovers[domKey] = currentFrom\n                        currentFrom = addNodeBefore(currentTo, currentFrom)\n                        domKeyHoldovers[domKey].remove()\n                        currentFrom = dom(currentFrom).next()\n                        currentTo = dom(currentTo).next()\n\n                        await breakpoint('Swap elements with keys')\n\n                        continue\n                    }\n                }\n            }\n\n            // Get next from sibling before patching in case the node is replaced\n            let currentFromNext = currentFrom && dom(currentFrom).nodes().next()\n\n            // Patch elements\n            await patch(currentFrom, currentTo)\n\n            currentTo = currentTo && dom(currentTo).nodes().next()\n            currentFrom = currentFromNext\n        }\n\n        // Cleanup extra forms.\n        let removals = []\n\n        // We need to collect the \"removals\" first before actually\n        // removing them so we don't mess with the order of things.\n        while (currentFrom) {\n            if(! shouldSkip(removing, currentFrom)) removals.push(currentFrom)\n\n            currentFrom = dom(currentFrom).nodes().next()\n        }\n\n        // Now we can do the actual removals.\n        while (removals.length) {\n            let domForRemoval = removals.shift()\n\n            domForRemoval.remove()\n\n            await breakpoint('remove el')\n\n            removed(domForRemoval)\n        }\n    }\n\n    function getKey(el) {\n        return el && el.nodeType === 1 && key(el)\n    }\n\n    function keyToMap(els) {\n        let map = {}\n\n        els.forEach(el => {\n            let theKey = getKey(el)\n\n            if (theKey) {\n                map[theKey] = el\n            }\n        })\n\n        return map\n    }\n\n    function addNodeTo(node, parent) {\n        if(! shouldSkip(adding, node)) {\n            let clone = node.cloneNode(true)\n\n            dom(parent).append(clone)\n\n            added(clone)\n\n            return clone\n        }\n\n        return null;\n    }\n\n    function addNodeBefore(node, beforeMe) {\n        if(! shouldSkip(adding, node)) {\n            let clone = node.cloneNode(true)\n\n            dom(beforeMe).before(clone)\n\n            added(clone)\n\n            return clone\n        }\n\n        return beforeMe\n    }\n\n    // Finally we morph the element\n\n    assignOptions(options)\n\n    fromEl = from\n    toEl = typeof toHtml === 'string' ? createElement(toHtml) : toHtml\n\n    // If there is no x-data on the element we're morphing,\n    // let's seed it with the outer Alpine scope on the page.\n    if (window.Alpine && window.Alpine.closestDataStack && ! from._x_dataStack) {\n        toEl._x_dataStack = window.Alpine.closestDataStack(from)\n\n        toEl._x_dataStack && window.Alpine.clone(from, toEl)\n    }\n\n    await breakpoint()\n\n    await patch(from, toEl)\n\n    // Release these for the garbage collector.\n    fromEl = undefined\n    toEl = undefined\n\n    return from\n}\n\nmorph.step = () => resolveStep()\nmorph.log = (theLogger) => {\n    logger = theLogger\n}\n\nfunction shouldSkip(hook, ...args) {\n    let skip = false\n\n    hook(...args, () => skip = true)\n\n    return skip\n}\n\nfunction initializeAlpineOnTo(from, to, childrenOnly) {\n    if (from.nodeType !== 1) return\n\n    // If the element we are updating is an Alpine component...\n    if (from._x_dataStack) {\n        // Then temporarily clone it (with it's data) to the \"to\" element.\n        // This should simulate backend Livewire being aware of Alpine changes.\n        window.Alpine.clone(from, to)\n    }\n}\n"
  },
  {
    "path": "packages/navigate/builds/cdn.js",
    "content": "import navigate from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(navigate)\n})\n"
  },
  {
    "path": "packages/navigate/builds/module.js",
    "content": "import navigate from '../src/index.js'\n\nexport default navigate\n\nexport { navigate }\n"
  },
  {
    "path": "packages/navigate/package.json",
    "content": "{\n    \"name\": \"@alpinejs/navigate\",\n    \"version\": \"3.10.2\",\n    \"description\": \"An Alpine plugin for adding SPA-like navigation to your app.\",\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"dependencies\": {\n        \"nprogress\": \"^0.2.0\"\n    }\n}\n"
  },
  {
    "path": "packages/navigate/src/index.js",
    "content": "// This plugin has been moved into the livewire/livewire repository until it's more stable and ready to tag.\n"
  },
  {
    "path": "packages/persist/builds/cdn.js",
    "content": "import persist from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(persist)\n})\n"
  },
  {
    "path": "packages/persist/builds/module.js",
    "content": "import persist from '../src/index.js'\n\nexport default persist\n\nexport { persist }\n"
  },
  {
    "path": "packages/persist/package.json",
    "content": "{\n    \"name\": \"@alpinejs/persist\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Persist Alpine data across page loads\",\n    \"homepage\": \"https://alpinejs.dev/plugins/persist\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/persist\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"exports\": {\n        \"import\": \"./dist/module.esm.js\",\n        \"require\": \"./dist/module.cjs.js\"\n    },\n    \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/persist/src/index.js",
    "content": "export default function (Alpine) {\n    let persist = () => {\n        let alias\n        let storage\n\n        try {\n            storage = localStorage\n        } catch (e) {\n            console.error(e)\n            console.warn('Alpine: $persist is using temporary storage since localStorage is unavailable.')\n\n            let dummy = new Map();\n\n            storage = {\n                getItem: dummy.get.bind(dummy),\n                setItem: dummy.set.bind(dummy)\n            }\n        }\n\n        return Alpine.interceptor((initialValue, getter, setter, path, key) => {\n            let lookup = alias || `_x_${path}`\n\n            let initial = storageHas(lookup, storage)\n                ? storageGet(lookup, storage)\n                : initialValue\n\n            setter(initial)\n\n            Alpine.effect(() => {\n                let value = getter()\n\n                storageSet(lookup, value, storage)\n\n                setter(value)\n            })\n\n            return initial\n        }, func => {\n            func.as = key => { alias = key; return func },\n            func.using = target => { storage = target; return func }\n        })\n    }\n\n    Object.defineProperty(Alpine, '$persist', { get: () => persist() })\n    Alpine.magic('persist', persist)\n    Alpine.persist = (key, { get, set }, storage = localStorage) => {\n        let initial = storageHas(key, storage)\n            ? storageGet(key, storage)\n            : get()\n\n        set(initial)\n\n        Alpine.effect(() => {\n            let value = get()\n\n            storageSet(key, value, storage)\n\n            set(value)\n        })\n    }\n}\n\nfunction storageHas(key, storage) {\n    return storage.getItem(key) !== null\n}\n\nfunction storageGet(key, storage) {\n    let value = storage.getItem(key)\n\n    if (value === undefined) return\n\n    return JSON.parse(value)\n}\n\nfunction storageSet(key, value, storage) {\n    storage.setItem(key, JSON.stringify(value))\n}\n"
  },
  {
    "path": "packages/resize/builds/cdn.js",
    "content": "import resize from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(resize)\n})\n"
  },
  {
    "path": "packages/resize/builds/module.js",
    "content": "import resize from './../src/index.js'\n\nexport default resize\n\nexport { resize }\n"
  },
  {
    "path": "packages/resize/package.json",
    "content": "{\n    \"name\": \"@alpinejs/resize\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Trigger JavaScript when an element is resized on the page\",\n    \"homepage\": \"https://alpinejs.dev/plugins/intersect\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/resize\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/resize/src/index.js",
    "content": "export default function (Alpine) {\n    Alpine.directive('resize', Alpine.skipDuringClone((el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {\n        let evaluator = evaluateLater(expression)\n\n        let evaluate = (width, height) => {\n            evaluator(() => {}, { scope: { '$width': width, '$height': height }})\n        }\n\n        let off = modifiers.includes('document')\n            ? onDocumentResize(evaluate)\n            : onElResize(el, evaluate)\n\n        cleanup(() => off())\n    }))\n}\n\nfunction onElResize(el, callback) {\n    let observer = new ResizeObserver((entries) => {\n        let [width, height] = dimensions(entries)\n\n        callback(width, height)\n    })\n\n    observer.observe(el)\n\n    return () => observer.disconnect()\n}\n\nlet documentResizeObserver\nlet documentResizeObserverCallbacks = new Set\n\nfunction onDocumentResize(callback) {\n    documentResizeObserverCallbacks.add(callback)\n\n    if (! documentResizeObserver) {\n        documentResizeObserver = new ResizeObserver((entries) => {\n            let [width, height] = dimensions(entries)\n\n            documentResizeObserverCallbacks.forEach(i => i(width, height))\n        })\n\n        documentResizeObserver.observe(document.documentElement)\n    }\n\n    return () => {\n        documentResizeObserverCallbacks.delete(callback)\n    }\n}\n\nfunction dimensions(entries) {\n    let width, height\n\n    for (let entry of entries) {\n        width = entry.borderBoxSize[0].inlineSize\n        height = entry.borderBoxSize[0].blockSize\n    }\n\n    return [width, height]\n}\n"
  },
  {
    "path": "packages/sort/builds/cdn.js",
    "content": "import sort from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(sort)\n})\n"
  },
  {
    "path": "packages/sort/builds/module.js",
    "content": "import sort  from '../src/index.js'\n\nexport default sort\n\nexport { sort }\n"
  },
  {
    "path": "packages/sort/package.json",
    "content": "{\n    \"name\": \"@alpinejs/sort\",\n    \"version\": \"3.15.8\",\n    \"description\": \"An Alpine plugin for drag sorting items on the page\",\n    \"homepage\": \"https://alpinejs.dev/plugins/sort\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/sort\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"dependencies\": {\n        \"sortablejs\": \"^1.15.2\"\n    }\n}\n"
  },
  {
    "path": "packages/sort/src/index.js",
    "content": "import Sortable from 'sortablejs'\nimport { walk } from '../../alpinejs/src/utils/walk'\n\nexport default function (Alpine) {\n    Alpine.directive('sort', (el, { value, modifiers, expression }, { effect, evaluate, cleanup }) => {\n        if (value === 'config') {\n            return // This will get handled by the main directive...\n        }\n\n        if (value === 'handle') {\n            return // This will get handled by the main directive...\n        }\n\n        if (value === 'group') {\n            return // This will get handled by the main directive...\n        }\n\n        // Supporting both `x-sort:item` AND `x-sort:key` (key for BC)...\n        if (value === 'key' || value === 'item') {\n            if ([undefined, null, ''].includes(expression)) return\n\n            el._x_sort_key = evaluate(expression)\n\n            return\n        }\n\n        let preferences = {\n            hideGhost: ! modifiers.includes('ghost'),\n            useHandles: !! el.querySelector('[x-sort\\\\:handle],[wire\\\\:sort\\\\:handle]'),\n            group: getGroupName(el, modifiers),\n        }\n\n        let handleSort = generateSortHandler(expression, evaluate)\n\n        let config = getConfigurationOverrides(el, modifiers, evaluate)\n\n        let sortable = initSortable(el, config, preferences, (key, position) => {\n            handleSort(key, position)\n        })\n\n        cleanup(() => sortable.destroy())\n    })\n}\n\nfunction generateSortHandler(expression, evaluate) {\n    // No handler was passed to x-sort...\n    if ([undefined, null, ''].includes(expression)) return () => {}\n\n    return (key, position) => {\n        evaluate(expression, { scope: {\n            // Supporting both `$item` AND `$key` ($key for BC)...\n            $key: key,\n            $item: key,\n            $position: position,\n        }, params: [\n            key,\n            position\n        ] })\n    }\n}\n\nfunction getConfigurationOverrides(el, modifiers, evaluate)\n{\n    if (el.hasAttribute('x-sort:config')) {\n        return evaluate(el.getAttribute('x-sort:config'))\n    }\n\n    if (el.hasAttribute('wire:sort:config')) {\n        return evaluate(el.getAttribute('wire:sort:config'))\n    }\n\n    return {}\n}\n\nfunction initSortable(el, config, preferences, handle) {\n    let ghostRef\n\n    let options = {\n        animation: 150,\n\n        handle: preferences.useHandles ? '[x-sort\\\\:handle],[wire\\\\:sort\\\\:handle]' : null,\n\n        group: preferences.group,\n\n        scroll: true,\n\n        forceAutoScrollFallback: true,\n\n        scrollSensitivity: 50,\n\n        // This is here so that if a div containing inputs or buttons has x-sort:ignore, it will not prevent interaction...\n        preventOnFilter: false,\n\n        filter(e) {\n            if (e.target.hasAttribute('x-sort:ignore') || e.target.hasAttribute('wire:sort:ignore')) return true\n            if (e.target.closest('[x-sort\\\\:ignore]') || e.target.closest('[wire\\\\:sort\\\\:ignore]')) return true\n\n            // Normally, we would just filter out any elements without `[x-sort:item]`\n            // on them, however for backwards compatibility (when we didn't require\n            // `[x-sort:item]`) we will check for x-sort\\\\:item being used at all\n            if (! el.querySelector('[x-sort\\\\:item],[wire\\\\:sort\\\\:item]')) return false\n\n            let itemHasAttribute = e.target.closest('[x-sort\\\\:item],[wire\\\\:sort\\\\:item]')\n\n            return itemHasAttribute ? false : true\n        },\n\n        onSort(e) {\n            // If item has been dragged between groups...\n            if (e.from !== e.to) {\n                // And this is the group it was dragged FROM...\n                if (e.to !== e.target) {\n                    return // Don't do anything, because the other group will call the handler...\n                }\n            }\n\n            let key = undefined\n\n            // Support `x-sort:item` not being the first child...\n            walk(e.item, (el, skip) => {\n                if (key !== undefined) return\n\n                if (el._x_sort_key) {\n                    key = el._x_sort_key\n\n                    skip()\n                }\n            })\n\n            let position = e.newIndex\n\n            if (key !== undefined || key !== null) {\n                handle(key, position)\n            }\n        },\n\n        onStart() {\n            document.body.classList.add('sorting')\n\n            ghostRef = document.querySelector('.sortable-ghost')\n\n            if (preferences.hideGhost && ghostRef) ghostRef.style.opacity = '0'\n        },\n\n        onEnd() {\n            document.body.classList.remove('sorting')\n\n            if (preferences.hideGhost && ghostRef) ghostRef.style.opacity = '1'\n\n            ghostRef = undefined\n\n            keepElementsWithinMorphMarkers(el)\n        }\n    }\n\n    return new Sortable(el, { ...options, ...config })\n}\n\nfunction keepElementsWithinMorphMarkers(el) {\n    let cursor = el.firstChild\n\n    while (cursor.nextSibling) {\n        if (cursor.textContent.trim() === '[if ENDBLOCK]><![endif]') {\n            el.append(cursor)\n            break\n        }\n\n        cursor = cursor.nextSibling\n    }\n}\n\nfunction getGroupName(el, modifiers)\n{\n    if (el.hasAttribute('x-sort:group')) {\n        return el.getAttribute('x-sort:group')\n    }\n\n    if (el.hasAttribute('wire:sort:group')) {\n        return el.getAttribute('wire:sort:group')\n    }\n\n    return modifiers.indexOf('group') !== -1 ? modifiers[modifiers.indexOf('group') + 1] : null\n}\n"
  },
  {
    "path": "packages/ui/builds/cdn.js",
    "content": "import ui from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n    window.Alpine.plugin(ui)\n})\n"
  },
  {
    "path": "packages/ui/builds/module.js",
    "content": "import ui from '../src/index.js'\n\nexport default ui\n\nexport { ui }\n"
  },
  {
    "path": "packages/ui/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n    <meta charSet=\"utf-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <link rel=\"stylesheet\" href=\"https://rsms.me/inter/inter.css\" />\n    <link rel=\"stylesheet\" href=\"/styles.css\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://headlessui.dev/favicon-32x32.png\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"https://headlessui.dev/favicon-16x16.png\" />\n    <script src=\"//cdn.tailwindcss.com\"></script>\n\n    <title>Examples</title>\n</head>\n<body>\n    <div class=\"flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700\">\n        <header class=\"relative z-10 flex items-center justify-between flex-shrink-0 px-4 py-4 bg-gray-700 border-b border-gray-200 sm:px-6 lg:px-8\">\n            <a href=\"/\"><svg class=\"h-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 243 42\">\n                    <path fill=\"#fff\" d=\"M65.74 13.663c-2.62 0-4.702.958-5.974 2.95V6.499h-4.163V33.32h4.163V23.051c0-3.908 2.159-5.518 4.896-5.518 2.62 0 4.317 1.533 4.317 4.445V33.32h4.162V21.557c0-4.982-3.083-7.894-7.4-7.894zM79.936 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.674-10.116-6.052 0-10.176 4.407-10.176 10.078 0 5.748 4.124 10.078 10.484 10.078 3.778 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.925 1.341-2.66 2.376-4.972 2.376-3.084 0-5.512-1.533-6.168-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.506 0 4.934 1.418 5.512 4.713H79.898zM113.282 14.161v2.72c-1.465-1.992-3.739-3.218-6.746-3.218-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.162V14.16h-4.162zm-6.09 15.71c-3.469 0-6.091-2.567-6.091-6.13 0-3.564 2.622-6.131 6.091-6.131 3.469 0 6.09 2.567 6.09 6.13 0 3.564-2.621 6.132-6.09 6.132zM136.597 6.498v10.384c-1.465-1.993-3.739-3.219-6.746-3.219-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.163V6.497h-4.163zm-6.09 23.374c-3.469 0-6.09-2.568-6.09-6.131 0-3.564 2.621-6.131 6.09-6.131s6.09 2.567 6.09 6.13c0 3.564-2.621 6.132-6.09 6.132zM144.648 33.32h4.163V5.348h-4.163V33.32zM155.957 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.675-10.116-6.051 0-10.176 4.407-10.176 10.078 0 5.748 4.125 10.078 10.485 10.078 3.777 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.926 1.341-2.66 2.376-4.973 2.376-3.083 0-5.512-1.533-6.167-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.505 0 4.934 1.418 5.512 4.713h-11.332zM177.137 19.45c0-1.38 1.311-2.032 2.814-2.032 1.581 0 2.93.69 3.623 2.184l3.508-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.279-2.759l-3.584 2.07c1.233 2.758 4.008 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.369-4.98-10.369-8.468zM192.774 19.45c0-1.38 1.31-2.032 2.813-2.032 1.581 0 2.93.69 3.624 2.184l3.507-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.278-2.759l-3.585 2.07c1.233 2.758 4.009 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.368-4.98-10.368-8.468zM224.523 28.9c2.889 0 5.027-1.715 5.027-4.53v-8.782h-2.588v8.577c0 1.268-.676 2.219-2.439 2.219s-2.438-.951-2.438-2.22v-8.576h-2.569v8.782c0 2.815 2.138 4.53 5.007 4.53zM232.257 15.588V28.64h2.588V15.588h-2.588z\"> </path>\n                    <path fill=\"#fff\" fill-rule=\"evenodd\" d=\"M233.817 9.328H220.42c-2.96 0-5.359 2.385-5.359 5.327v13.318c0 2.942 2.399 5.327 5.359 5.327h13.397c2.959 0 5.358-2.385 5.358-5.327V14.655c0-2.942-2.399-5.327-5.358-5.327zM220.42 6.664c-4.439 0-8.038 3.578-8.038 7.99v13.319c0 4.413 3.599 7.99 8.038 7.99h13.397c4.439 0 8.038-3.577 8.038-7.99V14.655c0-4.413-3.599-7.99-8.038-7.99H220.42z\" clip-rule=\"evenodd\"></path>\n                    <path fill=\"#fff\" fill-rule=\"evenodd\" d=\"M220.42 9.328h13.397c2.959 0 5.358 2.385 5.358 5.327v13.318c0 2.942-2.399 5.327-5.358 5.327H220.42c-2.96 0-5.359-2.385-5.359-5.327V14.655c0-2.942 2.399-5.327 5.359-5.327zm-8.038 5.327c0-4.413 3.599-7.99 8.038-7.99h13.397c4.439 0 8.038 3.577 8.038 7.99v13.318c0 4.413-3.599 7.99-8.038 7.99H220.42c-4.439 0-8.038-3.577-8.038-7.99V14.655z\" clip-rule=\"evenodd\"></path>\n                    <path fill=\"url(#prefix__paint0_linear)\" d=\"M8.577 26.097l25.779-8.556c-.514-3.201-.88-5.342-1.307-6.974-.457-1.756-.821-2.226-.965-2.39a5.026 5.026 0 00-1.81-1.306c-.2-.086-.762-.284-2.583-.175-1.924.116-4.453.507-8.455 1.137-4.003.63-6.529 1.035-8.395 1.516-1.766.456-2.239.817-2.403.96a4.999 4.999 0 00-1.315 1.8c-.085.198-.285.757-.175 2.568.116 1.913.51 4.426 1.143 8.405.178 1.114.337 2.113.486 3.015z\"> </path>\n                    <path fill=\"url(#prefix__paint1_linear)\" fill-rule=\"evenodd\" d=\"M1.47 24.124C.244 16.427-.37 12.58.96 9.49A11.665 11.665 0 014.027 5.29c2.545-2.21 6.416-2.82 14.16-4.039C25.93.031 29.8-.578 32.907.743a11.729 11.729 0 014.225 3.05c2.223 2.53 2.836 6.38 4.063 14.076 1.226 7.698 1.84 11.546.511 14.636a11.666 11.666 0 01-3.069 4.199c-2.545 2.21-6.416 2.82-14.159 4.039-7.743 1.219-11.614 1.828-14.722.508a11.728 11.728 0 01-4.224-3.05C3.31 35.67 2.697 31.82 1.47 24.123zm13.657 13.668c2.074-.125 4.743-.54 8.697-1.163 3.953-.622 6.62-1.047 8.632-1.566 1.949-.502 2.846-.992 3.426-1.496a7.5 7.5 0 001.973-2.7c.302-.703.494-1.703.372-3.7-.125-2.063-.543-4.716-1.17-8.646-.625-3.93-1.053-6.582-1.574-8.582-.506-1.937-.999-2.83-1.505-3.405a7.54 7.54 0 00-2.716-1.961c-.707-.301-1.713-.492-3.723-.371-2.074.125-4.743.54-8.697 1.163-3.953.622-6.62 1.047-8.632 1.565-1.949.503-2.846.993-3.426 1.497a7.5 7.5 0 00-1.972 2.699c-.303.704-.495 1.704-.373 3.701.125 2.062.543 4.716 1.17 8.646.625 3.93 1.053 6.582 1.574 8.581.506 1.938 1 2.83 1.505 3.406a7.54 7.54 0 002.716 1.961c.707.3 1.713.492 3.723.37z\" clip-rule=\"evenodd\"></path>\n                    <defs>\n                        <linearGradient id=\"prefix__paint0_linear\" x1=\"16.759\" x2=\"23.386\" y1=\"0\" y2=\"41.662\"\n                            gradientUnits=\"userSpaceOnUse\">\n                            <stop stop-color=\"#66E3FF\"></stop>\n                            <stop offset=\"1\" stop-color=\"#7064F9\"></stop>\n                        </linearGradient>\n                        <linearGradient id=\"prefix__paint1_linear\" x1=\"16.759\" x2=\"23.386\" y1=\"0\" y2=\"41.662\"\n                            gradientUnits=\"userSpaceOnUse\">\n                            <stop stop-color=\"#66E3FF\"></stop>\n                            <stop offset=\"1\" stop-color=\"#7064F9\"></stop>\n                        </linearGradient>\n                    </defs>\n                </svg></a></header>\n        <main class=\"flex-1 overflow-auto bg-gray-50\">\n            <div class=\"container my-24\">\n                <div class=\"prose\">\n                    <h2>Examples</h2>\n                    <ul>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">dialog</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"/dialog/dialog.html\">dialog</a></li>\n                            </ul>\n                        </li>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">disclosure</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"/disclosure/disclosure.html\">disclosure</a></li>\n                            </ul>\n                        </li>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">listbox</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"demo/listbox\">listbox with\n                                    pure tailwind</a></li>\n                            </ul>\n                        </li>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">menu</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"/menu/menu.html\">menu</a></li>\n                            </ul>\n                        </li>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">popover</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"/popover/popover.html\">popover</a></li>\n                            </ul>\n                        </li>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">radio group</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"/radio-group/radio-group.html\">radio group</a></li>\n                            </ul>\n                        </li>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">switch</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"/switch/switch.html\">switch with pure\n                                        tailwind</a></li>\n                            </ul>\n                        </li>\n                        <li>\n                            <h3 class=\"text-xl capitalize\">tabs</h3>\n                            <ul>\n                                <li><a class=\"capitalize\" href=\"/tabs/tabs.html\">tabs with pure\n                                        tailwind</a></li>\n                            </ul>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </main>\n    </div>\n</body>\n</html>\n"
  },
  {
    "path": "packages/ui/demo/listbox/data-driven.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charSet=\"utf-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <link rel=\"stylesheet\" href=\"https://rsms.me/inter/inter.css\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://headlessui.dev/favicon-32x32.png\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"https://headlessui.dev/favicon-16x16.png\" />\n\n    <script src=\"/packages/intersect/dist/cdn.js\" defer></script>\n    <script src=\"/packages/morph/dist/cdn.js\" defer></script>\n    <script src=\"/packages/persist/dist/cdn.js\"></script>\n    <script src=\"/packages/focus/dist/cdn.js\"></script>\n    <script src=\"/packages/mask/dist/cdn.js\"></script>\n    <script src=\"/packages/ui/dist/cdn.js\" defer></script>\n    <script src=\"/packages/alpinejs/dist/cdn.js\" defer></script>\n    <script src=\"//cdn.tailwindcss.com\"></script>\n\n    <title>Listbox</title>\n</head>\n\n<body>\n    <div class=\"flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700\">\n        <div\n            x-data=\"{ selected: undefined, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n                ]}\"\n            class=\"flex justify-center w-screen h-full p-12 bg-gray-50\"\n        >\n            <div class=\"w-full max-w-xs mx-auto\">\n                <div class=\"flex justify-between mb-8\">\n                    <button class=\"underline\" @click=\"selected = people[1]\">Change value</button>\n\n                    <button class=\"underline\" @click=\"\n                        people.sort((a, b) => a.name > b.name ? 1 : -1)\n                    \">Reorder</button>\n\n                    <button class=\"underline\" @click=\"\n                        people = people.filter(i => i.name !== 'Arlene Mccoy')\n                    \">Destroy item</button>\n                </div>\n\n                <div x-listbox name=\"something\" x-model=\"selected\" class=\"space-y-1\">\n                    <label x-listbox:label class=\"block text-sm font-medium leading-5 text-gray-700 mb-1\">\n                        Assigned to\n                    </label>\n\n                    <div class=\"relative\">\n                        <span class=\"inline-block w-full rounded-md shadow-sm\">\n                            <button x-listbox:button class=\"relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5\">\n                                <span class=\"block truncate\" x-text=\"selected ? selected.name : 'Select Person'\"></span>\n                                <span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\">\n                                    <svg class=\"w-5 h-5 text-gray-400\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\">\n                                        <path d=\"M7 7l3-3 3 3m0 6l-3 3-3-3\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                                    </svg>\n                                </span>\n                            </button>\n                        </span>\n\n                        <div class=\"absolute w-full mt-1 bg-white rounded-md shadow-lg\">\n                            <ul x-listbox:options class=\"py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5\">\n                                <template x-for=\"person in people\" :key=\"person.id\">\n                                    <li\n                                        x-listbox:option :value=\"person\"\n                                        class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                        :disabled=\"person.disabled\"\n                                        :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900', person.disabled && 'bg-gray-50 text-gray-300'].filter(Boolean)\"\n                                    >\n                                        <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\" x-text=\"person.name\"></span>\n\n                                        <span\n                                            x-show=\"$listboxOption.isSelected\"\n                                            class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                            :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                        >\n                                            <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                            </svg>\n                                        </span>\n                                    </li>\n                                </template>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</body>\n</html>\n\n\n\n"
  },
  {
    "path": "packages/ui/demo/listbox/index.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charSet=\"utf-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <link rel=\"stylesheet\" href=\"https://rsms.me/inter/inter.css\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://headlessui.dev/favicon-32x32.png\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"https://headlessui.dev/favicon-16x16.png\" />\n\n    <script src=\"/packages/intersect/dist/cdn.js\" defer></script>\n    <script src=\"/packages/morph/dist/cdn.js\" defer></script>\n    <script src=\"/packages/persist/dist/cdn.js\"></script>\n    <script src=\"/packages/focus/dist/cdn.js\"></script>\n    <script src=\"/packages/mask/dist/cdn.js\"></script>\n    <script src=\"/packages/ui/dist/cdn.js\" defer></script>\n    <script src=\"/packages/alpinejs/dist/cdn.js\" defer></script>\n    <script src=\"//cdn.tailwindcss.com\"></script>\n\n    <title>Listbox</title>\n</head>\n\n<body>\n    <div class=\"flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700\">\n        <div x-data=\"{ selected: 'Wade Cooper' }\" class=\"flex justify-center w-screen h-full p-12 bg-gray-50\">\n            <div class=\"w-full max-w-xs mx-auto\">\n                <div class=\"flex justify-between mb-8\">\n                    <button class=\"underline\" @click=\"selected = Arlene Mccoy\">Change value</button>\n                </div>\n\n                <div x-listbox name=\"something\" x-model=\"selected\" class=\"space-y-1\">\n                    <label x-listbox:label class=\"block text-sm font-medium leading-5 text-gray-700 mb-1\">\n                        Assigned to\n                    </label>\n\n                    <div class=\"relative\">\n                        <span class=\"inline-block w-full rounded-md shadow-sm\">\n                            <button x-listbox:button class=\"relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5\">\n                                <span class=\"block truncate\" x-text=\"selected\"></span>\n                                <span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\">\n                                    <svg class=\"w-5 h-5 text-gray-400\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\">\n                                        <path d=\"M7 7l3-3 3 3m0 6l-3 3-3-3\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                                    </svg>\n                                </span>\n                            </button>\n                        </span>\n\n                        <div class=\"absolute w-full mt-1 bg-white rounded-md shadow-lg\">\n                            <ul x-listbox:options class=\"py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5\">\n                                <li\n                                    x-listbox:option value=\"Wade Cooper\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Wade Cooper</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Arlene Mccoy\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Arlene Mccoy</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Devon Webb\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Devon Webb</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Tom Cook\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Tom Cook</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Tanya Fox\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Tanya Fox</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Hellen Schmidt\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Hellen Schmidt</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Caroline Schultz\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Caroline Schultz</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Mason Heaney\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Mason Heaney</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Claudie Smitham\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Claudie Smitham</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                                <li\n                                    x-listbox:option value=\"Emil Schaefer\"\n                                    class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                    :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)\"\n                                >\n                                    <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\">Emil Schaefer</span>\n\n                                    <span\n                                        x-show=\"$listboxOption.isSelected\"\n                                        class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                        :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                    >\n                                        <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</body>\n</html>\n\n\n\n"
  },
  {
    "path": "packages/ui/demo/listbox/multiple.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charSet=\"utf-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <link rel=\"stylesheet\" href=\"https://rsms.me/inter/inter.css\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://headlessui.dev/favicon-32x32.png\" />\n    <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"https://headlessui.dev/favicon-16x16.png\" />\n\n    <script src=\"/packages/intersect/dist/cdn.js\" defer></script>\n    <script src=\"/packages/morph/dist/cdn.js\" defer></script>\n    <script src=\"/packages/persist/dist/cdn.js\"></script>\n    <script src=\"/packages/focus/dist/cdn.js\"></script>\n    <script src=\"/packages/mask/dist/cdn.js\"></script>\n    <script src=\"/packages/ui/dist/cdn.js\" defer></script>\n    <script src=\"/packages/alpinejs/dist/cdn.js\" defer></script>\n    <script src=\"//cdn.tailwindcss.com\"></script>\n\n    <title>Listbox</title>\n</head>\n\n<body>\n    <div class=\"flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700\">\n        <div\n            x-data=\"{ selected: [], people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            class=\"flex justify-center w-screen h-full p-12 bg-gray-50\"\n        >\n            <div class=\"w-full max-w-xs mx-auto\">\n                <div class=\"flex justify-between mb-8\">\n                    <button class=\"underline\" @click=\"selected.push(people[1])\">Change value</button>\n\n                    <button class=\"underline\" @click=\"\n                        people.sort((a, b) => a.name > b.name ? 1 : -1)\n                    \">Reorder</button>\n\n                    <button class=\"underline\" @click=\"\n                        people = people.filter(i => i.name !== 'Arlene Mccoy')\n                    \">Destroy item</button>\n                </div>\n\n                <div x-listbox name=\"people\" x-model=\"selected\" multiple class=\"space-y-1\">\n                    <label x-listbox:label class=\"block text-sm font-medium leading-5 text-gray-700 mb-1\">\n                        Assigned to\n                    </label>\n\n                    <div class=\"relative\">\n                        <span class=\"inline-block w-full rounded-md shadow-sm\">\n                            <button x-listbox:button class=\"relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5\">\n                                <span class=\"block truncate\" x-text=\"selected.length > 0 ? selected.map(i => i.name).join(', ') : 'Select Person'\"></span>\n                                <span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\">\n                                    <svg class=\"w-5 h-5 text-gray-400\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\">\n                                        <path d=\"M7 7l3-3 3 3m0 6l-3 3-3-3\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                                    </svg>\n                                </span>\n                            </button>\n                        </span>\n\n                        <div class=\"absolute w-full mt-1 bg-white rounded-md shadow-lg\">\n                            <ul x-listbox:options class=\"py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5\">\n                                <template x-for=\"person in people\" :key=\"person.id\">\n                                    <li\n                                        x-listbox:option :value=\"person\"\n                                        class=\"relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none\"\n                                        :disabled=\"person.disabled\"\n                                        :class=\"[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900', person.disabled && 'bg-gray-50 text-gray-300'].filter(Boolean)\"\n                                        >\n                                        <span class=\"block truncate\" :class=\"$listboxOption.isSelected ? 'font-semibold' : 'font-normal'\" x-text=\"person.name\"></span>\n\n                                        <span\n                                            x-show=\"$listboxOption.isSelected\"\n                                            class=\"absolute inset-y-0 right-0 flex items-center pr-4\"\n                                            :class=\"$listboxOption.isActive ? 'text-white' : 'text-indigo-600'\"\n                                        >\n                                            <svg class=\"w-5 h-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                            </svg>\n                                        </span>\n                                    </li>\n                                </template>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</body>\n</html>\n\n\n\n"
  },
  {
    "path": "packages/ui/package.json",
    "content": "{\n    \"name\": \"@alpinejs/ui\",\n    \"version\": \"3.15.8\",\n    \"description\": \"Headless UI components for Alpine\",\n    \"homepage\": \"https://alpinejs.dev/components#headless\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/alpinejs/alpine.git\",\n        \"directory\": \"packages/ui\"\n    },\n    \"author\": \"Caleb Porzio\",\n    \"license\": \"MIT\",\n    \"main\": \"dist/module.cjs.js\",\n    \"module\": \"dist/module.esm.js\",\n    \"unpkg\": \"dist/cdn.min.js\",\n    \"devDependencies\": {}\n}\n"
  },
  {
    "path": "packages/ui/src/combobox.js",
    "content": "import { generateContext, renderHiddenInputs } from './list-context'\n\nexport default function (Alpine) {\n    Alpine.directive('combobox', (el, directive, { evaluate }) => {\n        if      (directive.value === 'input')        handleInput(el, Alpine)\n        else if (directive.value === 'button')       handleButton(el, Alpine)\n        else if (directive.value === 'label')        handleLabel(el, Alpine)\n        else if (directive.value === 'options')      handleOptions(el, Alpine)\n        else if (directive.value === 'option')       handleOption(el, Alpine, directive, evaluate)\n        else                                         handleRoot(el, Alpine)\n    }).before('bind')\n\n    Alpine.magic('combobox', el => {\n        let data = Alpine.$data(el)\n\n        return {\n            get value() {\n                return data.__value\n            },\n            get isOpen() {\n                return data.__isOpen\n            },\n            get isDisabled() {\n                return data.__isDisabled\n            },\n            get activeOption() {\n                let active = data.__context?.getActiveItem()\n\n                return active && active.value\n            },\n            get activeIndex() {\n                let active = data.__context?.getActiveItem()\n\n                if (active) {\n                    return Object.values(Alpine.raw(data.__context.items)).findIndex(i => Alpine.raw(active) == Alpine.raw(i))\n                }\n\n                return null\n            },\n        }\n    })\n\n    Alpine.magic('comboboxOption', el => {\n        let data = Alpine.$data(el)\n\n        // It's not great depending on the existence of the attribute in the DOM\n        // but it's probably the fastest and most reliable at this point...\n        let optionEl = Alpine.findClosest(el, i => {\n            return i.hasAttribute('x-combobox:option')\n        })\n\n        if (! optionEl) throw 'No x-combobox:option directive found...'\n\n        return {\n            get isActive() {\n                return data.__context.isActiveKey(Alpine.$data(optionEl).__optionKey)\n            },\n            get isSelected() {\n                return data.__isSelected(optionEl)\n            },\n            get isDisabled() {\n                return data.__context.isDisabled(Alpine.$data(optionEl).__optionKey)\n            },\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-id'() { return ['alpine-combobox-button', 'alpine-combobox-options', 'alpine-combobox-label'] },\n        'x-modelable': '__value',\n\n        // Initialize...\n        'x-data'() {\n            return {\n                /**\n                 * Combobox state...\n                 */\n                __ready: false,\n                __value: null,\n                __isOpen: false,\n                __context: undefined,\n                __isMultiple: undefined,\n                __isStatic: false,\n                __isDisabled: undefined,\n                __displayValue: undefined,\n                __compareBy: null,\n                __inputName: null,\n                __isTyping: false,\n                __hold: false,\n\n                /**\n                 * Combobox initialization...\n                 */\n                init() {\n                    this.__isMultiple = Alpine.extractProp(el, 'multiple', false)\n                    this.__isDisabled = Alpine.extractProp(el, 'disabled', false)\n                    this.__inputName = Alpine.extractProp(el, 'name', null)\n                    this.__nullable = Alpine.extractProp(el, 'nullable', false)\n                    this.__compareBy = Alpine.extractProp(el, 'by')\n\n                    this.__context = generateContext(Alpine, this.__isMultiple, 'vertical', () => this.__activateSelectedOrFirst())\n\n                    let defaultValue = Alpine.extractProp(el, 'default-value', this.__isMultiple ? [] : null)\n\n                    this.__value = defaultValue\n\n                    // We have to wait again until after the \"ready\" processes are finished\n                    // to settle up currently selected Values (this prevents this next bit\n                    // of code from running multiple times on startup...)\n                    queueMicrotask(() => {\n                        Alpine.effect(() => {\n                            // Everytime the value changes, we need to re-render the hidden inputs,\n                            // if a user passed the \"name\" prop...\n                            this.__inputName && renderHiddenInputs(Alpine, this.$el, this.__inputName, this.__value)\n                        })\n\n                        // Set initial combobox values in the input and properly clear it when the value is reset programmatically...\n                        Alpine.effect(() => ! this.__isMultiple && this.__resetInput())\n                    })\n                },\n                __startTyping() {\n                    this.__isTyping = true\n                },\n                __stopTyping() {\n                    this.__isTyping = false\n                },\n                __resetInput() {\n                    let input = this.$refs.__input\n\n                    if (! input) return\n\n                    let value = this.__getCurrentValue()\n\n                    input.value = value\n                },\n                __getCurrentValue() {\n                    if (! this.$refs.__input) return ''\n                    if (! this.__value) return ''\n                    if (this.__displayValue) return this.__displayValue(this.__value)\n                    if (typeof this.__value === 'string') return this.__value\n                    return ''\n                },\n                __open() {\n                    if (this.__isOpen) return\n                    this.__isOpen = true\n\n                    let input = this.$refs.__input\n\n                    // Make sure we always notify the parent component\n                    // that the starting value is the empty string\n                    // when we open the combobox (ignoring any existing value)\n                    // to avoid inconsistent displaying.\n                    // Setting the input to empty and back to the real value\n                    // also helps VoiceOver to annunce the content properly\n                    // See https://github.com/tailwindlabs/headlessui/pull/2153\n                    if (input) {\n                        let value = input.value\n                        let { selectionStart, selectionEnd, selectionDirection } = input\n                        input.value = ''\n                        input.dispatchEvent(new Event('change'))\n                        input.value = value\n                        if (selectionDirection !== null) {\n                            input.setSelectionRange(selectionStart, selectionEnd, selectionDirection)\n                        } else {\n                            input.setSelectionRange(selectionStart, selectionEnd)\n                        }\n                    }\n\n                    // Safari needs more of a \"tick\" for focusing after x-show for some reason.\n                    // Probably because Alpine adds an extra tick when x-showing for @click.outside\n                    let nextTick = callback => requestAnimationFrame(() => requestAnimationFrame(callback))\n\n                    nextTick(() => {\n                        this.$refs.__input.focus({ preventScroll: true })\n                        this.__activateSelectedOrFirst()\n                    })\n                },\n                __close() {\n                    this.__isOpen = false\n\n                    this.__context.deactivate()\n                },\n                __activateSelectedOrFirst(activateSelected = true) {\n                    if (! this.__isOpen) return\n\n                    if (this.__context.hasActive() && this.__context.wasActivatedByKeyPress()) return\n\n                    let firstSelectedValue\n\n                    if (this.__isMultiple) {\n                        let selectedItem = this.__context.getItemsByValues(this.__value)\n\n                        firstSelectedValue = selectedItem.length ? selectedItem[0].value : null\n                    } else {\n                        firstSelectedValue = this.__value\n                    }\n\n                    let firstSelected = null\n                    if (activateSelected && firstSelectedValue) {\n                        firstSelected = this.__context.getItemByValue(firstSelectedValue)\n                    }\n\n                    if (firstSelected) {\n                        this.__context.activateAndScrollToKey(firstSelected.key)\n                        return\n                    }\n\n                    this.__context.activateAndScrollToKey(this.__context.firstKey())\n                },\n                __selectActive() {\n                    let active = this.__context.getActiveItem()\n                    if (active) this.__toggleSelected(active.value)\n                },\n                __selectOption(el) {\n                    let item = this.__context.getItemByEl(el)\n\n                    if (item) this.__toggleSelected(item.value)\n                },\n                __isSelected(el) {\n                    let item = this.__context.getItemByEl(el)\n\n                    if (! item) return false\n                    if (item.value === null || item.value === undefined) return false\n\n                    return this.__hasSelected(item.value)\n                },\n                __toggleSelected(value) {\n                    if (! this.__isMultiple) {\n                        this.__value = value\n\n                        return\n                    }\n\n                    let index = this.__value.findIndex(j => this.__compare(j, value))\n\n                    if (index === -1) {\n                        this.__value.push(value)\n                    } else {\n                        this.__value.splice(index, 1)\n                    }\n                },\n                __hasSelected(value) {\n                    if (! this.__isMultiple) return this.__compare(this.__value, value)\n\n                    return this.__value.some(i => this.__compare(i, value))\n                },\n                __compare(a, b) {\n                    let by = this.__compareBy\n\n                    if (! by) by = (a, b) => Alpine.raw(a) === Alpine.raw(b)\n\n                    if (typeof by === 'string') {\n                        let property = by\n                        by = (a, b) => {\n                            // Handle null values\n                            if ((! a || typeof a !== 'object') || (! b || typeof b !== 'object')) {\n                                return Alpine.raw(a) === Alpine.raw(b)\n                            }\n\n\n                            return a[property] === b[property];\n                        }\n                    }\n\n                    return by(a, b)\n                },\n            }\n        },\n        // Register event listeners..\n        '@mousedown.window'(e) {\n            if (\n                !! ! this.$refs.__input.contains(e.target)\n                && ! this.$refs.__button.contains(e.target)\n                && ! this.$refs.__options.contains(e.target)\n            ) {\n                this.__close()\n                this.__resetInput()\n            }\n        }\n    })\n}\n\nfunction handleInput(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-ref': '__input',\n        ':id'() { return this.$id('alpine-combobox-input') },\n\n        // Accessibility attributes...\n        'role': 'combobox',\n        'tabindex': '0',\n        'aria-autocomplete': 'list',\n\n        // We need to defer this evaluation a bit because $refs that get declared later\n        // in the DOM aren't available yet when x-ref is the result of an Alpine.bind object.\n        async ':aria-controls'() { return await microtask(() => this.$refs.__options && this.$refs.__options.id) },\n        ':aria-expanded'() { return this.$data.__isDisabled ? undefined : this.$data.__isOpen },\n        ':aria-multiselectable'() { return this.$data.__isMultiple ? true : undefined },\n        ':aria-activedescendant'() {\n            if (! this.$data.__context.hasActive()) return\n\n            let active = this.$data.__context.getActiveItem()\n\n            return active ? active.el.id : null\n        },\n        ':aria-labelledby'() { return this.$refs.__label ? this.$refs.__label.id : (this.$refs.__button ? this.$refs.__button.id : null) },\n\n        // Initialize...\n        'x-init'() {\n            let displayValueFn = Alpine.extractProp(this.$el, 'display-value')\n            if (displayValueFn) this.$data.__displayValue = displayValueFn\n        },\n\n        // Register listeners...\n        '@input.stop'(e) {\n            if(this.$data.__isTyping) {\n                this.$data.__open();\n                this.$dispatch('change')\n            }\n        },\n        '@blur'() { this.$data.__stopTyping(false) },\n        '@keydown'(e) {\n            queueMicrotask(() => this.$data.__context.activateByKeyEvent(e, false, () => this.$data.__isOpen, () => this.$data.__open(), (state) => this.$data.__isTyping = state))\n        },\n        '@keydown.enter.prevent.stop'() {\n            this.$data.__selectActive()\n\n            this.$data.__stopTyping()\n\n            if (! this.$data.__isMultiple) {\n                this.$data.__close()\n                this.$data.__resetInput()\n            }\n        },\n        '@keydown.escape.prevent'(e) {\n            if (! this.$data.__static) e.stopPropagation()\n\n            this.$data.__stopTyping()\n            this.$data.__close()\n            this.$data.__resetInput()\n\n        },\n        '@keydown.tab'() {\n            this.$data.__stopTyping()\n            if (this.$data.__isOpen) { this.$data.__close() }\n            this.$data.__resetInput()\n        },\n        '@keydown.backspace'(e) {\n            if (this.$data.__isMultiple) return\n            if (! this.$data.__nullable) return\n\n            let input = e.target\n\n            requestAnimationFrame(() => {\n                if (input.value === '') {\n                    this.$data.__value = null\n\n                    let options = this.$refs.__options\n                    if (options) {\n                        options.scrollTop = 0\n                    }\n\n                    this.$data.__context.deactivate()\n                }\n            })\n        },\n    })\n}\n\nfunction handleButton(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-ref': '__button',\n        ':id'() { return this.$id('alpine-combobox-button') },\n\n        // Accessibility attributes...\n        'aria-haspopup': 'true',\n        // We need to defer this evaluation a bit because $refs that get declared later\n        // in the DOM aren't available yet when x-ref is the result of an Alpine.bind object.\n        async ':aria-controls'() { return await microtask(() => this.$refs.__options && this.$refs.__options.id) },\n        ':aria-labelledby'() { return this.$refs.__label ? [this.$refs.__label.id, this.$el.id].join(' ') : null },\n        ':aria-expanded'() { return this.$data.__isDisabled ? null : this.$data.__isOpen },\n        ':disabled'() { return this.$data.__isDisabled },\n        'tabindex': '-1',\n\n        // Initialize....\n        'x-init'() { if (this.$el.tagName.toLowerCase() === 'button' && ! this.$el.hasAttribute('type')) this.$el.type = 'button' },\n\n        // Register listeners...\n        '@click'(e) {\n            if (this.$data.__isDisabled) return\n            if (this.$data.__isOpen) {\n                this.$data.__close()\n                this.$data.__resetInput()\n            } else {\n                e.preventDefault()\n                this.$data.__open()\n            }\n\n            this.$nextTick(() => this.$refs.__input.focus({ preventScroll: true }))\n        },\n    })\n}\n\nfunction handleLabel(el, Alpine) {\n    Alpine.bind(el, {\n        'x-ref': '__label',\n        ':id'() { return this.$id('alpine-combobox-label') },\n        '@click'() { this.$refs.__input.focus({ preventScroll: true }) },\n    })\n}\n\nfunction handleOptions(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-ref': '__options',\n        ':id'() { return this.$id('alpine-combobox-options') },\n\n        // Accessibility attributes...\n        'role': 'listbox',\n        ':aria-labelledby'() { return this.$refs.__label ? this.$refs.__label.id : (this.$refs.__button ? this.$refs.__button.id : null) },\n\n        // Initialize...\n        'x-init'() {\n            this.$data.__isStatic = Alpine.bound(this.$el, 'static', false)\n\n            if (Alpine.bound(this.$el, 'hold')) {\n                this.$data.__hold = true;\n            }\n        },\n\n        'x-show'() { return this.$data.__isStatic ? true : this.$data.__isOpen },\n    })\n}\n\nfunction handleOption(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-id'() { return ['alpine-combobox-option'] },\n        ':id'() { return this.$id('alpine-combobox-option') },\n\n        // Accessibility attributes...\n        'role': 'option',\n        ':tabindex'() { return this.$comboboxOption.isDisabled ? undefined : '-1' },\n\n        // Only the active element should have aria-selected=\"true\"...\n        'x-effect'() {\n            this.$comboboxOption.isSelected\n                ? el.setAttribute('aria-selected', true)\n                : el.setAttribute('aria-selected', false)\n        },\n\n        ':aria-disabled'() { return this.$comboboxOption.isDisabled },\n\n        // Initialize...\n        'x-data'() {\n            return {\n                '__optionKey': null,\n\n                init() {\n                    this.__optionKey = (Math.random() + 1).toString(36).substring(7)\n\n                    let value = Alpine.extractProp(this.$el, 'value')\n                    let disabled = Alpine.extractProp(this.$el, 'disabled', false, false)\n\n                    // memoize the context as it's not going to change\n                    // and calling this.$data on mouse action is expensive\n                    this.__context.registerItem(this.__optionKey, this.$el, value, disabled)\n                },\n                destroy() {\n                    this.__context.unregisterItem(this.__optionKey)\n                }\n            }\n        },\n\n        // Register listeners...\n        '@click'() {\n            if (this.$comboboxOption.isDisabled) return;\n\n            this.__selectOption(this.$el)\n\n            if (! this.__isMultiple) {\n                this.__close()\n                this.__resetInput()\n            }\n\n            this.$nextTick(() => this.$refs.__input.focus({ preventScroll: true }))\n        },\n        '@mouseenter'(e) {\n            this.__context.activateEl(this.$el)\n        },\n        '@mousemove'(e) {\n            if (this.__context.isActiveEl(this.$el)) return\n\n            this.__context.activateEl(this.$el)\n        },\n        '@mouseleave'(e) {\n            if (this.__hold) return\n\n            this.__context.deactivate()\n        },\n    })\n}\n\n// Little utility to defer a callback into the microtask queue...\nfunction microtask(callback) {\n    return new Promise(resolve => queueMicrotask(() => resolve(callback())))\n}\n"
  },
  {
    "path": "packages/ui/src/dialog.js",
    "content": "\nexport default function (Alpine) {\n    Alpine.directive('dialog', (el, directive) => {\n        if      (directive.value === 'overlay')     handleOverlay(el, Alpine)\n        else if (directive.value === 'panel')       handlePanel(el, Alpine)\n        else if (directive.value === 'title')       handleTitle(el, Alpine)\n        else if (directive.value === 'description') handleDescription(el, Alpine)\n        else                                        handleRoot(el, Alpine)\n    })\n\n    Alpine.magic('dialog', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            // Kept here for legacy. Remove after out of beta.\n            get open() {\n                return $data.__isOpen\n            },\n            get isOpen() {\n                return $data.__isOpen\n            },\n            close() {\n                $data.__close()\n            }\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        'x-data'() {\n            return {\n                init() {\n                    // If the user chose to use :open and @close instead of x-model.\n                    (Alpine.bound(el, 'open') !== undefined) && Alpine.effect(() => {\n                        this.__isOpenState = Alpine.bound(el, 'open')\n                    })\n\n                    if (Alpine.bound(el, 'initial-focus') !== undefined) this.$watch('__isOpenState', () => {\n                        if (! this.__isOpenState) return\n\n                        setTimeout(() => {\n                            Alpine.bound(el, 'initial-focus').focus()\n                        }, 0);\n                    })\n                },\n                __isOpenState: false,\n                __close() {\n                    if (Alpine.bound(el, 'open')) this.$dispatch('close')\n                    else this.__isOpenState = false\n                },\n                get __isOpen() {\n                    return Alpine.bound(el, 'static', this.__isOpenState)\n                },\n            }\n        },\n        'x-modelable': '__isOpenState',\n        'x-id'() { return ['alpine-dialog-title', 'alpine-dialog-description'] },\n        'x-show'() { return this.__isOpen },\n        'x-trap.inert.noscroll'() { return this.__isOpen },\n        '@keydown.escape'() { this.__close() },\n        ':aria-labelledby'() { return this.$id('alpine-dialog-title') },\n        ':aria-describedby'() { return this.$id('alpine-dialog-description') },\n        'role': 'dialog',\n        'aria-modal': 'true',\n    })\n}\n\nfunction handleOverlay(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { if (this.$data.__isOpen === undefined) console.warn('\"x-dialog:overlay\" is missing a parent element with \"x-dialog\".') },\n        'x-show'() { return this.__isOpen },\n        '@click.prevent.stop'() { this.$data.__close() },\n    })\n}\n\nfunction handlePanel(el, Alpine) {\n    Alpine.bind(el, {\n        '@click.outside'() { this.$data.__close() },\n        'x-show'() { return this.$data.__isOpen },\n    })\n}\n\nfunction handleTitle(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { if (this.$data.__isOpen === undefined) console.warn('\"x-dialog:title\" is missing a parent element with \"x-dialog\".') },\n        ':id'() { return this.$id('alpine-dialog-title') },\n    })\n}\n\nfunction handleDescription(el, Alpine) {\n    Alpine.bind(el, {\n        ':id'() { return this.$id('alpine-dialog-description') },\n    })\n}\n\n"
  },
  {
    "path": "packages/ui/src/disclosure.js",
    "content": "\nexport default function (Alpine) {\n    Alpine.directive('disclosure', (el, directive) => {\n        if      (! directive.value)            handleRoot(el, Alpine)\n        else if (directive.value === 'panel')  handlePanel(el, Alpine)\n        else if (directive.value === 'button') handleButton(el, Alpine)\n    }).before('bind')\n\n    Alpine.magic('disclosure', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            get isOpen() {\n                return $data.__isOpen\n            },\n            close() {\n                $data.__close()\n            }\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        'x-modelable': '__isOpen',\n        'x-data'() {\n            return {\n                // The panel will call this...\n                // We can't do this inside a microtask in x-init because, when default-open is set to \"true\",\n                // It will cause the panel to transition in for the first time, instead of showing instantly...\n                __determineDefaultOpenState() {\n                    let defaultIsOpen = Boolean(Alpine.bound(this.$el, 'default-open', false))\n\n                    if (defaultIsOpen) this.__isOpen = defaultIsOpen\n                },\n                __isOpen: false,\n                __close() {\n                    this.__isOpen = false\n                },\n                __toggle() {\n                    this.__isOpen = ! this.__isOpen\n                },\n            }\n        },\n        'x-id'() { return ['alpine-disclosure-panel'] },\n    })\n}\n\nfunction handleButton(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() {\n            if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button'\n        },\n        '@click'() {\n            this.$data.__isOpen = ! this.$data.__isOpen\n        },\n        ':aria-expanded'() {\n            return this.$data.__isOpen\n        },\n        ':aria-controls'() {\n            return this.$data.$id('alpine-disclosure-panel')\n        },\n        '@keydown.space.prevent.stop'() { this.$data.__toggle() },\n        '@keydown.enter.prevent.stop'() { this.$data.__toggle() },\n        // Required for firefox, event.preventDefault() in handleKeyDown for\n        // the Space key doesn't cancel the handleKeyUp, which in turn\n        // triggers a *click*.\n        '@keyup.space.prevent'() {},\n    })\n}\n\nfunction handlePanel(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() {\n            this.$data.__determineDefaultOpenState()\n        },\n        'x-show'() {\n            return this.$data.__isOpen\n        },\n        ':id'() {\n            return this.$data.$id('alpine-disclosure-panel')\n        },\n    })\n}\n"
  },
  {
    "path": "packages/ui/src/index.js",
    "content": "import combobox from './combobox'\nimport dialog from './dialog'\nimport disclosure from './disclosure'\nimport listbox from './listbox'\nimport popover from './popover'\nimport menu from './menu'\nimport notSwitch from './switch'\nimport radio from './radio'\nimport tabs from './tabs'\n\nexport default function (Alpine) {\n    combobox(Alpine)\n    dialog(Alpine)\n    disclosure(Alpine)\n    listbox(Alpine)\n    menu(Alpine)\n    notSwitch(Alpine)\n    popover(Alpine)\n    radio(Alpine)\n    tabs(Alpine)\n}\n"
  },
  {
    "path": "packages/ui/src/list-context.js",
    "content": "\nexport function generateContext(Alpine, multiple, orientation, activateSelectedOrFirst) {\n    return {\n        /**\n         * Main state...\n         */\n        items: [],\n        activeKey: switchboard(),\n        orderedKeys: [],\n        activatedByKeyPress: false,\n\n        /**\n         *  Initialization...\n         */\n        activateSelectedOrFirst: Alpine.debounce(function () {\n            activateSelectedOrFirst(false)\n        }),\n\n        registerItemsQueue: [],\n\n        registerItem(key, el, value, disabled) {\n            // We need to queue up these additions to not slow down the\n            // init process for each row...\n            if (this.registerItemsQueue.length === 0) {\n                queueMicrotask(() => {\n                    if (this.registerItemsQueue.length > 0) {\n                        this.items = this.items.concat(this.registerItemsQueue)\n\n                        this.registerItemsQueue = []\n\n                        this.reorderKeys()\n                        this.activateSelectedOrFirst()\n                    }\n                })\n            }\n\n            let item = {\n                key, el, value, disabled\n            }\n\n            this.registerItemsQueue.push(item)\n        },\n\n        unregisterKeysQueue: [],\n\n        unregisterItem(key) {\n            // This gets triggered when the mutation observer picks up DOM changes.\n            // It will get called for every row that gets removed. If there are\n            // 1000x rows, we want to trigger this cleanup when the first one\n            // is handled, let the others add their keys to the queue, then\n            // handle all the cleanup in bulk at the end. Big perf gain...\n            if (this.unregisterKeysQueue.length === 0) {\n                queueMicrotask(() => {\n                    if (this.unregisterKeysQueue.length > 0) {\n                        this.items = this.items.filter(i => ! this.unregisterKeysQueue.includes(i.key))\n                        this.orderedKeys = this.orderedKeys.filter(i => ! this.unregisterKeysQueue.includes(i))\n\n                        this.unregisterKeysQueue = []\n\n                        this.reorderKeys()\n                        this.activateSelectedOrFirst()\n                    }\n                })\n            }\n\n            this.unregisterKeysQueue.push(key)\n        },\n\n        getItemByKey(key) {\n            return this.items.find(i => i.key === key)\n        },\n\n        getItemByValue(value) {\n            return this.items.find(i => Alpine.raw(i.value) === Alpine.raw(value))\n        },\n\n        getItemByEl(el) {\n            return this.items.find(i => i.el === el)\n        },\n\n        getItemsByValues(values) {\n            let rawValues = values.map(i => Alpine.raw(i));\n            let filteredValue = this.items.filter(i => rawValues.includes(Alpine.raw(i.value)))\n            filteredValue = filteredValue.slice().sort((a, b) => {\n                let position = a.el.compareDocumentPosition(b.el)\n                if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1\n                if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1\n                return 0\n            })\n            return filteredValue\n        },\n\n        getActiveItem() {\n            if (! this.hasActive()) return null\n\n            let item = this.items.find(i => i.key === this.activeKey.get())\n\n            if (! item) this.deactivateKey(this.activeKey.get())\n\n            return item\n        },\n\n        activateItem(item) {\n            if (! item) return\n\n            this.activateKey(item.key)\n        },\n\n        /**\n         * Handle elements...\n         */\n         reorderKeys: Alpine.debounce(function () {\n            this.orderedKeys = this.items.map(i => i.key)\n\n            this.orderedKeys = this.orderedKeys.slice().sort((a, z) => {\n                if (a === null || z === null) return 0\n\n                let aEl = this.items.find(i => i.key === a).el\n                let zEl = this.items.find(i => i.key === z).el\n\n                let position = aEl.compareDocumentPosition(zEl)\n\n                if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1\n                if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1\n                return 0\n            })\n\n            // If there no longer is the active key in the items list, then\n            // deactivate it...\n            if (! this.orderedKeys.includes(this.activeKey.get())) this.deactivateKey(this.activeKey.get())\n        }),\n\n        getActiveKey() {\n            return this.activeKey.get()\n        },\n\n        activeEl() {\n            if (! this.activeKey.get()) return\n\n            return this.items.find(i => i.key === this.activeKey.get()).el\n        },\n\n        isActiveEl(el) {\n            let key = this.items.find(i => i.el === el)\n\n            return this.activeKey.is(key)\n        },\n\n        activateEl(el) {\n            let item = this.items.find(i => i.el === el)\n\n            this.activateKey(item.key)\n        },\n\n        isDisabledEl(el) {\n            return this.items.find(i => i.el === el).disabled\n        },\n\n        get isScrollingTo() { return this.scrollingCount > 0 },\n\n        scrollingCount: 0,\n\n        activateAndScrollToKey(key, activatedByKeyPress) {\n            if (! this.getItemByKey(key)) return\n\n            // This addresses the following problem:\n            // If deactivate is hooked up to mouseleave,\n            // scrolling to an element will trigger deactivation.\n            // This \"isScrollingTo\" is exposed to prevent that.\n            this.scrollingCount++\n\n            this.activateKey(key, activatedByKeyPress)\n\n            let targetEl = this.items.find(i => i.key === key).el\n\n            targetEl.scrollIntoView({ block: 'nearest' })\n\n            setTimeout(() => {\n                this.scrollingCount--\n            // Unfortunately, browser experimentation has shown me\n            // that 25ms is the sweet spot when holding down an\n            // arrow key to scroll the list of items...\n            }, 25)\n        },\n\n        /**\n         * Handle disabled keys...\n         */\n        isDisabled(key) {\n            let item = this.items.find(i => i.key === key)\n\n            if (! item) return false\n\n            return item.disabled\n        },\n\n        get nonDisabledOrderedKeys() {\n            return this.orderedKeys.filter(i => ! this.isDisabled(i))\n        },\n\n        /**\n         * Handle activated keys...\n         */\n        hasActive() { return !! this.activeKey.get() },\n\n        /**\n         * Return true if the latest active element was activated\n         * by the user (i.e. using the arrow keys) and false if was\n         * activated automatically by alpine (i.e. first element automatically\n         * activated after filtering the list)\n         */\n        wasActivatedByKeyPress() {return this.activatedByKeyPress},\n\n        isActiveKey(key) { return this.activeKey.is(key) },\n\n        activateKey(key, activatedByKeyPress = false) {\n            if (this.isDisabled(key)) return\n\n            this.activeKey.set(key)\n            this.activatedByKeyPress = activatedByKeyPress\n        },\n\n        deactivateKey(key) {\n            if (this.activeKey.get() === key) {\n                this.activeKey.set(null)\n                this.activatedByKeyPress = false\n            }\n        },\n\n        deactivate() {\n            if (! this.activeKey.get()) return\n            if (this.isScrollingTo) return\n\n            this.activeKey.set(null)\n            this.activatedByKeyPress = false\n        },\n\n        /**\n         * Handle active key traversal...\n         */\n        nextKey() {\n            if (! this.activeKey.get()) return\n\n            let index = this.nonDisabledOrderedKeys.findIndex(i => i === this.activeKey.get())\n\n            return this.nonDisabledOrderedKeys[index + 1]\n        },\n\n        prevKey() {\n            if (! this.activeKey.get()) return\n\n            let index = this.nonDisabledOrderedKeys.findIndex(i => i === this.activeKey.get())\n\n            return this.nonDisabledOrderedKeys[index - 1]\n        },\n\n        firstKey() { return this.nonDisabledOrderedKeys[0] },\n\n        lastKey() { return this.nonDisabledOrderedKeys[this.nonDisabledOrderedKeys.length - 1] },\n\n        searchQuery: '',\n\n        clearSearch: Alpine.debounce(function () { this.searchQuery = '' }, 350),\n\n        searchKey(query) {\n            this.clearSearch()\n\n            this.searchQuery += query\n\n            let foundKey\n\n            for (let key in this.items) {\n                let content = this.items[key].el.textContent.trim().toLowerCase()\n\n                if (content.startsWith(this.searchQuery)) {\n                    foundKey = this.items[key].key\n                    break;\n                }\n            }\n\n            if (! this.nonDisabledOrderedKeys.includes(foundKey)) return\n\n            return foundKey\n        },\n\n        activateByKeyEvent(e, searchable = false, isOpen = () => false, open = () => {}, setIsTyping) {\n            let targetKey, hasActive\n\n            setIsTyping(true)\n\n            let activatedByKeyPress = true\n\n            switch (e.key) {\n                // case 'Backspace':\n                // case 'Delete':\n                case ['ArrowDown', 'ArrowRight'][orientation === 'vertical' ? 0 : 1]:\n                    e.preventDefault(); e.stopPropagation()\n\n                    setIsTyping(false)\n\n                    if (! isOpen()) {\n                        open()\n                        break;\n                    }\n\n                    this.reorderKeys(); hasActive = this.hasActive()\n\n                    targetKey = hasActive ? this.nextKey() : this.firstKey()\n                    break;\n\n                case ['ArrowUp', 'ArrowLeft'][orientation === 'vertical' ? 0 : 1]:\n                    e.preventDefault(); e.stopPropagation()\n\n                    setIsTyping(false)\n\n                    if (! isOpen()) {\n                        open()\n                        break;\n                    }\n\n                    this.reorderKeys(); hasActive = this.hasActive()\n\n                    targetKey = hasActive ? this.prevKey() : this.lastKey()\n                    break;\n                case 'Home':\n                case 'PageUp':\n                    if (e.key == 'Home' && e.shiftKey) return;\n\n                    e.preventDefault(); e.stopPropagation()\n                    setIsTyping(false)\n                    this.reorderKeys(); hasActive = this.hasActive()\n                    targetKey = this.firstKey()\n                    break;\n\n                case 'End':\n                case 'PageDown':\n                    if (e.key == 'End' && e.shiftKey) return;\n\n                    e.preventDefault(); e.stopPropagation()\n                    setIsTyping(false)\n                    this.reorderKeys(); hasActive = this.hasActive()\n                    targetKey = this.lastKey()\n                    break;\n\n                default:\n                    activatedByKeyPress = this.activatedByKeyPress\n                    if (searchable && e.key.length === 1) {\n                        targetKey = this.searchKey(e.key)\n                    }\n                    break;\n            }\n\n            if (targetKey) {\n                this.activateAndScrollToKey(targetKey, activatedByKeyPress)\n            }\n        }\n    }\n}\n\nfunction keyByValue(object, value) {\n    return Object.keys(object).find(key => object[key] === value)\n}\n\nexport function renderHiddenInputs(Alpine, el, name, value) {\n    // Create input elements...\n    let newInputs = generateInputs(name, value)\n\n    // Mark them for later tracking...\n    newInputs.forEach(i => i._x_hiddenInput = true)\n\n    // Mark them for Alpine ignoring...\n    newInputs.forEach(i => i._x_ignore = true)\n\n    // Gather old elements for removal...\n    let children = el.children\n\n    let oldInputs = []\n\n    for (let i = 0; i < children.length; i++) {\n        let child = children[i];\n\n        if (child._x_hiddenInput) oldInputs.push(child)\n        else break\n    }\n\n    // Remove old, and insert new ones into the DOM...\n    Alpine.mutateDom(() => {\n        oldInputs.forEach(i => i.remove())\n\n        newInputs.reverse().forEach(i => el.prepend(i))\n    })\n}\n\nfunction generateInputs(name, value, carry = []) {\n    if (isObjectOrArray(value)) {\n        for (let key in value) {\n            carry = carry.concat(\n                generateInputs(`${name}[${key}]`, value[key])\n            )\n        }\n    } else {\n        let el = document.createElement('input')\n        el.setAttribute('type', 'hidden')\n        el.setAttribute('name', name)\n        el.setAttribute('value', '' + value)\n\n        return [el]\n    }\n\n\n    return carry\n}\n\nfunction isObjectOrArray(subject) {\n    return typeof subject === 'object' && subject !== null\n}\n\nfunction switchboard(value) {\n    let lookup = {}\n\n    let current\n\n    let changeTracker = Alpine.reactive({ state: false })\n\n    let get = () => {\n        // Depend on the change tracker so reading \"get\" becomes reactive...\n        if (changeTracker.state) {\n            //\n        }\n\n        return current\n    }\n\n    let set = (newValue) => {\n        if (newValue === current) return\n\n        if (current !== undefined) lookup[current].state = false\n\n        current = newValue\n\n        if (lookup[newValue] === undefined) {\n            lookup[newValue] = Alpine.reactive({ state: true })\n        } else {\n            lookup[newValue].state = true\n        }\n\n        changeTracker.state = ! changeTracker.state\n    }\n\n    let is = (comparisonValue) => {\n        if (lookup[comparisonValue] === undefined) {\n            lookup[comparisonValue] = Alpine.reactive({ state: false })\n            return lookup[comparisonValue].state\n        }\n\n        return !! lookup[comparisonValue].state\n    }\n\n    value === undefined || set(value)\n\n    return { get, set, is }\n}\n"
  },
  {
    "path": "packages/ui/src/listbox.js",
    "content": "import { generateContext, renderHiddenInputs } from './list-context'\n\nexport default function (Alpine) {\n    Alpine.directive('listbox', (el, directive) => {\n        if (! directive.value) handleRoot(el, Alpine)\n        else if (directive.value === 'label') handleLabel(el, Alpine)\n        else if (directive.value === 'button') handleButton(el, Alpine)\n        else if (directive.value === 'options') handleOptions(el, Alpine)\n        else if (directive.value === 'option') handleOption(el, Alpine)\n    }).before('bind')\n\n    Alpine.magic('listbox', (el) => {\n        let data = Alpine.$data(el)\n\n        return {\n            // @deprecated:\n            get selected() {\n                return data.__value\n            },\n            // @deprecated:\n            get active() {\n                let active = data.__context.getActiveItem()\n\n                return active && active.value\n            },\n            get value() {\n                return data.__value\n            },\n            get isOpen() {\n                return data.__isOpen\n            },\n            get isDisabled() {\n                return data.__isDisabled\n            },\n            get activeOption() {\n                let active = data.__context.getActiveItem()\n\n                return active && active.value\n            },\n            get activeIndex() {\n                let active = data.__context.getActiveItem()\n\n                return active && active.key\n            },\n        }\n    })\n\n    Alpine.magic('listboxOption', (el) => {\n        let data = Alpine.$data(el)\n\n        // It's not great depending on the existence of the attribute in the DOM\n        // but it's probably the fastest and most reliable at this point...\n        let optionEl = Alpine.findClosest(el, i => {\n            return i.hasAttribute('x-listbox:option')\n        })\n\n        if (! optionEl) throw 'No x-listbox:option directive found...'\n\n        return {\n            get isActive() {\n                return data.__context.isActiveKey(Alpine.$data(optionEl).__optionKey)\n            },\n            get isSelected() {\n                return data.__isSelected(optionEl)\n            },\n            get isDisabled() {\n                return data.__context.isDisabled(Alpine.$data(optionEl).__optionKey)\n            },\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-id'() { return ['alpine-listbox-button', 'alpine-listbox-options', 'alpine-listbox-label'] },\n        'x-modelable': '__value',\n\n        // Initialize...\n        'x-data'() {\n            return {\n                /**\n                 * Listbox state...\n                 */\n                __ready: false,\n                __value: null,\n                __isOpen: false,\n                __context: undefined,\n                __isMultiple: undefined,\n                __isStatic: false,\n                __isDisabled: undefined,\n                __compareBy: null,\n                __inputName: null,\n                __orientation: 'vertical',\n                __hold: false,\n\n                /**\n                 * Listbox initialization...\n                 */\n                init() {\n                    this.__isMultiple = Alpine.extractProp(el, 'multiple', false)\n                    this.__isDisabled = Alpine.extractProp(el, 'disabled', false)\n                    this.__inputName = Alpine.extractProp(el, 'name', null)\n                    this.__compareBy = Alpine.extractProp(el, 'by')\n                    this.__orientation = Alpine.extractProp(el, 'horizontal', false) ? 'horizontal' : 'vertical'\n\n                    this.__context = generateContext(Alpine, this.__isMultiple, this.__orientation, () => this.__activateSelectedOrFirst())\n\n                    let defaultValue = Alpine.extractProp(el, 'default-value', this.__isMultiple ? [] : null)\n\n                    this.__value = defaultValue\n\n                    // We have to wait again until after the \"ready\" processes are finished\n                    // to settle up currently selected Values (this prevents this next bit\n                    // of code from running multiple times on startup...)\n                    queueMicrotask(() => {\n                        Alpine.effect(() => {\n                            // Everytime the value changes, we need to re-render the hidden inputs,\n                            // if a user passed the \"name\" prop...\n                            this.__inputName && renderHiddenInputs(Alpine, this.$el, this.__inputName, this.__value)\n                        })\n\n                        // Keep the currently selected value in sync with the input value...\n                        Alpine.effect(() => {\n                            this.__resetInput()\n                        })\n                    })\n                },\n                __resetInput() {\n                    let input = this.$refs.__input\n                    if (! input) return\n\n                    let value = this.$data.__getCurrentValue()\n\n                    input.value = value\n                },\n                __getCurrentValue() {\n                    if (! this.$refs.__input) return ''\n                    if (! this.__value) return ''\n                    if (this.$data.__displayValue && this.__value !== undefined) return this.$data.__displayValue(this.__value)\n                    if (typeof this.__value === 'string') return this.__value\n                    return ''\n                },\n                __open() {\n                    if (this.__isOpen) return\n                    this.__isOpen = true\n\n                    this.__activateSelectedOrFirst()\n\n                    // Safari needs more of a \"tick\" for focusing after x-show for some reason.\n                    // Probably because Alpine adds an extra tick when x-showing for @click.outside\n                    let nextTick = callback => requestAnimationFrame(() => requestAnimationFrame(callback))\n\n                    nextTick(() => this.$refs.__options.focus({ preventScroll: true }))\n                },\n                __close() {\n                    this.__isOpen = false\n\n                    this.__context.deactivate()\n\n                    this.$nextTick(() => this.$refs.__button.focus({ preventScroll: true }))\n                },\n                __activateSelectedOrFirst(activateSelected = true) {\n                    if (! this.__isOpen) return\n\n                    if (this.__context.getActiveKey()) {\n                        this.__context.activateAndScrollToKey(this.__context.getActiveKey())\n                        return\n                    }\n\n                    let firstSelectedValue\n\n                    if (this.__isMultiple) {\n                        firstSelectedValue = this.__value.find(i => {\n                            return !! this.__context.getItemByValue(i)\n                        })\n                    } else {\n                        firstSelectedValue = this.__value\n                    }\n\n                    if (activateSelected && firstSelectedValue) {\n                        let firstSelected = this.__context.getItemByValue(firstSelectedValue)\n\n                        firstSelected && this.__context.activateAndScrollToKey(firstSelected.key)\n                    } else {\n                        this.__context.activateAndScrollToKey(this.__context.firstKey())\n                    }\n                },\n                __selectActive() {\n                    let active = this.$data.__context.getActiveItem()\n                    if (active) this.__toggleSelected(active.value)\n                },\n                __selectOption(el) {\n                    let item = this.__context.getItemByEl(el)\n\n                    if (item) this.__toggleSelected(item.value)\n                },\n                __isSelected(el) {\n                    let item = this.__context.getItemByEl(el)\n\n                    if (! item) return false\n                    if (item.value === null || item.value === undefined) return false\n\n                    return this.__hasSelected(item.value)\n                },\n                __toggleSelected(value) {\n                    if (! this.__isMultiple) {\n                        this.__value = value\n\n                        return\n                    }\n\n                    let index = this.__value.findIndex(j => this.__compare(j, value))\n\n                    if (index === -1) {\n                        this.__value.push(value)\n                    } else {\n                        this.__value.splice(index, 1)\n                    }\n                },\n                __hasSelected(value) {\n                    if (! this.__isMultiple) return this.__compare(this.__value, value)\n\n                    return this.__value.some(i => this.__compare(i, value))\n                },\n                __compare(a, b) {\n                    let by = this.__compareBy\n\n                    if (! by) by = (a, b) => Alpine.raw(a) === Alpine.raw(b)\n\n                    if (typeof by === 'string') {\n                        let property = by\n                        by = (a, b) => {\n                            // Handle null values\n                            if ((! a || typeof a !== 'object') || (! b || typeof b !== 'object')) {\n                                return Alpine.raw(a) === Alpine.raw(b)\n                            }\n\n                            return a[property] === b[property];\n                        }\n                    }\n\n                    return by(a, b)\n                },\n            }\n        },\n    })\n}\n\nfunction handleLabel(el, Alpine) {\n    Alpine.bind(el, {\n        'x-ref': '__label',\n        ':id'() { return this.$id('alpine-listbox-label') },\n        '@click'() { this.$refs.__button.focus({ preventScroll: true }) },\n    })\n}\n\nfunction handleButton(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-ref': '__button',\n        ':id'() { return this.$id('alpine-listbox-button') },\n\n        // Accessibility attributes...\n        'aria-haspopup': 'true',\n        ':aria-labelledby'() { return this.$id('alpine-listbox-label') },\n        ':aria-expanded'() { return this.$data.__isOpen },\n        ':aria-controls'() { return this.$data.__isOpen && this.$id('alpine-listbox-options') },\n\n        // Initialize....\n        'x-init'() { if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button' },\n\n        // Register listeners...\n        '@click'() { this.$data.__open() },\n        '@keydown'(e) {\n            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {\n                e.stopPropagation()\n                e.preventDefault()\n\n                this.$data.__open()\n            }\n        },\n        '@keydown.space.stop.prevent'() { this.$data.__open() },\n        '@keydown.enter.stop.prevent'() { this.$data.__open() },\n    })\n}\n\nfunction handleOptions(el, Alpine) {\n    Alpine.bind(el, {\n        // Setup...\n        'x-ref': '__options',\n        ':id'() { return this.$id('alpine-listbox-options') },\n\n        // Accessibility attributes...\n        'role': 'listbox',\n        tabindex: '0',\n        ':aria-orientation'() {\n            return this.$data.__orientation\n        },\n        ':aria-labelledby'() { return this.$id('alpine-listbox-button') },\n        ':aria-activedescendant'() {\n            if (! this.$data.__context.hasActive()) return\n\n            let active = this.$data.__context.getActiveItem()\n\n            return active ? active.el.id : null\n        },\n\n        // Initialize...\n        'x-init'() {\n            this.$data.__isStatic = Alpine.extractProp(this.$el, 'static', false)\n\n            if (Alpine.bound(this.$el, 'hold')) {\n                this.$data.__hold = true;\n            }\n        },\n\n        'x-show'() { return this.$data.__isStatic ? true : this.$data.__isOpen },\n        'x-trap'() { return this.$data.__isOpen },\n        '@click.outside'() { this.$data.__close() },\n        '@keydown.escape.stop.prevent'() { this.$data.__close() },\n        '@focus'() { this.$data.__activateSelectedOrFirst() },\n        '@keydown'(e) {\n            queueMicrotask(() => this.$data.__context.activateByKeyEvent(e, true, () => this.$data.__isOpen, () => this.$data.__open(), () => {}))\n         },\n        '@keydown.enter.stop.prevent'() {\n            this.$data.__selectActive();\n\n            this.$data.__isMultiple || this.$data.__close()\n        },\n        '@keydown.space.stop.prevent'() {\n            this.$data.__selectActive();\n\n            this.$data.__isMultiple || this.$data.__close()\n        },\n    })\n}\n\nfunction handleOption(el, Alpine) {\n    Alpine.bind(el, () => {\n        return {\n            'x-id'() { return ['alpine-listbox-option'] },\n            ':id'() { return this.$id('alpine-listbox-option') },\n\n            // Accessibility attributes...\n            'role': 'option',\n            ':tabindex'() { return this.$listboxOption.isDisabled ? false : '-1' },\n            ':aria-selected'() { return this.$listboxOption.isSelected },\n\n            // Initialize...\n            'x-data'() {\n                return {\n                    '__optionKey': null,\n\n                    init() {\n                        this.__optionKey = (Math.random() + 1).toString(36).substring(7)\n\n                        let value = Alpine.extractProp(el, 'value')\n                        let disabled = Alpine.extractProp(el, 'disabled', false, false)\n\n                        this.$data.__context.registerItem(this.__optionKey, el, value, disabled)\n                    },\n                    destroy() {\n                        this.$data.__context.unregisterItem(this.__optionKey)\n                    },\n                }\n            },\n\n            // Register listeners...\n            '@click'() {\n                if (this.$listboxOption.isDisabled) return;\n\n                this.$data.__selectOption(el)\n\n                this.$data.__isMultiple || this.$data.__close()\n            },\n            '@mouseenter'() { this.$data.__context.activateEl(el) },\n            '@mouseleave'() {\n                this.$data.__hold || this.$data.__context.deactivate()\n            },\n        }\n    })\n}\n\n// Little utility to defer a callback into the microtask queue...\nfunction microtask(callback) {\n    return new Promise(resolve => queueMicrotask(() => resolve(callback())))\n}\n"
  },
  {
    "path": "packages/ui/src/menu.js",
    "content": "export default function (Alpine) {\n    Alpine.directive('menu', (el, directive) => {\n        if (! directive.value) handleRoot(el, Alpine)\n        else if (directive.value === 'items') handleItems(el, Alpine)\n        else if (directive.value === 'item') handleItem(el, Alpine)\n        else if (directive.value === 'button') handleButton(el, Alpine)\n    }).before('bind')\n\n    Alpine.magic('menuItem', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            get isActive() {\n                return $data.__activeEl == $data.__itemEl\n            },\n            get isDisabled() {\n                return $data.__itemEl.__isDisabled.value\n            },\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        'x-id'() { return ['alpine-menu-button', 'alpine-menu-items'] },\n        'x-modelable': '__isOpen',\n        'x-data'() {\n            return {\n                __itemEls: [],\n                __activeEl: null,\n                __isOpen: false,\n                __open(activationStrategy) {\n                    this.__isOpen = true\n\n                    // Safari needs more of a \"tick\" for focusing after x-show for some reason.\n                    // Probably because Alpine adds an extra tick when x-showing for @click.outside\n                    let nextTick = callback => requestAnimationFrame(() => requestAnimationFrame(callback))\n\n                    nextTick(() => {\n                        this.$refs.__items.focus({ preventScroll: true })\n\n                        // Activate the first item every time the menu is open...\n                        activationStrategy && activationStrategy(Alpine, this.$refs.__items, el => el.__activate())\n                    })\n                },\n                __close(focusAfter = true) {\n                    this.__isOpen = false\n\n                    focusAfter && this.$nextTick(() => this.$refs.__button.focus({ preventScroll: true }))\n                },\n                __contains(outer, inner) {\n                    return !! Alpine.findClosest(inner, el => el.isSameNode(outer))\n                }\n            }\n        },\n        '@focusin.window'() {\n            if (! this.$data.__contains(this.$el, document.activeElement)) {\n                this.$data.__close(false)\n            }\n        },\n    })\n}\n\nfunction handleButton(el, Alpine) {\n    Alpine.bind(el, {\n        'x-ref': '__button',\n        'aria-haspopup': 'true',\n        ':aria-labelledby'() { return this.$id('alpine-menu-label') },\n        ':id'() { return this.$id('alpine-menu-button') },\n        ':aria-expanded'() { return this.$data.__isOpen },\n        ':aria-controls'() { return this.$data.__isOpen && this.$id('alpine-menu-items') },\n        'x-init'() { if (this.$el.tagName.toLowerCase() === 'button' && ! this.$el.hasAttribute('type')) this.$el.type = 'button' },\n        '@click'() { this.$data.__open() },\n        '@keydown.down.stop.prevent'() { this.$data.__open() },\n        '@keydown.up.stop.prevent'() { this.$data.__open(dom.last) },\n        '@keydown.space.stop.prevent'() { this.$data.__open() },\n        '@keydown.enter.stop.prevent'() { this.$data.__open() },\n    })\n}\n\n// When patching children:\n// The child isn't initialized until it is reached. This is normally fine\n// except when something like this happens where an \"id\" is added during the initializing phase\n// because the \"to\" element hasn't initialized yet, it doesn't have the ID, so there is a \"key\" mismatch\n\n\nfunction handleItems(el, Alpine) {\n    Alpine.bind(el, {\n        'x-ref': '__items',\n        'aria-orientation': 'vertical',\n        'role': 'menu',\n        ':id'() { return this.$id('alpine-menu-items') },\n        ':aria-labelledby'() { return this.$id('alpine-menu-button') },\n        ':aria-activedescendant'() { return this.$data.__activeEl && this.$data.__activeEl.id },\n        'x-show'() { return this.$data.__isOpen },\n        'tabindex': '0',\n        '@click.outside'() { this.$data.__close() },\n        '@keydown'(e) { dom.search(Alpine, this.$refs.__items, e.key, el => el.__activate()) },\n        '@keydown.down.stop.prevent'() {\n            if (this.$data.__activeEl) dom.next(Alpine, this.$data.__activeEl, el => el.__activate())\n            else dom.first(Alpine, this.$refs.__items, el => el.__activate())\n        },\n        '@keydown.up.stop.prevent'() {\n            if (this.$data.__activeEl) dom.previous(Alpine, this.$data.__activeEl, el => el.__activate())\n            else dom.last(Alpine, this.$refs.__items, el => el.__activate())\n        },\n        '@keydown.home.stop.prevent'() { dom.first(Alpine, this.$refs.__items, el => el.__activate()) },\n        '@keydown.end.stop.prevent'() { dom.last(Alpine, this.$refs.__items, el => el.__activate()) },\n        '@keydown.page-up.stop.prevent'() { dom.first(Alpine, this.$refs.__items, el => el.__activate()) },\n        '@keydown.page-down.stop.prevent'() { dom.last(Alpine, this.$refs.__items, el => el.__activate()) },\n        '@keydown.escape.stop.prevent'() { this.$data.__close() },\n        '@keydown.space.stop.prevent'() { this.$data.__activeEl && this.$data.__activeEl.click() },\n        '@keydown.enter.stop.prevent'() { this.$data.__activeEl && this.$data.__activeEl.click() },\n        // Required for firefox, event.preventDefault() in handleKeyDown for\n        // the Space key doesn't cancel the handleKeyUp, which in turn\n        // triggers a *click*.\n        '@keyup.space.prevent'() { },\n    })\n}\n\nfunction handleItem(el, Alpine) {\n    Alpine.bind(el, () => {\n        return {\n            'x-data'() {\n                return {\n                    __itemEl: this.$el,\n                    init() {\n                        // Add current element to element list for navigating.\n                        let els = Alpine.raw(this.$data.__itemEls)\n                        let inserted = false\n\n                        for (let i = 0; i < els.length; i++) {\n                            if (els[i].compareDocumentPosition(this.$el) & Node.DOCUMENT_POSITION_PRECEDING) {\n                                els.splice(i, 0, this.$el)\n                                inserted = true\n                                break\n                            }\n                        }\n\n                        if (! inserted) els.push(this.$el)\n\n                        this.$el.__activate = () => {\n                            this.$data.__activeEl = this.$el\n                            this.$el.scrollIntoView({ block: 'nearest' })\n                        }\n\n                        this.$el.__deactivate = () => {\n                            this.$data.__activeEl = null\n                        }\n\n\n                        this.$el.__isDisabled = Alpine.reactive({ value: false })\n\n                        queueMicrotask(() => {\n                            this.$el.__isDisabled.value = Alpine.bound(this.$el, 'disabled', false)\n                        })\n                    },\n                    destroy() {\n                        // Remove this element from the elements list.\n                        let els = this.$data.__itemEls\n                        els.splice(els.indexOf(this.$el), 1)\n                    },\n                }\n            },\n            'x-id'() { return ['alpine-menu-item'] },\n            ':id'() { return this.$id('alpine-menu-item') },\n            ':tabindex'() { return this.__itemEl.__isDisabled.value ? false : '-1' },\n            'role': 'menuitem',\n            '@mousemove'() { this.__itemEl.__isDisabled.value || this.$menuItem.isActive || this.__itemEl.__activate() },\n            '@mouseleave'() { this.__itemEl.__isDisabled.value || ! this.$menuItem.isActive || this.__itemEl.__deactivate() },\n        }\n    })\n}\n\nlet dom = {\n    first(Alpine, parent, receive = i => i, fallback = () => { }) {\n        let first = Alpine.$data(parent).__itemEls[0]\n\n        if (! first) return fallback()\n\n        if (first.tagName.toLowerCase() === 'template') {\n            return this.next(Alpine, first, receive)\n        }\n\n        if (first.__isDisabled.value) return this.next(Alpine, first, receive)\n\n        return receive(first)\n    },\n    last(Alpine, parent, receive = i => i, fallback = () => { }) {\n        let last = Alpine.$data(parent).__itemEls.slice(-1)[0]\n\n        if (! last) return fallback()\n        if (last.__isDisabled.value) return this.previous(Alpine, last, receive)\n        return receive(last)\n    },\n    next(Alpine, el, receive = i => i, fallback = () => { }) {\n        if (! el) return fallback()\n\n        let els = Alpine.$data(el).__itemEls\n        let next = els[els.indexOf(el) + 1]\n\n        if (! next) return fallback()\n        if (next.__isDisabled.value || next.tagName.toLowerCase() === 'template') return this.next(Alpine, next, receive, fallback)\n        return receive(next)\n    },\n    previous(Alpine, el, receive = i => i, fallback = () => { }) {\n        if (! el) return fallback()\n\n        let els = Alpine.$data(el).__itemEls\n        let prev = els[els.indexOf(el) - 1]\n\n        if (! prev) return fallback()\n        if (prev.__isDisabled.value || prev.tagName.toLowerCase() === 'template') return this.previous(Alpine, prev, receive, fallback)\n        return receive(prev)\n    },\n    searchQuery: '',\n    debouncedClearSearch: undefined,\n    clearSearch(Alpine) {\n        if (! this.debouncedClearSearch) {\n            this.debouncedClearSearch = Alpine.debounce(function () { this.searchQuery = '' }, 350)\n        }\n\n        this.debouncedClearSearch()\n    },\n    search(Alpine, parent, key, receiver) {\n        if (key.length > 1) return\n\n        this.searchQuery += key\n\n        let els = Alpine.raw(Alpine.$data(parent).__itemEls)\n\n        let el = els.find(el => {\n            return el.textContent.trim().toLowerCase().startsWith(this.searchQuery)\n        })\n\n        el && ! el.__isDisabled.value && receiver(el)\n\n        this.clearSearch(Alpine)\n    },\n}\n"
  },
  {
    "path": "packages/ui/src/popover.js",
    "content": "\nexport default function (Alpine) {\n    Alpine.directive('popover', (el, directive) => {\n        if      (! directive.value)                 handleRoot(el, Alpine)\n        else if (directive.value === 'overlay')     handleOverlay(el, Alpine)\n        else if (directive.value === 'button')      handleButton(el, Alpine)\n        else if (directive.value === 'panel')       handlePanel(el, Alpine)\n        else if (directive.value === 'group')       handleGroup(el, Alpine)\n    })\n\n    Alpine.magic('popover', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            get isOpen() {\n                return $data.__isOpenState\n            },\n            open() {\n                $data.__open()\n            },\n            close() {\n                $data.__close()\n            },\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        'x-id'() { return ['alpine-popover-button', 'alpine-popover-panel'] },\n        'x-modelable': '__isOpenState',\n        'x-data'() {\n            return {\n                init() {\n                    if (this.$data.__groupEl) {\n                        this.$data.__groupEl.addEventListener('__close-others', ({ detail }) => {\n                            if (detail.el.isSameNode(this.$el)) return\n\n                            this.__close(false)\n                        })\n                    }\n                },\n                __buttonEl: undefined,\n                __panelEl: undefined,\n                __isStatic: false,\n                get __isOpen() {\n                    if (this.__isStatic) return true\n\n                    return this.__isOpenState\n                },\n                __isOpenState: false,\n                __open() {\n                    this.__isOpenState = true\n\n                    this.$dispatch('__close-others', { el: this.$el })\n                },\n                __toggle() {\n                    this.__isOpenState ? this.__close() : this.__open()\n                },\n                __close(el) {\n                    if (this.__isStatic) return\n\n                    this.__isOpenState = false\n\n                    if (el === false) return\n\n                    el = el || this.$data.__buttonEl\n\n                    if (document.activeElement.isSameNode(el)) return\n\n                    setTimeout(() => el.focus())\n                },\n                __contains(outer, inner) {\n                    return !! Alpine.findClosest(inner, el => el.isSameNode(outer))\n                }\n            }\n        },\n        '@keydown.escape.stop.prevent'() {\n            this.__close()\n        },\n        '@focusin.window'() {\n            if (this.$data.__groupEl) {\n                if (! this.$data.__contains(this.$data.__groupEl, document.activeElement)) {\n                    this.$data.__close(false)\n                }\n\n                return\n            }\n\n            if (! this.$data.__contains(this.$el, document.activeElement)) {\n                this.$data.__close(false)\n            }\n        },\n    })\n}\n\nfunction handleButton(el, Alpine) {\n    Alpine.bind(el, {\n        'x-ref': 'button',\n        ':id'() { return this.$id('alpine-popover-button') },\n        ':aria-expanded'() { return this.$data.__isOpen },\n        ':aria-controls'() { return this.$data.__isOpen && this.$id('alpine-popover-panel') },\n        'x-init'() {\n            if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button'\n\n            this.$data.__buttonEl = this.$el\n        },\n        '@click'() { this.$data.__toggle() },\n        '@keydown.tab'(e) {\n            if (! e.shiftKey && this.$data.__isOpen) {\n                let firstFocusableEl = this.$focus.within(this.$data.__panelEl).getFirst()\n\n                if (firstFocusableEl) {\n                    e.preventDefault()\n                    e.stopPropagation()\n\n                    this.$focus.focus(firstFocusableEl)\n                }\n            }\n        },\n        '@keyup.tab'(e) {\n            if (this.$data.__isOpen) {\n                // Check if the last focused element was \"after\" this one\n                let lastEl = this.$focus.previouslyFocused()\n\n                if (! lastEl) return\n\n                if (\n                    // Make sure the last focused wasn't part of this popover.\n                    (! this.$data.__buttonEl.contains(lastEl) && ! this.$data.__panelEl.contains(lastEl))\n                    // Also make sure it appeared \"after\" this button in the DOM.\n                    && (lastEl && (this.$el.compareDocumentPosition(lastEl) & Node.DOCUMENT_POSITION_FOLLOWING))\n                ) {\n                    e.preventDefault()\n                    e.stopPropagation()\n\n                    this.$focus.within(this.$data.__panelEl).last()\n                }\n            }\n        },\n        '@keydown.space.stop.prevent'() { this.$data.__toggle() },\n        '@keydown.enter.stop.prevent'() { this.$data.__toggle() },\n        // This is to stop Firefox from firing a \"click\".\n        '@keyup.space.stop.prevent'() { },\n    })\n}\n\nfunction handlePanel(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() {\n            this.$data.__isStatic = Alpine.bound(this.$el, 'static', false)\n            this.$data.__panelEl = this.$el\n        },\n        'x-effect'() {\n            this.$data.__isOpen && Alpine.bound(el, 'focus') && this.$focus.first()\n        },\n        'x-ref': 'panel',\n        ':id'() { return this.$id('alpine-popover-panel') },\n        'x-show'() { return this.$data.__isOpen },\n        '@mousedown.window'($event) {\n            if (! this.$data.__isOpen) return\n            if (this.$data.__contains(this.$data.__buttonEl, $event.target)) return\n            if (this.$data.__contains(this.$el, $event.target)) return\n\n            if (! this.$focus.focusable($event.target)) {\n                this.$data.__close()\n            }\n        },\n        '@keydown.tab'(e) {\n            if (e.shiftKey && this.$focus.isFirst(e.target)) {\n                e.preventDefault()\n                e.stopPropagation()\n                Alpine.bound(el, 'focus') ? this.$data.__close() : this.$data.__buttonEl.focus()\n            } else if (! e.shiftKey && this.$focus.isLast(e.target)) {\n                e.preventDefault()\n                e.stopPropagation()\n\n                // Get the next panel button:\n                let els = this.$focus.within(document).all()\n                let buttonIdx = els.indexOf(this.$data.__buttonEl)\n\n                let nextEls = els\n                    .splice(buttonIdx + 1) // Elements after button\n                    .filter(el => ! this.$el.contains(el)) // Ignore items in panel\n\n                nextEls[0].focus()\n\n                Alpine.bound(el, 'focus') && this.$data.__close(false)\n            }\n        },\n    })\n}\n\nfunction handleGroup(el, Alpine) {\n    Alpine.bind(el, {\n        'x-ref': 'container',\n        'x-data'() {\n            return {\n                __groupEl: this.$el,\n            }\n        },\n    })\n}\n\nfunction handleOverlay(el, Alpine) {\n    Alpine.bind(el, {\n        'x-show'() { return this.$data.__isOpen }\n    })\n}\n"
  },
  {
    "path": "packages/ui/src/radio.js",
    "content": "\nexport default function (Alpine) {\n    Alpine.directive('radio', (el, directive) => {\n        if      (! directive.value)                 handleRoot(el, Alpine)\n        else if (directive.value === 'option')      handleOption(el, Alpine)\n        else if (directive.value === 'label')       handleLabel(el, Alpine)\n        else if (directive.value === 'description') handleDescription(el, Alpine)\n    }).before('bind')\n\n    Alpine.magic('radioOption', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            get isActive() {\n                return $data.__option === $data.__active\n            },\n            get isChecked() {\n                return $data.__option === $data.__value\n            },\n            get isDisabled() {\n                let disabled = $data.__disabled\n\n                if ($data.__rootDisabled) return true\n\n                return disabled\n            },\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        'x-modelable': '__value',\n        'x-data'() {\n            return {\n                init() {\n                    queueMicrotask(() => {\n                        this.__rootDisabled = Alpine.bound(el, 'disabled', false);\n                        this.__value = Alpine.bound(this.$el, 'default-value', false)\n                        this.__inputName = Alpine.bound(this.$el, 'name', false)\n                        this.__inputId = 'alpine-radio-'+Date.now()\n                    })\n\n                    // Add `role=\"none\"` to all non role elements.\n                    this.$nextTick(() => {\n                        let walker = document.createTreeWalker(\n                            this.$el,\n                            NodeFilter.SHOW_ELEMENT,\n                            {\n                                acceptNode: node => {\n                                    if (node.getAttribute('role') === 'radio') return NodeFilter.FILTER_REJECT\n                                    if (node.hasAttribute('role')) return NodeFilter.FILTER_SKIP\n                                    return NodeFilter.FILTER_ACCEPT\n                                }\n                            },\n                            false\n                        )\n\n                        while (walker.nextNode()) walker.currentNode.setAttribute('role', 'none')\n                    })\n                },\n                __value: undefined,\n                __active: undefined,\n                __rootEl: this.$el,\n                __optionValues: [],\n                __disabledOptions: new Set,\n                __optionElsByValue: new Map,\n                __hasLabel: false,\n                __hasDescription: false,\n                __rootDisabled: false,\n                __inputName: undefined,\n                __inputId: undefined,\n                __change(value) {\n                    if (this.__rootDisabled) return\n\n                    this.__value = value\n                },\n                __addOption(option, el, disabled) {\n                    // Add current element to element list for navigating.\n                    let options = Alpine.raw(this.__optionValues)\n                    let els = options.map(i => this.__optionElsByValue.get(i))\n                    let inserted = false\n\n                    for (let i = 0; i < els.length; i++) {\n                        if (els[i].compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) {\n                            options.splice(i, 0, option)\n                            this.__optionElsByValue.set(option, el)\n                            inserted = true\n                            break\n                        }\n                    }\n\n                    if (!inserted) {\n                        options.push(option)\n                        this.__optionElsByValue.set(option, el)\n                    }\n\n                    disabled && this.__disabledOptions.add(option)\n                },\n                __isFirstOption(option) {\n                    return this.__optionValues.indexOf(option) === 0\n                },\n                __setActive(option) {\n                    this.__active = option\n                },\n                __focusOptionNext() {\n                    let option = this.__active\n                    let all = this.__optionValues.filter(i => !this.__disabledOptions.has(i))\n                    let index = all.indexOf(option)\n                    let next = all[(index + 1 + all.length) % all.length]\n\n                    this.__optionElsByValue.get(next).focus()\n                    this.__change(next)\n                },\n                __focusOptionPrev() {\n                    let option = this.__active\n                    let all = this.__optionValues.filter(i => !this.__disabledOptions.has(i))\n                    let index = all.indexOf(option)\n                    let prev = all[(index - 1 + all.length) % all.length]\n\n                    this.__optionElsByValue.get(prev).focus()\n                    this.__change(prev)\n                },\n            }\n        },\n        'x-effect'() {\n            let value = this.__value\n\n            // Only render a hidden input if the \"name\" prop is passed...\n            if (! this.__inputName) return\n\n            // First remove a previously appended hidden input (if it exists)...\n            let nextEl = this.$el.nextElementSibling\n            if (nextEl && String(nextEl.id) === String(this.__inputId)) {\n                nextEl.remove()\n            }\n\n            // If the value is true, create the input and append it, otherwise,\n            // we already removed it in the previous step...\n            if (value) {\n                let input = document.createElement('input')\n\n                input.type = 'hidden'\n                input.value = value\n                input.name = this.__inputName\n                input.id = this.__inputId\n\n                this.$el.after(input)\n            }\n        },\n        'role': 'radiogroup',\n        'x-id'() { return ['alpine-radio-label', 'alpine-radio-description'] },\n        ':aria-labelledby'() { return this.__hasLabel && this.$id('alpine-radio-label') },\n        ':aria-describedby'() { return this.__hasDescription && this.$id('alpine-radio-description') },\n        '@keydown.up.prevent.stop'() { this.__focusOptionPrev() },\n        '@keydown.left.prevent.stop'() { this.__focusOptionPrev() },\n        '@keydown.down.prevent.stop'() { this.__focusOptionNext() },\n        '@keydown.right.prevent.stop'() { this.__focusOptionNext() },\n    })\n}\n\nfunction handleOption(el, Alpine) {\n    Alpine.bind(el, {\n        'x-data'() {\n            return {\n                init() {\n                    queueMicrotask(() => {\n                        this.__disabled = Alpine.bound(el, 'disabled', false)\n                        this.__option = Alpine.bound(el, 'value')\n                        this.$data.__addOption(this.__option, this.$el, this.__disabled)\n                    })\n                },\n                __option: undefined,\n                __disabled: false,\n                __hasLabel: false,\n                __hasDescription: false,\n            }\n        },\n        'x-id'() { return ['alpine-radio-label', 'alpine-radio-description'] },\n        'role': 'radio',\n        ':aria-checked'() { return this.$radioOption.isChecked },\n        ':aria-disabled'() { return this.$radioOption.isDisabled },\n        ':aria-labelledby'() { return this.__hasLabel && this.$id('alpine-radio-label') },\n        ':aria-describedby'() { return this.__hasDescription && this.$id('alpine-radio-description') },\n        ':tabindex'()   {\n            if (this.$radioOption.isDisabled) return -1\n            if (this.$radioOption.isChecked) return 0\n            if (! this.$data.__value && this.$data.__isFirstOption(this.$data.__option)) return 0\n\n            return -1\n        },\n        '@click'() {\n            if (this.$radioOption.isDisabled) return\n            this.$data.__change(this.$data.__option)\n            this.$el.focus()\n        },\n        '@focus'() {\n            if (this.$radioOption.isDisabled) return\n            this.$data.__setActive(this.$data.__option)\n        },\n        '@blur'() {\n            if (this.$data.__active === this.$data.__option) this.$data.__setActive(undefined)\n        },\n        '@keydown.space.stop.prevent'() { this.$data.__change(this.$data.__option) },\n    })\n}\n\nfunction handleLabel(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { this.$data.__hasLabel = true },\n        ':id'() { return this.$id('alpine-radio-label') },\n    })\n}\n\nfunction handleDescription(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { this.$data.__hasDescription = true },\n        ':id'() { return this.$id('alpine-radio-description') },\n    })\n}\n"
  },
  {
    "path": "packages/ui/src/switch.js",
    "content": "\nexport default function (Alpine) {\n    Alpine.directive('switch', (el, directive) => {\n        if      (directive.value === 'group')       handleGroup(el, Alpine)\n        else if (directive.value === 'label')       handleLabel(el, Alpine)\n        else if (directive.value === 'description') handleDescription(el, Alpine)\n        else                                        handleRoot(el, Alpine)\n    }).before('bind')\n\n    Alpine.magic('switch', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            get isChecked() {\n                return $data.__value === true\n            },\n        }\n    })\n}\n\nfunction handleGroup(el, Alpine) {\n    Alpine.bind(el, {\n        'x-id'() { return ['alpine-switch-label', 'alpine-switch-description'] },\n        'x-data'() {\n            return {\n                __hasLabel: false,\n                __hasDescription: false,\n                __switchEl: undefined,\n            }\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        'x-modelable': '__value',\n        'x-data'() {\n            return {\n                init() {\n                    queueMicrotask(() => {\n                        this.__value = Alpine.bound(this.$el, 'default-checked', false)\n                        this.__inputName = Alpine.bound(this.$el, 'name', false)\n                        this.__inputValue = Alpine.bound(this.$el, 'value', 'on')\n                        this.__inputId = 'alpine-switch-'+Date.now()\n                    })\n                },\n                __value: undefined,\n                __inputName: undefined,\n                __inputValue: undefined,\n                __inputId: undefined,\n                __toggle() {\n                    this.__value = ! this.__value;\n                },\n            }\n        },\n        'x-effect'() {\n            let value = this.__value\n\n            // Only render a hidden input if the \"name\" prop is passed...\n            if (! this.__inputName) return\n\n            // First remove a previously appended hidden input (if it exists)...\n            let nextEl = this.$el.nextElementSibling\n            if (nextEl && String(nextEl.id) === String(this.__inputId)) {\n                nextEl.remove()\n            }\n\n            // If the value is true, create the input and append it, otherwise,\n            // we already removed it in the previous step...\n            if (value) {\n                let input = document.createElement('input')\n\n                input.type = 'hidden'\n                input.value = this.__inputValue\n                input.name = this.__inputName\n                input.id = this.__inputId\n\n                this.$el.after(input)\n            }\n        },\n        'x-init'() {\n            if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button'\n            this.$data.__switchEl = this.$el\n        },\n        'role': 'switch',\n        'tabindex': \"0\",\n        ':aria-checked'() { return !!this.__value },\n        ':aria-labelledby'() { return this.$data.__hasLabel && this.$id('alpine-switch-label') },\n        ':aria-describedby'() { return this.$data.__hasDescription && this.$id('alpine-switch-description') },\n        '@click.prevent'() { this.__toggle() },\n        '@keyup'(e) {\n            if (e.key !== 'Tab') e.preventDefault()\n            if (e.key === ' ') this.__toggle()\n        },\n        // This is needed so that we can \"cancel\" the click event when we use the `Enter` key on a button.\n        '@keypress.prevent'() { },\n    })\n}\n\nfunction handleLabel(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { this.$data.__hasLabel = true },\n        ':id'() { return this.$id('alpine-switch-label') },\n        '@click'() {\n            this.$data.__switchEl.click()\n            this.$data.__switchEl.focus({ preventScroll: true })\n        },\n    })\n}\n\nfunction handleDescription(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { this.$data.__hasDescription = true },\n        ':id'() { return this.$id('alpine-switch-description') },\n    })\n}\n"
  },
  {
    "path": "packages/ui/src/tabs.js",
    "content": "\nexport default function (Alpine) {\n    Alpine.directive('tabs', (el, directive) => {\n        if      (! directive.value)                handleRoot(el, Alpine)\n        else if (directive.value === 'list')       handleList(el, Alpine)\n        else if (directive.value === 'tab')        handleTab(el, Alpine)\n        else if (directive.value === 'panels')     handlePanels(el, Alpine)\n        else if (directive.value === 'panel')      handlePanel(el, Alpine)\n    }).before('bind')\n\n    Alpine.magic('tab', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            get isSelected() {\n                return $data.__selectedIndex === $data.__tabs.indexOf($data.__tabEl)\n            },\n            get isDisabled() {\n                return $data.__isDisabled\n            }\n        }\n    })\n\n    Alpine.magic('panel', el => {\n        let $data = Alpine.$data(el)\n\n        return {\n            get isSelected() {\n                return $data.__selectedIndex === $data.__panels.indexOf($data.__panelEl)\n            }\n        }\n    })\n}\n\nfunction handleRoot(el, Alpine) {\n    Alpine.bind(el, {\n        'x-modelable': '__selectedIndex',\n        'x-data'() {\n            return {\n                init() {\n                    queueMicrotask(() => {\n                        let defaultIndex = this.__selectedIndex || Number(Alpine.bound(this.$el, 'default-index', 0))\n                        let tabs = this.__activeTabs()\n                        let clamp = (number, min, max) => Math.min(Math.max(number, min), max)\n\n                        this.__selectedIndex = clamp(defaultIndex, 0, tabs.length -1)\n\n                        Alpine.effect(() => {\n                            this.__manualActivation = Alpine.bound(this.$el, 'manual', false)\n                        })\n                    })\n                },\n                __tabs: [],\n                __panels: [],\n                __selectedIndex: null,\n                __tabGroupEl: undefined,\n                __manualActivation: false,\n                __addTab(el) { this.__tabs.push(el) },\n                __addPanel(el) { this.__panels.push(el) },\n                __selectTab(el) {\n                    this.__selectedIndex = this.__tabs.indexOf(el)\n                },\n                __activeTabs() {\n                   return this.__tabs.filter(i => !i.__disabled)\n                },\n            }\n        }\n    })\n}\n\nfunction handleList(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { this.$data.__tabGroupEl = this.$el }\n    })\n}\n\nfunction handleTab(el, Alpine) {\n    Alpine.bind(el, {\n        'x-init'() { if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button' },\n        'x-data'() { return {\n            init() {\n                this.__tabEl = this.$el\n                this.$data.__addTab(this.$el)\n                this.__tabEl.__disabled = Alpine.bound(this.$el, 'disabled', false)\n                this.__isDisabled = this.__tabEl.__disabled\n            },\n            __tabEl: undefined,\n            __isDisabled: false,\n        }},\n        '@click'() {\n            if (this.$el.__disabled) return\n\n            this.$data.__selectTab(this.$el)\n\n            this.$el.focus()\n        },\n        '@keydown.enter.prevent.stop'() { this.__selectTab(this.$el) },\n        '@keydown.space.prevent.stop'() { this.__selectTab(this.$el) },\n        '@keydown.home.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).first() },\n        '@keydown.page-up.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).first() },\n        '@keydown.end.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).last() },\n        '@keydown.page-down.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).last() },\n        '@keydown.down.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().next() },\n        '@keydown.right.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().next() },\n        '@keydown.up.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().prev() },\n        '@keydown.left.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().prev() },\n        ':tabindex'() { return this.$tab.isSelected ? 0 : -1 },\n        // This is important because we want to only focus the tab when it gets focus\n        // OR it finished the click event (mouseup). However, if you perform a `click`,\n        // then you will first get the `focus` and then get the `click` event.\n        // See https://github.com/tailwindlabs/headlessui/pull/1192\n        '@mousedown'(event) { event.preventDefault() },\n        '@focus'() {\n            if (this.$data.__manualActivation) {\n                this.$el.focus()\n            } else {\n                if (this.$el.__disabled) return\n\n                this.$data.__selectTab(this.$el)\n\n                this.$el.focus()\n            }\n        },\n    })\n}\n\nfunction handlePanels(el, Alpine) {\n    Alpine.bind(el, {\n        //\n    })\n}\n\nfunction handlePanel(el, Alpine) {\n    Alpine.bind(el, {\n        ':tabindex'() { return this.$panel.isSelected ? 0 : -1 },\n        'x-data'() { return {\n            init() {\n                this.__panelEl = this.$el\n                this.$data.__addPanel(this.$el)\n            },\n            __panelEl: undefined,\n        }},\n        'x-show'() { return this.$panel.isSelected },\n    })\n}\n\n"
  },
  {
    "path": "scripts/build.js",
    "content": "let { getFromPackageDotJson } = require('./utils');\nlet fs = require('fs');\nlet zlib = require('zlib');\n\n([\n    // Packages:\n    'alpinejs',\n    'csp',\n    // 'history', - removed because this plugin has been moved to livewire/livewire until it's stable...\n    // 'navigate', - remove because this plugin has been moved to livewire/livewire until it's stable...\n    'intersect',\n    'collapse',\n    'persist',\n    'resize',\n    'anchor',\n    'morph',\n    'focus',\n    'sort',\n    'mask',\n    'ui',\n]).forEach(package => {\n    if (! fs.existsSync(`./packages/${package}/dist`)) {\n        fs.mkdirSync(`./packages/${package}/dist`, 0744);\n    }\n\n    // Go through each file in the package's \"build\" directory\n    // and use the appropriate bundling strategy based on its name.\n    fs.readdirSync(`./packages/${package}/builds`).forEach(file => {\n        bundleFile(package, file)\n    });\n})\n\nfunction bundleFile(package, file) {\n    // Based on the filename, give esbuild a specific configuration to build.\n    ({\n        // This output file is meant to be loaded in a browser's <script> tag.\n        'cdn.js': () => {\n            build({\n                entryPoints: [`packages/${package}/builds/${file}`],\n                outfile: `packages/${package}/dist/${file}`,\n                bundle: true,\n                platform: 'browser',\n                define: { CDN: 'true' },\n            })\n\n            // Build a minified version.\n            build({\n                entryPoints: [`packages/${package}/builds/${file}`],\n                outfile: `packages/${package}/dist/${file.replace('.js', '.min.js')}`,\n                bundle: true,\n                minify: true,\n                platform: 'browser',\n                define: { CDN: 'true' },\n            }).then(() => {\n                outputSize(package, `packages/${package}/dist/${file.replace('.js', '.min.js')}`)\n            })\n\n        },\n        // This file outputs two files: an esm module and a cjs module.\n        // The ESM one is meant for \"import\" statements (bundlers and new browsers)\n        // and the cjs one is meant for \"require\" statements (node).\n        'module.js': () => {\n            build({\n                entryPoints: [`packages/${package}/builds/${file}`],\n                outfile: `packages/${package}/dist/${file.replace('.js', '.esm.js')}`,\n                bundle: true,\n                platform: 'neutral',\n                mainFields: ['module', 'main'],\n            })\n\n            build({\n                entryPoints: [`packages/${package}/builds/${file}`],\n                outfile: `packages/${package}/dist/${file.replace('.js', '.cjs.js')}`,\n                bundle: true,\n                target: ['node10.4'],\n                platform: 'node',\n            })\n        },\n    })[file]()\n}\n\nfunction build(options) {\n    options.define || (options.define = {})\n\n    options.define['ALPINE_VERSION'] = `'${getFromPackageDotJson('alpinejs', 'version')}'`\n    options.define['process.env.NODE_ENV'] = process.argv.includes('--watch') ? `'production'` : `'development'`\n\n    return require('esbuild').build({\n        logLevel: process.argv.includes('--watch') ? 'info' : 'warning',\n        watch: process.argv.includes('--watch'),\n        // external: ['alpinejs'],\n        ...options,\n    }).catch(() => process.exit(1))\n}\n\nfunction outputSize(package, file) {\n    let size = bytesToSize(zlib.brotliCompressSync(fs.readFileSync(file)).length)\n\n    console.log(\"\\x1b[32m\", `${package}: ${size}`)\n}\n\nfunction bytesToSize(bytes) {\n    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']\n    if (bytes === 0) return 'n/a'\n    const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10)\n    if (i === 0) return `${bytes} ${sizes[i]}`\n    return `${(bytes / (1024 ** i)).toFixed(1)} ${sizes[i]}`\n}\n"
  },
  {
    "path": "scripts/cleanup-worktree.sh",
    "content": "#!/usr/bin/env bash\nset -euo pipefail\n\n# ── Resolve the repo root from this script's location ────────────────────────\nREPO_DIR=\"$(cd \"$(dirname \"$0\")/..\" && pwd)\"\n\n# ── Usage ────────────────────────────────────────────────────────────────────\nif [[ $# -lt 1 ]]; then\n    echo \"Usage: $0 <worktree-path>\"\n    echo \"\"\n    echo \"  Removes a worktree and cleans up its directory.\"\n    echo \"\"\n    echo \"Examples:\"\n    echo \"  $0 ../alpine-fix-modal\"\n    echo \"  $0 /tmp/alpine-experiment\"\n    exit 1\nfi\n\nDEST=\"$(cd \"$(dirname \"$1\")\" 2>/dev/null && pwd)/$(basename \"$1\")\" || {\n    DEST=\"$(pwd)/$1\"\n}\n\n# ── Validate ─────────────────────────────────────────────────────────────────\nif [[ ! -d \"$DEST\" ]]; then\n    echo \"Directory does not exist: $DEST\"\n    exit 1\nfi\n\n# ── Remove ───────────────────────────────────────────────────────────────────\necho \"Removing worktree at $DEST...\"\ngit -C \"$REPO_DIR\" worktree remove --force \"$DEST\"\n\n# ── Prune any stale worktree references ──────────────────────────────────────\ngit -C \"$REPO_DIR\" worktree prune\n\necho \"\"\necho \"Worktree removed: $DEST\"\n"
  },
  {
    "path": "scripts/release.js",
    "content": "let { runFromPackage, writeToPackageDotJson, ask, run, getFromPackageDotJson } = require('./utils')\nlet chalk = require('chalk');\nlet log = message => console.log(chalk.green(message))\nlet version = process.argv[2]\nlet prevVersion = getFromPackageDotJson('alpinejs', 'version')\nlet fs = require('fs')\nlet axios = require('axios').create({\n    headers: { Authorization: `Bearer ${require('./.env.json').GITHUB_TOKEN}` }\n})\n\nif (! version) {\n    return console.log('Whoops, you must pass in a version number to this command as the argument')\n}\n\nif (! /[0-9]+\\.[0-9]+\\.[0-9]+/.test(version)) {\n    return console.log('Whoops, the supplies version is invalid: '+version)\n}\n\nwriteNewAlpineVersion()\nbuildAssets()\nrun(`open https://github.com/alpinejs/alpine/compare/v${prevVersion}...main`)\n\nsetTimeout(() => {\n    ask('Have you reviewed, committed, and pushed all the files for this release?', () => {\n        draftRelease(version, () => {\n            ask('Are you sure you want to publish this release: '+version+'?', () => publish())\n        })\n    })\n}, 1000)\n\nfunction writeNewAlpineVersion() {\n    let file = __dirname+'/../packages/docs/src/en/essentials/installation.md'\n    let docs = fs.readFileSync(file, 'utf8')\n    docs = docs.replace(prevVersion, version)\n    fs.writeFileSync(file, docs)\n    console.log('Writing new Alpine version to installation docs: '+version)\n\n    writeToPackageDotJson('alpinejs', 'version', version)\n    console.log('Bumping alpinejs package.json: '+version)\n\n    writeToPackageDotJson('docs', 'version', version)\n    console.log('Bumping @alpinejs/docs package.json: '+version)\n\n    writeToPackageDotJson('ui', 'version', version)\n    console.log('Bumping @alpinejs/ui package.json: '+version)\n\n    writeToPackageDotJson('csp', 'version', version)\n    console.log('Bumping @alpinejs/csp package.json: '+version)\n\n    writeToPackageDotJson('intersect', 'version', version)\n    console.log('Bumping @alpinejs/intersect package.json: '+version)\n\n    writeToPackageDotJson('resize', 'version', version)\n    console.log('Bumping @alpinejs/resize package.json: '+version)\n\n    writeToPackageDotJson('persist', 'version', version)\n    console.log('Bumping @alpinejs/persist package.json: '+version)\n\n    writeToPackageDotJson('focus', 'version', version)\n    console.log('Bumping @alpinejs/focus package.json: '+version)\n\n    writeToPackageDotJson('collapse', 'version', version)\n    console.log('Bumping @alpinejs/collapse package.json: '+version)\n\n    writeToPackageDotJson('anchor', 'version', version)\n    console.log('Bumping @alpinejs/anchor package.json: '+version)\n\n    writeToPackageDotJson('morph', 'version', version)\n    console.log('Bumping @alpinejs/morph package.json: '+version)\n\n    writeToPackageDotJson('mask', 'version', version)\n    console.log('Bumping @alpinejs/mask package.json: '+version)\n\n    writeToPackageDotJson('sort', 'version', version)\n    console.log('Bumping @alpinejs/sort package.json: '+version)\n}\n\nfunction buildAssets() {\n    console.log('Building assets...')\n    require('./build')\n}\n\nfunction publish() {\n    console.log('Publishing alpinejs on NPM...');\n    runFromPackage('alpinejs', 'npm publish')\n\n    console.log('Publishing @alpinejs/docs on NPM...');\n    runFromPackage('docs', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/ui on NPM...');\n    runFromPackage('ui', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/csp on NPM...');\n    runFromPackage('csp', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/intersect on NPM...');\n    runFromPackage('intersect', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/resize on NPM...');\n    runFromPackage('resize', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/persist on NPM...');\n    runFromPackage('persist', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/focus on NPM...');\n    runFromPackage('focus', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/collapse on NPM...');\n    runFromPackage('collapse', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/anchor on NPM...');\n    runFromPackage('anchor', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/morph on NPM...');\n    runFromPackage('morph', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/mask on NPM...');\n    runFromPackage('mask', 'npm publish --access public')\n\n    console.log('Publishing @alpinejs/sort on NPM...');\n    runFromPackage('sort', 'npm publish --access public')\n\n    log('\\n\\nFinished!')\n}\n\nasync function draftRelease(name, after = () => {}) {\n    let lastRelease = await getLastRelease()\n\n    let since = lastRelease.published_at\n\n    let pulls = await getPullRequestsSince(since)\n\n    let output = ''\n\n    output += \"## Added\\n\\n## Fixed\\n\\n\"\n\n    output += pulls.map(pull => `* ${pull.title} [#${pull.number}](${pull.html_url})`).join('\\n')\n\n    fs.writeFileSync('./changelog.tmp', output)\n\n    run('code ./changelog.tmp')\n\n    ask('Are you finished editing the changelog?', () => {\n        let content = fs.readFileSync('./changelog.tmp', 'utf8')\n\n        fs.unlinkSync('./changelog.tmp')\n\n        tagNewRelease(name, content, after)\n    })\n}\n\nasync function getLastRelease() {\n    let { data: releases } = await axios.get('https://api.github.com/repos/alpinejs/alpine/releases')\n\n    let lastRelease = releases.find(release => {\n        return release.target_commitish === 'main'\n            && release.draft === false\n    })\n\n    return lastRelease\n}\n\nasync function getPullRequestsSince(since) {\n    let { data: pulls } = await axios.get('https://api.github.com/repos/alpinejs/alpine/pulls?state=closed&sort=updated&direction=desc&base=main')\n\n    let pullsSince = pulls.filter(pull => {\n        if (! pull.merged_at) return false\n\n        return pull.merged_at > since\n    })\n\n    return pullsSince\n}\n\nfunction tagNewRelease(name, content, after = () => {}) {\n    return axios.post('https://api.github.com/repos/alpinejs/alpine/releases', {\n        name: 'v'+name,\n        tag_name: 'v'+name,\n        target_commitish: 'main',\n        body: content,\n        draft: false,\n    }).then(() => {\n        after()\n    })\n}\n"
  },
  {
    "path": "scripts/setup.sh",
    "content": "#!/usr/bin/env bash\nset -euo pipefail\n\n# ── Install deps ─────────────────────────────────────────────────────────────\necho \"Installing npm dependencies...\"\n(cd \"$DEST\" && npm install --silent 2>&1) || {\n    echo \"  WARNING: npm install failed\"\n}\n"
  },
  {
    "path": "scripts/update-docs.js",
    "content": "let { runFromPackage, getFromPackageDotJson, writeToPackageDotJson, ask } = require('./utils')\n\nlet version = getFromPackageDotJson('docs', 'version')\n\nlet revision = version.match(/revision\\.([0-9]+)/)[1]\n\nlet newVersion = version.replace('revision.'+revision, 'revision.'+(Number(revision) + 1))\n\nconsole.log('Bumping docs from '+version+' to '+newVersion);\n\nwriteToPackageDotJson('docs', 'version', newVersion)\n\nconsole.log('Publishing on NPM...');\n\nrunFromPackage('docs', 'npm publish --access public')\n\nsetTimeout(() => {\n    ask('Do you want to deploy this new version to the docs site?', () => deploy())\n}, 1000)\n\nfunction deploy() {\n    let https = require('https');\n    let { DOCS_DEPLOY_URL } = require('./.env.json')\n\n    https.get(DOCS_DEPLOY_URL, (resp) => {\n        resp.on('end', () => console.log('\\n\\n Successfully deployed!'))\n    }).on(\"error\", err => console.log(\"Error: \" + err.message));\n}\n"
  },
  {
    "path": "scripts/utils.js",
    "content": "let DotJson = require('dot-json');\nlet { exec } = require('child_process')\n\nmodule.exports.runFromPackage = function (package, command) {\n    exec(command, { cwd: __dirname+'/../packages/'+package })\n}\n\nmodule.exports.run = function (command) {\n    exec(command, { cwd: __dirname+'/..' })\n}\n\nmodule.exports.writeToPackageDotJson = function (package, key, value) {\n    let dotJson = new DotJson(`./packages/${package}/package.json`)\n\n    dotJson.set(key, value).save()\n}\n\nmodule.exports.getFromPackageDotJson = function (package, key) {\n    let dotJson = new DotJson(`./packages/${package}/package.json`)\n\n    return dotJson.get(key)\n}\n\nmodule.exports.ask = async function (message, callback) {\n    let readline = require('readline').createInterface({\n        input: process.stdin,\n        output: process.stdout,\n    })\n\n    readline.question(message, answer => {\n        if (['y', 'Y', 'yes', 'Yes', 'YES'].includes(answer)) callback()\n\n        readline.close()\n    })\n}\n"
  },
  {
    "path": "scripts/worktree.sh",
    "content": "#!/usr/bin/env bash\nset -euo pipefail\n\n# ── Resolve the repo root from this script's location ────────────────────────\nREPO_DIR=\"$(cd \"$(dirname \"$0\")/..\" && pwd)\"\n\n# ── Usage ────────────────────────────────────────────────────────────────────\nif [[ $# -lt 1 ]]; then\n    echo \"Usage: $0 <destination> [branch]\"\n    echo \"\"\n    echo \"  destination  Path for the new worktree (relative or absolute)\"\n    echo \"  branch       Optional branch/ref to base off (default: origin/main)\"\n    echo \"\"\n    echo \"Examples:\"\n    echo \"  $0 ../alpine-fix-modal\"\n    echo \"  $0 /tmp/alpine-experiment some-branch\"\n    exit 1\nfi\n\nDEST=\"$(cd \"$(dirname \"$1\")\" 2>/dev/null && pwd)/$(basename \"$1\")\" || {\n    # Parent dir doesn't exist yet — resolve what we can\n    DEST=\"$(pwd)/$1\"\n}\nBASE=\"${2:-origin/main}\"\n\n# ── Check if it already exists ───────────────────────────────────────────────\nif [[ -d \"$DEST\" ]]; then\n    echo \"Worktree already exists at $DEST\"\n    echo \"\"\n    echo \"  cd $DEST\"\n    exit 0\nfi\n\n# ── Fetch & create ───────────────────────────────────────────────────────────\necho \"Fetching latest from origin...\"\ngit -C \"$REPO_DIR\" fetch origin\n\necho \"Creating worktree at $DEST from $BASE...\"\ngit -C \"$REPO_DIR\" worktree add --detach \"$DEST\" \"$BASE\"\n\n# ── Install deps ─────────────────────────────────────────────────────────────\necho \"Installing npm dependencies...\"\n(cd \"$DEST\" && npm install --silent 2>&1) || {\n    echo \"  WARNING: npm install failed\"\n}\n\n# ── Done ─────────────────────────────────────────────────────────────────────\necho \"\"\necho \"════════════════════════════════════════\"\necho \"  Worktree ready!\"\necho \"\"\necho \"  cd $DEST\"\necho \"════════════════════════════════════════\"\n"
  },
  {
    "path": "tests/cypress/.gitignore",
    "content": "/videos\n"
  },
  {
    "path": "tests/cypress/fixtures/example.json",
    "content": "{\n  \"name\": \"Using fixtures to represent data\",\n  \"email\": \"hello@cypress.io\",\n  \"body\": \"Fixtures are a great way to mock data for responses to routes\"\n}"
  },
  {
    "path": "tests/cypress/integration/clone.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\ntest('can clone a component',\n    html`\n        <script>\n            document.addEventListener('alpine:initialized', () => {\n                window.original = document.getElementById('original')\n                window.copy = document.getElementById('copy')\n\n                window.copy.removeAttribute('x-ignore')\n                delete window.copy._x_ignore\n            })\n        </script>\n\n        <button x-data @click=\"Alpine.clone(original, copy)\">click</button>\n\n        <div x-data=\"{ foo: 'bar' }\" id=\"original\">\n            <h1 @click=\"foo = 'baz'\">click me</h1>\n\n            <span x-text=\"foo\"></span>\n        </div>\n\n        <div x-data=\"{ foo: 'bar' }\" id=\"copy\" x-ignore>\n            <h1 @click=\"foo = 'baz'\">click me</h1>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('#original h1').click()\n        get('#original span').should(haveText('baz'))\n        get('#copy span').should(haveText(''))\n        get('button').click()\n        get('#copy span').should(haveText('baz'))\n    }\n)\n\ntest('wont run init on clone',\n    html`\n        <script>\n            document.addEventListener('alpine:initialized', () => {\n                window.original = document.getElementById('original')\n                window.copy = document.getElementById('copy')\n\n                window.copy.removeAttribute('x-ignore')\n                delete window.copy._x_ignore\n            })\n        </script>\n\n        <button x-data @click=\"Alpine.clone(original, copy)\">click</button>\n\n        <div x-data=\"{ count: 0 }\" x-init=\"count++\" id=\"original\">\n            <span x-text=\"count\"></span>\n        </div>\n\n        <div x-data=\"{ count: 0 }\" x-init=\"count++\" id=\"copy\" x-ignore>\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('#original span').should(haveText('1'))\n        get('#copy span').should(haveText(''))\n        get('button').click()\n        get('#copy span').should(haveText('1'))\n    }\n)\n\ntest('wont register listeners on clone',\n    html`\n        <script>\n            document.addEventListener('alpine:initialized', () => {\n                window.original = document.getElementById('original')\n                window.copy = document.getElementById('copy')\n\n                window.copy.removeAttribute('x-ignore')\n                delete window.copy._x_ignore\n            })\n        </script>\n\n        <button x-data @click=\"Alpine.clone(original, copy)\">click</button>\n\n        <div x-data=\"{ count: 0 }\" x-init=\"count++\" id=\"original\">\n            <span x-text=\"count\"></span>\n        </div>\n\n        <div x-data=\"{ count: 0 }\" x-init=\"count++\" id=\"copy\" x-ignore>\n            <h1 @click=\"count++\">inc</h1>\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('#original span').should(haveText('1'))\n        get('#copy span').should(haveText(''))\n        get('button').click()\n        get('#copy span').should(haveText('1'))\n        get('#copy h1').click()\n        get('#copy span').should(haveText('1'))\n    }\n)\n\ntest('wont register extra listeners on x-model on clone',\n    html`\n        <script>\n            document.addEventListener('alpine:initialized', () => {\n                window.original = document.getElementById('original')\n                window.copy = document.getElementById('copy')\n            })\n        </script>\n\n        <button x-data @click=\"Alpine.clone(original, copy)\">click</button>\n\n        <div x-data=\"{ checks: [] }\" id=\"original\">\n            <input type=\"checkbox\" x-model=\"checks\" value=\"1\">\n            <span x-text=\"checks\"></span>\n        </div>\n\n        <div x-data=\"{ checks: [] }\" id=\"copy\">\n            <input type=\"checkbox\" x-model=\"checks\" value=\"1\">\n            <span x-text=\"checks\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('#original span').should(haveText(''))\n        get('#copy span').should(haveText(''))\n        get('button').click()\n        get('#copy span').should(haveText(''))\n        get('#copy input').click()\n        get('#copy span').should(haveText('1'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/custom-bind.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\ntest('can register custom bind object',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.bind('Foo', {\n                    'x-init'() { this.$el.innerText = 'bar' },\n                })\n            })\n        </script>\n\n        <div x-data x-bind=\"Foo\"></div>\n    `,\n    ({ get }) => get('div').should(haveText('bar'))\n)\n\ntest('can register custom bind as function',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.bind('Foo', () => ({\n                    'x-init'() { this.$el.innerText = 'bar' },\n                }))\n            })\n        </script>\n\n        <div x-data x-bind=\"Foo\"></div>\n    `,\n    ({ get }) => get('div').should(haveText('bar'))\n)\n\ntest('can consume custom bind as function',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.bind('Foo', (subject) => ({\n                    'x-init'() { this.$el.innerText = subject },\n                }))\n            })\n        </script>\n\n        <div x-data x-bind=\"Foo('bar')\"></div>\n    `,\n    ({ get }) => get('div').should(haveText('bar'))\n)\n\ntest('can bind directives individually to an element',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.bind(document.querySelector('#one'), () => ({\n                    'x-text'() { return 'foo' },\n                }))\n            })\n        </script>\n\n        <div x-data id=\"one\"></div>\n    `,\n    ({ get }) => get('div').should(haveText('foo'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/custom-data.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\ntest('can register custom data providers',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('test', () => ({\n                    foo: 'bar'\n                }))\n            })\n        </script>\n\n        <div x-data=\"test\">\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('bar'))\n)\n\ntest('can accept initial params',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('test', (first, second) => ({\n                    foo: first,\n                    bar: second,\n                }))\n            })\n        </script>\n\n        <div x-data=\"test('baz', 'bob')\">\n            <h1 x-text=\"foo\"></h1>\n            <h2 x-text=\"bar\"></h2>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('baz'))\n        get('h2').should(haveText('bob'))\n    }\n)\n\ntest('can spread together',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('test', (first) => ({\n                    foo: first,\n                }))\n\n                Alpine.data('test2', (second) => ({\n                    bar: second,\n                }))\n            })\n        </script>\n\n        <div x-data=\"{ ...test('baz'), ...test2('bob') }\">\n            <h1 x-text=\"foo\"></h1>\n            <h2 x-text=\"bar\"></h2>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('baz'))\n        get('h2').should(haveText('bob'))\n    }\n)\n\ntest('init functions inside custom datas are called automatically',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('test', () => ({\n                    init() {\n                        this.foo = 'baz'\n                    },\n\n                    foo: 'bar'\n                }))\n            })\n        </script>\n\n        <div x-data=\"test\">\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('init functions \"this\" context is reactive',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('test', () => ({\n                    init() {\n                        window.addEventListener('click', () => {\n                            this.foo = 'baz'\n                        })\n                    },\n\n                    foo: 'bar'\n                }))\n            })\n        </script>\n\n        <div x-data=\"test\">\n            <span x-text=\"foo\"></span>\n\n            <button>click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('init functions have access to the parent scope',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('parent', () => ({\n                    foo: 'bar',\n                }))\n\n                Alpine.data('child', () => ({\n                    init() {\n                        this.$el.textContent = this.foo\n                    },\n                }))\n            })\n        </script>\n\n        <div x-data=\"parent\">\n            <p x-data=\"child\"></p>\n        </div>\n    `,\n    ({ get }) => {\n        get('p').should(haveText('bar'))\n    }\n)\n\ntest('destroy functions inside custom datas are called automatically',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('test', () => ({\n                    destroy() {\n                        document.querySelector('span').textContent = 'foo'\n                    },\n                    test() {\n                        Alpine.closestRoot(this.$el).remove()\n                    }\n                }))\n            })\n        </script>\n\n        <div x-data=\"test\">\n            <button x-on:click=\"test()\"></button>\n        </div>\n        <span></span>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('span').should(haveText('foo'))\n    }\n)\n\ntest('destroy have access to the current scope',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.data('test', () => ({\n                    destroy() {\n                        document.querySelector('span').textContent = this.foo\n                    },\n                    test() {\n                        Alpine.closestRoot(this.$el).remove()\n                    },\n                    foo: 'bar'\n                }))\n            })\n        </script>\n\n        <div x-data=\"test\">\n            <button x-on:click=\"test()\"></button>\n        </div>\n        <span>baz</span>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('baz'))\n        get('button').click()\n        get('span').should(haveText('bar'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/custom-directives.spec.js",
    "content": "import { haveText, haveAttribute, html, test } from '../utils'\n\ntest('can register custom directive',\n    [html`\n        <div x-data>\n            <span x-foo:bar.baz=\"bob\"></span>\n        </div>\n    `,\n    `\n        Alpine.directive('foo', (el, { value, modifiers, expression }) => {\n            el.textContent = value+modifiers+expression\n        })\n    `],\n    ({ get }) => get('span').should(haveText('barbazbob'))\n)\n\ntest('directives are auto cleaned up',\n    [html`\n        <div x-data=\"{ count: 0 }\">\n            <span x-foo x-ref=\"foo\"></span>\n            <h1 x-text=\"count\"></h1>\n\n            <button @click=\"count++\" id=\"change\">change</button>\n            <button @click=\"$refs.foo.remove()\" id=\"remove\">remove</button>\n        </div>\n    `,\n    `\n        Alpine.directive('foo', (el, {}, { effect, cleanup, evaluateLater }) => {\n            let incCount = evaluateLater('count++')\n\n            cleanup(() => {\n                incCount()\n                incCount()\n            })\n\n            effect(() => {\n                incCount()\n            })\n        })\n    `],\n    ({ get }) => {\n        get('h1').should(haveText('1'))\n        get('#change').click()\n        get('h1').should(haveText('3'))\n        get('#remove').click()\n        get('#change').click()\n        get('h1').should(haveText('6'))\n        get('#change').click()\n        get('h1').should(haveText('7'))\n    }\n)\n\ntest('can register a custom directive before an existing one',\n    [html`\n        <div x-data>\n            <span x-foo x-bind:foo=\"foo\"></span>\n        </div>\n    `,\n    `\n        Alpine.directive('foo', (el, { value, modifiers, expression }) => {\n            Alpine.addScopeToNode(el, {foo: 'bar'})\n        }).before('bind')\n    `],\n    ({ get }) => get('span').should(haveAttribute('foo', 'bar'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/custom-interceptors.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\ntest('can register custom interceptors',\n    [html`\n        <div x-data=\"{ foo: $magic() }\">\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    `\n        Alpine.magic('magic', () => {\n            return Alpine.interceptor((initialValue, getter, setter, path, key) => {\n                return key+path\n            })\n        })\n    `],\n    ({ get }) => get('span').should(haveText('foofoo'))\n)\n\ntest('interceptors are nesting aware',\n    [html`\n        <div x-data=\"{ foo: { bar: { baz: $magic() }}}\">\n            <span x-text=\"foo.bar.baz\"></span>\n        </div>\n    `,\n    `\n        Alpine.magic('magic', () => {\n            return Alpine.interceptor((initialValue, getter, setter, path, key) => {\n                return key+path\n            })\n        })\n    `],\n    ({ get }) => get('span').should(haveText('bazfoo.bar.baz'))\n)\n\ntest('interceptor system prevents against circular references',\n    [html`\n        <div x-data=\"{ foo: $foo }\">\n            <span x-text=\"'...'\">\n        </div>\n    `,\n    `\n        Alpine.magic('foo', () => {\n            return {\n                get anyGivenProperty() {\n                    return this\n                }\n            }\n        })\n    `],\n    ({ get }) => get('span').should(haveText('...'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/custom-magics.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\ntest('can register custom magic properties',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.magic('foo', (el) => {\n                    return { bar: 'baz' }\n                })\n            })\n        </script>\n\n        <div x-data>\n            <span x-text=\"$foo.bar\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('baz'))\n)\n\ntest('magics are lazily accessed',\n    html`\n        <script>\n            window.hasBeenAccessed = false\n\n            document.addEventListener('alpine:init', () => {\n                Alpine.magic('foo', (el) => {\n                    window.hasBeenAccessed = true\n                })\n            })\n        </script>\n\n        <div x-data>\n            <button @click=\"$el.textContent = window.hasBeenAccessed\">clickme</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('button').should(haveText('false'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/custom-prefix.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\ntest('can set a custom x- prefix',\n    html`\n        <script>\n            document.addEventListener('alpine:init', () => {\n                Alpine.prefix('data-x-')\n            })\n        </script>\n\n        <div data-x-data=\"{ foo: 'bar' }\">\n            <span data-x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('bar'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-bind-class.spec.js",
    "content": "import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils'\n\ntest('class attribute bindings are merged by string syntax',\n    html`\n        <div x-data=\"{ isOn: false }\">\n            <span class=\"foo\" x-bind:class=\"isOn ? 'bar': ''\"></span>\n\n            <button @click=\"isOn = ! isOn\">button</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveClasses(['foo']))\n        get('span').should(notHaveClasses(['bar']))\n        get('button').click()\n        get('span').should(haveClasses(['foo']))\n        get('span').should(haveClasses(['bar']))\n    }\n)\n\ntest('class attribute bindings are added by string syntax',\n    html`\n        <div x-data=\"{ initialClass: 'foo' }\">\n            <span x-bind:class=\"initialClass\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveClasses(['foo']))\n)\n\ntest('class attribute bindings are added by array syntax',\n    html`\n        <div x-data=\"{ initialClass: 'foo' }\">\n            <span x-bind:class=\"[initialClass, 'bar']\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveClasses(['foo', 'bar']))\n)\n\ntest('class attribute bindings are added by object syntax',\n    html`\n        <div x-data=\"{ mode: 0 }\">\n            <span class=\"foo baz\"\n                  x-bind:class=\"{\n                      'foo bar border-blue-900' : mode === 0,\n                      'foo bar border-red-900' : mode === 1,\n                      'bar border-red-900' : mode === 2,\n                  }\"\n            ></span>\n\n            <button @click=\"mode = (mode + 1) % 3\">button</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveClasses(['foo', 'baz']))\n        get('span').should(haveClasses(['bar', 'border-blue-900']))\n        get('span').should(notHaveClasses(['border-red-900']))\n        get('button').click()\n        get('span').should(haveClasses(['foo', 'baz']))\n        get('span').should(haveClasses(['bar', 'border-red-900']))\n        get('span').should(notHaveClasses(['border-blue-900']))\n        get('button').click()\n        get('span').should(haveClasses(['baz']))\n        get('span').should(haveClasses(['bar', 'border-red-900']))\n        get('span').should(notHaveClasses(['foo']))\n        get('span').should(notHaveClasses(['border-blue-900']))\n    }\n)\n\ntest('classes are removed before being added',\n    html`\n        <div x-data=\"{ isOpen: true }\">\n            <span class=\"text-red\" :class=\"isOpen ? 'block' : 'hidden'\">\n                Span\n            </span>\n            <button @click=\"isOpen = !isOpen\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveClasses(['block', 'text-red']))\n        get('button').click()\n        get('span').should(haveClasses(['hidden', 'text-red']))\n        get('span').should(notHaveClasses(['block']))\n    }\n)\n\ntest('extra whitespace in class binding string syntax is ignored',\n    html`\n        <div x-data>\n            <span x-bind:class=\"'  foo  bar \\n baz '\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveClasses(['foo', 'bar', 'baz']))\n)\n\ntest('undefined class binding resolves to empty string',\n    html`\n        <div x-data=\"{ errorClass: (hasError) => { if (hasError) { return 'red' } } }\">\n            <span id=\"error\" x-bind:class=\"errorClass(true)\">should be red</span>\n            <span id=\"empty\" x-bind:class=\"errorClass(false)\">should be empty</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveClasses(['red']))\n        get('span:nth-of-type(2)').should(notHaveClasses(['red']))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-bind-style.spec.js",
    "content": "import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils'\n\ntest('style attribute object binding',\n    html`\n        <div x-data>\n            <span x-bind:style=\"{ color: 'red' }\">I should be red</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('style', 'color: red;'))\n    }\n)\n\ntest('style attribute object binding using camelCase syntax',\n    html`\n        <div x-data>\n            <span x-bind:style=\"{ backgroundColor: 'red' }\">I should be red</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('style', 'background-color: red;'))\n    }\n)\n\ntest('style attribute object binding using kebab-case syntax',\n    html`\n        <div x-data>\n            <span x-bind:style=\"{ 'background-color': 'red' }\">I should be red</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('style', 'background-color: red;'))\n    }\n)\n\ntest('style attribute object binding with CSS variable',\n    html`\n        <div x-data x-bind:style=\"{ '--MyCSS-Variable': 0.25 }\">\n            <span style=\"opacity: var(--MyCSS-Variable);\">I should be hardly visible</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('div').should(haveAttribute('style', '--MyCSS-Variable:0.25;'))\n    }\n)\n\ntest('style attribute object bindings are merged with existing styles',\n    html`\n        <div x-data>\n            <span style=\"display: block\" x-bind:style=\"{ color: 'red' }\">I should be red</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('style', 'display: block; color: red;'))\n    }\n)\n\ntest('CSS custom properties are set',\n    html`\n        <div x-data=\"{custom_color: '#f00'}\">\n            <span style=\"color: var(--custom-prop)\" x-bind:style=\"{ '--custom-prop': custom_color }\">I should be red</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('style', 'color: var(--custom-prop); --custom-prop:#f00;'))\n    }\n)\n\ntest('existing CSS custom properties are preserved',\n    html`\n        <div x-data=\"{link: 'var(--custom-prop-a)'}\">\n            <span style=\"color: var(--custom-prop-b); --custom-prop-a: red\" x-bind:style=\"{ '--custom-prop-b': link }\">I should be red</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('style', 'color: var(--custom-prop-b); --custom-prop-a: red; --custom-prop-b:var(--custom-prop-a);'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-bind.spec.js",
    "content": "import { beHidden, beVisible, haveText, beChecked, haveAttribute, haveClasses, haveProperty, haveValue, notBeChecked, notHaveAttribute, notHaveClasses, test, html } from '../../utils';\n\ntest('sets attribute bindings on initialize',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <span x-ref=\"me\" x-bind:foo=\"foo\">[Subject]</span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveAttribute('foo', 'bar'))\n)\n\ntest('sets undefined nested keys to empty string',\n    html`\n        <div x-data=\"{ nested: {} }\">\n            <span x-bind:foo=\"nested.field\">\n        </div>\n    `,\n    ({ get }) => get('span').should(haveAttribute('foo', ''))\n)\n\ntest('style attribute bindings are added by string syntax',\n    html`\n        <div x-data=\"{ initialClass: 'foo' }\">\n            <span x-bind:class=\"initialClass\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveClasses(['foo']))\n)\n\ntest('aria-pressed/checked/expanded/selected attribute boolean values are cast to a true/false string',\n    html`\n        <div x-data=\"{ open: true }\">\n            <span x-bind:aria-pressed=\"open\"></span>\n            <span x-bind:aria-checked=\"open\"></span>\n            <span x-bind:aria-expanded=\"open\"></span>\n            <span x-bind:aria-selected=\"open\"></span>\n\n            <span x-bind:aria-pressed=\"false\"></span>\n            <span x-bind:aria-checked=\"false\"></span>\n            <span x-bind:aria-expanded=\"false\"></span>\n            <span x-bind:aria-selected=\"false\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveAttribute('aria-pressed', 'true'))\n        get('span:nth-of-type(2)').should(haveAttribute('aria-checked', 'true'))\n        get('span:nth-of-type(3)').should(haveAttribute('aria-expanded', 'true'))\n        get('span:nth-of-type(4)').should(haveAttribute('aria-selected', 'true'))\n        get('span:nth-of-type(5)').should(haveAttribute('aria-pressed', 'false'))\n        get('span:nth-of-type(6)').should(haveAttribute('aria-checked', 'false'))\n        get('span:nth-of-type(7)').should(haveAttribute('aria-expanded', 'false'))\n        get('span:nth-of-type(8)').should(haveAttribute('aria-selected', 'false'))\n    }\n)\n\ntest('non-boolean attributes set to null/undefined/false are removed from the element',\n    html`\n        <div x-data=\"{}\">\n            <a href=\"#hello\" x-bind:href=\"null\">null</a>\n            <a href=\"#hello\" x-bind:href=\"false\">false</a>\n            <a href=\"#hello\" x-bind:href=\"undefined\">undefined</a>\n            <!-- custom attribute see https://github.com/alpinejs/alpine/issues/280 -->\n            <span visible=\"true\" x-bind:visible=\"null\">null</span>\n            <span visible=\"true\" x-bind:visible=\"false\">false</span>\n            <span visible=\"true\" x-bind:visible=\"undefined\">undefined</span>\n\n            <span hidden=\"true\" x-bind:hidden=\"null\">null</span>\n            <span hidden=\"true\" x-bind:hidden=\"false\">false</span>\n            <span hidden=\"true\" x-bind:hidden=\"undefined\">undefined</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('a:nth-of-type(1)').should(notHaveAttribute('href'))\n        get('a:nth-of-type(2)').should(notHaveAttribute('href'))\n        get('a:nth-of-type(3)').should(notHaveAttribute('href'))\n        get('span:nth-of-type(1)').should(notHaveAttribute('visible'))\n        get('span:nth-of-type(2)').should(notHaveAttribute('visible'))\n        get('span:nth-of-type(3)').should(notHaveAttribute('visible'))\n        get('span:nth-of-type(4)').should(notHaveAttribute('hidden'))\n        get('span:nth-of-type(5)').should(notHaveAttribute('hidden'))\n        get('span:nth-of-type(6)').should(notHaveAttribute('hidden'))\n    }\n)\n\ntest('non-boolean empty string attributes are not removed',\n    html`\n        <div x-data>\n            <a href=\"#hello\" x-bind:href=\"''\"></a>\n        </div>\n    `,\n    ({ get }) => get('a').should(haveAttribute('href', ''))\n)\n\ntest('boolean attribute values are set to their attribute name if true and removed if false',\n    html`\n        <div x-data=\"{ isSet: true }\">\n            <span @click=\"isSet = false\" id=\"setToFalse\">Set To False</span>\n\n            <input x-bind:disabled=\"isSet\"></input>\n            <input x-bind:checked=\"isSet\"></input>\n            <input x-bind:required=\"isSet\"></input>\n            <input x-bind:readonly=\"isSet\"></input>\n            <details x-bind:open=\"isSet\"></details>\n            <select x-bind:multiple=\"isSet\"></select>\n            <option x-bind:selected=\"isSet\"></option>\n            <textarea x-bind:autofocus=\"isSet\"></textarea>\n            <dl x-bind:itemscope=\"isSet\"></dl>\n            <form \n                x-bind:novalidate=\"isSet\"\n                x-bind:inert=\"isSet\"\n            ></form>\n            <iframe\n                x-bind:allowfullscreen=\"isSet\"\n            ></iframe>\n            <button x-bind:formnovalidate=\"isSet\"></button>\n            <audio\n                x-bind:autoplay=\"isSet\"\n                x-bind:controls=\"isSet\"\n                x-bind:loop=\"isSet\"\n                x-bind:muted=\"isSet\"\n            ></audio>\n            <video x-bind:playsinline=\"isSet\"></video>\n            <track x-bind:default=\"isSet\" />\n            <img x-bind:ismap=\"isSet\" />\n            <ol x-bind:reversed=\"isSet\"></ol>\n            <template \n                x-bind:shadowrootclonable=\"isSet\"\n                x-bind:shadowrootdelegatesfocus=\"isSet\"\n                x-bind:shadowrootserializable=\"isSet\"\n            ></template>\n        </div>\n    `,\n    ({ get }) => {\n        get('input:nth-of-type(1)').should(haveAttribute('disabled', 'disabled'))\n        get('input:nth-of-type(2)').should(haveAttribute('checked', 'checked'))\n        get('input:nth-of-type(3)').should(haveAttribute('required', 'required'))\n        get('input:nth-of-type(4)').should(haveAttribute('readonly', 'readonly'))\n        get('details').should(haveAttribute('open', 'open'))\n        get('select').should(haveAttribute('multiple', 'multiple'))\n        get('option').should(haveAttribute('selected', 'selected'))\n        get('textarea').should(haveAttribute('autofocus', 'autofocus'))\n        get('dl').should(haveAttribute('itemscope', 'itemscope'))\n        get('form').should(haveAttribute('novalidate', 'novalidate'))\n        get('iframe').should(haveAttribute('allowfullscreen', 'allowfullscreen'))\n        get('button').should(haveAttribute('formnovalidate', 'formnovalidate'))\n        get('audio').should(haveAttribute('autoplay', 'autoplay'))\n        get('audio').should(haveAttribute('controls', 'controls'))\n        get('audio').should(haveAttribute('loop', 'loop'))\n        get('audio').should(haveAttribute('muted', 'muted'))\n        get('video').should(haveAttribute('playsinline', 'playsinline'))\n        get('track').should(haveAttribute('default', 'default'))\n        get('img').should(haveAttribute('ismap', 'ismap'))\n        get('ol').should(haveAttribute('reversed', 'reversed'))\n        get('template').should(haveAttribute('shadowrootclonable', 'shadowrootclonable'))\n        get('template').should(haveAttribute('shadowrootdelegatesfocus', 'shadowrootdelegatesfocus'))\n        get('template').should(haveAttribute('shadowrootserializable', 'shadowrootserializable'))\n\n        get('#setToFalse').click()\n\n        get('input:nth-of-type(1)').should(notHaveAttribute('disabled'))\n        get('input:nth-of-type(2)').should(notHaveAttribute('checked'))\n        get('input:nth-of-type(3)').should(notHaveAttribute('required'))\n        get('input:nth-of-type(4)').should(notHaveAttribute('readonly'))\n        get('details').should(notHaveAttribute('open'))\n        get('select').should(notHaveAttribute('multiple'))\n        get('option').should(notHaveAttribute('selected'))\n        get('textarea').should(notHaveAttribute('autofocus'))\n        get('dl').should(notHaveAttribute('itemscope'))\n        get('form').should(notHaveAttribute('novalidate'))\n        get('iframe').should(notHaveAttribute('allowfullscreen'))\n        get('iframe').should(notHaveAttribute('allowpaymentrequest'))\n        get('button').should(notHaveAttribute('formnovalidate'))\n        get('audio').should(notHaveAttribute('autoplay'))\n        get('audio').should(notHaveAttribute('controls'))\n        get('audio').should(notHaveAttribute('loop'))\n        get('audio').should(notHaveAttribute('muted'))\n        get('video').should(notHaveAttribute('playsinline'))\n        get('track').should(notHaveAttribute('default'))\n        get('img').should(notHaveAttribute('ismap'))\n        get('ol').should(notHaveAttribute('reversed'))\n        get('script').should(notHaveAttribute('async'))\n        get('script').should(notHaveAttribute('defer'))\n        get('script').should(notHaveAttribute('nomodule'))\n    }\n)\n\ntest('boolean empty string attributes are not removed',\n    html`\n        <div x-data=\"{}\">\n            <input x-bind:disabled=\"''\">\n        </div>\n    `,\n    ({ get }) => get('input').should(haveAttribute('disabled', 'disabled'))\n)\n\ntest('binding supports short syntax',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <span :class=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveClasses(['bar']))\n)\n\ntest('checkbox is unchecked by default',\n    html`\n        <div x-data=\"{foo: {bar: 'baz'}}\">\n            <input type=\"checkbox\" x-bind:value=\"''\"></input>\n            <input type=\"checkbox\" x-bind:value=\"'test'\"></input>\n            <input type=\"checkbox\" x-bind:value=\"foo.bar\"></input>\n            <input type=\"checkbox\" x-bind:value=\"0\"></input>\n            <input type=\"checkbox\" x-bind:value=\"10\"></input>\n        </div>\n    `,\n    ({ get }) => {\n        get('input:nth-of-type(1)').should(notBeChecked())\n        get('input:nth-of-type(2)').should(notBeChecked())\n        get('input:nth-of-type(3)').should(notBeChecked())\n        get('input:nth-of-type(4)').should(notBeChecked())\n        get('input:nth-of-type(5)').should(notBeChecked())\n    }\n)\n\ntest('radio is unchecked by default',\n    html`\n        <div x-data=\"{foo: {bar: 'baz'}}\">\n            <input type=\"radio\" x-bind:value=\"''\"></input>\n            <input type=\"radio\" x-bind:value=\"'test'\"></input>\n            <input type=\"radio\" x-bind:value=\"foo.bar\"></input>\n            <input type=\"radio\" x-bind:value=\"0\"></input>\n            <input type=\"radio\" x-bind:value=\"10\"></input>\n        </div>\n    `,\n    ({ get }) => {\n        get('input:nth-of-type(1)').should(notBeChecked())\n        get('input:nth-of-type(2)').should(notBeChecked())\n        get('input:nth-of-type(3)').should(notBeChecked())\n        get('input:nth-of-type(4)').should(notBeChecked())\n        get('input:nth-of-type(5)').should(notBeChecked())\n    }\n)\n\ntest('checkbox values are set correctly',\n    html`\n        <div x-data=\"{ stringValue: 'foo', trueValue: true, falseValue: false }\">\n            <input type=\"checkbox\" name=\"stringCheckbox\" :value=\"stringValue\" />\n            <input type=\"checkbox\" name=\"trueCheckbox\" :value=\"trueValue\" />\n            <input type=\"checkbox\" name=\"falseCheckbox\" :value=\"falseValue\" />\n        </div>\n    `,\n    ({ get }) => {\n        get('input:nth-of-type(1)').should(haveValue('foo'))\n        get('input:nth-of-type(2)').should(haveValue('on'))\n        get('input:nth-of-type(3)').should(haveValue('on'))\n    }\n)\n\ntest('radio values are set correctly',\n    html`\n        <div x-data=\"{lists: [{id: 1}, {id: 8}], selectedListID: '8'}\">\n            <template x-for=\"list in lists\" :key=\"list.id\">\n                <input x-model=\"selectedListID\" type=\"radio\" :value=\"list.id.toString()\" :id=\"'list-' + list.id\">\n            </template>\n            <input type=\"radio\" id=\"list-test\" value=\"test\" x-model=\"selectedListID\">\n        </div>\n    `,\n    ({ get }) => {\n        get('#list-1').should(haveValue('1'))\n        get('#list-1').should(notBeChecked())\n        get('#list-8').should(haveValue('8'))\n        get('#list-8').should(beChecked())\n        get('#list-test').should(haveValue('test'))\n        get('#list-test').should(notBeChecked())\n    }\n)\n\ntest('.camel modifier correctly sets name of attribute',\n    html`\n        <div x-data>\n            <svg x-bind:view-box.camel=\"'0 0 42 42'\"></svg>\n        </div>\n    `,\n    ({ get }) => get('svg').should(haveAttribute('viewBox', '0 0 42 42'))\n)\n\ntest('attribute binding names can contain numbers',\n    html`\n        <svg x-data>\n            <line x1=\"1\" y1=\"2\" :x2=\"3\" x-bind:y2=\"4\" />\n        </svg>\n    `,\n    ({ get }) => {\n        get('line').should(haveAttribute('x2', '3'))\n        get('line').should(haveAttribute('y2', '4'))\n    }\n)\n\ntest('non-string and non-boolean attributes are cast to string when bound to checkbox',\n    html`\n        <div x-data=\"{ number: 100, zero: 0, bool: true, nullProp: null }\">\n            <input type=\"checkbox\" id=\"number\" :value=\"number\">\n            <input type=\"checkbox\" id=\"zero\" :value=\"zero\">\n            <input type=\"checkbox\" id=\"boolean\" :value=\"bool\">\n            <input type=\"checkbox\" id=\"null\" :value=\"nullProp\">\n        </div>\n    `,\n    ({ get }) => {\n        get('input:nth-of-type(1)').should(haveValue('100'))\n        get('input:nth-of-type(2)').should(haveValue('0'))\n        get('input:nth-of-type(3)').should(haveValue('on'))\n        get('input:nth-of-type(4)').should(haveValue('on'))\n    }\n)\n\ntest('can bind an object of directives',\n    html`\n        <script>\n            window.modal = function () {\n                return {\n                    foo: 'bar',\n                    trigger: {\n                        ['x-on:click']() { this.foo = 'baz' },\n                    },\n                    dialogue: {\n                        ['x-text']() { return this.foo },\n                    },\n                }\n            }\n        </script>\n\n        <div x-data=\"window.modal()\">\n            <button x-bind=\"trigger\">Toggle</button>\n\n            <span x-bind=\"dialogue\">Modal Body</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('x-bind object syntax supports normal HTML attributes',\n    html`\n        <span x-data x-bind=\"{ foo: 'bar' }\"></span>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('foo', 'bar'))\n    }\n)\n\ntest('x-bind object syntax supports normal HTML attributes mixed in with dynamic ones',\n    html`\n        <span x-data x-bind=\"{ 'x-bind:bob'() { return 'lob'; }, foo: 'bar', 'x-bind:bab'() { return 'lab' } }\"></span>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('foo', 'bar'))\n        get('span').should(haveAttribute('bob', 'lob'))\n        get('span').should(haveAttribute('bab', 'lab'))\n    }\n)\n\ntest('x-bind object syntax supports x-for',\n    html`\n        <script>\n            window.todos = () => { return {\n                todos: ['foo', 'bar'],\n                outputForExpression: {\n                    ['x-for']: 'todo in todos',\n                }\n            }}\n        </script>\n        <div x-data=\"window.todos()\">\n            <ul>\n                <template x-bind=\"outputForExpression\">\n                    <li x-text=\"todo\"></li>\n                </template>\n            </ul>\n        </div>\n    `,\n    ({ get }) => {\n        get('li:nth-of-type(1)').should(haveText('foo'))\n        get('li:nth-of-type(2)').should(haveText('bar'))\n    }\n)\n\ntest('x-bind object syntax syntax supports x-transition',\n    html`\n        <style>\n            .transition { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n            .duration-100 { transition-duration: 100ms; }\n        </style>\n        <script>\n            window.transitions = () => { return {\n                show: true,\n                outputClickExpression: {\n                    ['@click']() { this.show = false },\n                    ['x-text']() { return 'Click Me' },\n                },\n                outputTransitionExpression: {\n                    ['x-show']() { return this.show },\n                    ['x-transition:enter']: 'transition duration-100',\n                    ['x-transition:leave']: 'transition duration-100',\n                },\n            }}\n        </script>\n        <div x-data=\"transitions()\">\n            <button x-bind=\"outputClickExpression\"></button>\n\n            <span x-bind=\"outputTransitionExpression\">thing</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('button').click()\n        get('span').should(beVisible())\n        get('span').should(beHidden())\n    }\n)\n\ntest('x-bind object syntax event handlers defined as functions receive the event object as their first argument',\n    html`\n        <script>\n            window.data = () => { return {\n                button: {\n                    ['@click'](event) {\n                        this.$refs.span.innerText = event.currentTarget.id\n                    }\n                }\n            }}\n        </script>\n        <div x-data=\"window.data()\">\n            <button x-bind=\"button\" id=\"bar\">click me</button>\n\n            <span x-ref=\"span\">foo</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('foo'))\n        get('button').click()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-bind object syntax event handlers defined as functions receive element bound magics',\n    html`\n        <script>\n            window.data = () => { return {\n                button: {\n                    ['@click']() {\n                        this.$refs.span.innerText = this.$el.id\n                    }\n                }\n            }}\n        </script>\n        <div x-data=\"window.data()\">\n            <button x-bind=\"button\" id=\"bar\">click me</button>\n\n            <span x-ref=\"span\">foo</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('foo'))\n        get('button').click()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('Can retrieve Alpine bound data with global bound method',\n    html`\n        <div id=\"1\" x-data foo=\"bar\" x-text=\"Alpine.bound($el, 'foo')\"></div>\n        <div id=\"2\" x-data :foo=\"'bar'\" x-text=\"Alpine.bound($el, 'foo')\"></div>\n        <div id=\"3\" x-data foo x-text=\"Alpine.bound($el, 'foo')\"></div>\n        <div id=\"4\" x-data disabled x-text=\"Alpine.bound($el, 'disabled')\"></div>\n        <div id=\"5\" x-data x-text=\"Alpine.bound($el, 'foo')\"></div>\n        <div id=\"6\" x-data x-text=\"Alpine.bound($el, 'foo', 'bar')\"></div>\n    `,\n    ({ get }) => {\n        get('#1').should(haveText('bar'))\n        get('#2').should(haveText('bar'))\n        get('#3').should(haveText('true'))\n        get('#4').should(haveText('true'))\n        get('#5').should(haveText(''))\n        get('#6').should(haveText('bar'))\n    }\n)\n\ntest('Can extract Alpine bound data as a data prop',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <div id=\"1\" x-data=\"{ init() { this.$el.textContent = Alpine.extractProp(this.$el, 'foo') }}\" :foo=\"foo\"></div>\n            <div id=\"2\" x-data=\"{ init() { this.$el.textContent = Alpine.extractProp(this.$el, 'foo', null, false) }}\" :foo=\"foo\"></div>\n        </div>\n    `,\n    ({ get }) => {\n        get('#1').should(haveText('bar'))\n        get('#1').should(notHaveAttribute('foo'))\n        get('#2').should(haveText('bar'))\n        get('#2').should(haveAttribute('foo', 'bar'))\n    }\n)\n\ntest('x-bind updates checked attribute and property after user interaction',\n    html`\n        <div x-data=\"{ checked: true }\">\n            <button @click=\"checked = !checked\">toggle</button>\n            <input type=\"checkbox\" x-bind:checked=\"checked\" @change=\"checked = $event.target.checked\" />\n        </div>\n    `,\n    ({ get }) => {\n        get('input').should(haveAttribute('checked', 'checked'))\n        get('input').should(haveProperty('checked', true))\n        get('input').click()\n        get('input').should(notHaveAttribute('checked'))\n        get('input').should(haveProperty('checked', false))\n        get('button').click()\n        get('input').should(haveAttribute('checked', 'checked'))\n        get('input').should(haveProperty('checked', true))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-cloak.spec.js",
    "content": "import { html, notHaveAttribute, test } from '../../utils'\n\ntest('x-cloak is removed',\n    html`\n        <div x-data=\"{ hidden: true }\">\n            <span x-cloak></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(notHaveAttribute('x-cloak'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-data.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('x-data attribute value is optional',\n    html`\n        <div x-data>\n            <span x-text=\"'foo'\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('foo'))\n)\n\ntest('x-data can be nested',\n    html`\n        <div x-data=\"{ foo: 'bar', bar: 'baz' }\">\n            <div x-data=\"{ bar: 'bob' }\">\n                <h1 x-text=\"foo\"></h1>\n                <h2 x-text=\"bar\"></h2>\n                <button id=\"inner\" @click=\"foo = 'bob'; bar = 'lob'\">click</button>\n            </div>\n\n            <h3 x-text=\"foo\"></h3>\n            <h4 x-text=\"bar\"></h4>\n            <button id=\"outer\" @click=\"foo = 'law'; bar = 'blog'\">click</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('bar'))\n        get('h2').should(haveText('bob'))\n        get('h3').should(haveText('bar'))\n        get('h4').should(haveText('baz'))\n\n        get('button#inner').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('lob'))\n        get('h3').should(haveText('bob'))\n        get('h4').should(haveText('baz'))\n\n        get('button#outer').click()\n        get('h1').should(haveText('law'))\n        get('h2').should(haveText('lob'))\n        get('h3').should(haveText('law'))\n        get('h4').should(haveText('blog'))\n    }\n)\n\ntest('x-data can use attributes from a reusable function',\n    html`\n        <script>\n            window.test = () => {\n                return {\n                    foo: 'bar'\n                }\n            }\n        </script>\n        <div x-data=\"test()\">\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('bar'))\n)\n\ntest('x-data can use $el',\n    html`\n        <div x-data=\"{ text: $el.dataset.text }\" data-text=\"test\">\n            <span x-text=\"text\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('test'))\n)\n\ntest('functions in x-data are reactive',\n    html`\n        <div x-data=\"{ foo: 'bar', getFoo() {return this.foo}}\">\n            <span x-text=\"getFoo()\"></span>\n            <button x-on:click=\"foo = 'baz'\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('functions in x-data have access to proper this context',\n    html`\n        <div x-data=\"{ foo: undefined, change() { this.foo = 'baz' }}\" x-init=\"foo = 'bar'\">\n            <button @click=\"change()\">change</button>\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('x-data works on the html tag',\n    [html`\n        <div>\n            <span x-text=\"'foo'\"></span>\n        </div>\n    `,\n    `\n        document.querySelector('html').setAttribute('x-data', '')\n    `],\n    ({ get }) => {\n        get('span').should(haveText('foo'))\n    }\n)\n\ntest('x-data getters have access to parent scope',\n    html`\n    <div x-data=\"{ foo: 'bar' }\">\n        <div x-data=\"{\n            get bob() {\n                return this.foo\n            }\n        }\">\n            <h1 x-text=\"bob\"></h1>\n        </div>\n    </div>\n    `,\n    ({ get }) => get('h1').should(haveText('bar'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-for.spec.js",
    "content": "import { exist, haveLength, haveText, html, notExist, test } from '../../utils'\n\ntest('renders loops with x-for',\n    html`\n        <div x-data=\"{ items: ['foo'] }\">\n            <button x-on:click=\"items = ['foo', 'bar']\">click me</button>\n\n            <template x-for=\"item in items\">\n                <span x-text=\"item\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveText('foo'))\n        get('span:nth-of-type(2)').should(notExist())\n        get('button').click()\n        get('span:nth-of-type(1)').should(haveText('foo'))\n        get('span:nth-of-type(2)').should(haveText('bar'))\n    }\n)\n\ntest('renders loops with x-for that have space or newline',\n    html`\n        <div x-data=\"{ items: ['foo'] }\">\n            <button x-on:click=\"items = ['foo', 'bar']\">click me</button>\n\n            <div x-bind:id=\"1\">\n                <template x-for=\"\n                    (\n                        item\n                    ) in items\n                \">\n                    <span x-text=\"item\"></span>\n                </template>\n            </div>\n\n            <div x-bind:id=\"2\">\n                <template x-for=\" (\n                        item,\n                        index\n                    ) in items\n                \">\n                    <span x-text=\"item\"></span>\n                </template>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('#1 span:nth-of-type(1)').should(haveText('foo'))\n        get('#1 span:nth-of-type(2)').should(notExist())\n        get('#2 span:nth-of-type(1)').should(haveText('foo'))\n        get('#2 span:nth-of-type(2)').should(notExist())\n        get('button').click()\n        get('#1 span:nth-of-type(1)').should(haveText('foo'))\n        get('#1 span:nth-of-type(2)').should(haveText('bar'))\n        get('#2 span:nth-of-type(1)').should(haveText('foo'))\n        get('#2 span:nth-of-type(2)').should(haveText('bar'))\n    }\n)\n\ntest('can destructure arrays',\n    html`\n        <div x-data=\"{ items: [[1, 'foo'], [2, 'bar']] }\">\n            <template x-for=\"[id, label] in items\">\n                <div x-bind:id=\"id\">\n                    <span x-text=\"id\"></span>\n                    <h1 x-text=\"label\"></h1>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('#1 span').should(haveText('1'))\n        get('#1 h1').should(haveText('foo'))\n        get('#2 span').should(haveText('2'))\n        get('#2 h1').should(haveText('bar'))\n    }\n)\n\ntest('can destructure object',\n    html`\n        <div x-data=\"{ items: [{ foo: 'oof', bar: 'rab' }, { foo: 'ofo', bar: 'arb' }] }\">\n            <template x-for=\"({ foo, bar }, i) in items\">\n                <div x-bind:id=\"i + 1\">\n                    <span x-text=\"foo\"></span>\n                    <h1 x-text=\"bar\"></h1>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('#1 span').should(haveText('oof'))\n        get('#1 h1').should(haveText('rab'))\n        get('#2 span').should(haveText('ofo'))\n        get('#2 h1').should(haveText('arb'))\n    }\n)\n\ntest('removes all elements when array is empty and previously had one item',\n    html`\n        <div x-data=\"{ items: ['foo'] }\">\n            <button x-on:click=\"items = []\">click me</button>\n\n            <template x-for=\"item in items\">\n                <span x-text=\"item\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(exist())\n        get('button').click()\n        get('span').should(notExist())\n    }\n)\n\ntest('removes all elements when array is empty and previously had multiple items',\n    html`\n        <div x-data=\"{ items: ['foo', 'bar', 'world'] }\">\n            <button x-on:click=\"items = []\">click me</button>\n\n            <template x-for=\"item in items\">\n                <span x-text=\"item\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(exist())\n        get('span:nth-of-type(2)').should(exist())\n        get('span:nth-of-type(3)').should(exist())\n        get('button').click()\n        get('span:nth-of-type(1)').should(notExist())\n        get('span:nth-of-type(2)').should(notExist())\n        get('span:nth-of-type(3)').should(notExist())\n    }\n)\n\ntest('elements inside of loop are reactive',\n    html`\n        <div x-data=\"{ items: ['first'], foo: 'bar' }\">\n            <button x-on:click=\"foo = 'baz'\">click me</button>\n\n            <template x-for=\"item in items\">\n                <span>\n                    <h1 x-text=\"item\"></h1>\n                    <h2 x-text=\"foo\"></h2>\n                </span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(exist())\n        get('h1').should(haveText('first'))\n        get('h2').should(haveText('bar'))\n        get('button').click()\n        get('span').should(exist())\n        get('h1').should(haveText('first'))\n        get('h2').should(haveText('baz'))\n    }\n)\n\ntest('components inside of loop are reactive',\n    html`\n        <div x-data=\"{ items: ['first'] }\">\n            <template x-for=\"item in items\">\n                <div x-data=\"{foo: 'bar'}\" class=\"child\">\n                    <span x-text=\"foo\"></span>\n                    <button x-on:click=\"foo = 'bob'\">click me</button>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('bob'))\n    }\n)\n\ntest('components inside a plain element of loop are reactive',\n    html`\n        <div x-data=\"{ items: ['first'] }\">\n            <template x-for=\"item in items\">\n                <ul>\n                    <div x-data=\"{foo: 'bar'}\" class=\"child\">\n                        <span x-text=\"foo\"></span>\n                        <button x-on:click=\"foo = 'bob'\">click me</button>\n                    </div>\n                </ul>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('bob'))\n    }\n)\n\ntest('adding key attribute moves dom nodes properly',\n    html`\n        <div x-data=\"{ items: ['foo', 'bar'] }\">\n            <button x-on:click=\"items = ['bob', 'bar', 'foo', 'baz']\" id=\"reorder\">click me</button>\n            <button x-on:click=\"$el.parentElement.querySelectorAll('span').forEach((el, index) => el.og_loop_index = index)\" id=\"assign\">click me</button>\n\n            <template x-for=\"item in items\" :key=\"item\">\n                <span x-text=\"item\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        let haveOgIndex = index => el => expect(el[0].og_loop_index).to.equal(index)\n\n        get('#assign').click()\n        get('span:nth-of-type(1)').should(haveOgIndex(0))\n        get('span:nth-of-type(2)').should(haveOgIndex(1))\n        get('#reorder').click()\n        get('span:nth-of-type(1)').should(haveOgIndex(undefined))\n        get('span:nth-of-type(2)').should(haveOgIndex(1))\n        get('span:nth-of-type(3)').should(haveOgIndex(0))\n        get('span:nth-of-type(4)').should(haveOgIndex(undefined))\n    }\n)\n\ntest('can key by index',\n    html`\n        <div x-data=\"{ items: ['foo', 'bar'] }\">\n            <button x-on:click=\"items = ['bar', 'foo', 'baz']\" id=\"reorder\">click me</button>\n            <button x-on:click=\"$el.parentElement.querySelectorAll('span').forEach((el, index) => el.og_loop_index = index)\" id=\"assign\">click me</button>\n\n            <template x-for=\"(item, index) in items\" :key=\"index\">\n                <span x-text=\"item\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        let haveOgIndex = index => el => expect(el[0].og_loop_index).to.equal(index)\n\n        get('#assign').click()\n        get('span:nth-of-type(1)').should(haveOgIndex(0))\n        get('span:nth-of-type(2)').should(haveOgIndex(1))\n        get('#reorder').click()\n        get('span:nth-of-type(1)').should(haveOgIndex(0))\n        get('span:nth-of-type(2)').should(haveOgIndex(1))\n        get('span:nth-of-type(3)').should(haveOgIndex(undefined))\n    }\n)\n\ntest('can use index inside of loop',\n    html`\n        <div x-data=\"{ items: ['foo'] }\">\n            <template x-for=\"(item, index) in items\">\n                <div>\n                    <h1 x-text=\"items.indexOf(item)\"></h1>\n                    <h2 x-text=\"index\"></h2>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText(0))\n        get('h2').should(haveText(0))\n    }\n)\n\ntest('can use third iterator param (collection) inside of loop',\n    html`\n        <div x-data=\"{ items: ['foo'] }\">\n            <template x-for=\"(item, index, things) in items\">\n                <div>\n                    <h1 x-text=\"items\"></h1>\n                    <h2 x-text=\"things\"></h2>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n    }\n)\n\ntest('listeners in loop get fresh iteration data even though they are only registered initially',\n    html`\n        <div x-data=\"{ items: ['foo'], output: '' }\">\n            <button x-on:click=\"items = ['bar']\">click me</button>\n\n            <template x-for=\"(item, index) in items\">\n                <span x-text=\"item\" x-on:click=\"output = item\"></span>\n            </template>\n\n            <h1 x-text=\"output\"></h1>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText(''))\n        get('span').click()\n        get('h1').should(haveText('foo'))\n        get('button').click()\n        get('span').click()\n        get('h1').should(haveText('bar'))\n    }\n)\n\ntest('nested x-for',\n    html`\n        <div x-data=\"{ foos: [ {bars: ['bob', 'lob']} ] }\">\n            <button x-on:click=\"foos = [ {bars: ['bob', 'lob']}, {bars: ['law']} ]\">click me</button>\n            <template x-for=\"foo in foos\">\n                <h1>\n                    <template x-for=\"bar in foo.bars\">\n                        <h2 x-text=\"bar\"></h2>\n                    </template>\n                </h1>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1:nth-of-type(1) h2:nth-of-type(1)').should(exist())\n        get('h1:nth-of-type(1) h2:nth-of-type(2)').should(exist())\n        get('h1:nth-of-type(2) h2:nth-of-type(1)').should(notExist())\n        get('button').click()\n        get('h1:nth-of-type(1) h2:nth-of-type(1)').should(exist())\n        get('h1:nth-of-type(1) h2:nth-of-type(2)').should(exist())\n        get('h1:nth-of-type(2) h2:nth-of-type(1)').should(exist())\n    }\n)\n\ntest('x-for updates the right elements when new item are inserted at the beginning of the list',\n    html`\n        <div x-data=\"{ items: [{name: 'one', key: '1'}, {name: 'two', key: '2'}] }\">\n            <button x-on:click=\"items = [{name: 'zero', key: '0'}, {name: 'one', key: '1'}, {name: 'two', key: '2'}]\">click me</button>\n\n            <template x-for=\"item in items\" :key=\"item.key\">\n                <span x-text=\"item.name\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveText('one'))\n        get('span:nth-of-type(2)').should(haveText('two'))\n        get('button').click()\n        get('span:nth-of-type(1)').should(haveText('zero'))\n        get('span:nth-of-type(2)').should(haveText('one'))\n        get('span:nth-of-type(3)').should(haveText('two'))\n    }\n)\n\ntest('nested x-for access outer loop variable',\n    html`\n        <div x-data=\"{ foos: [ {name: 'foo', bars: ['bob', 'lob']}, {name: 'baz', bars: ['bab', 'lab']} ] }\">\n            <template x-for=\"foo in foos\">\n                <h1>\n                    <template x-for=\"bar in foo.bars\">\n                        <h2 x-text=\"foo.name+': '+bar\"></h2>\n                    </template>\n                </h1>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1:nth-of-type(1) h2:nth-of-type(1)').should(haveText('foo: bob'))\n        get('h1:nth-of-type(1) h2:nth-of-type(2)').should(haveText('foo: lob'))\n        get('h1:nth-of-type(2) h2:nth-of-type(1)').should(haveText('baz: bab'))\n        get('h1:nth-of-type(2) h2:nth-of-type(2)').should(haveText('baz: lab'))\n    }\n)\n\ntest('sibling x-for do not interact with each other',\n    html`\n        <div x-data=\"{ foos: [1], bars: [1, 2] }\">\n            <template x-for=\"foo in foos\">\n                <h1 x-text=\"foo\"></h1>\n            </template>\n            <template x-for=\"bar in bars\">\n                <h2 x-text=\"bar\"></h2>\n            </template>\n            <button @click=\"foos = [1, 2];bars = [1, 2, 3]\">Change</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1:nth-of-type(1)').should(haveText('1'))\n        get('h2:nth-of-type(1)').should(haveText('1'))\n        get('h2:nth-of-type(2)').should(haveText('2'))\n        get('button').click()\n        get('h1:nth-of-type(1)').should(haveText('1'))\n        get('h1:nth-of-type(2)').should(haveText('2'))\n        get('h2:nth-of-type(1)').should(haveText('1'))\n        get('h2:nth-of-type(2)').should(haveText('2'))\n        get('h2:nth-of-type(3)').should(haveText('3'))\n    }\n)\n\ntest('x-for over range using i in x syntax',\n    html`\n        <div x-data>\n            <template x-for=\"i in 10\">\n                <span x-text=\"i\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveLength('10'))\n)\n\ntest('x-for over range using i in property syntax',\n    html`\n        <div x-data=\"{ count: 10 }\">\n            <template x-for=\"i in count\">\n                <span x-text=\"i\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveLength('10'))\n)\n\ntest.retry(2)('x-for with an array of numbers',\n    `\n        <div x-data=\"{ items: [] }\">\n            <template x-for=\"i in items\">\n                <span x-text=\"i\"></span>\n            </template>\n            <button @click=\"items.push(2)\" id=\"first\">click me</button>\n            <button @click=\"items.push(3)\" id=\"second\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveLength('0'))\n        get('#first').click()\n        get('span').should(haveLength('1'))\n        get('#second').click()\n        get('span').should(haveLength('2'))\n    }\n)\n\ntest('x-for works with undefined',\n    `\n        <div x-data=\"{ items: undefined }\">\n            <template x-for=\"i in items\">\n                <span x-text=\"i\"></span>\n            </template>\n            <button @click=\"items = [2]\" id=\"first\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveLength('0'))\n        get('#first').click()\n        get('span').should(haveLength('1'))\n    }\n)\n\ntest('x-for works with variables that start with let',\n    `\n        <ul x-data=\"{ letters: ['a','b','c'] }\">\n          <template x-for=\"letter in letters\">\n            <li x-text=\"letter\"></li>\n          </template>\n        </ul>\n    `,\n    ({ get }) => {\n        get('li:nth-of-type(1)').should(haveText('a'))\n        get('li:nth-of-type(2)').should(haveText('b'))\n        get('li:nth-of-type(3)').should(haveText('c'))\n    }\n)\n\ntest('x-for works with variables that start with const',\n    `\n        <ul x-data=\"{ constants: ['a','b','c'] }\">\n          <template x-for=\"constant in constants\">\n            <li x-text=\"constant\"></li>\n          </template>\n        </ul>\n    `,\n    ({ get }) => {\n        get('li:nth-of-type(1)').should(haveText('a'))\n        get('li:nth-of-type(2)').should(haveText('b'))\n        get('li:nth-of-type(3)').should(haveText('c'))\n    }\n)\n\ntest('renders children in the right order when combined with x-if',\n    html`\n        <div x-data=\"{ items: ['foo', 'bar'] }\">\n            <template x-for=\"item in items\">\n                <template x-if=\"true\">\n                    <span x-text=\"item\"></span>\n                </template>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveText('foo'))\n        get('span:nth-of-type(2)').should(haveText('bar'))\n    }\n)\n\ntest('correctly renders x-if children when reordered',\n    html`\n        <div x-data=\"{ items: ['foo', 'bar'] }\">\n            <button @click=\"items = ['bar', 'foo']\">click me</button>\n            <button @click=\"items = ['bar', 'baz', 'foo']\">click me</button>\n            <button @click=\"items = ['baz', 'foo']\">click me</button>\n            <template x-for=\"item in items\" :key=\"item\">\n                <template x-if=\"true\">\n                    <span x-text=\"item\"></span>\n                </template>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveText('foo'))\n        get('span:nth-of-type(2)').should(haveText('bar'))\n        get('button:nth-of-type(1)').click()\n        get('span').should(haveLength('2'))\n        get('span:nth-of-type(1)').should(haveText('bar'))\n        get('span:nth-of-type(2)').should(haveText('foo'))\n        get('button:nth-of-type(2)').click()\n        get('span').should(haveLength('3'))\n        get('span:nth-of-type(1)').should(haveText('bar'))\n        get('span:nth-of-type(2)').should(haveText('baz'))\n        get('span:nth-of-type(3)').should(haveText('foo'))\n        get('button:nth-of-type(3)').click()\n        get('span').should(haveLength('2'))\n        get('span:nth-of-type(1)').should(haveText('baz'))\n        get('span:nth-of-type(2)').should(haveText('foo'))\n    }\n)\n//If an x-for element is removed from DOM, expectation is that the removed DOM element will not have any of its reactive expressions evaluated after removal.\ntest('x-for removed dom node does not evaluate child expressions after being removed',\n    html`\n        <div x-data=\"{ users: [{ name: 'lebowski' }] }\">\n            <template x-for=\"(user, idx) in users\">\n                <span x-text=\"users[idx].name\"></span>\n            </template>\n            <button @click=\"users = []\">Reset</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('lebowski'))\n\n        /** Clicking button sets users=[] and thus x-for loop will remove all children.\n            If the sub-expression x-text=\"users[idx].name\" is evaluated, the button click\n            will produce an error because users[idx] is no longer defined and the test will fail\n        **/\n        get('button').click()\n        get('span').should('not.exist')\n    }\n)\n\ntest('renders children using directives injected by x-html correctly',\n    html`\n        <div x-data=\"{foo: 'bar'}\">\n            <template x-for=\"i in 2\">\n                <p x-html=\"'<span x-text=&quot;foo&quot;></span>'\"></p>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('p:nth-of-type(1) span').should(haveText('bar'))\n        get('p:nth-of-type(2) span').should(haveText('bar'))\n    }\n)\n\ntest(\n    'handles x-data directly inside x-for',\n    html`\n        <div x-data=\"{ items: [{x:0, k:1},{x:1, k:2}] }\">\n            <button x-on:click=\"items = [{x:3, k:1},{x:4, k:2}]\">update</button>\n            <template x-for=\"item in items\" :key=\"item.k\">\n                <div :id=\"'item-' + item.k\" x-data=\"{ inner: true }\">\n                    <span x-text=\"item.x.toString()\"></span>:\n                    <span x-text=\"item.k\"></span>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('#item-1 span:nth-of-type(1)').should(haveText('0'))\n        get('#item-2 span:nth-of-type(1)').should(haveText('1'))\n        get('button').click()\n        get('#item-1 span:nth-of-type(1)').should(haveText('3'))\n        get('#item-2 span:nth-of-type(1)').should(haveText('4'))\n})\n\ntest('x-for throws descriptive error when key is undefined',\n    html`\n        <div x-data=\"{ items: [\n            {\n                id: 1,\n                name: 'foo',\n            },\n            {\n                id: 2,\n                name: 'bar',\n            },\n            {\n                id: 3,\n                name: 'baz',\n            },\n        ]}\">\n            <template x-for=\"item in items\" :key=\"item.doesntExist\">\n                <span x-text=\"i\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {},\n    true\n)\n\ntest('iterates over a Set',\n    html`\n        <div x-data=\"{ items: new Set(['foo', 'bar']) }\">\n            <template x-for=\"item in items\">\n                <span x-text=\"item\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveText('foo'))\n        get('span:nth-of-type(2)').should(haveText('bar'))\n    }\n)\n\ntest('iterates over a Map',\n    html`\n        <div x-data=\"{ items: new Map([['a', 'foo'], ['b', 'bar']]) }\">\n            <template x-for=\"[key, value] in items\">\n                <span x-text=\"key + ':' + value\"></span>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveText('a:foo'))\n        get('span:nth-of-type(2)').should(haveText('b:bar'))\n    }\n)\n\n// If x-for removes a child, all cleanups in the tree should be handled.\ntest('x-for eagerly cleans tree',\n    html`\n        <div x-data=\"{ show: 0, counts: [0,0,0], items: [0,1,2] }\">\n            <button\n                id=\"toggle\"\n                @click=\"show^=true\"\n                x-text=\"counts.reduce((a,b)=>a+b)\">\n                Toggle\n            </button>\n            <button id=\"remove\" @click=\"items.pop()\">Remove</button>\n            <template x-for=\"num in items\" :key=\"num\">\n                <div>\n                <template x-for=\"n in show\">\n                    <p x-effect=\"if (show) counts[num]++\">hello</p>\n                </template>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('#toggle').should(haveText('0'))\n        get('#toggle').click()\n        get('#toggle').should(haveText('3'))\n        get('#toggle').click()\n        get('#toggle').should(haveText('3'))\n        get('#toggle').click()\n        get('#toggle').should(haveText('6'))\n        get('#remove').click()\n        get('#toggle').should(haveText('6'))\n        get('#toggle').click()\n        get('#toggle').should(haveText('6'))\n        get('#toggle').click()\n        get('#toggle').should(haveText('8'))\n    }\n)\n\n// To support rerendering alongside x-sort\ntest('x-for handles moved elements correctly',\n    html`\n        <div x-data=\"{ items: [1,2,3] }\">\n            <button\n                id=\"swap\"\n                @click=\"items.splice(0,0,...items.splice(1,1))\">\n                Swap first 2\n            </button>\n            <button id=\"move\"\n                @click=\"document.querySelector('[data-num]:nth-of-type(1)').before(document.querySelector('[data-num]:nth-of-type(2)'))\">\n                Move elements\n            </button>\n            <template x-for=\"num in items\" :key=\"num\">\n                <div :data-num=num x-text=\"num\"></div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('[data-num]:nth-of-type(1)').should(haveText('1'))\n        get('[data-num]:nth-of-type(2)').should(haveText('2'))\n        get('[data-num]:nth-of-type(3)').should(haveText('3'))\n        get('button#move').click()\n        get('[data-num]:nth-of-type(1)').should(haveText('2'))\n        get('[data-num]:nth-of-type(2)').should(haveText('1'))\n        get('[data-num]:nth-of-type(3)').should(haveText('3'))\n        get('button#swap').click()\n        get('[data-num]:nth-of-type(1)').should(haveText('2'))\n        get('[data-num]:nth-of-type(2)').should(haveText('1'))\n        get('[data-num]:nth-of-type(3)').should(haveText('3'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-html.spec.js",
    "content": "import { haveText, notHaveText, html, test } from '../../utils'\n\ntest('sets html on init',\n    html`\n        <div x-data=\"{ foo: '<h1>hey</h1>' }\">\n            <span x-html=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('hey'))\n    }\n)\n\ntest('sets html on update',\n    html`\n        <div x-data=\"{ foo: '' }\">\n            <button x-on:click=\"foo = '<h1>hey</h1>'\">Show \"bar\"</button>\n\n            <span x-html=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(notHaveText('hey'))\n        get('button').click()\n        get('h1').should(haveText('hey'))\n    }\n)\n\ntest('x-html allows alpine code within',\n    html`\n        <div x-data=\"{ foo: '<h1  x-text=&quot;bar&quot;></h1>', bar: 'baz' }\" x-html=\"foo\"></div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('baz'))\n    }\n)\n\ntest('x-html runs even after x-if or x-for',\n    html`\n        <div x-data=\"{ html: '<span x-text=&quot;foo&quot;></span>', foo: 'bar' }\">\n            <template x-if=\"true\">\n                <h1>yoyoyo</h1>\n            </template>\n\n            <div x-html=\"html\"></div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-html sets HTML to a blank string when value is `null`',\n    html`\n        <div x-data=\"{ html: null }\">\n            <span x-html=\"html\">original HTML</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n    }\n)\n\ntest('x-html sets HTML to a blank string when value is `undefined`',\n    html`\n        <div x-data=\"{ html: undefined }\">\n            <span x-html=\"html\">original HTML</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-if.spec.js",
    "content": "import { exist, haveText, html, notExist, test } from '../../utils'\n\ntest('x-if',\n    html`\n        <div x-data=\"{ show: false }\">\n            <button @click=\"show = ! show\">Toggle</button>\n\n            <template x-if=\"show\">\n                <h1>Toggle Me</h1>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(notExist())\n        get('button').click()\n        get('h1').should(exist())\n        get('button').click()\n        get('h1').should(notExist())\n    }\n)\n\ntest('x-if inside x-for allows nested directives',\n    html`\n        <div x-data=\"{items: [{id: 1, label: '1'}]}\">\n\n            <template x-for=\"item in items\" :key=\"item.id\">\n                <div>\n                    <template x-if=\"item.label\">\n                        <span x-text=\"item.label\"></span>\n                    </template>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('x-if initializes after being added to the DOM to allow x-ref to work',\n    html`\n        <div x-data=\"{}\">\n            <template x-if=\"true\">\n                <ul x-ref=\"listbox\" data-foo=\"bar\">\n                    <li x-text=\"$refs.listbox.dataset.foo\"></li>\n                </ul>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('li').should(haveText('bar'))\n    }\n)\n\n// If x-if evaluates to false, the expectation is that no sub-expressions will be evaluated.\ntest('x-if removed dom does not evaluate reactive expressions in dom tree',\n    html`\n    <div x-data=\"{user: {name: 'lebowski'}}\">\n        <button @click=\"user = null\">Log out</button>\n        <template x-if=\"user\">\n            <span x-text=\"user.name\"></span>\n        </template>\n\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('lebowski'))\n\n        // Clicking button sets user=null and thus x-if=\"user\" will evaluate to false.\n        // If the sub-expression x-text=\"user.name\" is evaluated, the button click\n        // will produce an error because user is no longer defined and the test will fail\n        get('button').click()\n        get('span').should(notExist())\n    }\n)\n\n// Attempting to skip an already-flushed reactive effect would cause inconsistencies when updating other effects.\n// See https://github.com/alpinejs/alpine/issues/2803 for more details.\ntest('x-if removed dom does not attempt skipping already-processed reactive effects in dom tree',\n    html`\n    <div x-data=\"{\n        isEditing: true,\n        foo: 'random text',\n        stopEditing() {\n          this.foo = '';\n          this.isEditing = false;\n        },\n    }\">\n        <button @click=\"stopEditing\">Stop editing</button>\n        <template x-if=\"isEditing\">\n            <div id=\"div-editing\">\n              <h2>Editing</h2>\n              <input id=\"foo\" name=\"foo\" type=\"text\" x-model=\"foo\" />\n            </div>\n        </template>\n\n        <template x-if=\"!isEditing\">\n            <div id=\"div-not-editing\"><h2>Not editing</h2></div>\n        </template>\n\n        <template x-if=\"!isEditing\">\n            <div id=\"div-also-not-editing\"><h2>Also not editing</h2></div>\n        </template>\n    </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('div#div-editing').should(notExist())\n        get('div#div-not-editing').should(exist())\n        get('div#div-also-not-editing').should(exist())\n    }\n)\n\n// If x-if evaluates to false, all cleanups in the tree should be handled.\ntest('x-if eagerly cleans tree',\n    html`\n        <div x-data=\"{ show: false, count: 0 }\">\n            <button @click=\"show^=true\" x-text=\"count\">Toggle</button>\n            <template x-if=\"show\">\n                <div>\n                <template x-if=\"true\">\n                    <p x-effect=\"if (show) count++\">\n                    hello\n                    </p>\n                </template>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').should(haveText('0'))\n        get('button').click()\n        get('button').should(haveText('1'))\n        get('button').click()\n        get('button').should(haveText('1'))\n        get('button').click()\n        get('button').should(haveText('2'))\n        get('button').click()\n        get('button').should(haveText('2'))\n        get('button').click()\n        get('button').should(haveText('3'))\n        get('button').click()\n        get('button').should(haveText('3'))\n        get('button').click()\n        get('button').should(haveText('4'))\n        get('button').click()\n        get('button').should(haveText('4'))\n    }\n)"
  },
  {
    "path": "tests/cypress/integration/directives/x-ignore.spec.js",
    "content": "import { haveClasses, haveText, html, notHaveClasses, notHaveText, test } from '../../utils'\n\ntest('x-ignore',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <div x-ignore>\n                <span x-text=\"foo\"></span>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(notHaveText('bar'))\n    }\n)\n\ntest('x-ignore.self',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <h1 x-ignore.self :class=\"foo\">\n                <span x-text=\"foo\"></span>\n            </h1>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('h1').should(notHaveClasses(['bar']))\n    }\n)\n\ntest('can lazyload a component',\n    html`\n        <div x-data=\"{ lazyLoad() {$el.querySelector('#lazy').removeAttribute('x-ignore'); Alpine.nextTick(() => Alpine.initTree($el.querySelector('#lazy')))} }\">\n            <button @click=\"lazyLoad\">Load</button>\n            <div x-data=\"{ foo: 'bar' }\" id=\"lazy\" x-ignore :class=\"foo\">\n                <span x-text=\"foo\"></span>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(notHaveText('bar'))\n        get('div#lazy').should(notHaveClasses(['bar']))\n        get('button').click()\n        get('span').should(haveText('bar'))\n        get('div#lazy').should(haveClasses(['bar']))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-init.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('sets text on init',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-init=\"foo = 'baz'\">\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('baz'))\n)\n\ntest('x-init can be used outside of x-data',\n    html`\n        <div x-init=\"$el.textContent = 'foo'\"></div>\n    `,\n    ({ get }) => get('div').should(haveText('foo'))\n)\n\ntest('changes made in x-init happen before the rest of the component',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-init=\"$refs.foo.innerText = 'yo'\">\n            <span x-text=\"foo\" x-ref=\"foo\">baz</span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('bar'))\n)\n\ntest('can make deferred changes with $nextTick',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-init=\"$nextTick(() => $refs.foo.innerText = 'yo')\">\n            <span x-text=\"foo\" x-ref=\"foo\">baz</span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('yo'))\n)\n\ntest('x-init will not evaluate expression if it is empty',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-init=\" \">\n            <span x-text=\"foo\" x-ref=\"foo\">baz</span>\n        </div>\n    `,\n    ({ get }) => get('span').should(haveText('bar'))\n)\n\ntest('component nested into x-init without x-data are not initialised twice',\n    html`\n        <div x-init=\"$el.setAttribute('attribute', 'value')\">\n            <p x-data=\"{foo: 'foo'}\" x-init=\"$el.textContent += foo\"></p>\n        </div>\n    `,\n    ({ get }) => get('p').should(haveText('foo'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-model.spec.js",
    "content": "import { beChecked, haveData, haveText, haveValue, html, notBeChecked, test } from '../../utils'\n\ntest('The name of the test',\n    html`<h1 x-data x-text=\"'HEY'\"></h1>`,\n    ({ get }) => get('h1').should(haveText('HEY'))\n)\n\ntest('x-model has value binding when initialized',\n    html`\n    <div x-data=\"{ foo: 'bar' }\">\n        <input x-model=\"foo\"></input>\n    </div>\n    `,\n    ({ get }) => { get('input').should(haveValue('bar')) }\n)\n\ntest('x-model updates value when updated via input event',\n    html`\n    <div x-data=\"{ foo: 'bar' }\">\n        <input x-model=\"foo\"></input>\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('input').type('baz')\n        get('span').should(haveText('barbaz'))\n    }\n)\n\ntest('x-model has value binding when updated',\n    html`\n    <div x-data=\"{ foo: 'bar' }\">\n        <input x-model=\"foo\"></input>\n\n        <button x-on:click=\"foo = 'baz'\">click me</button>\n    </div>\n    `,\n    ({ get }) => {\n        get('input').should(haveValue('bar'))\n        get('button').click()\n        get('input').should(haveValue('baz'))\n    }\n)\n\ntest('x-model casts value to number if number modifier is present',\n    html`\n    <div x-data=\"{ foo: null }\">\n        <input type=\"number\" x-model.number=\"foo\"></input>\n    </div>\n    `,\n    ({ get }) => {\n        get('input').type('123')\n        get('div').should(haveData('foo', 123))\n\n    }\n)\n\ntest('x-model with number modifier returns: null if empty, original value if casting fails, numeric value if casting passes',\n    html`\n    <div x-data=\"{ foo: 0, bar: '' }\">\n        <input type=\"number\" x-model.number=\"foo\"></input>\n        <input x-model.number=\"bar\"></input>\n    </div>\n    `,\n    ({ get }) => {\n        get('input:nth-of-type(1)').clear()\n        get('div').should(haveData('foo', null))\n        get('input:nth-of-type(1)').clear().type('-')\n        get('div').should(haveData('foo', null))\n        get('input:nth-of-type(1)').clear().type('-123')\n        get('div').should(haveData('foo', -123))\n        get('input:nth-of-type(2)').type(123).clear()\n        get('div').should(haveData('bar', null))\n        get('input:nth-of-type(2)').clear().type('-')\n        get('div').should(haveData('bar', '-'))\n        get('input:nth-of-type(2)').clear().type('-123')\n        get('div').should(haveData('bar', -123))\n    }\n)\n\ntest('x-model casts value to boolean initially for radios',\n    html`\n    <div x-data=\"{ foo: true }\">\n        <input id=\"1\" type=\"radio\" value=\"true\" name=\"foo\" x-model.boolean=\"foo\">\n        <input id=\"2\" type=\"radio\" value=\"false\" name=\"foo\" x-model.boolean=\"foo\">\n    </div>\n    `,\n    ({ get }) => {\n        get('div').should(haveData('foo', true))\n        get('#1').should(beChecked())\n        get('#2').should(notBeChecked())\n        get('#2').click()\n        get('div').should(haveData('foo', false))\n        get('#1').should(notBeChecked())\n        get('#2').should(beChecked())\n    }\n)\n\ntest('x-model casts value to boolean if boolean modifier is present',\n    html`\n    <div x-data=\"{ foo: null, bar: null, baz: [] }\">\n        <input type=\"text\" x-model.boolean=\"foo\"></input>\n        <input type=\"checkbox\" x-model.boolean=\"foo\"></input>\n        <input type=\"radio\" name=\"foo\" x-model.boolean=\"foo\" value=\"true\"></input>\n        <input type=\"radio\" name=\"foo\" x-model.boolean=\"foo\" value=\"false\"></input>\n        <select x-model.boolean=\"bar\">\n            <option value=\"true\">yes</option>\n            <option value=\"false\">no</option>\n        </select>\n    </div>\n    `,\n    ({ get }) => {\n        get('input[type=text]').type('1')\n        get('div').should(haveData('foo', true))\n        get('input[type=text]').clear().type('0')\n        get('div').should(haveData('foo', false))\n\n        get('input[type=checkbox]').check()\n        get('div').should(haveData('foo', true))\n        get('input[type=checkbox]').uncheck()\n        get('div').should(haveData('foo', false))\n\n        get('input[type=radio][value=\"true\"]').should(notBeChecked())\n        get('input[type=radio][value=\"false\"]').should(beChecked())\n        get('input[type=radio][value=\"true\"]').check()\n        get('div').should(haveData('foo', true))\n        get('input[type=radio][value=\"false\"]').check()\n        get('div').should(haveData('foo', false))\n\n        get('select').select('false')\n        get('div').should(haveData('bar', false))\n        get('select').select('true')\n        get('div').should(haveData('bar', true))\n    }\n)\n\ntest('x-model with boolean modifier returns: null if empty, original value if casting fails, numeric value if casting passes',\n    html`\n    <div x-data=\"{ foo: 0, bar: '' }\">\n        <input x-model.boolean=\"foo\"></input>\n    </div>\n    `,\n    ({ get }) => {\n        get('input').clear()\n        get('div').should(haveData('foo', null))\n        get('input').clear().type('bar')\n        get('div').should(haveData('foo', true))\n        get('input').clear().type('1')\n        get('div').should(haveData('foo', true))\n        get('input').clear().type('1').clear()\n        get('div').should(haveData('foo', null))\n        get('input').clear().type('0')\n        get('div').should(haveData('foo', false))\n        get('input').clear().type('bar')\n        get('div').should(haveData('foo', true))\n        get('input').clear().type('0').clear()\n        get('div').should(haveData('foo', null))\n    }\n)\n\ntest('x-model trims value if trim modifier is present',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.trim=\"foo\"></input>\n\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('input').type('bar     ')\n        get('div').should(haveData('foo', 'bar'))\n    }\n)\n\ntest('x-model can be accessed programmatically',\n    html`\n    <div x-data=\"{ foo: 'bar' }\" x-model=\"foo\">\n        <input x-model=\"foo\">\n\n        <span x-text=\"$root._x_model.get()\"></span>\n        <button @click=\"$root._x_model.set('bob')\">Set foo to bob</button>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('input').type('baz')\n        get('span').should(haveText('barbaz'))\n        get('button').click()\n        get('span').should(haveText('bob'))\n    }\n)\n\ntest('x-model updates value when the form is reset',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <form>\n            <input x-model=\"foo\"></input>\n            <button type=\"reset\">Reset</button>\n        </form>\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n        get('input').type('baz')\n        get('span').should(haveText('baz'))\n        get('button').click()\n        get('span').should(haveText(''))\n    }\n)\n\ntest(\n    \"x-model radio updates value when the form is reset\",\n    html`\n    <div x-data=\"{ foo: undefined }\">\n        <form>\n            <input type=\"radio\" value=\"radio1\" x-model.fill=\"foo\"></input>\n            <input type=\"radio\" value=\"radio2\" x-model.fill=\"foo\" checked></input>\n            <input type=\"radio\" value=\"radio3\" x-model.fill=\"foo\"></input>\n            <button type=\"reset\">Reset</button>\n        </form>\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get(\"span\").should(haveText(\"radio2\"));\n        get(\"input[value='radio1']\").click();\n        get(\"span\").should(haveText(\"radio1\"));\n        get(\"button\").click();\n        get(\"span\").should(haveText(\"radio2\"));\n    }\n);\n\ntest(\n    \"x-model.number radio updates value when the form is reset\",\n    html`\n    <div x-data=\"{ foo: undefined }\">\n        <form>\n            <input type=\"radio\" value=\"1\" x-model.number.fill=\"foo\"></input>\n            <input type=\"radio\" value=\"2\" x-model.number.fill=\"foo\" checked></input>\n            <input type=\"radio\" value=\"3\" x-model.number.fill=\"foo\"></input>\n            <button type=\"reset\">Reset</button>\n        </form>\n    </div>\n    `,\n    ({ get }) => {\n        get(\"[x-data]\").should(haveData(\"foo\", 2));\n        get(\"input[value='1']\").click();\n        get(\"[x-data]\").should(haveData(\"foo\", 1));\n        get(\"button\").click();\n        get(\"[x-data]\").should(haveData(\"foo\", 2));\n    }\n);\n\ntest(\n    \"x-model.boolean radio updates value when the form is reset\",\n    html`\n    <div x-data=\"{ foo: undefined }\">\n        <form>\n            <input type=\"radio\" value=\"true\" x-model.boolean.fill=\"foo\" checked></input>\n            <input type=\"radio\" value=\"false\" x-model.boolean.fill=\"foo\"></input>\n            <button type=\"reset\">Reset</button>\n        </form>\n    </div>\n    `,\n    ({ get }) => {\n        get(\"[x-data]\").should(haveData(\"foo\", true));\n        get(\"input[value='false']\").click();\n        get(\"[x-data]\").should(haveData(\"foo\", false));\n        get(\"button\").click();\n        get(\"[x-data]\").should(haveData(\"foo\", true));\n    }\n);\n\ntest(\n    \"x-model checkbox array updates value when the form is reset\",\n    html`\n    <div x-data=\"{ foo: [] }\">\n        <form>\n            <input type=\"checkbox\" value=\"checkbox1\" x-model.fill=\"foo\"></input>\n            <input type=\"checkbox\" value=\"checkbox2\" x-model.fill=\"foo\" checked></input>\n            <input type=\"checkbox\" value=\"checkbox3\" x-model.fill=\"foo\" checked></input>\n            <input type=\"checkbox\" value=\"checkbox4\" x-model.fill=\"foo\"></input>\n            <button type=\"reset\">Reset</button>\n        </form>\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get(\"span\").should(haveText(\"checkbox2,checkbox3\"));\n        get(\"input[value='checkbox1']\").click();\n        get(\"span\").should(haveText(\"checkbox2,checkbox3,checkbox1\"));\n        get(\"input[value='checkbox3']\").click();\n        get(\"span\").should(haveText(\"checkbox2,checkbox1\"));\n        get(\"button\").click();\n        get(\"span\").should(haveText(\"checkbox2,checkbox3\"));\n    }\n);\n\ntest(\n    \"x-model.number checkbox array updates value when the form is reset\",\n    html`\n    <div x-data=\"{ foo: [] }\">\n        <form>\n            <input type=\"checkbox\" value=\"1\" x-model.number.fill=\"foo\"></input>\n            <input type=\"checkbox\" value=\"2\" x-model.number.fill=\"foo\" checked></input>\n            <input type=\"checkbox\" value=\"3\" x-model.number.fill=\"foo\" checked></input>\n            <input type=\"checkbox\" value=\"4\" x-model.number.fill=\"foo\"></input>\n            <button type=\"reset\">Reset</button>\n        </form>\n    </div>\n    `,\n    ({ get }) => {\n        get(\"[x-data]\").should(haveData(\"foo\", [2, 3]));\n        get(\"input[value='1']\").click();\n        get(\"[x-data]\").should(haveData(\"foo\", [2, 3, 1]));\n        get(\"input[value='3']\").click();\n        get(\"[x-data]\").should(haveData(\"foo\", [2, 1]));\n        get(\"button\").click();\n        get(\"[x-data]\").should(haveData(\"foo\", [2, 3]));\n    }\n);\n\ntest(\n    \"x-model select updates value when the form is reset\",\n    html`\n        <div x-data=\"{ a: null, b: null, c: null, d: null }\">\n            <form>\n                <select id=\"a\" x-model.fill=\"a\">\n                    <option value=\"123\">123</option>\n                    <option value=\"456\" selected>456</option>\n                    <option value=\"789\">789</option>\n                </select>\n                <select id=\"b\" x-model.fill=\"b\" multiple>\n                    <option value=\"123\" selected>123</option>\n                    <option value=\"456\">456</option>\n                    <option value=\"789\" selected>789</option>\n                </select>\n                <select id=\"c\" x-model.number.fill=\"c\">\n                    <option value=\"123\">123</option>\n                    <option value=\"456\" selected>456</option>\n                    <option value=\"789\">789</option>\n                </select>\n                <select id=\"d\" x-model.number.fill=\"d\" multiple>\n                    <option value=\"123\" selected>123</option>\n                    <option value=\"456\">456</option>\n                    <option value=\"789\" selected>789</option>\n                </select>\n                <button type=\"reset\">Reset</button>\n            </form>\n        </div>\n    `,\n    ({ get }) => {\n        get(\"[x-data]\").should(haveData(\"a\", \"456\"));\n        get(\"[x-data]\").should(haveData(\"b\", [\"123\", \"789\"]));\n        get(\"[x-data]\").should(haveData(\"c\", 456));\n        get(\"[x-data]\").should(haveData(\"d\", [123, 789]));\n        get(\"select#a\").select(\"789\");\n        get(\"select#b\").select(\"456\");\n        get(\"select#c\").select(\"789\");\n        get(\"select#d\").select(\"456\");\n        get(\"[x-data]\").should(haveData(\"a\", \"789\"));\n        get(\"[x-data]\").should(haveData(\"b\", [\"456\"]));\n        get(\"[x-data]\").should(haveData(\"c\", 789));\n        get(\"[x-data]\").should(haveData(\"d\", [456]));\n        get(\"button\").click();\n        get(\"[x-data]\").should(haveData(\"a\", \"456\"));\n        get(\"[x-data]\").should(haveData(\"b\", [\"123\", \"789\"]));\n        get(\"[x-data]\").should(haveData(\"c\", 456));\n        get(\"[x-data]\").should(haveData(\"d\", [123, 789]));\n    }\n);\n\n\ntest('x-model with fill modifier takes input value on null, empty string or undefined',\n    html`\n    <div x-data=\"{ a: 123, b: 0, c: '', d: null, e: {} }\">\n      <input x-model.fill=\"a\" value=\"123456\" />\n      <span id=\"a\" x-text=\"a\"></span>\n      <input x-model.fill=\"b\" value=\"123456\" />\n      <span id=\"b\" x-text=\"b\"></span>\n      <input x-model.fill=\"c\" value=\"123456\" />\n      <span id=\"c\" x-text=\"c\"></span>\n      <input x-model.fill=\"d\" value=\"123456\" />\n      <span id=\"d\" x-text=\"d\"></span>\n      <input x-model.fill=\"e.a\" value=\"123456\" />\n      <span id=\"e\" x-text=\"e.a\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('#a').should(haveText('123'))\n        get('#b').should(haveText('0'))\n        get('#c').should(haveText('123456'))\n        get('#d').should(haveText('123456'))\n        get('#e').should(haveText('123456'))\n    }\n)\n\ntest('x-model with fill modifier works with select elements',\n    html`\n        <div x-data=\"{ a: null, b: null, c: null, d: null, e: null, f: null }\">\n            <select x-model.fill=\"a\">\n                <option value=\"123\">123</option>\n                <option value=\"456\" selected>456</option>\n            </select>\n            <select x-model.fill=\"b\" multiple>\n                <option value=\"123\" selected>123</option>\n                <option value=\"456\" selected>456</option>\n            </select>\n            <select x-model.number.fill=\"c\">\n                <option value=\"123\">123</option>\n                <option value=\"456\" selected>456</option>\n            </select>\n            <select x-model.number.fill=\"d\" multiple>\n                <option value=\"123\" selected>123</option>\n                <option value=\"456\" selected>456</option>\n            </select>\n            <select x-model.boolean.fill=\"e\">\n                <option value=\"true\" selected>true</option>\n                <option value=\"false\">false</option>\n            </select>\n            <select x-model.boolean.fill=\"f\" multiple>\n                <option value=\"true\" selected>true</option>\n                <option value=\"false\" selected>false</option>\n            </select>\n        </div>\n    `,\n    ({ get }) => {\n        get('[x-data]').should(haveData('a', '456'));\n        get('[x-data]').should(haveData('b', ['123', '456']));\n        get('[x-data]').should(haveData('c', 456));\n        get('[x-data]').should(haveData('d', [123, 456]));\n        get('[x-data]').should(haveData('e', true));\n        get('[x-data]').should(haveData('f', [true, false]));\n    }\n);\n\ntest('x-model with fill modifier works with radio elements',\n    html`\n        <div x-data=\"{ a: null, b: null, c: '101112', d: null }\">\n            <input x-model.fill=\"a\" type=\"radio\" value=\"123\" />\n            <input x-model.fill=\"a\" type=\"radio\" value=\"456\" checked />\n            <input x-model.fill=\"a\" type=\"radio\" value=\"789\" />\n            <input x-model.fill=\"a\" type=\"radio\" value=\"101112\" />\n            <input x-model.fill=\"a\" type=\"radio\" value=\"131415\" />\n\n            <input x-model.fill=\"b\" name=\"b\" type=\"radio\" value=\"123\" />\n            <input x-model.fill=\"b\" name=\"b\" type=\"radio\" value=\"456\" />\n            <input x-model.fill=\"b\" name=\"b\" type=\"radio\" value=\"789\" checked />\n            <input x-model.fill=\"b\" name=\"b\" type=\"radio\" value=\"101112\" />\n            <input x-model.fill=\"b\" name=\"b\" type=\"radio\" value=\"131415\" />\n\n            <input x-model.fill=\"c\" type=\"radio\" value=\"123\" />\n            <input x-model.fill=\"c\" type=\"radio\" value=\"456\" />\n            <input x-model.fill=\"c\" type=\"radio\" value=\"789\" />\n            <input x-model.fill=\"c\" type=\"radio\" value=\"101112\" />\n            <input x-model.fill=\"c\" type=\"radio\" value=\"131415\" />\n        </div>\n    `,\n    ({ get }) => {\n        get('[x-data]').should(haveData('a', '456'));\n        get('[x-data]').should(haveData('b', '789'));\n        get('[x-data]').should(haveData('c', '101112'));\n    }\n);\n\ntest('x-model with fill modifier respects number modifier',\n    html`\n        <div x-data=\"{ a: null, b: null, c: null, d: null }\">\n            <input type=\"text\" x-model.fill.number=\"a\" value=\"456\" / >\n            <select x-model.fill.number=\"b\" multiple>\n                <option value=\"123\" selected>123</option>\n                <option value=\"456\" selected>456</option>\n            </select>\n        </div>\n    `,\n    ({ get }) => {\n        get('[x-data]').should(haveData('a', 456));\n        get('[x-data]').should(haveData('b', [123,456]));\n    }\n);\n\ntest(\n    'x-model with fill applies on checkboxes bound to array',\n    html`\n        <div x-data=\"{ a: ['456'] }\">\n            <input type=\"checkbox\" x-model.fill=\"a\" value=\"123\" checked />\n            <input type=\"checkbox\" x-model.fill=\"a\" value=\"456\" />\n        </div>\n    `,\n    ({ get }) => {\n        get('[x-data]').should(haveData('a', ['123']));\n    }\n);\n\ntest(\n    'x-model with fill and debounce still fills value',\n    html`\n        <div x-data=\"{ a: '' }\">\n            <input type=\"text\" x-model.fill.debounce=\"a\" value=\"hello\" />\n        </div>\n    `,\n    ({ get }) => {\n        get('[x-data]').should(haveData('a', 'hello'));\n    }\n);\n\ntest('x-model.change only updates on change event',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.change=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').blur()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-model.blur only updates on blur event',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.blur=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').blur()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-model.enter only updates on enter keypress',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.enter=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').type('{enter}')\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-model.change.blur updates on both change and blur',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.change.blur=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').blur()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-model.change.blur.enter updates on any of the three events',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.change.blur.enter=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        // Test enter\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').type('{enter}')\n        get('span').should(haveText('bar'))\n        // Clear and test blur\n        get('input').clear()\n        get('input').type('baz')\n        get('input').blur()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('x-model.lazy still works as alias for change',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.lazy=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').blur()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-model.blur.enter updates on blur OR enter (enter should work)',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.blur.enter=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        // Test enter specifically - this was broken when blur modifier was also present\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').type('{enter}')\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-model.enter.blur updates on enter OR blur (enter should work)',\n    html`\n    <div x-data=\"{ foo: '' }\">\n        <input x-model.enter.blur=\"foo\">\n        <span x-text=\"foo\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        // Test enter specifically with modifiers in different order\n        get('span').should(haveText(''))\n        get('input').type('bar')\n        get('span').should(haveText(''))\n        get('input').type('{enter}')\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('x-model.blur syncs value before form submit handler runs',\n    html`\n    <div x-data=\"{ value: '', capturedValue: '' }\">\n        <form @submit.prevent=\"capturedValue = value\">\n            <input x-model.blur=\"value\" type=\"text\">\n        </form>\n        <span id=\"captured\" x-text=\"capturedValue\"></span>\n    </div>\n    `,\n    ({ get }) => {\n        get('input').type('hello')\n        get('#captured').should(haveText(''))\n        // Submit the form without blurring the input first\n        get('form').then(([form]) => form.requestSubmit())\n        get('#captured').should(haveText('hello'))\n    }\n)\n\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-modelable.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('can expose data for x-model binding',\n    html`\n        <div x-data=\"{ outer: 'foo' }\">\n            <div x-data=\"{ inner: 'bar' }\" x-modelable=\"inner\" x-model=\"outer\">\n                <h1 x-text=\"outer\"></h1>\n                <h2 x-text=\"inner\"></h2>\n\n                <button @click=\"inner = 'bob'\" id=\"1\">change inner</button>\n                <button @click=\"outer = 'lob'\" id=\"2\">change outer</button>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('bob'))\n        get('#2').click()\n        get('h1').should(haveText('lob'))\n        get('h2').should(haveText('lob'))\n    }\n)\n\ntest('x-modelable works when inside x-bind and x-model is outside',\n    html`\n        <div x-data=\"{ outer: 'foo', thing: {\n            ['x-modelable']: 'inner',\n        } }\">\n            <div x-data=\"{ inner: 'bar' }\" x-bind=\"thing\" x-model=\"outer\">\n                <h1 x-text=\"outer\"></h1>\n                <h2 x-text=\"inner\"></h2>\n\n                <button @click=\"inner = 'bob'\" id=\"1\">change inner</button>\n                <button @click=\"outer = 'lob'\" id=\"2\">change outer</button>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('bob'))\n        get('#2').click()\n        get('h1').should(haveText('lob'))\n        get('h2').should(haveText('lob'))\n    }\n)\n\ntest('x-modelable removes the event listener used by corresponding x-model',\n    html`\n        <div x-data=\"{ outer: 'foo' }\">\n            <div x-data=\"{ inner: 'bar' }\" x-modelable=\"inner\" x-model=\"outer\">\n                <h1 x-text=\"outer\"></h1>\n                <h2 x-text=\"inner\"></h2>\n                <button id=\"1\" @click=\"$dispatch('input', 'baz')\"></button>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n    }\n)\n\ntest('x-modelable works with .debounce modifier',\n    html`\n        <div x-data=\"{ outer: 'foo' }\">\n            <div x-data=\"{ inner: 'bar' }\" x-modelable=\"inner\" x-model.debounce=\"outer\">\n                <h1 x-text=\"outer\"></h1>\n                <h2 x-text=\"inner\"></h2>\n\n                <button @click=\"inner = 'bob'\" id=\"1\">change inner</button>\n                <button @click=\"inner = 'lob'\" id=\"2\">change inner</button>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('bob'))\n        get('#2').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('lob'))\n    }\n)\n\ntest('x-modelable works with .throttle modifier',\n    html`\n        <div x-data=\"{ outer: 'foo' }\">\n            <div x-data=\"{ inner: 'bar' }\" x-modelable=\"inner\" x-model.throttle=\"outer\">\n                <h1 x-text=\"outer\"></h1>\n                <h2 x-text=\"inner\"></h2>\n\n                <button @click=\"inner = 'bob'\" id=\"1\">change inner</button>\n                <button @click=\"inner = 'lob'\" id=\"2\">change inner</button>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('bob'))\n        get('#2').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('lob'))\n    }\n)\n\ntest('works when inside x-teleport',\n    html`\n        <div x-data=\"{ outer: 'foo' }\">\n            <template x-teleport=\"body\">\n                <div x-data=\"{ inner: 'bar' }\" x-modelable=\"inner\" x-model=\"outer\">\n                    <h1 x-text=\"outer\"></h1>\n                    <h2 x-text=\"inner\"></h2>\n\n                    <button @click=\"inner = 'bob'\" id=\"1\">change inner</button>\n                    <button @click=\"outer = 'lob'\" id=\"2\">change outer</button>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('bob'))\n        get('#2').click()\n        get('h1').should(haveText('lob'))\n        get('h2').should(haveText('lob'))\n    }\n)\n\ntest('works when inside x-teleport when targeting parent',\n    html`\n        <div x-data=\"{ value: 'foo' }\">\n            <h2 x-text=\"value\"></h2>\n\n            <template x-teleport=\"body\">\n                <div x-data=\"{ value: 'bar' }\" x-modelable=\"value\" x-model.parent=\"value\">\n                    <h1 x-text=\"value\"></h1>\n\n                    <button @click=\"value = 'bob'\" id=\"1\">change to bob</button>\n                    <button @click=\"value = 'lob'\" id=\"2\">change to lob</button>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('h2').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('bob'))\n        get('#2').click()\n        get('h1').should(haveText('lob'))\n        get('h2').should(haveText('lob'))\n    }\n)\n\ntest('works when inside x-teleport with x-data directly on it',\n    html`\n        <div>\n            <template x-teleport=\"body\" x-data=\"{ value: 'foo' }\">\n                <div x-data=\"{ value: 'bar' }\" x-modelable=\"value\" x-model.parent=\"value\">\n                    <h1 x-text=\"value\"></h1>\n\n                    <button @click=\"value = 'bob'\" id=\"1\">change to bob</button>\n                    <button @click=\"value = 'lob'\" id=\"2\">change to lob</button>\n                </div>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('foo'))\n        get('#1').click()\n        get('h1').should(haveText('bob'))\n        get('#2').click()\n        get('h1').should(haveText('lob'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-on.spec.js",
    "content": "import { beChecked, contain, notBeChecked, haveAttribute, haveData, haveText, test, beVisible, notBeVisible, html } from '../../utils'\n\ntest('data modified in event listener updates affected attribute bindings',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button x-on:click=\"foo = 'baz'\"></button>\n\n            <span x-bind:foo=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('foo', 'bar'))\n        get('button').click()\n        get('span').should(haveAttribute('foo', 'baz'))\n    }\n)\n\ntest('can call a method without parenthesis',\n    html`\n        <div x-data=\"{ foo: 'bar', baz($event) { this.foo = $event.target.dataset.bob } }\">\n            <button x-on:click=\"baz\" data-bob=\"lob\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('lob'))\n    }\n)\n\ntest('event object is not passed if other params are present',\n    html`\n        <div x-data=\"{ foo: 'bar', baz(word) { this.foo = word } }\">\n            <button x-on:click=\"baz('foo')\" data-bob=\"lob\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('foo'))\n    }\n)\n\ntest('nested data modified in event listener updates affected attribute bindings',\n    html`\n        <div x-data=\"{ nested: { foo: 'bar' } }\">\n            <button x-on:click=\"nested.foo = 'baz'\"></button>\n\n            <span x-bind:foo=\"nested.foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('foo', 'bar'))\n        get('button').click()\n        get('span').should(haveAttribute('foo', 'baz'))\n    }\n)\n\ntest('.passive modifier should disable e.preventDefault()',\n    html`\n        <div x-data=\"{ defaultPrevented: null }\">\n            <button\n                x-on:mousedown.passive=\"\n                    $event.preventDefault();\n                    defaultPrevented = $event.defaultPrevented;\n                \"\n            >\n                <span></span>\n            </button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('div').should(haveData('defaultPrevented', false))\n    }\n)\n\ntest('.passive.false modifier should enable e.preventDefault()',\n    html`\n        <div\n            x-data=\"{ defaultPrevented: null }\"\n            x-on:touchmove.passive.false=\"\n                $event.preventDefault();\n                defaultPrevented = $event.defaultPrevented;\n            \">\n            <br>\n        </div>\n    `,\n    ({ get }) => {\n        get('div').trigger('touchmove')\n        get('div').should(haveData('defaultPrevented', true))\n    }\n)\n\ntest('.stop modifier',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button x-on:click=\"foo = 'baz'\">\n                <h1>h1</h1>\n                <h2 @click.stop>h2</h2>\n            </button>\n        </div>\n    `,\n    ({ get }) => {\n        get('div').should(haveData('foo', 'bar'))\n        get('h2').click()\n        get('div').should(haveData('foo', 'bar'))\n        get('h1').click()\n        get('div').should(haveData('foo', 'baz'))\n    }\n)\n\n\ntest('.stop modifier with a .throttle',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button x-on:click=\"foo = 'baz'\">\n                <h1>h1</h1>\n                <h2 @click.stop.throttle>h2</h2>\n            </button>\n        </div>\n    `,\n    ({ get }) => {\n        get('div').should(haveData('foo', 'bar'))\n        get('h2').click()\n        get('h2').click()\n        get('div').should(haveData('foo', 'bar'))\n        get('h1').click()\n        get('div').should(haveData('foo', 'baz'))\n    }\n)\n\ntest('.capture modifier',\n    html`\n        <div x-data=\"{ foo: 'bar', count: 0 }\">\n            <button @click.capture=\"count = count + 1; foo = 'baz'\">\n                <h1>h1</h1>\n                <h2 @click=\"foo = 'bob'\">h2</h2>\n            </button>\n        </div>\n    `,\n    ({ get }) => {\n        get('div').should(haveData('foo', 'bar'))\n        get('h2').click()\n        get('div').should(haveData('foo', 'bob'))\n        get('div').should(haveData('count', 1))\n    }\n)\n\ntest('.capture modifier with @keyup',\n    html`\n        <div x-data=\"{ foo: 'bar', count: 0 }\">\n            <span @keyup.capture=\"count = count + 1; foo = 'span'\">\n                <input type=\"text\" @keyup=\"foo = 'input'\">\n            </span>\n        </div>\n    `,\n    ({ get }) => {\n        get('div').should(haveData('foo', 'bar'))\n        get('input').type('f')\n        get('div').should(haveData('foo', 'input'))\n        get('div').should(haveData('count', 1))\n    }\n)\n\ntest('.capture modifier with @keyup and specified key',\n    html`\n        <div x-data=\"{ foo: 'bar', count: 0 }\">\n            <span @keyup.enter.capture=\"count = count + 1; foo = 'span'\">\n                <input type=\"text\" @keyup.enter=\"foo = 'input'\">\n            </span>\n        </div>\n    `,\n    ({ get }) => {\n        get('div').should(haveData('foo', 'bar'))\n        get('input').type('{enter}')\n        get('div').should(haveData('foo', 'input'))\n        get('div').should(haveData('count', 1))\n    }\n)\n\ntest('.self modifier',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <h1 x-on:click.self=\"foo = 'baz'\" id=\"selfTarget\">\n                content\n                <button>click</button>\n                content\n            </h1>\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('bar'))\n        get('h1').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest(\n    \".self.once modifiers\",\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <h1 x-on:click.self.once=\"foo = 'baz'\" id=\"selfTarget\">\n                content\n                <button>click</button>\n                content\n            </h1>\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get(\"span\").should(haveText(\"bar\"));\n        get(\"button\").click();\n        get(\"span\").should(haveText(\"bar\"));\n        get(\"h1\").click();\n        get(\"span\").should(haveText(\"baz\"));\n    }\n);\n\ntest('.prevent modifier',\n    html`\n        <div x-data=\"{}\">\n            <input type=\"checkbox\" x-on:click.prevent>\n        </div>\n    `,\n    ({ get }) => {\n        get('input').check()\n        get('input').should(notBeChecked())\n    }\n)\n\ntest('.prevent modifier with a .debounce',\n    html`\n        <div x-data=\"{}\">\n            <input type=\"checkbox\" x-on:click.prevent.debounce>\n        </div>\n    `,\n    ({ get }) => {\n        get('input').check()\n        get('input').check()\n        get('input').should(notBeChecked())\n    }\n)\n\ntest('.window modifier',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <div x-on:click.window=\"foo = 'baz'\"></div>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('span').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('expressions can start with if',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button @click=\"if (foo === 'bar') foo = 'baz'\">click</button>\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('unbind global event handler when element is removed',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <div x-on:click.window=\"count++\" x-ref=\"rmMe\"></div>\n\n            <button @click=\"$refs.rmMe.remove()\">click</button>\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('span').click()\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('.document modifier',\n    html`\n       <div x-data=\"{ foo: 'bar' }\">\n            <div x-on:click.document=\"foo = 'baz'\"></div>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('span').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('.once modifier',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <button x-on:click.once=\"count = count+1\"></button>\n\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('button').click()\n        get('span').should(haveText('1'))\n        get('button').click()\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('.once modifier with @keyup',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <input type=\"text\" x-on:keyup.once=\"count = count+1\">\n\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('input').type('f')\n        get('span').should(haveText('1'))\n        get('input').type('o')\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('.once modifier with @keyup and specified key',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <input type=\"text\" x-on:keyup.enter.once=\"count = count+1\">\n\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('input').type('f')\n        get('span').should(haveText('0'))\n        get('input').type('{enter}')\n        get('span').should(haveText('1'))\n        get('input').type('{enter}')\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('.debounce modifier',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <input x-on:input.debounce=\"count = count+1\">\n\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('input').type('f')\n        get('span').should(haveText('1'))\n        get('input').type('ffffffffffff')\n        get('span').should(haveText('2'))\n    }\n)\n\ntest('.throttle modifier',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <input x-on:keyup.throttle.504ms=\"count = count+1\">\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('input').type('f')\n        get('span').should(haveText('1'))\n        get('input').type('ffffffffffff')\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('keydown modifiers',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <input type=\"text\"\n                x-on:keydown=\"count++\"\n                x-on:keydown.enter=\"count++\"\n                x-on:keydown.space=\"count++\"\n                x-on:keydown.up=\"count++\"\n                x-on:keydown.down=\"count++\"\n                x-on:keydown.right=\"count++\"\n                x-on:keydown.left=\"count++\"\n                x-on:keydown.cmd=\"count++\"\n                x-on:keydown.meta=\"count++\"\n                x-on:keydown.escape=\"count++\"\n                x-on:keydown.esc=\"count++\"\n                x-on:keydown.ctrl=\"count++\"\n                x-on:keydown.slash=\"count++\"\n                x-on:keydown.period=\"count++\"\n                x-on:keydown.equal=\"count++\"\n                x-on:keydown.comma=\"count++\"\n            >\n\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('input').type('f')\n        get('span').should(haveText('1'))\n        get('input').type('{enter}')\n        get('span').should(haveText('3'))\n        get('input').type(' ')\n        get('span').should(haveText('5'))\n        get('input').type('{leftarrow}')\n        get('span').should(haveText('7'))\n        get('input').type('{rightarrow}')\n        get('span').should(haveText('9'))\n        get('input').type('{uparrow}')\n        get('span').should(haveText('11'))\n        get('input').type('{downarrow}')\n        get('span').should(haveText('13'))\n        get('input').type('{meta}')\n        get('span').should(haveText('16'))\n        get('input').type('{esc}')\n        get('span').should(haveText('19'))\n        get('input').type('{ctrl}')\n        get('span').should(haveText('21'))\n        get('input').type('/')\n        get('span').should(haveText('23'))\n        get('input').type('=')\n        get('span').should(haveText('25'))\n        get('input').type('.')\n        get('span').should(haveText('27'))\n        get('input').type(',')\n        get('span').should(haveText('29'))\n    }\n)\n\ntest('discerns between space minus underscore',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <input id=\"space\" type=\"text\" x-on:keydown.space=\"count++\" />\n            <input id=\"minus\" type=\"text\" x-on:keydown.-=\"count++\" />\n            <input id=\"underscore\" type=\"text\" x-on:keydown._=\"count++\" />\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({get}) => {\n        get('span').should(haveText('0'))\n        get('#space').type(' ')\n        get('span').should(haveText('1'))\n        get('#space').type('-')\n        get('span').should(haveText('1'))\n        get('#minus').type('-')\n        get('span').should(haveText('2'))\n        get('#minus').type(' ')\n        get('span').should(haveText('2'))\n        get('#underscore').type('_')\n        get('span').should(haveText('3'))\n        get('#underscore').type(' ')\n        get('span').should(haveText('3'))\n    })\n\ntest('keydown combo modifiers',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <input type=\"text\" x-on:keydown.cmd.enter=\"count++\">\n\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('input').type('f')\n        get('span').should(haveText('0'))\n        get('input').type('{cmd}{enter}')\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('keydown with specified key and stop modifier only stops for specified key',\n    html`\n        <div x-data=\"{ count: 0 }\">\n            <article x-on:keydown=\"count++\">\n                <input type=\"text\" x-on:keydown.enter.stop>\n            </article>\n\n            <span x-text=\"count\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('input').type('f')\n        get('span').should(haveText('1'))\n        get('input').type('{enter}')\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('@click.away',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <h1 @click.away=\"foo = 'baz'\">h1</h1>\n\n            <h2>h2</h2>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('h1').click()\n        get('span').should(haveText('bar'))\n        get('h2').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('@click.away.once works after clicking inside',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <h1 @click.away.once=\"foo = 'baz'\">h1</h1>\n\n            <h2>h2</h2>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('h1').click()\n        get('span').should(haveText('bar'))\n        get('h2').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('@click.away with x-show (prevent race condition)',\n    html`\n        <div x-data=\"{ show: false }\">\n            <button @click=\"show = true\">Show</button>\n\n            <h1 x-show=\"show\" @click.away=\"show = false\">h1</h1>\n\n            <h2>h2</h2>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(notBeVisible())\n        get('button').click()\n        get('h1').should(beVisible())\n    }\n)\n\ntest('event with colon',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <div x-on:my:event.document=\"foo = 'baz'\"></div>\n\n            <button @click=\"document.dispatchEvent(new CustomEvent('my:event', { bubbles: true }))\">click</button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('event instance can be passed to method reference',\n    html`\n        <div x-data=\"{ foo: 'bar', changeFoo(e) { this.foo = e.target.id } }\">\n            <button x-on:click=\"changeFoo\" id=\"baz\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('.camel modifier correctly binds event listener',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-on:event-name.camel=\"foo = 'baz'\">\n            <button x-on:click=\"$dispatch('eventName')\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('.camel modifier correctly binds event listener with namespace',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-on:ns:event-name.camel=\"foo = 'baz'\">\n            <button x-on:click=\"$dispatch('ns:eventName')\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('.dot modifier correctly binds event listener',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-on:event-name.dot=\"foo = 'baz'\">\n            <button x-on:click=\"$dispatch('event.name')\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\ntest('underscores are allowed in event names',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-on:event_name=\"foo = 'baz'\">\n            <button x-on:click=\"$dispatch('event_name')\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('.dot modifier correctly binds event listener with namespace',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-on:ns:event-name.dot=\"foo = 'baz'\">\n            <button x-on:click=\"$dispatch('ns:event.name')\"></button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('handles await in handlers with invalid right hand expressions',\n    html`\n        <div x-data=\"{ text: 'original' }\">\n            <button @click=\"let value = 'new string'; text = await Promise.resolve(value)\"></button>\n            <span x-text=\"text\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('original'))\n        get('button').click()\n        get('span').should(haveText('new string'))\n    }\n)\n\ntest(\n    \"handles system modifier keys on key events\",\n    html`\n        <div x-data=\"{ keys: {\n            shift: false,\n            ctrl: false,\n            meta: false,\n            alt: false,\n            cmd: false\n        } }\">\n            <input type=\"text\"\n                @keydown.capture=\"Object.keys(keys).forEach(key => keys[key] = false)\"\n                @keydown.meta.space=\"keys.meta = true\"\n                @keydown.ctrl.space=\"keys.ctrl = true\"\n                @keydown.shift.space=\"keys.shift = true\"\n                @keydown.alt.space=\"keys.alt = true\"\n                @keydown.cmd.space=\"keys.cmd = true\"\n            />\n            <template x-for=\"key in Object.keys(keys)\" :key=\"key\">\n                <input type=\"checkbox\" :name=\"key\" x-model=\"keys[key]\">\n            </template>\n        </div>\n    `,({ get }) => {\n        get(\"input[name=shift]\").as('shift').should(notBeChecked());\n        get(\"input[name=ctrl]\").as('ctrl').should(notBeChecked());\n        get(\"input[name=meta]\").as('meta').should(notBeChecked());\n        get(\"input[name=alt]\").as('alt').should(notBeChecked());\n        get(\"input[name=cmd]\").as('cmd').should(notBeChecked());\n        get(\"input[type=text]\").as('input').trigger(\"keydown\", { key: 'space', shiftKey: true });\n        get('@shift').should(beChecked());\n        get(\"@input\").trigger(\"keydown\", { key: 'space', ctrlKey: true });\n        get(\"@shift\").should(notBeChecked());\n        get(\"@ctrl\").should(beChecked());\n        get(\"@input\").trigger(\"keydown\", { key: 'space', metaKey: true });\n        get(\"@ctrl\").should(notBeChecked());\n        get(\"@meta\").should(beChecked());\n        get(\"@cmd\").should(beChecked());\n        get(\"@input\").trigger(\"keydown\", { key: 'space', altKey: true });\n        get(\"@meta\").should(notBeChecked());\n        get(\"@cmd\").should(notBeChecked());\n        get(\"@alt\").should(beChecked());\n        get(\"@input\").trigger(\"keydown\", { key: 'space' });\n        get(\"@alt\").should(notBeChecked());\n        get(\"@input\").trigger(\"keydown\", { key: 'space',\n        ctrlKey: true, shiftKey: true, metaKey: true, altKey: true });\n        get(\"input[name=shift]\").as(\"shift\").should(beChecked());\n        get(\"input[name=ctrl]\").as(\"ctrl\").should(beChecked());\n        get(\"input[name=meta]\").as(\"meta\").should(beChecked());\n        get(\"input[name=alt]\").as(\"alt\").should(beChecked());\n        get(\"input[name=cmd]\").as(\"cmd\").should(beChecked());\n    }\n);\n\ntest(\n    \"handles system modifier keys on mouse events\",\n    html`\n        <div x-data=\"{ keys: {\n            shift: false,\n            ctrl: false,\n            meta: false,\n            alt: false,\n            cmd: false\n        } }\">\n            <button type=button\n                @click.capture=\"Object.keys(keys).forEach(key => keys[key] = false)\"\n                @click.shift=\"keys.shift = true\"\n                @click.ctrl=\"keys.ctrl = true\"\n                @click.meta=\"keys.meta = true\"\n                @click.alt=\"keys.alt = true\"\n                @click.cmd=\"keys.cmd = true\">\n                    change\n            </button>\n            <template x-for=\"key in Object.keys(keys)\" :key=\"key\">\n                <input type=\"checkbox\" :name=\"key\" x-model=\"keys[key]\">\n            </template>\n        </div>\n    `,({ get }) => {\n        get(\"input[name=shift]\").as('shift').should(notBeChecked());\n        get(\"input[name=ctrl]\").as('ctrl').should(notBeChecked());\n        get(\"input[name=meta]\").as('meta').should(notBeChecked());\n        get(\"input[name=alt]\").as('alt').should(notBeChecked());\n        get(\"input[name=cmd]\").as('cmd').should(notBeChecked());\n        get(\"button\").as('button').trigger(\"click\", { shiftKey: true });\n        get('@shift').should(beChecked());\n        get(\"@button\").trigger(\"click\", { ctrlKey: true });\n        get(\"@shift\").should(notBeChecked());\n        get(\"@ctrl\").should(beChecked());\n        get(\"@button\").trigger(\"click\", { metaKey: true });\n        get(\"@ctrl\").should(notBeChecked());\n        get(\"@meta\").should(beChecked());\n        get(\"@cmd\").should(beChecked());\n        get(\"@button\").trigger(\"click\", { altKey: true });\n        get(\"@meta\").should(notBeChecked());\n        get(\"@cmd\").should(notBeChecked());\n        get(\"@alt\").should(beChecked());\n        get(\"@button\").trigger(\"click\", {});\n        get(\"@alt\").should(notBeChecked());\n        get(\"@button\").trigger(\"click\", { ctrlKey: true, shiftKey: true, metaKey: true, altKey: true });\n        get(\"@shift\").as(\"shift\").should(beChecked());\n        get(\"@ctrl\").as(\"ctrl\").should(beChecked());\n        get(\"@meta\").as(\"meta\").should(beChecked());\n        get(\"@alt\").as(\"alt\").should(beChecked());\n        get(\"@cmd\").as(\"cmd\").should(beChecked());\n    }\n);\n\ntest(\n    \"handles all mouse events with modifiers\",\n    html`\n        <div x-data=\"{ keys: {\n            shift: false,\n            ctrl: false,\n            meta: false,\n            alt: false,\n            cmd: false\n        } }\">\n            <button type=button\n                @click.capture=\"Object.keys(keys).forEach(key => keys[key] = false)\"\n                @contextmenu.prevent.shift=\"keys.shift = true\"\n                @auxclick.ctrl=\"keys.ctrl = true\"\n                @dblclick.meta=\"keys.meta = true\"\n                @mouseenter.alt=\"keys.alt = true\"\n                @mousemove.cmd=\"keys.cmd = true\">\n                    change\n            </button>\n            <template x-for=\"key in Object.keys(keys)\" :key=\"key\">\n                <input type=\"checkbox\" :name=\"key\" x-model=\"keys[key]\">\n            </template>\n        </div>\n    `,({ get }) => {\n        get(\"input[name=shift]\").as('shift').should(notBeChecked());\n        get(\"input[name=ctrl]\").as('ctrl').should(notBeChecked());\n        get(\"input[name=meta]\").as('meta').should(notBeChecked());\n        get(\"input[name=alt]\").as('alt').should(notBeChecked());\n        get(\"input[name=cmd]\").as('cmd').should(notBeChecked());\n        get(\"button\").as('button').trigger(\"contextmenu\", { shiftKey: true });\n        get('@shift').should(beChecked());\n        get(\"@button\").trigger(\"click\");\n        get(\"@button\").trigger(\"auxclick\", { ctrlKey: true });\n        get(\"@shift\").should(notBeChecked());\n        get(\"@ctrl\").should(beChecked());\n        get(\"@button\").trigger(\"click\");\n        get(\"@button\").trigger(\"dblclick\", { metaKey: true });\n        get(\"@ctrl\").should(notBeChecked());\n        get(\"@meta\").should(beChecked());\n        get(\"@button\").trigger(\"click\");\n        get(\"@button\").trigger(\"mouseenter\", { altKey: true });\n        get(\"@meta\").should(notBeChecked());\n        get(\"@alt\").should(beChecked());\n        get(\"@button\").trigger(\"click\");\n        get(\"@button\").trigger(\"mousemove\", { metaKey: true });\n        get(\"@alt\").should(notBeChecked());\n        get(\"@cmd\").should(beChecked());\n    }\n);\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-show.spec.js",
    "content": "import { beHidden, beVisible, haveAttribute, html, test } from '../../utils'\n\ntest('x-show toggles display: none; with no other style attributes',\n    html`\n        <div x-data=\"{ show: true }\">\n            <span x-show=\"show\">thing</span>\n\n            <button x-on:click=\"show = false\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('button').click()\n        get('span').should(beHidden())\n    }\n)\n\ntest('x-show (with true default) toggles display: none; even if it exists with the page load',\n    html`\n        <div x-data=\"{ show: true }\">\n            <span x-show=\"show\" style=\"display: none;\">thing</span>\n\n            <button x-on:click=\"show = false\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('button').click()\n        get('span').should(beHidden())\n    }\n)\n\ntest('x-show (with false default) toggles display: none; even if it exists with the page load',\n    html`\n        <div x-data=\"{ show: false }\">\n            <span x-show=\"show\" style=\"display: none;\">thing</span>\n\n            <button x-on:click=\"show = true\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beHidden())\n        get('button').click()\n        get('span').should(beVisible())\n    }\n)\n\ntest('x-show toggles display: none; with other style attributes',\n    html`\n        <div x-data=\"{ show: true }\">\n            <span x-show=\"show\" style=\"color: blue;\">thing</span>\n\n            <button x-on:click=\"show = false\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('span').should(haveAttribute('style', 'color: blue;'))\n        get('button').click()\n        get('span').should(beHidden())\n        get('span').should(haveAttribute('style', 'color: blue; display: none;'))\n    }\n)\n\ntest('x-show waits for transitions within it to finish before hiding an elements',\n    html`\n        <style>\n            .transition { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n            .duration-100 { transition-duration: 100ms; }\n        </style>\n        <div x-data=\"{ show: true }\">\n            <span x-show=\"show\">\n                <h1 x-show=\"show\" x-transition:leave=\"transition duration-100\">thing</h1>\n            </span>\n\n            <button x-on:click=\"show = false\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('button').click()\n        get('span').should(beVisible())\n        get('h1').should(beHidden())\n        get('span').should(beHidden())\n    }\n)\n\ntest('x-show does NOT wait for transitions to finish if .immediate is present',\n    html`\n        <style>\n            .transition { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n            .duration-100 { transition-duration: 100ms; }\n        </style>\n        <div x-data=\"{ show: true }\">\n            <span x-show.immediate=\"show\">\n                <h1 x-show=\"show\" x-transition:leave=\"transition duration-100\">thing</h1>\n            </span>\n\n            <button x-on:click=\"show = false\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('button').click()\n        get('span').should(beHidden())\n    }\n)\n\ntest('x-show with x-bind:style inside x-for works correctly',\n    html`\n        <div x-data=\"{items: [{ cleared: false }, { cleared: false }]}\">\n            <template x-for=\"(item, index) in items\" :key=\"index\">\n                <button x-show=\"! item.cleared\"\n                    x-bind:style=\"'background: #999'\"\n                    @click=\"item.cleared = true\"\n                >\n                </button>\n            </template>\n        </div>\n    `,\n    ({ get }) => {\n        get('button:nth-of-type(1)').should(beVisible())\n        get('button:nth-of-type(1)').should(haveAttribute('style', 'background: #999'))\n        get('button:nth-of-type(2)').should(beVisible())\n        get('button:nth-of-type(2)').should(haveAttribute('style', 'background: #999'))\n        get('button:nth-of-type(1)').click()\n        get('button:nth-of-type(1)').should(beHidden())\n        get('button:nth-of-type(1)').should(haveAttribute('style', 'background: rgb(153, 153, 153); display: none;'))\n        get('button:nth-of-type(2)').should(beVisible())\n        get('button:nth-of-type(2)').should(haveAttribute('style', 'background: #999'))\n    }\n)\n\ntest('x-show takes precedence over style bindings for display property',\n    html`\n        <div x-data=\"{ show: false }\">\n            <span x-show=\"show\" :style=\"'color: red;'\">thing</span>\n            <span :style=\"'color: red;'\" x-show=\"show\">thing</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span:nth-of-type(1)').should(haveAttribute('style', 'color: red; display: none;'))\n        get('span:nth-of-type(2)').should(haveAttribute('style', 'color: red; display: none;'))\n    }\n)\n\ntest('x-show executes consecutive state changes in correct order',\n    html`\n        <div\n            x-data=\"{ isEnabled: false }\"\n            x-init=\"$watch('isEnabled', () => { if (isEnabled) isEnabled = false })\"\n        >\n            <button id=\"enable\" x-show=\"!isEnabled\" @click=\"isEnabled = true\"></button>\n            <button id=\"disable\" x-show=\"isEnabled\" @click=\"isEnabled = false\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button#enable').should(beVisible())\n        get('button#disable').should(beHidden())\n    }\n)\n\ntest('x-show toggles display: none; with the !important property when using the .important modifier while respecting other style attributes',\n    html`\n        <div x-data=\"{ show: true }\">\n            <span x-show.important=\"show\" style=\"color: blue;\">thing</span>\n\n            <button x-on:click=\"show = false\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('span').should(haveAttribute('style', 'color: blue;'))\n        get('button').click()\n        get('span').should(beHidden())\n        get('span').should(haveAttribute('style', 'color: blue; display: none !important;'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-teleport.spec.js",
    "content": "import { exist, haveText, html, notExist, test } from '../../utils'\n\ntest('can use a x-teleport',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport=\"#b\">\n                <span x-text=\"count\"></span>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b span').should(haveText('1'))\n        get('button').click()\n        get('#b span').should(haveText('2'))\n    },\n)\n\ntest('can use a x-teleport.append',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport.append=\"#b\">\n                <span x-text=\"count\"></span>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b + span').should(haveText('1'))\n        get('button').click()\n        get('#b + span').should(haveText('2'))\n    },\n)\n\ntest('can use a x-teleport.prepend',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport.prepend=\"#b\">\n                <span x-text=\"count\"></span>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#a + span').should(haveText('1'))\n        get('button').click()\n        get('#a + span').should(haveText('2'))\n    },\n)\n\ntest('can teleport multiple',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport=\"#b\">\n                <h1 x-text=\"count\"></h1>\n            </template>\n\n            <template x-teleport=\"#b\">\n                <h2 x-text=\"count + 1\"></h2>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b h1').should(haveText('1'))\n        get('#b h2').should(haveText('2'))\n        get('button').click()\n        get('#b h1').should(haveText('2'))\n        get('#b h2').should(haveText('3'))\n    },\n)\n\ntest('teleported targets forward events to teleport source if listeners are attached',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport=\"#b\" @click=\"count++\">\n                <h1 x-text=\"count\"></h1>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b h1').should(haveText('1'))\n        get('button').click()\n        get('#b h1').should(haveText('2'))\n        get('h1').click()\n        get('#b h1').should(haveText('3'))\n    },\n)\n\ntest('removing teleport source removes teleported target',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"$refs.template.remove()\">Remove</button>\n\n            <template x-teleport=\"#b\" @click=\"count++\" x-ref=\"template\">\n                <h1 x-text=\"count\"></h1>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b h1').should(exist())\n        get('button').click()\n        get('#b h1').should(notExist())\n    },\n)\n\ntest(\n    'immediately cleans up the clone when the original template is removed',\n    [\n        html`\n            <div x-data=\"{ show: true, shown: 'original' }\">\n                <span x-text=\"shown\"></span>\n                <template x-if=\"show\">\n                    <div>\n                    <template x-teleport=\"#target\">\n                        <button x-data=\"{ \n                            init() { this.shown = 'cloned' }, \n                            destroy() { this.shown = 'destroyed' }\n                        }\" @click=\"show = false\">remove</button>\n                    </template>\n                    </div>\n                </template>\n                <section id=\"target\"></section>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get('section').should(haveText('remove'));\n        get(\"button\").should(exist());\n        get('span').should(haveText('cloned'));\n        get('button').click();\n        get('section').should(haveText(''));\n        get('button').should(notExist());\n        get('span').should(haveText('destroyed'));\n    }\n);\n\ntest('$refs inside teleport can be accessed outside',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"$refs.count.remove()\">Remove</button>\n\n            <template x-teleport=\"#b\">\n                <h1 x-text=\"count\" x-ref=\"count\"></h1>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b h1').should(exist())\n        get('button').click()\n        get('#b h1').should(notExist())\n    },\n)\n\ntest('$root is accessed outside teleport',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <template x-teleport=\"#b\">\n                <h1 x-text=\"$root.id\"></h1>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b h1').should(exist())\n        get('#b h1').should(haveText('a'))\n    },\n)\n\ntest('$id honors x-id outside teleport',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\" x-id=\"['foo']\">\n            <h1 x-text=\"$id('foo')\"></h1>\n\n            <template x-teleport=\"#b\">\n                <h1 x-text=\"$id('foo')\"></h1>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b h1').should(haveText('foo-1'))\n    },\n)\n\ntest('conditionally added elements get initialised inside teleport',\n    [html`\n        <div x-data=\"{ show: false }\" id=\"a\">\n            <button @click=\"show = true\">Show Teleport Content</button>\n\n            <template x-teleport=\"#b\">\n                <div>\n                    <template x-if=\"show\" >\n                        <p x-text=\"'Teleport content initialised'\">Teleport content waiting</p>\n                    </template>\n                </div>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }) => {\n        get('#b p').should('not.exist')\n        get('button').click()\n        get('#b p').should('exist').and('have.text', 'Teleport content initialised')\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-text.spec.js",
    "content": "import { haveText, html, notHaveText, test } from '../../utils'\n\ntest('sets text on init',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => { get('span').should(haveText('bar')) }\n)\n\ntest('sets text on update',\n    html`\n        <div x-data=\"{ foo: '' }\">\n            <button x-on:click=\"foo = 'bar'\">Show \"bar\"</button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(notHaveText('bar'))\n        get('button').click()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('sets text on SVG elements',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <svg viewBox=\"0 0 240 80\">\n                <text x=\"30\" y=\"50\" x-text=\"foo\"></text>\n            </svg>\n        </div>\n    `,\n    ({ get }) => get('svg text').should(haveText('bar'))\n)\n"
  },
  {
    "path": "tests/cypress/integration/directives/x-transition.spec.js",
    "content": "import { beHidden, beVisible, haveClasses, haveComputedStyle, html, notBeVisible, notHaveClasses, notHaveComputedStyle, test } from '../../utils'\n\ntest('transition in',\n    html`\n        <style>\n            .transition { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n            .duration-100 { transition-duration: 100ms; }\n        </style>\n        <div x-data=\"{ show: false }\">\n            <button x-on:click=\"show = ! show\"></button>\n\n            <span\n                x-show=\"show\"\n                x-transition:enter=\"transition duration-100 enter\"\n                x-transition:enter-start=\"enter-start\"\n                x-transition:enter-end=\"enter-end\"\n            >thing</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beHidden())\n        get('span').should(notHaveClasses(['enter', 'enter-start', 'enter-end']))\n        get('button').click()\n        get('span').should(beVisible())\n        get('span').should(notHaveClasses(['enter-start']))\n        get('span').should(haveClasses(['enter', 'enter-end']))\n    }\n)\n\ntest('transition out',\n    html`\n        <style>\n            .transition { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n            .duration-100 { transition-duration: 100ms; }\n        </style>\n        <div x-data=\"{ show: true }\">\n            <button x-on:click=\"show = ! show\"></button>\n\n            <span\n                x-show=\"show\"\n                x-transition:leave=\"transition duration-100 leave\"\n                x-transition:leave-start=\"leave-start\"\n                x-transition:leave-end=\"leave-end\"\n            >thing</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beVisible())\n        get('span').should(notHaveClasses(['leave', 'leave-start', 'leave-end']))\n        get('button').click()\n        get('span').should(beVisible())\n        get('span').should(notHaveClasses(['leave-start']))\n        get('span').should(haveClasses(['leave', 'leave-end']))\n        get('span').should(beHidden())\n    }\n)\n\ntest('transition:enter in nested x-show visually runs',\n    html`\n        <style>\n            .transition { transition: opacity 1s ease; }\n            .opacity-0 {opacity: 0}\n            .opacity-1 {opacity: 1}\n        </style>\n        <div x-data=\"{ show: false }\">\n            <span x-show=\"show\">\n                <h1 x-show=\"show\"\n                    x-transition:enter=\"transition\"\n                    x-transition:enter-start=\"opacity-0\"\n                    x-transition:enter-end=\"opacity-1\">thing</h1>\n            </span>\n\n            <button x-on:click=\"show = true\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('span').should(beVisible())\n        get('h1').should(notHaveComputedStyle('opacity', '1')) // We expect a value between 0 and 1\n        get('h1').should(haveComputedStyle('opacity', '1')) // Eventually opacity will be 1\n    }\n)\n\ntest('newlines in transition class string are handled',\n    html`\n        <style>\n            .transition { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n            .duration-100 { transition-duration: 100ms; }\n        </style>\n        <div x-data=\"{ show: false }\">\n            <button x-on:click=\"show = ! show\"></button>\n\n            <span x-show=\"show\" x-transition:enter=\"transition\n                duration-100\">thing</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(beHidden())\n        get('button').click()\n        get('span').should(beVisible())\n        get('span').should(haveClasses(['transition', 'duration-100']))\n    }\n)\n\ntest('transition duration and delay with and without ms syntax',\n    html`\n        <div x-data=\"{ showMs: false, showBlank: false }\">\n\n            <span class=\"ms\"\n                  x-show=\"showMs\"\n                  x-transition.delay.80ms.duration.120ms>ms syntax</span>\n            <span class=\"blank\"\n                  x-show=\"showBlank\"\n                  x-transition.delay.80.duration.120>blank syntax</span>\n\n            <button class=\"ms\"    x-on:click=\"showMs = true\"></button>\n            <button class=\"blank\" x-on:click=\"showBlank = true\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span.ms').should(notBeVisible())\n        get('button.ms').click()\n        get('span.ms').should(notBeVisible()) // Not visible due to delay\n        get('span.ms').should(beVisible())\n        get('span.ms').should(notHaveComputedStyle('opacity', '1')) // We expect a value between 0 and 1\n        get('span.ms').should(haveComputedStyle('opacity', '1')) // Eventually opacity will be 1\n\n        get('span.blank').should(notBeVisible())\n        get('button.blank').click()\n        get('span.blank').should(notBeVisible()) // Not visible due to delay\n        get('span.blank').should(beVisible())\n        get('span.blank').should(notHaveComputedStyle('opacity', '1')) // We expect a value between 0 and 1\n        get('span.blank').should(haveComputedStyle('opacity', '1')) // Eventually opacity will be 1\n    }\n)\n\ntest(\n    'bound x-transition can handle empty string and true values',\n    html`\n        <script>\n            window.transitions = () => {\n                return {\n                    withEmptyString: {\n                        [\"x-transition.opacity\"]: \"\",\n                    },\n                    withBoolean: {\n                        [\"x-transition.opacity\"]: true,\n                    },\n                };\n            };\n        </script>\n        <div x-data=\"transitions()\">\n            <button x-bind=\"withEmptyString\"></button>\n            <span x-bind=\"withBoolean\">thing</span>\n        </div>\n    `,\n    ({ get }) => \n        {\n            get('span').should(beVisible())\n            get('span').should(beVisible())\n        }\n    \n);\n"
  },
  {
    "path": "tests/cypress/integration/entangle.spec.js",
    "content": "import { haveValue, html, test } from '../utils'\n\ntest.skip('can entangle to getter/setter pairs',\n    [html`\n    <div x-data=\"{ outer: 'foo' }\">\n        <input x-model=\"outer\" outer>\n\n        <div x-data=\"{ inner: 'bar' }\" x-init=\"() => {}; Alpine.entangle(\n            {\n                get() { return outer },\n                set(value) { outer = value },\n            },\n            {\n                get() { return inner },\n                set(value) { inner = value },\n            }\n        )\">\n            <input x-model=\"inner\" inner>\n        </div>\n    </div>\n    `],\n    ({ get }) => {\n        get('input[outer]').should(haveValue('foo'))\n        get('input[inner]').should(haveValue('foo'))\n\n        get('input[inner]').type('bar')\n        get('input[inner]').should(haveValue('foobar'))\n        get('input[outer]').should(haveValue('foobar'))\n\n        get('input[outer]').type('baz')\n        get('input[outer]').should(haveValue('foobarbaz'))\n        get('input[inner]').should(haveValue('foobarbaz'))\n    }\n)\n\ntest.skip('can release entanglement',\n    [html`\n        <div x-data=\"{ outer: 'foo' }\">\n            <input x-model=\"outer\" outer>\n\n            <div x-data=\"{ inner: 'bar', release: () => {} }\" x-init=\"() => {}; release = Alpine.entangle(\n                {\n                    get() { return outer },\n                    set(value) { outer = value },\n                },\n                {\n                    get() { return inner },\n                    set(value) { inner = value },\n                }\n            )\">\n                <input x-model=\"inner\" inner>\n\n                <button @click=\"release()\">release</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('input[outer]').should(haveValue('foo'))\n        get('input[inner]').should(haveValue('foo'))\n\n        get('input[inner]').type('bar')\n        get('input[inner]').should(haveValue('foobar'))\n        get('input[outer]').should(haveValue('foobar'))\n\n        get('button').click()\n\n        get('input[inner]').type('baz')\n        get('input[inner]').should(haveValue('foobarbaz'))\n        get('input[outer]').should(haveValue('foobar'))\n    }\n)\n\ntest(\n    \"can handle undefined\",\n    [\n        html`\n            <div x-data=\"{ outer: undefined }\">\n                <input x-model=\"outer\" outer />\n\n                <div\n                    x-data=\"{ inner: 'bar' }\"\n                    x-init=\"() => {}; Alpine.entangle(\n            {\n                get() { return outer },\n                set(value) { outer = value },\n            },\n            {\n                get() { return inner },\n                set(value) { inner = value },\n            }\n        )\"\n                >\n                    <input x-model=\"inner\" inner />\n                </div>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"input[outer]\").should(haveValue(''));\n        get(\"input[inner]\").should(haveValue(''));\n\n        get(\"input[inner]\").type(\"bar\");\n        get(\"input[inner]\").should(haveValue(\"bar\"));\n        get(\"input[outer]\").should(haveValue(\"bar\"));\n    }\n);\n"
  },
  {
    "path": "tests/cypress/integration/error-handling.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\nexport function setupConsoleInterceptor( ...targetIds ) {\n    const mappedTargetIds = targetIds.map( tid => `'${tid}'` ).join( ',' )\n    return `\n        let errorContainer = document.createElement('div');\n        errorContainer.id = 'errors'\n        errorContainer.textContent = 'false'\n        document.querySelector('#root').after(errorContainer)\n        console.warnlog = console.warn.bind(console)\n        console.warn = function () {\n            document.getElementById( 'errors' ).textContent = [${mappedTargetIds}].some( target => arguments[1] === document.getElementById( target ) )\n            console.warnlog.apply(console, arguments)\n        }\n    `\n}\n\nexport function assertConsoleInterceptorHadErrorWithCorrectElement() {\n    return ({get}) => {\n        get('#errors').should(haveText('true'))\n    };\n}\n\ntest('x-for identifier issue',\n    [html`\n        <div x-data=\"{ items: ['foo'] }\">\n            <template id=\"xfor\" x-for=\"item in itemzzzz\">\n                <span x-text=\"item\"></span>\n            </template>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xfor\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-text identifier issue',\n    [html`\n        <div x-data=\"{ items: ['foo'] }\">\n            <template x-for=\"item in items\">\n                <span id=\"xtext\" x-text=\"itemzzz\"></span>\n            </template>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xtext\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-init identifier issue',\n    [html`\n        <div id=\"xinit\" x-data x-init=\"doesNotExist()\">\n        </div>\n    `,\n        setupConsoleInterceptor( \"xinit\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-show identifier issue',\n    [html`\n        <div id=\"xshow\" x-data=\"{isOpen: true}\" x-show=\"isVisible\">\n        </div>\n    `,\n        setupConsoleInterceptor( \"xshow\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-bind class object syntax identifier issue',\n    [html`\n        <div x-data=\"{isOpen: true}\">\n            <div id=\"xbind\" :class=\"{ 'block' : isVisible, 'hidden' : !isVisible }\"></div>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xbind\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-model identifier issue',\n    [html`\n        <div x-data=\"{value: ''}\">\n            <input id=\"xmodel\" x-model=\"thething\"/>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xmodel\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-if identifier issue',\n    [html`\n        <div x-data=\"{value: ''}\">\n            <template id=\"xif\" x-if=\"valuez === ''\">\n                <span>Words</span>\n            </template>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xif\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-if identifier issue ( function )',\n    [html`\n        <div x-data=\"{shouldOpen: function(){}}\">\n            <template id=\"xif\" x-if=\"isOpen()\">\n                <span>Words</span>\n            </template>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xif\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-effect identifier issue',\n    [html`\n        <div id=\"xeffect\" x-data=\"{ label: 'Hello' }\" x-effect=\"System.out.println(label)\">\n        </div>\n    `,\n        setupConsoleInterceptor( \"xeffect\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-on identifier issue',\n    [html`\n        <div x-data=\"{ label: 'Hello' }\">\n            <div x-text=\"label\"></div>\n            <button id=\"xon\" x-on:click=\"labelz += ' World!'\">Change Message</button>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xon\" )\n    ],\n    ({ get }) => {\n        get( \"#xon\" ).click()\n        get( \"#errors\" ).should(haveText('true'))\n    },\n    true\n)\n\ntest('x-data syntax error',\n    [html`\n        <div id=\"xdata\" x-data=\"{ label: 'Hello' }aaa\">\n        </div>\n    `,\n        setupConsoleInterceptor( \"xdata\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('if statement syntax error',\n    [html`\n        <div x-data=\"{ label: 'Hello' }\">\n            <div id=\"xtext\" x-text=\"if( false { label } else { 'bye' }\"></div>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xtext\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('x-data with reference error and multiple errors',\n    [html`\n        <div id=\"xdata\" x-data=\"{ items : [ {v:'one'},{v:'two'}], replaceItems }\">\n            <template id=\"xtext\" x-for=\"item in items\">\n                <span x-text=\"item.v\"></span>\n            </template>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xdata\", \"xtext\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('evaluation with syntax error',\n    [html`\n        <div x-data=\"{value: ''}\">\n            <template id=\"xif\" x-if=\"value ==== ''\">\n                <span>Words</span>\n            </template>\n        </div>\n    `,\n        setupConsoleInterceptor( \"xif\" )\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n\ntest('custom error handler',\n    [html`\n        <div id=\"custom\">\n            <div x-init=\"doesNotExist()\"></div>\n        </div>\n    `,\n        setupConsoleInterceptor( \"custom\" ) + `\n        Alpine.setErrorHandler((error, el) => {\n            // Report parent element instead\n            console.warn(error, el.parentNode)\n        })\n        `,\n    ],\n    assertConsoleInterceptorHadErrorWithCorrectElement(),\n    true\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$data.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('$data returns the current scope (with cascading)',\n    html`\n        <div x-data=\"{ foo: 'bar'}\">\n            <div x-data=\"{ bob: 'lob' }\">\n                <span x-text=\"$data.foo + ' ' + $data.bob\"></span>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar lob'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$dispatch.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('$dispatch dispatches events properly',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-on:custom-event=\"foo = $event.detail.newValue\">\n            <span x-text=\"foo\"></span>\n\n            <button x-on:click=\"$dispatch('custom-event', {newValue: 'baz'})\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('$dispatch with bubbles overwrite to false shouldn\\'t bubble (event handling on parent)',\n    html`\n        <div x-data=\"{ foo: 'bar' }\" x-on:custom-event=\"foo = $event.detail.newValue\">\n            <span x-text=\"foo\"></span>\n\n            <button x-on:click=\"$dispatch('custom-event', {newValue: 'baz'}, {bubbles: false})\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('$dispatch with bubbles overwrite to false shouldn\\'t bubble (event handling on same element)',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <span x-text=\"foo\"></span>\n\n            <button\n                x-on:custom-event=\"foo = $event.detail.newValue\"\n                x-on:click=\"$dispatch('custom-event', {newValue: 'baz'}, {bubbles: false})\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('$dispatch cancelable should be cancelable by $event.preventDefault()',\n    html`\n        <div x-data=\"{ foo: 'bar' }\"\n             x-on:prevented-event=\"$event.preventDefault()\">\n            <span x-text=\"foo\"></span>\n\n            <button x-on:click=\"if($dispatch('not-prevented-event')){ foo = 'baz'; } if($dispatch('prevented-event')){ foo = 'bar'; }\">\n                click me\n            </button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$el.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('$el returns the current element',\n    html`\n        <div x-data>\n            <button @click=\"$el.innerText = 'foo'\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').should(haveText('click me'))\n        get('button').click()\n        get('button').should(haveText('foo'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$id.spec.js",
    "content": "import { haveAttribute, haveText, html, test } from '../../utils'\n\ntest('$id generates a unique id',\n    html`\n        <div x-data x-id=\"['foo']\" id=\"1\">\n            <div>\n                <h1 :id=\"$id('foo')\"></h1>\n            </div>\n\n            <span :aria-labelledby=\"$id('foo')\"></span>\n        </div>\n\n        <div x-data x-id=\"['foo']\" id=\"2\">\n            <div>\n                <h1 :id=\"$id('foo')\"></h1>\n            </div>\n\n            <span :aria-labelledby=\"$id('foo')\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('#1 h1').should(haveAttribute('id', 'foo-1'))\n        get('#1 span').should(haveAttribute('aria-labelledby', 'foo-1'))\n        get('#2 h1').should(haveAttribute('id', 'foo-2'))\n        get('#2 span').should(haveAttribute('aria-labelledby', 'foo-2'))\n    }\n)\n\ntest('$id works with keys and nested data scopes',\n    html`\n        <div x-data x-id=\"['foo']\" id=\"1\">\n            <!-- foo-1-3 -->\n            <span :aria-activedescendant=\"$id('foo', 3)\"></span>\n\n            <ul>\n                <li x-data :id=\"$id('foo', 1)\"></li> <!-- foo-1-1 -->\n                <li x-data :id=\"$id('foo', 2)\"></li> <!-- foo-1-2 -->\n                <li x-data :id=\"$id('foo', 3)\"></li> <!-- foo-1-3 -->\n            </ul>\n        </div>\n\n        <div x-data x-id=\"['foo']\" id=\"2\">\n            <!-- foo-2-3 -->\n            <span :aria-activedescendant=\"$id('foo', 3)\"></span>\n\n            <ul>\n                <li x-data :id=\"$id('foo', 1)\"></li> <!-- foo-2-1 -->\n                <li x-data :id=\"$id('foo', 2)\"></li> <!-- foo-2-2 -->\n                <li x-data :id=\"$id('foo', 3)\"></li> <!-- foo-2-3 -->\n            </ul>\n        </div>\n    `,\n    ({ get }) => {\n        get('#1 span').should(haveAttribute('aria-activedescendant', 'foo-1-3'))\n        get('#1 li:nth-child(1)').should(haveAttribute('id', 'foo-1-1'))\n        get('#1 li:nth-child(2)').should(haveAttribute('id', 'foo-1-2'))\n        get('#1 li:nth-child(3)').should(haveAttribute('id', 'foo-1-3'))\n        get('#2 span').should(haveAttribute('aria-activedescendant', 'foo-2-3'))\n        get('#2 li:nth-child(1)').should(haveAttribute('id', 'foo-2-1'))\n        get('#2 li:nth-child(2)').should(haveAttribute('id', 'foo-2-2'))\n        get('#2 li:nth-child(3)').should(haveAttribute('id', 'foo-2-3'))\n    }\n)\n\ntest('$id scopes are grouped by name',\n    html`\n        <div x-data x-id=\"['foo']\">\n            <!-- foo-1 -->\n            <span :aria-activedescendant=\"$id('foo')\"></span>\n\n            <ul>\n                <li x-data x-id=\"['bar']\" :id=\"$id('bar')\"></li> <!-- bar-1 -->\n                <li x-data x-id=\"['bar']\" :id=\"$id('bar')\"></li> <!-- bar-2 -->\n            </ul>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('aria-activedescendant', 'foo-1'))\n        get('li:nth-child(1)').should(haveAttribute('id', 'bar-1'))\n        get('li:nth-child(2)').should(haveAttribute('id', 'bar-2'))\n    }\n)\n\ntest('$ids are globally unique when outside x-id',\n    html`\n        <div x-data>\n            <h1 :id=\"$id('foo')\"></h1>\n            <h2 :id=\"$id('foo')\"></h2>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveAttribute('id', 'foo-1'))\n        get('h2').should(haveAttribute('id', 'foo-2'))\n    }\n)\n\ntest('$id scopes can be reset',\n    html`\n        <div x-data x-id=\"['foo', 'bar']\">\n            <!-- foo-1 -->\n            <span :aria-labelledby=\"$id('foo')\"></span>\n\n            <div x-data>\n                <h1 :id=\"$id('foo')\"></h1>\n                <h5 :id=\"$id('bar')\"></h5>\n\n                <div x-id=\"['foo']\">\n                    <h2 :aria-labelledby=\"$id('foo')\"></h2>\n                    <h6 :aria-labelledby=\"$id('bar')\"></h6>\n\n                    <div x-data>\n                        <h3 :id=\"$id('foo')\"></h3>\n                    </div>\n                </div>\n\n                <h4 :id=\"$id('foo')\"></h4>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveAttribute('aria-labelledby', 'foo-1'))\n        get('h1').should(haveAttribute('id', 'foo-1'))\n        get('h2').should(haveAttribute('aria-labelledby', 'foo-2'))\n        get('h3').should(haveAttribute('id', 'foo-2'))\n        get('h4').should(haveAttribute('id', 'foo-1'))\n        get('h5').should(haveAttribute('id', 'bar-1'))\n        get('h6').should(haveAttribute('aria-labelledby', 'bar-1'))\n    }\n)\n\ntest('can be used with morph without losing track',\n    [html`\n        <div x-data>\n            <p x-id=\"['foo']\">\n                <span :id=\"$id('foo')\">bob</span>\n            </p>\n\n            <h1 :id=\"$id('bar')\">lob</h1>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <div x-data>\n                <p x-id=\"['foo']\">\n                    <span :id=\"$id('foo')\">bob</span>\n                </p>\n\n                <h1 :id=\"$id('bar')\">lob</h1>\n            </div>\n        `\n\n        get('span').should(haveAttribute('id', 'foo-1'))\n        get('h1').should(haveAttribute('id', 'bar-1'))\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('span').should(haveAttribute('id', 'foo-1'))\n        get('h1').should(haveAttribute('id', 'bar-1'))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$nextTick.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('$nextTick runs code on the next available managed tick',\n    html`\n        <div x-data=\"{foo: 'bar'}\">\n            <span x-text=\"foo\" x-ref=\"span\"></span>\n\n            <button x-on:click=\"foo = 'baz'; $nextTick(() => {$refs.span.textContent = 'bob'})\">click</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('bob'))\n    }\n)\n\ntest('$nextTick waits for x-for to finish rendering',\n    html`\n        <div x-data=\"{list: ['one', 'two'], check: 2}\">\n            <template x-for=\"item in list\">\n                <span x-text=\"item\"></span>\n            </template>\n\n            <p x-text=\"check\"></p>\n\n            <button x-on:click=\"list = ['one', 'two', 'three']; $nextTick(() => {check = document.querySelectorAll('span').length})\">click</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('p').should(haveText('2'))\n        get('button').click()\n        get('p').should(haveText('3'))\n    }\n)\n\ntest('$nextTick works with transition',\n    html`\n        <div x-data=\"{ show: false, loggedDisplayStyle: null }\" x-init=\"$nextTick(() => { loggedDisplayStyle = document.querySelector('h1').style.display })\">\n            <h1 x-show=\"show\" x-transition:enter=\"animation-enter\"></h1>\n\n            <h2 x-text=\"loggedDisplayStyle\"></h2>\n\n            <button @click=\"show = true; $nextTick(() => { loggedDisplayStyle = document.querySelector('h1').style.display })\">click</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h2').should(haveText('none'))\n        get('button').click()\n        get('h2').should(haveText(''))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$refs.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('can reference elements from event listeners',\n    html`\n        <div x-data=\"{}\">\n            <button x-on:click=\"$refs['bob'].textContent = 'lob'\"></button>\n\n            <span x-ref=\"bob\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('span').should(haveText('lob'))\n    }\n)\n\ntest('can reference elements from data object methods',\n    html`\n        <div x-data=\"{ foo() { this.$refs.bob.textContent = 'lob' } }\">\n            <button x-on:click=\"foo()\"></button>\n\n            <span x-ref=\"bob\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('span').should(haveText('lob'))\n    }\n)\n\ntest('can reference elements from x-init',\n    html`\n        <div x-data x-init=\"$refs.foo.textContent = 'lob'\">\n            <span x-ref=\"foo\">bob</span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('lob'))\n    }\n)\n\ntest('can reference elements outside of x-init',\n    html`\n        <div x-data x-ref=\"foo\" data-foo=\"bar\">\n            <div x-init=\"() => {}\">\n                <span x-text=\"$refs.foo.dataset.foo\"></span>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('can reference refs of parent scope',\n    html`\n        <div x-data x-ref=\"foo\" data-foo=\"bar\">\n            <div x-data>\n                <span x-text=\"$refs.foo.dataset.foo\"></span>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('when referencing refs from parent scope, the closest ref is used',\n    html`\n        <div x-data x-ref=\"foo\" data-foo=\"bar\">\n            <div x-data x-ref=\"foo\" data-foo=\"baz\">\n                <span x-text=\"$refs.foo.dataset.foo\"></span>\n            </div>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('baz'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$root.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('$root returns the root element of the component',\n    html`\n        <div x-data data-message=\"foo\">\n            <button @click=\"$el.innerText = $root.dataset.message\">click me</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').should(haveText('click me'))\n        get('button').click()\n        get('button').should(haveText('foo'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/magics/$watch.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\ntest('$watch',\n    html`\n        <div\n            x-data=\"{ foo: 'bar', bob: 'lob' }\"\n            x-init=\"$watch('foo', value => { bob = value })\"\n        >\n            <h1 x-text=\"foo\"></h1>\n            <h2 x-text=\"bob\"></h2>\n\n            <button x-on:click=\"foo = 'baz'\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('bar'))\n        get('h2').should(haveText('lob'))\n        get('button').click()\n        get('h1').should(haveText('baz'))\n        get('h2').should(haveText('baz'))\n    }\n)\n\ntest('$watch receives old value',\n    html`\n        <div\n            x-data=\"{ foo: 'bar', fresh: '', old: '' }\"\n            x-init=\"$watch('foo', (value, oldValue) => { fresh = value; old = oldValue; })\"\n        >\n            <h1 x-text=\"fresh\"></h1>\n            <h2 x-text=\"old\"></h2>\n\n            <button x-on:click=\"foo = 'baz'\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('h1').should(haveText('baz'))\n        get('h2').should(haveText('bar'))\n    }\n)\n\ntest('$watch nested properties',\n    html`\n        <div x-data=\"{ foo: { bar: 'baz', bob: 'lob' } }\" x-init=\"\n            $watch('foo.bar', value => { foo.bob = value });\n        \">\n            <h1 x-text=\"foo.bar\"></h1>\n            <h2 x-text=\"foo.bob\"></h2>\n\n            <button x-on:click=\"foo.bar = 'law'\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('baz'))\n        get('h2').should(haveText('lob'))\n        get('button').click()\n        get('h1').should(haveText('law'))\n        get('h2').should(haveText('law'))\n    }\n)\n\ntest('$watch arrays',\n    html`\n        <div x-data=\"{ foo: ['one'], bob: 'lob' }\"\n            x-init=\"$watch('foo', value => { bob = value })\">\n            <h1 x-text=\"foo\"></h1>\n            <h2 x-text=\"bob\"></h2>\n\n            <button id=\"push\" x-on:click=\"foo.push('two')\"></button>\n            <button id=\"pop\" x-on:click=\"foo.pop()\"></button>\n            <button id=\"unshift\" x-on:click=\"foo.unshift('zero')\"></button>\n            <button id=\"shift\" x-on:click=\"foo.shift()\"></button>\n            <button id=\"assign\" x-on:click=\"foo = [2,1,3]\"></button>\n            <button id=\"sort\" x-on:click=\"foo.sort()\"></button>\n            <button id=\"reverse\" x-on:click=\"foo.reverse()\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('one'))\n        get('h2').should(haveText('lob'))\n\n        get('button#push').click()\n        get('h1').should(haveText('one,two'))\n        get('h2').should(haveText('one,two'))\n\n        get('button#pop').click()\n        get('h1').should(haveText('one'))\n        get('h2').should(haveText('one'))\n\n        get('button#unshift').click()\n        get('h1').should(haveText('zero,one'))\n        get('h2').should(haveText('zero,one'))\n\n        get('button#shift').click()\n        get('h1').should(haveText('one'))\n        get('h2').should(haveText('one'))\n\n        get('button#assign').click()\n        get('h1').should(haveText('2,1,3'))\n        get('h2').should(haveText('2,1,3'))\n\n        get('button#sort').click()\n        get('h1').should(haveText('1,2,3'))\n        get('h2').should(haveText('1,2,3'))\n\n        get('button#reverse').click()\n        get('h1').should(haveText('3,2,1'))\n        get('h2').should(haveText('3,2,1'))\n    }\n)\n\ntest('$watch nested arrays',\n    html`\n        <div x-data=\"{ foo: {baz: ['one']}, bob: 'lob' }\" x-init=\"$watch('foo.baz', value => { bob = value })\">\n            <h1 x-text=\"foo.baz\"></h1>\n            <h2 x-text=\"bob\"></h2>\n\n            <button id=\"push\" x-on:click=\"foo.baz.push('two')\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('one'))\n        get('h2').should(haveText('lob'))\n\n        get('button').click()\n        get('h1').should(haveText('one,two'))\n        get('h2').should(haveText('one,two'))\n    }\n)\n\ntest('$watch ignores other dependencies',\n    html`\n        <div\n            x-data=\"{ a: 0, b: 0, c: 0 }\"\n            x-init=\"$watch('a', () => { c = a + b })\"\n        >\n            <button @click=\"a++\" id=\"a\">a</button>\n            <button @click=\"b++\" id=\"b\">b</button>\n            <span x-text=\"c\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#a').click()\n        get('span').should(haveText('1'))\n        get('#b').click()\n        get('span').should(haveText('1'))\n    }\n)\n\n\ntest('$watch nested property does not fire when parent replaced but value unchanged',\n    html`\n        <div x-data=\"{ foo: { bar: { baz: 'hello' } }, callCount: 0 }\" x-init=\"\n            $watch('foo.bar.baz', value => { callCount++ });\n        \">\n            <h1 x-text=\"foo.bar.baz\"></h1>\n            <span x-text=\"callCount\"></span>\n\n            <button id=\"same\" x-on:click=\"foo = { bar: { baz: 'hello' } }\"></button>\n            <button id=\"different\" x-on:click=\"foo = { bar: { baz: 'world' } }\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('hello'))\n        get('span').should(haveText('0'))\n\n        // Replace parent with same nested value - should NOT fire\n        get('button#same').click()\n        get('h1').should(haveText('hello'))\n        get('span').should(haveText('0')) // callCount should still be 0\n\n        // Replace with different value - SHOULD fire\n        get('button#different').click()\n        get('h1').should(haveText('world'))\n        get('span').should(haveText('1')) // callCount should be 1\n    }\n)\n\ntest('deep $watch',\n    html`\n        <div x-data=\"{ foo: { bar: 'baz'}, bob: 'lob' }\" x-init=\"\n            $watch('foo', value => { bob = value.bar }, {deep: true});\n        \">\n            <h1 x-text=\"foo.bar\"></h1>\n            <h2 x-text=\"bob\"></h2>\n\n            <button x-on:click=\"foo.bar = 'law'\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('baz'))\n        get('h2').should(haveText('lob'))\n        get('button').click()\n        get('h1').should(haveText('law'))\n        get('h2').should(haveText('law'))\n    }\n)\n\ntest('deep $watch receives old value',\n    html`\n        <div x-data=\"{ foo: { bar: 'baz' }, fresh: '', old: '' }\" x-init=\"\n            $watch('foo', (value, oldValue) => { fresh = value.bar; old = oldValue.bar })\n        \">\n            <h1 x-text=\"fresh\"></h1>\n            <h2 x-text=\"old\"></h2>\n\n            <button x-on:click=\"foo.bar = 'bob'\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('h1').should(haveText('bob'))\n        get('h2').should(haveText('baz'))\n    }\n)\n\ntest('deep $watch receives old value for arrays',\n    html`\n        <div x-data=\"{ list: ['one'], newVal: '', oldVal: '' }\" x-init=\"\n            $watch('list', (value, oldValue) => { newVal = value.join(','); oldVal = oldValue.join(',') })\n        \">\n            <h1 x-text=\"newVal\"></h1>\n            <h2 x-text=\"oldVal\"></h2>\n\n            <button x-on:click=\"list.push('two')\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('h1').should(haveText('one,two'))\n        get('h2').should(haveText('one'))\n    }\n)\n\ntest('deep $watch receives old value with null',\n    html`\n        <div x-data=\"{ foo: null, fresh: '', old: '' }\" x-init=\"\n            $watch('foo', (value, oldValue) => { fresh = JSON.stringify(value); old = JSON.stringify(oldValue) })\n        \">\n            <h1 x-text=\"fresh\"></h1>\n            <h2 x-text=\"old\"></h2>\n\n            <button x-on:click=\"foo = { bar: 'baz' }\"></button>\n        </div>\n    `,\n    ({ get }) => {\n        get('button').click()\n        get('h1').should(haveText('{\"bar\":\"baz\"}'))\n        get('h2').should(haveText('null'))\n    }\n)\n\n"
  },
  {
    "path": "tests/cypress/integration/mutation.spec.js",
    "content": "import { beVisible, haveText, html, test } from '../utils'\n\ntest('element side effects are cleaned up after the elements are removed',\n    html`\n        <div x-data=\"{ foo: 1, bar: 1 }\">\n            <button @click=\"bar++\">bar</button>\n            <a href=\"#\" @click.prevent=\"$refs.span.remove()\">remove</a>\n\n            <span x-text=\"(() => { foo = foo + 1; return bar })\" x-ref=\"span\"></span>\n\n            <h1 x-text=\"foo\"></h1>\n            <h2 x-text=\"bar\"></h2>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('2'))\n        get('h2').should(haveText('1'))\n        get('button').click()\n        get('h1').should(haveText('3'))\n        get('h2').should(haveText('2'))\n        get('a').click()\n        get('button').click()\n        get('h1').should(haveText('3'))\n        get('h2').should(haveText('3'))\n    }\n)\n\ntest('nested element side effects are cleaned up after the parent is removed',\n    html`\n        <div x-data=\"{ foo: 1, bar: 1 }\">\n            <button @click=\"bar++\">bar</button>\n            <a href=\"#\" @click.prevent=\"$refs.article.remove()\">remove</a>\n\n            <article x-ref=\"article\">\n                <span x-text=\"(() => { foo = foo + 1; return bar })\"></span>\n            </article>\n\n            <h1 x-text=\"foo\"></h1>\n            <h2 x-text=\"bar\"></h2>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('2'))\n        get('h2').should(haveText('1'))\n        get('button').click()\n        get('h1').should(haveText('3'))\n        get('h2').should(haveText('2'))\n        get('a').click()\n        get('button').click()\n        get('h1').should(haveText('3'))\n        get('h2').should(haveText('3'))\n    }\n)\n\ntest('element magic-based side effects are cleaned up after the element is removed',\n    html`\n        <div x-data=\"{ foo: 1, bar: 1 }\">\n            <button @click=\"foo++\">foo</button>\n            <a href=\"#\" @click.prevent=\"$refs.span.remove()\">remove</a>\n\n            <span x-init=\"$watch('foo', () => bar++)\" x-ref=\"span\"></span>\n\n            <h1 x-text=\"foo\"></h1>\n            <h2 x-text=\"bar\"></h2>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('1'))\n        get('h2').should(haveText('1'))\n        get('button').click()\n        get('h1').should(haveText('2'))\n        get('h2').should(haveText('2'))\n        get('a').click()\n        get('button').click()\n        get('h1').should(haveText('3'))\n        get('h2').should(haveText('2'))\n    }\n)\n\ntest('can mutate directive value',\n    html`\n        <div x-data=\"{ foo: 'bar', bar: 'baz' }\">\n            <button @click=\"$refs.target.setAttribute('x-text', 'bar')\">change text</button>\n\n            <span x-text=\"foo\" x-ref=\"target\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('can add new directive',\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button @click=\"$refs.target.setAttribute('x-text', 'foo')\">change text</button>\n\n            <span x-ref=\"target\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText(''))\n        get('button').click()\n        get('span').should(haveText('bar'))\n    }\n)\n\ntest('can pause and queue mutations for later resuming/flushing',\n    html`\n        <div x-data=\"{ foo: 1 }\">\n            <button x-on:click=\"setTimeout(() => foo++)\" x-ref=\"btn\">foo</button>\n            <h1 x-text=\"foo\"></h1>\n\n            <a href=\"#\" @click=\"$refs.btn.removeAttribute('x-on:click')\" id=\"remove\">remove</a>\n            <a href=\"#\" @click=\"$refs.btn.setAttribute('x-on:click', 'foo++')\" id=\"add\">add</a>\n            <a href=\"#\" @click=\"Alpine.deferMutations()\" id=\"defer\">add</a>\n            <a href=\"#\" @click=\"Alpine.flushAndStopDeferringMutations()\" id=\"flush\">add</a>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveText('1'))\n        get('button').click()\n        get('h1').should(haveText('2'))\n        get('#remove').click()\n        get('button').click()\n        get('h1').should(haveText('2'))\n        get('#defer').click()\n        get('#add').click()\n        get('button').click()\n        get('h1').should(haveText('2'))\n        get('#flush').click()\n        get('button').click()\n        get('h1').should(haveText('3'))\n    }\n)\n\ntest('does not initialise components twice when contained in multiple mutations',\n    html`\n        <div x-data=\"{\n            foo: 0,\n            bar: 0,\n            test() {\n                container = document.createElement('div')\n                this.$root.appendChild(container)\n                alpineElement = document.createElement('span')\n                alpineElement.setAttribute('x-data', '{init() {this.bar++}}')\n                alpineElement.setAttribute('x-init', 'foo++')\n                container.appendChild(alpineElement)\n            }\n        }\">\n            <span id=\"one\" x-text=\"foo\"></span>\n            <span id=\"two\" x-text=\"bar\"></span>\n            <button @click=\"test\">Test</button>\n        </div>\n    `,\n    ({ get }) => {\n        get('span#one').should(haveText('0'))\n        get('span#two').should(haveText('0'))\n        get('button').click()\n        get('span#one').should(haveText('1'))\n        get('span#two').should(haveText('1'))\n    }\n)\n\ntest('directives keep working when node is moved into a different one',\n    html`\n        <div x-data=\"{\n            foo: 0,\n            mutate() {\n                let button = document.getElementById('one')\n                button.remove()\n                let container = document.createElement('p')\n                container.appendChild(button)\n                this.$root.appendChild(container)\n            }\n        }\">\n            <button id=\"one\" @click=\"foo++\">increment</button>\n            <button id=\"two\" @click=\"mutate()\">Mutate</button>\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('button#one').click()\n        get('span').should(haveText('1'))\n        get('button#two').click()\n        get('p').should(beVisible())\n        get('button#one').click()\n        get('span').should(haveText('2'))\n    }\n)\n\ntest('no side effects when directives are added to an element that is removed afterwards',\n    html`\n        <div x-data=\"{\n            foo: 0,\n            mutate() {\n                let span = document.createElement('span')\n                span.setAttribute('x-on:keydown.a.window', 'foo = foo+1')\n                let container = document.getElementById('container')\n                container.appendChild(span)\n                container.remove()\n            }\n        }\">\n            <button @click=\"mutate()\">Mutate</button>\n            <p id=\"container\"></p>\n            <input type=\"text\">\n\n            <span x-text=\"foo\"></span>\n        </div>\n    `,\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('button').click()\n        get('input').type('a')\n        get('span').should(haveText('0'))\n    }\n)\n\ntest(\n    \"previously initialized elements are not reinitialized on being moved\",\n    html`\n        <script>\n            let count = 0;\n            document.addEventListener('alpine:init', () => {\n                Alpine.directive('test', el => {\n                    if (count++ > 3) return;\n                    el.textContent = count;\n                    let wrapper = document.createElement('div');\n                    wrapper.setAttribute('class', 'bg-blue-300 p-8');\n                    el.parentNode.replaceChild(wrapper, el);\n                    wrapper.appendChild(el);\n                });\n            });\n        </script>\n        <div x-data>\n            <div class=\"bg-red-300 w-32 h-32\" x-test></div>\n        </div>\n    `,\n    ({ get }) => {\n        get(\"[x-test]\").should(haveText(\"1\"));\n    }\n);\n\ntest(\n    \"previously initialized elements are not cleaned up on being moved\",\n    html`\n        <script>\n            let count = 0;\n            document.addEventListener(\"alpine:init\", () => {\n                Alpine.directive(\"test\", (el, _, { cleanup }) => {\n                    el.textContent = \"Initialized\";\n                    cleanup(() => {\n                        el.textContent = \"Cleaned up\";\n                    });\n                    Alpine.nextTick(() => {\n                        el.parentNode.replaceChildren(el);\n                    })\n                });\n            });\n        </script>\n        <div x-data>\n            <div class=\"bg-red-300 w-32 h-32\" x-test></div>\n        </div>\n    `,\n    ({ get }) => {\n        get(\"[x-test]\").should(haveText(\"Initialized\"));\n    }\n);"
  },
  {
    "path": "tests/cypress/integration/plugins/anchor.spec.js",
    "content": "import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils'\n\ntest('can anchor an element',\n    [html`\n        <div x-data>\n            <button x-ref=\"foo\">toggle</button>\n            <h1 x-anchor=\"$refs.foo\">contents</h1>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('h1').should(haveComputedStyle('position', 'absolute'))\n    },\n)\n\ntest('can anchor to dynamic reference',\n    [html`\n        <div x-data=\"{ reference: null }\" x-init=\"reference = document.getElementById('foo')\">\n            <button id=\"foo\">toggle foo</button>\n            <button id=\"bar\" @click=\"reference = $el\">toggle bar</button>\n            <h1 id=\"baz\" x-anchor=\"reference\">contents</h1>\n        </div>\n    `],\n    ({ get }) => {\n        let originalLeft\n\n        get('#baz').then($el => {\n            originalLeft = $el[0].style.left\n        })\n\n        get('#bar').click()\n\n        get('#baz').should($el => {\n            expect($el[0].style.left).not.to.eq(originalLeft)\n        })\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/collapse.spec.js",
    "content": "import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils'\n\ntest('can collapse and expand element',\n    [html`\n        <div x-data=\"{ expanded: false }\">\n            <button @click=\"expanded = ! expanded\">toggle</button>\n            <h1 x-show=\"expanded\" x-collapse>contents <a href=\"#\">focusable content</a></h1>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('h1').should(haveComputedStyle('height', '0px'))\n        get('h1').should(haveAttribute('style', 'display: none; height: 0px; overflow: hidden;'))\n        get('h1').should(haveAttribute('hidden', 'hidden'))\n        get('button').click()\n        get('h1').should(haveAttribute('style', 'height: auto;'))\n        get('h1').should(notHaveAttribute('hidden'))\n        get('button').click()\n        get('h1').should(haveComputedStyle('height', '0px'))\n        get('h1').should(haveAttribute('style', 'height: 0px; overflow: hidden; display: none;'))\n        get('h1').should(haveAttribute('hidden', 'hidden'))\n    },\n)\n\ntest('can collapse and expand with a minimum height instead of \"display: none\"',\n    [html`\n        <div x-data=\"{ expanded: false }\">\n            <button @click=\"expanded = ! expanded\">toggle</button>\n            <h1 x-show=\"expanded\" x-collapse.min.25px>contents <a href=\"#\">focusable content</a></h1>\n        </div>\n    `],\n    ({ get }) => {\n        get('h1').should(haveComputedStyle('height', '25px'))\n        get('h1').should(haveAttribute('style', 'height: 25px; overflow: hidden;'))\n        get('h1').should(notHaveAttribute('hidden', 'hidden'))\n        get('button').click()\n        get('h1').should(haveAttribute('style', 'height: auto;'))\n        get('button').click()\n        get('h1').should(haveComputedStyle('height', '25px'))\n        get('h1').should(haveAttribute('style', 'height: 25px; overflow: hidden;'))\n    },\n)\n\ntest('@click.away with x-collapse (prevent race condition)',\n    html`\n        <div x-data=\"{ show: false }\">\n            <button @click=\"show = true\">Show</button>\n\n            <h1 x-show=\"show\" @click.away=\"show = false\" x-collapse>h1</h1>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveComputedStyle('height', '0px'))\n        get('button').click()\n        get('h1').should(haveAttribute('style', 'height: auto;'))\n    }\n)\n\ntest('@click.away with x-collapse and borders (prevent race condition)',\n    html`\n        <div x-data=\"{ show: false }\">\n            <button @click=\"show = true\">Show</button>\n\n            <h1 style=\"border: 1x solid\" x-show=\"show\" @click.away=\"show = false\" x-collapse>h1</h1>\n        </div>\n    `,\n    ({ get }) => {\n        get('h1').should(haveComputedStyle('height', '0px'))\n        get('button').click()\n        get('h1').should(haveAttribute('style', 'height: auto;'))\n    }\n)\n\n// https://github.com/alpinejs/alpine/issues/2335\ntest('double-click on x-collapse does not mix styles up',\n    [html`\n        <div x-data=\"{ expanded: false }\">\n            <button @click=\"expanded = ! expanded\">toggle</button>\n            <h1 x-show=\"expanded\" x-collapse>contents</h1>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('h1').should(haveComputedStyle('height', '0px'))\n        get('h1').should(haveAttribute('style', 'display: none; height: 0px; overflow: hidden;'))\n        get('button').click()\n        get('button').click()\n        get('h1').should(haveAttribute('style', 'height: 0px; overflow: hidden; display: none;'))\n        get('button').click()\n        get('h1').should(haveAttribute('style', 'height: auto;'))\n        get('button').click()\n        get('button').click()\n        get('h1').should(haveAttribute('style', 'height: auto;'))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/csp-compatibility.spec.js",
    "content": "import { haveText, html, notContain, notExist, notHaveAttribute, test } from '../../utils'\n\ntest.csp('supports regular syntax', \n    [html`\n        <div x-data=\"{ value: 0, user: { name: 'John' } }\">\n            <span x-text=\"value\"></span>\n            <h1 x-text=\"user.name\"></h1>\n            <button @click=\"value = 2\">Increment</button>\n        </div>\n    `],\n    ({ get }) => {\n        get('h1').should(haveText('John'))\n        get('button').click()\n        get('span').should(haveText('2'))\n    }\n)\n\ntest.csp('throws when accessing a global',\n    [html`\n        <button x-data x-on:click=\"document.write('evil')\"></button>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Undefined variable: document') ? false : true)\n        cy.get('button').click()\n        cy.get('body').should(notContain('evil'))\n    }\n)\n\ntest.csp('throws when accessing a global via property',\n    [html`\n        <button x-data x-on:click=\"$el.ownerDocument.write('evil')\"></button>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing global variables is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('body').should(notContain('evil'))\n    }\n)\n\ntest.csp('throws when accessing a global via computed property',\n    [html`\n        <button x-data x-on:click=\"$el['ownerDocument'].write('evil')\"></button>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing global variables is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('body').should(notContain('evil'))\n    },\n)\n\ntest.csp('throws when accessing a global via function',\n    [html`\n        <button x-data x-on:click=\"$el.getRootNode().write('evil')\"></button>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing global variables is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('body').should(notContain('evil'))\n    },\n)\n\ntest.csp('throws when parsing a property assignment',\n    [html`\n        <button x-data x-on:click=\"$el.innerHTML = 'evil'\"></button>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Property assignments are prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('button').should(notContain('evil'))\n    },\n)\n\ntest.csp('throws when accessing blacklisted properties',\n    [html`\n        <button x-data x-on:click=\"$el.insertAdjacentHTML('beforeend', '<div id=evil></div>')\"></button>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing \"insertAdjacentHTML\" is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('#evil').should(notExist())\n    },\n)\n\ntest.csp('throws when accessing an iframe',\n    [html`\n        <div x-data>\n            <button x-on:click=\"$refs.foo.setAttribute('srcdoc', 'dangerous')\"></button>\n            <iframe x-ref=\"foo\"></iframe>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing iframes and scripts is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('iframe').should(notHaveAttribute('srcdoc', 'dangerous'))\n    },\n)\n\ntest.csp('throws when accessing an iframe via computed property',\n    [html`\n        <div x-data>\n            <button x-on:click=\"$refs['foo'].setAttribute('srcdoc', 'dangerous')\"></button>\n            <iframe x-ref=\"foo\"></iframe>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing iframes and scripts is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('iframe').should(notHaveAttribute('srcdoc', 'dangerous'))\n    },\n)\n\ntest.csp('throws when accessing an iframe via function',\n    [html`\n        <div x-data>\n            <button x-on:click=\"$el.parentElement.querySelector('iframe').setAttribute('srcdoc', 'dangerous')\"></button>\n            <iframe x-ref=\"foo\"></iframe>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing iframes and scripts is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('iframe').should(notHaveAttribute('srcdoc', 'dangerous'))\n    },\n)\n\ntest.csp('throws when evaluating on an iframe', \n    [html`\n        <div x-data=\"{ show: false }\">\n            <button x-data x-on:click=\"show = true\"></button>\n            <template x-if=\"show\">\n                <iframe x-init=\"$el.setAttribute('srcdoc', 'dangerous')\"></iframe>\n            </template>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Evaluating expressions on an iframe is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('iframe').should(notHaveAttribute('srcdoc', 'dangerous'))\n    },\n)\n\ntest.csp('throws when accessing a script',\n    [html`\n        <div x-data>\n            <button x-on:click=\"$refs.foo.setAttribute('src', 'evil')\"></button>\n            <script id=\"script\" x-ref=\"foo\"></script>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing iframes and scripts is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('#script').should(notHaveAttribute('src', 'evil'))\n    },\n)\n\ntest.csp('throws when accessing a script via computed property',\n    [html`\n        <div x-data>\n            <button x-on:click=\"$refs['foo'].setAttribute('src', 'evil')\"></button>\n            <script id=\"script\" x-ref=\"foo\"></script>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing iframes and scripts is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('#script').should(notHaveAttribute('src', 'evil'))\n    },\n)\n\ntest.csp('throws when accessing a script via function',\n    [html`\n        <div x-data>\n            <button x-on:click=\"$el.parentElement.querySelector('script').setAttribute('src', 'evil')\"></button>\n            <script id=\"script\" x-ref=\"foo\"></script>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing iframes and scripts is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('#script').should(notHaveAttribute('src', 'evil'))\n    },\n)\n\ntest.csp('throws when evaluating on a script', \n    [html`\n        <div x-data=\"{ show: false }\">\n            <button x-on:click=\"show = true\"></button>\n            <template x-if=\"show\">\n                <script id=\"script\" x-init=\"$el.setAttribute('src', 'evil')\"></script>\n            </template>\n        </div>\n    `,\n    ],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Evaluating expressions on a script is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('#script').should(notHaveAttribute('src', 'evil'))\n    },\n)\n\ntest.csp('throws when using x-html directive',\n    [html`\n        <div x-data=\"{ show: false }\">\n            <button x-on:click=\"show = true\"></button>\n            <template x-if=\"show\">\n                <div x-html=\"evil\"></div>\n            </template>\n        </div>\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Using the x-html directive is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('body').should(notContain('evil'))\n    },\n)\n\ntest.csp('throws when non-enumerable global is accessed',\n    [html`\n        <div x-data=\"app\">\n            <button x-on:click=\"show = true\"></button>\n            <template x-if=\"show\">\n                <span x-text=\"obj() ? 'evil' : ''\"></span>\n            </template>\n        </div>\n    `,`\n        Alpine.data('app', () => ({\n            show: false,\n            obj() { return Object },\n        }))\n    `],\n    (cy) => {\n        cy.on('uncaught:exception', ({message}) => message.includes('Accessing global variables is prohibited') ? false : true)\n        cy.get('button').click()\n        cy.get('span').should(notContain('evil'))\n    },\n)"
  },
  {
    "path": "tests/cypress/integration/plugins/focus.spec.js",
    "content": "import { haveText, test, html, haveFocus, notHaveAttribute, haveAttribute, notHaveFocus, notHaveText } from '../../utils'\n\ntest('can trap focus',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <input type=\"text\" id=\"1\">\n            <button id=\"2\" @click=\"open = true\">open</button>\n            <div>\n                <div x-trap=\"open\">\n                    <input type=\"text\" id=\"3\">\n                    <button @click=\"open = false\" id=\"4\">close</button>\n                </div>\n            </div>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('#1').click()\n        get('#1').should(haveFocus())\n        get('#2').click()\n        get('#3').should(haveFocus())\n        cy.focused().tab()\n        get('#4').should(haveFocus())\n        cy.focused().tab()\n        get('#3').should(haveFocus())\n        cy.focused().tab({shift: true})\n        get('#4').should(haveFocus())\n        cy.focused().click()\n        get('#2').should(haveFocus())\n    },\n)\n\ntest('works with clone',\n    [html`\n        <div id=\"foo\" x-data=\"{\n            open: false,\n            triggerClone() {\n                var original = document.getElementById('foo');\n                var copy = original.cloneNode(true);\n                Alpine.clone(original, copy);\n                var p = document.createElement('p');\n                p.textContent = 'bar';\n                copy.appendChild(p);\n                original.parentNode.replaceChild(copy, original);\n            }\n        }\">\n            <button id=\"one\" @click=\"open = true\">Trap</button>\n\n            <div x-trap=\"open\">\n                <input type=\"text\">\n                <button id=\"two\" @click=\"triggerClone()\">Test</button>\n            </div>\n        </div>\n    `],\n    ({ get, wait }, reload) => {\n        get('#one').click()\n        get('#two').click()\n        get('p').should(haveText('bar'))\n    }\n)\n\ntest('releases focus when x-if is destroyed',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button id=\"1\" @click=\"open = true\">open</button>\n            <template x-if=\"open\">\n                <div x-trap=\"open\">\n                    <button @click=\"open = false\" id=\"2\">close</button>\n                </div>\n            </template>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('#1').click()\n        get('#2').should(haveFocus())\n        get('#2').click()\n        get('#1').should(haveFocus())\n    },\n)\n\ntest('can trap focus with inert',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <h1>I should have aria-hidden when outside trap</h1>\n\n            <button id=\"open\" @click=\"open = true\">open</button>\n\n            <div x-trap.inert=\"open\">\n                <button @click=\"open = false\" id=\"close\">close</button>\n            </div>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('#open').should(notHaveAttribute('aria-hidden', 'true'))\n        get('#open').click()\n        get('#open').should(haveAttribute('aria-hidden', 'true'))\n        get('#close').click()\n        get('#open').should(notHaveAttribute('aria-hidden', 'true'))\n    },\n)\n\ntest('inert only applies aria-hidden once',\n    [html`\n        <div>\n            <div id=\"sibling\">I should have aria-hidden applied once</div>\n            <div x-data=\"{\n                open: false,\n                timesApplied: 0,\n                init() {\n                    let observer = new MutationObserver((mutations) => {\n                        mutations.forEach((mutation) => {\n                            if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') {\n                                this.timesApplied++\n                            }\n                        })\n                    })\n\n                    observer.observe(document.querySelector('#sibling'), {\n                        attributes: true\n                    })\n                },\n            }\">\n                <input type=\"text\" id=\"timesApplied\" x-model=\"timesApplied\" />\n                <button id=\"trigger\" @click=\"open = true\">open</button>\n                <div x-trap.inert=\"open\">\n                    Hello, I'm a friendly modal!\n                </div>\n            </div>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('#trigger').click()\n        get('#timesApplied').should('have.value', '1')\n    },\n)\n\ntest('can trap focus with noscroll',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button id=\"open\" @click=\"open = true\">open</button>\n\n            <div x-trap.noscroll=\"open\">\n                <button @click=\"open = false\" id=\"close\">close</button>\n            </div>\n\n            <div style=\"height: 100vh\">&nbsp;</div>\n        </div>\n    `],\n    ({ get, window }, reload) => {\n        window().then((win) => {\n            let scrollbarWidth = win.innerWidth - win.document.documentElement.clientWidth\n            get('#open').click()\n            get('html').should(haveAttribute('style', `overflow: hidden; padding-right: ${scrollbarWidth}px;`))\n            get('#close').click()\n            get('html').should(notHaveAttribute('style', `overflow: hidden; padding-right: ${scrollbarWidth}px;`))\n        })\n    },\n)\n\ntest('can trap focus with noreturn',\n    [html`\n        <div x-data=\"{ open: false }\" x-trap.noreturn=\"open\">\n            <input id=\"input\" @focus=\"open = true\">\n            <div x-show=\"open\">\n                <button @click=\"open = false\" id=\"close\">close</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#input').focus()\n        get('#close')\n        get('#close').click()\n        get('#input').should(notHaveFocus())\n    },\n)\n\ntest('$focus.focus',\n    [html`\n        <div x-data>\n            <button id=\"press-me\" @click=\"$focus.focus(document.querySelector('#focus-me'))\">Focus Other</button>\n\n            <button id=\"focus-me\">Other</button>\n        </div>\n    `],\n    ({ get }) => {\n        get('#focus-me').should(notHaveFocus())\n        get('#press-me').click()\n        get('#focus-me').should(haveFocus())\n    },\n)\n\ntest('$focus.focusable',\n    [html`\n        <div x-data>\n            <div id=\"1\" x-text=\"$focus.focusable($el)\"></div>\n            <button id=\"2\" x-text=\"$focus.focusable($el)\"></button>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').should(haveText('false'))\n        get('#2').should(haveText('true'))\n    },\n)\n\ntest('$focus.focusables',\n    [html`\n        <div x-data>\n            <h1 x-text=\"$focus.within($refs.container).focusables().length\"></h1>\n            <div x-ref=\"container\">\n                <button>1</button>\n                <div>2</div>\n                <button>3</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('h1').should(haveText('2'))\n    },\n)\n\ntest('$focus.focused',\n    [html`\n        <div x-data>\n            <button @click=\"$el.textContent = $el.isSameNode($focus.focused())\">im-focused</button>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').click()\n        get('button').should(haveText('true'))\n    },\n)\n\ntest('$focus.lastFocused',\n    [html`\n        <div x-data>\n            <button id=\"1\" x-ref=\"first\">first-focused</button>\n            <button id=\"2\" @click=\"$el.textContent = $refs.first.isSameNode($focus.lastFocused())\">second-focused</button>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#2').click()\n        get('#2').should(haveText('true'))\n    },\n)\n\ntest('$focus.within',\n    [html`\n        <div x-data>\n            <button id=\"1\" x-text=\"$focus.within($refs.first).focusables().length\"></button>\n\n            <div x-ref=\"first\">\n                <button>1</button>\n                <button>2</button>\n            </div>\n\n            <div>\n                <button>1</button>\n                <button>2</button>\n                <button>3</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').should(haveText('2'))\n    },\n)\n\ntest('$focus.next',\n    [html`\n        <div x-data>\n            <div x-ref=\"first\">\n                <button id=\"1\" @click=\"$focus.within($refs.first).next(); $nextTick(() => $el.textContent = $focus.focused().textContent)\">1</button>\n                <button>2</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#1').should(haveText('2'))\n    },\n)\n\ntest('$focus.prev',\n    [html`\n        <div x-data>\n            <div x-ref=\"first\">\n                <button>2</button>\n                <button id=\"1\" @click=\"$focus.within($refs.first).prev(); $nextTick(() => $el.textContent = $focus.focused().textContent)\">1</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#1').should(haveText('2'))\n    },\n)\n\ntest('$focus.wrap',\n    [html`\n        <div x-data>\n            <div x-ref=\"first\">\n                <button>2</button>\n                <button id=\"1\" @click=\"$focus.within($refs.first).wrap().next(); $nextTick(() => $el.textContent = $focus.focused().textContent)\">1</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#1').should(haveText('2'))\n    },\n)\n\ntest('$focus.first',\n    [html`\n        <div x-data>\n            <button id=\"1\" @click=\"$focus.within($refs.first).first(); $nextTick(() => $el.textContent = $focus.focused().textContent)\">1</button>\n\n            <div x-ref=\"first\">\n                <button>2</button>\n                <button>3</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#1').should(haveText('2'))\n    },\n)\n\ntest('$focus.last',\n    [html`\n        <div x-data>\n            <button id=\"1\" @click=\"$focus.within($refs.first).last(); $nextTick(() => $el.textContent = $focus.focused().textContent)\">1</button>\n\n            <div x-ref=\"first\">\n                <button>2</button>\n                <button>3</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#1').should(haveText('3'))\n    },\n)\n\ntest('focuses element with autofocus',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <input type=\"text\" id=\"1\">\n            <button id=\"2\" @click=\"open = true\">open</button>\n            <div>\n                <div x-trap=\"open\">\n                    <input type=\"text\" id=\"3\">\n                    <input autofocus type=\"text\" id=\"4\">\n                    <button @click=\"open = false\" id=\"5\">close</button>\n                </div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#1').should(haveFocus())\n        get('#2').click()\n        get('#4').should(haveFocus())\n        cy.focused().tab()\n        get('#5').should(haveFocus())\n        cy.focused().tab()\n        get('#3').should(haveFocus())\n    }\n)\n\ntest('can disable x-trap autofocus with .noautofocus modifier',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <input type=\"text\" id=\"1\">\n            <button id=\"2\" @click=\"open = true\">open</button>\n            <div>\n                <div x-trap.noautofocus=\"open\">\n                    <input type=\"text\" id=\"3\">\n                    <input autofocus type=\"text\" id=\"4\">\n                    <button @click=\"open = false\" id=\"5\">close</button>\n                </div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').click()\n        get('#1').should(haveFocus())\n        get('#2').click()\n        get('#4').should(notHaveFocus())\n        cy.focused().tab()\n        get('#3').should(haveFocus())\n        cy.focused().tab({shift: true})\n        get('#5').should(haveFocus())\n        cy.focused().click()\n        get('#2').should(haveFocus())\n    }\n)\n\ntest('x-trap works with radio button groups',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <input type=\"text\" id=\"outside\">\n            <button id=\"open\" @click=\"open = true\">open</button>\n            <div x-trap=\"open\">\n                <input type=\"radio\" name=\"choice\" id=\"radio1\" value=\"1\" checked>\n                <input type=\"radio\" name=\"choice\" id=\"radio2\" value=\"2\">\n                <input type=\"radio\" name=\"choice\" id=\"radio3\" value=\"3\">\n                <button @click=\"open = false\" id=\"close\">close</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#outside').focus()\n        get('#outside').should(haveFocus())\n        get('#open').click()\n        // Focus should be inside the trap (on the checked radio)\n        get('#radio1').should(haveFocus())\n        // Close and verify focus returns outside the trap\n        get('#close').click()\n        get('#open').should(haveFocus())\n    },\n)\n\ntest('$focus.focusables excludes elements with inert attribute',\n    [html`\n        <div x-data>\n            <h1 x-text=\"$focus.within($refs.container).focusables().length\"></h1>\n            <div x-ref=\"container\">\n                <button>1</button>\n                <button inert>2</button>\n                <button>3</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('h1').should(haveText('2'))\n    },\n)\n\ntest('x-trap handles dynamically added focusable elements',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button id=\"open\" @click=\"open = true\">open</button>\n            <div x-trap=\"open\" x-ref=\"trap\">\n                <button id=\"first\">first</button>\n                <button id=\"last\" @click=\"$refs.trap.insertAdjacentHTML('beforeend', '<button id=dynamic>dynamic</button>')\">add element</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('#open').click()\n        get('#first').should(haveFocus())\n        cy.focused().tab()\n        get('#last').should(haveFocus())\n        get('#last').click()\n        cy.focused().tab()\n        get('#dynamic').should(haveFocus())\n        cy.focused().tab()\n        get('#first').should(haveFocus())\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/history.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\n// Skipping these tests because the plugin has been moved to livewire/livewire until it's stablhese tests because the plugin has been moved to livewire/livewire until it's stable...\ndescribe.skip('History tests', function () {\n    test('value is reflected in query string upon changing',\n        [html`\n            <div x-data=\"{ count: $queryString(1) }\">\n                <button @click=\"count++\">Inc</button>\n                <h1 @click=\"count--\">Dec</h1>\n                <span x-text=\"count\"></span>\n            </div>\n        `],\n        ({ get, url, go }) => {\n            get('span').should(haveText('1'))\n            url().should('not.include', '?count=1')\n            get('button').click()\n            get('span').should(haveText('2'))\n            url().should('include', '?count=2')\n            get('button').click()\n            get('span').should(haveText('3'))\n            url().should('include', '?count=3')\n            get('h1').click()\n            get('h1').click()\n            get('span').should(haveText('1'))\n            url().should('not.include', '?count=1')\n        },\n    )\n\n    test('can configure always making the query string value present',\n        [html`\n            <div x-data=\"{ count: $queryString(1).alwaysShow() }\">\n                <button @click=\"count++\">Inc</button>\n                <h1 @click=\"count--\">Dec</h1>\n                <span x-text=\"count\"></span>\n            </div>\n        `],\n        ({ get, url, go }) => {\n            get('span').should(haveText('1'))\n            url().should('include', '?count=1')\n            get('button').click()\n            get('span').should(haveText('2'))\n            url().should('include', '?count=2')\n            get('h1').click()\n            get('span').should(haveText('1'))\n            url().should('include', '?count=1')\n        },\n    )\n\n    test('value is persisted across requests',\n        [html`\n            <div x-data=\"{ count: $queryString(1) }\">\n                <button @click=\"count++\">Inc</button>\n                <span x-text=\"count\"></span>\n            </div>\n        `],\n        ({ get, url, go }, reload) => {\n            get('span').should(haveText('1'))\n            url().should('not.include', '?count=1')\n            get('button').click()\n            get('span').should(haveText('2'))\n            url().should('include', '?count=2')\n\n            reload()\n\n            url().should('include', '?count=2')\n            get('span').should(haveText('2'))\n        },\n    )\n\n    test('can provide an alias',\n        [html`\n            <div x-data=\"{ count: $queryString(1).as('tnuoc') }\">\n                <button @click=\"count++\">Inc</button>\n                <span x-text=\"count\"></span>\n            </div>\n        `],\n        ({ get, url, go }) => {\n            get('span').should(haveText('1'))\n            url().should('not.include', '?tnuoc=1')\n            get('button').click()\n            get('span').should(haveText('2'))\n            url().should('include', '?tnuoc=2')\n        },\n    )\n\n    test('can use pushState',\n        [html`\n            <div x-data=\"{ count: $queryString(1).usePush() }\">\n                <button @click=\"count++\">Inc</button>\n                <span x-text=\"count\"></span>\n            </div>\n        `],\n        ({ get, url, go }) => {\n            get('span').should(haveText('1'))\n            url().should('not.include', '?count=1')\n            get('button').click()\n            get('span').should(haveText('2'))\n            url().should('include', '?count=2')\n            go('back')\n            get('span').should(haveText('1'))\n            url().should('not.include', '?count=1')\n            go('forward')\n            get('span').should(haveText('2'))\n            url().should('include', '?count=2')\n        },\n    )\n\n    test('can go back and forth with multiple components',\n        [html`\n            <div x-data=\"{ foo: $queryString(1).usePush() }\" id=\"foo\">\n                <button @click=\"foo++\">Inc</button>\n                <span x-text=\"foo\"></span>\n            </div>\n\n            <div x-data=\"{ bar: $queryString(1).usePush() }\" id=\"bar\">\n                <button @click=\"bar++\">Inc</button>\n                <span x-text=\"bar\"></span>\n            </div>\n        `],\n        ({ get, url, go }) => {\n            get('#foo span').should(haveText('1'))\n            url().should('not.include', 'foo=1')\n            get('#foo button').click()\n            get('#foo span').should(haveText('2'))\n            url().should('include', 'foo=2')\n\n            get('#bar span').should(haveText('1'))\n            url().should('not.include', 'bar=1')\n            get('#bar button').click()\n            get('#bar span').should(haveText('2'))\n            url().should('include', 'bar=2')\n\n            go('back')\n\n            get('#bar span').should(haveText('1'))\n            url().should('not.include', 'bar=1')\n            get('#foo span').should(haveText('2'))\n            url().should('include', 'foo=2')\n\n            go('back')\n\n            get('#bar span').should(haveText('1'))\n            url().should('not.include', 'bar=1')\n            get('#foo span').should(haveText('1'))\n            url().should('not.include', 'foo=1')\n        },\n    )\n\n    test('supports arrays',\n        [html`\n            <div x-data=\"{ items: $queryString(['foo']) }\">\n                <button @click=\"items.push('bar')\">Inc</button>\n                <span x-text=\"JSON.stringify(items)\"></span>\n            </div>\n        `],\n        ({ get, url, go }, reload) => {\n            get('span').should(haveText('[\"foo\"]'))\n            url().should('not.include', '?items')\n            get('button').click()\n            get('span').should(haveText('[\"foo\",\"bar\"]'))\n            url().should('include', '?items[0]=foo&items[1]=bar')\n            reload()\n            url().should('include', '?items[0]=foo&items[1]=bar')\n            get('span').should(haveText('[\"foo\",\"bar\"]'))\n        },\n    )\n\n    test('supports deep arrays',\n        [html`\n            <div x-data=\"{ items: $queryString(['foo', ['bar', 'baz']]) }\">\n                <button @click=\"items[1].push('bob')\">Inc</button>\n                <span x-text=\"JSON.stringify(items)\"></span>\n            </div>\n        `],\n        ({ get, url, go }, reload) => {\n            get('span').should(haveText('[\"foo\",[\"bar\",\"baz\"]]'))\n            url().should('not.include', '?items')\n            get('button').click()\n            get('span').should(haveText('[\"foo\",[\"bar\",\"baz\",\"bob\"]]'))\n            url().should('include', '?items[0]=foo&items[1][0]=bar&items[1][1]=baz&items[1][2]=bob')\n            reload()\n            url().should('include', '?items[0]=foo&items[1][0]=bar&items[1][1]=baz&items[1][2]=bob')\n            get('span').should(haveText('[\"foo\",[\"bar\",\"baz\",\"bob\"]]'))\n        },\n    )\n\n    test('supports objects',\n        [html`\n            <div x-data=\"{ items: $queryString({ foo: 'bar' }) }\">\n                <button @click=\"items.bob = 'lob'\">Inc</button>\n                <span x-text=\"JSON.stringify(items)\"></span>\n            </div>\n        `],\n        ({ get, url, go }, reload) => {\n            get('span').should(haveText('{\"foo\":\"bar\"}'))\n            url().should('not.include', '?items')\n            get('button').click()\n            get('span').should(haveText('{\"foo\":\"bar\",\"bob\":\"lob\"}'))\n            url().should('include', '?items[foo]=bar&items[bob]=lob')\n            reload()\n            url().should('include', '?items[foo]=bar&items[bob]=lob')\n            get('span').should(haveText('{\"foo\":\"bar\",\"bob\":\"lob\"}'))\n        },\n    )\n\n    test('encodes values according to RFC 1738 (plus signs for spaces)',\n        [html`\n            <div x-data=\"{ foo: $queryString('hey&there').alwaysShow(), bar: $queryString('hey there').alwaysShow() }\">\n                <span x-text=\"JSON.stringify(foo)+JSON.stringify(bar)\"></span>\n            </div>\n        `],\n        ({ get, url, go }, reload) => {\n            url().should('include', '?foo=hey%26there&bar=hey+there')\n            get('span').should(haveText('\"hey&there\"\"hey there\"'))\n            reload()\n            url().should('include', '?foo=hey%26there&bar=hey+there')\n            get('span').should(haveText('\"hey&there\"\"hey there\"'))\n        },\n    )\n})\n\n"
  },
  {
    "path": "tests/cypress/integration/plugins/intersect.spec.js",
    "content": "import { haveText, test, html } from '../../utils'\n\ntest('can intersect',\n    [html`\n    <div x-data=\"{ count: 0 }\">\n        <span x-text=\"count\"></span>\n\n        <div x-intersect=\"count++\" style=\"margin-top: 100vh;\" id=\"1\">hi</div>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('span').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('2'))\n    },\n)\n\ntest('It should evaluate with \":enter\" only when the component is intersected',\n    [html`\n    <div x-data=\"{ count: 0 }\">\n        <span x-text=\"count\"></span>\n\n        <div x-intersect:enter=\"count++\" style=\"margin-top: 100vh;\" id=\"1\">hi</div>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('span').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('2'))\n    },\n)\n\ntest('It should evaluate with \":leave\" only when the component is not intersected',\n    [html`\n    <div x-data=\"{ count: 0 }\">\n        <span x-text=\"count\"></span>\n\n        <div x-intersect:leave=\"count++\" style=\"margin-top: 100vh;\" id=\"1\">hi</div>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('1'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('span').scrollIntoView({duration: 100})\n        get('span').should(haveText('2'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('2'))\n        get('span').scrollIntoView({duration: 100})\n        get('span').should(haveText('3'))\n    },\n)\n\ntest('.half',\n    [html`\n    <div x-data=\"{ count: 0 }\">\n        <span x-text=\"count\"></span>\n\n        <div id=\"container\" style=\"height: 400px; overflow-y: scroll;\">\n            <div style=\"height: 410px;\">spacer</div>\n\n            <div style=\"height: 400px\" x-intersect.half=\"count++\">\n                <div style=\"text-align: center;\">content</div>\n            </div>\n        </div>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#container').scrollTo(0, 100, {duration: 100})\n        get('span').should(haveText('0'))\n        get('#container').scrollTo(0, 210, {duration: 100})\n        get('span').should(haveText('1'))\n    },\n)\n\ntest('.full',\n    [html`\n    <div x-data=\"{ count: 0 }\">\n        <span x-text=\"count\"></span>\n\n        <div id=\"container\" style=\"height: 400px; overflow-y: scroll;\">\n            <div style=\"height: 401px;\">spacer</div>\n\n            <div style=\"height: 400px\" x-intersect.full=\"count++\">\n                <div style=\"text-align: center;\">content</div>\n            </div>\n        </div>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#container').scrollTo(0, 200, {duration: 100})\n        get('span').should(haveText('0'))\n        get('#container').scrollTo(0, 400, {duration: 100})\n        get('span').should(haveText('1'))\n    },\n)\n\ntest('.once',\n    [html`\n    <div x-data=\"{ count: 0 }\" x-init=\"setTimeout(() => count++, 300)\">\n        <span x-text=\"count\"></span>\n\n        <div x-intersect.once=\"count++\" style=\"margin-top: 100vh;\" id=\"1\">hi</div>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('span').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('2'))\n    },\n)\n\ntest('.margin',\n    [html`\n    <div x-data=\"{ count: 0 }\">\n        <span x-text=\"count\"></span>\n        <div id=\"buffer-top\" style=\"height: calc(100vh - 50px); margin-top: 100vh; background: pink\"></div>\n        <div id=\"buffer-bottom\" style=\"height: 50px; background: green\"></div>\n        <div x-intersect.margin.100px=\"count++;$nextTick(() => console.log(count))\" id=\"1\">hi</div>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#buffer-top').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('span').scrollIntoView({duration: 100})\n        get('span').should(haveText('1'))\n        get('#buffer-top').scrollIntoView({duration: 100})\n        get('span').should(haveText('2'))\n        get('#1').scrollIntoView({duration: 100})\n        get('span').should(haveText('2'))\n    },\n)\n\ntest('.threshold',\n    [html`\n    <div x-data=\"{ count: 0 }\">\n        <div x-ref=\"foo\" style=\"width: 250px; overflow: scroll; display: flex; justify-content: start\">\n            <div style=\"min-width: 250px;\">first</div>\n            <div style=\"min-width: 250px\" x-intersect.threshold.50=\"count++;\">second</div>\n        </div>\n        <button @click=\"$refs.foo.scrollTo({ left: 15 })\" id=\"1\">first</button>\n        <button @click=\"$refs.foo.scrollTo({ left: 250 })\" id=\"2\">second</button>\n        <span x-text=\"count\"></span>\n    </div>\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('#1').click()\n        get('span').should(haveText('0'))\n        get('#2').click()\n        get('span').should(haveText('1'))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/mask.spec.js",
    "content": "import { haveData, haveValue, html, test } from '../../utils'\n\ntest('x-mask',\n    [html`<input x-data x-mask=\"(999) 999-9999\">`],\n    ({ get }) => {\n        // Type a phone number:\n        get('input').type('12').should(haveValue('(12'))\n        get('input').type('3 ').should(haveValue('(123) '))\n        get('input').type('4567890').should(haveValue('(123) 456-7890'))\n        // Clear it & paste formatted version in:\n        get('input').type('{selectAll}{backspace}')\n        get('input').invoke('val', '(123) 456-7890').trigger('blur')\n        get('input').should(haveValue('(123) 456-7890'))\n        // Clear it & paste un-formatted version in:\n        get('input').type('{selectAll}{backspace}')\n        get('input').invoke('val', '1234567890').trigger('blur')\n        get('input').should(haveValue('(123) 456-7890'))\n        // Make sure backspace works.\n        get('input').type('{backspace}').should(haveValue('(123) 456-789'))\n        get('input').type('{backspace}').should(haveValue('(123) 456-78'))\n        get('input').type('{backspace}').should(haveValue('(123) 456-7'))\n        get('input').type('{backspace}').should(haveValue('(123) 456-'))\n        get('input').type('{backspace}').should(haveValue('(123) 456'))\n        get('input').type('{backspace}').should(haveValue('(123) 45'))\n        // Make sure you can't type other characters.\n        get('input').type('a').should(haveValue('(123) 45'))\n        get('input').type('-').should(haveValue('(123) 45'))\n        // Put cursor in other places in the input and make sure you can type.\n        get('input').type('67890').should(haveValue('(123) 456-7890'))\n        get('input').type('{leftArrow}{leftArrow}{leftArrow}{leftArrow}{leftArrow}')\n        get('input').type('123456').should(haveValue('(123) 456-1234'))\n    },\n)\n\ntest('x-mask autocomplete',\n    [html`<input x-data x-mask=\"+1 (999) 999-9999\">`],\n    ({ get }) => {\n        // Type a phone number:\n        get('input').type('21').should(haveValue('+1 (21'))\n        get('input').type('3 ').should(haveValue('+1 (213) '))\n        get('input').type('4567890').should(haveValue('+1 (213) 456-7890'))\n        // Clear it & paste formatted version in:\n        get('input').type('{selectAll}{backspace}')\n        get('input').invoke('val', '+1 (213) 456-7890').trigger('blur')\n        get('input').should(haveValue('+1 (213) 456-7890'))\n        // Clear it & paste un-formatted version in:\n        get('input').type('{selectAll}{backspace}')\n        get('input').invoke('val', '2134567890').trigger('blur')\n        get('input').should(haveValue('+1 (213) 456-7890'))\n        // Clear it and start with an area code starting with 1:\n        get('input').type('{selectAll}{backspace}')\n        get('input').type('1 ').should(haveValue('+1 '))\n        get('input').type('2').should(haveValue('+1 (2'))\n        get('input').type('13 ').should(haveValue('+1 (213) '))\n        get('input').type('456 78-90').should(haveValue('+1 (213) 456-7890'))\n    },\n)\n\ntest('x-mask with x-model',\n    [html`\n        <div x-data=\"{ value: '' }\">\n            <input x-mask=\"(999) 999-9999\" x-model=\"value\" id=\"1\">\n            <input id=\"2\" x-model=\"value\">\n        </div>\n    `],\n    ({ get }) => {\n        // Type a phone number:\n        get('#1').type('12').should(haveValue('(12'))\n        get('#2').should(haveValue('(12'))\n        get('#1').type('3 ').should(haveValue('(123) '))\n        get('#2').should(haveValue('(123) '))\n        get('#1').type('4567890').should(haveValue('(123) 456-7890'))\n        get('#2').should(haveValue('(123) 456-7890'))\n        // Clear it & paste formatted version in:\n        get('#1').type('{selectAll}{backspace}')\n        get('#1').invoke('val', '(123) 456-7890').trigger('input')\n        get('#1').should(haveValue('(123) 456-7890'))\n        get('#2').should(haveValue('(123) 456-7890'))\n        // Clear it & paste un-formatted version in:\n        get('#1').type('{selectAll}{backspace}')\n        get('#1').invoke('val', '1234567890').trigger('input')\n        get('#1').should(haveValue('(123) 456-7890'))\n        get('#2').should(haveValue('(123) 456-7890'))\n    },\n)\n\n// This passes locally but fails in CI...\ntest('x-mask with latently bound x-model',\n    [html`\n        <div x-data=\"{ value: '' }\">\n            <input x-mask=\"(999) 999-9999\" x-bind=\"{ 'x-model': 'value' }\" id=\"1\">\n            <input id=\"2\" x-model=\"value\">\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').type('a').should(haveValue('('))\n        get('#2').should(haveValue('('))\n        get('#1').type('1').should(haveValue('(1'))\n        get('#2').should(haveValue('(1'))\n    },\n)\n\ntest('x-mask with x-model with initial value',\n    [html`\n        <div x-data=\"{ value: '1234567890' }\">\n            <input x-mask=\"(999) 999-9999\" x-model=\"value\" id=\"1\">\n            <input id=\"2\" x-model=\"value\">\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').should(haveValue('(123) 456-7890'))\n        get('#2').should(haveValue('(123) 456-7890'))\n    },\n)\n\ntest('x-mask with x-model if initial value is null it should remain null',\n    [html`\n        <div x-data=\"{ value: null }\">\n            <input x-mask=\"(999) 999-9999\" x-model=\"value\" id=\"1\">\n            <input id=\"2\" x-model=\"value\">\n            <span id=\"3\" x-text=\"value === null ? 'NULL' : value\"></span>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').should(haveValue(''))\n        get('#2').should(haveValue(''))\n        get('#3').contains('NULL')\n    },\n)\n\ntest('x-mask with a falsy input',\n    [html`<input x-data x-mask=\"\">`],\n    ({ get }) => {\n\t    get('input').type('1').should(haveValue('1'))\n\t    get('input').type('2').should(haveValue('12'))\n\t    get('input').type('ua').should(haveValue('12ua'))\n\t    get('input').type('/').should(haveValue('12ua/'))\n\t    get('input').type('cs').should(haveValue('12ua/cs'))\n\t    get('input').type('  3').should(haveValue('12ua/cs  3'))\n    }\n)\n\ntest('x-mask with a falsy string input',\n    [html`<input x-data x-mask=\"false\">`],\n    ({ get }) => {\n\t    get('input').type('1').should(haveValue('1'))\n\t    get('input').type('2').should(haveValue('12'))\n\t    get('input').type('ua').should(haveValue('12ua'))\n\t    get('input').type('/').should(haveValue('12ua/'))\n\t    get('input').type('cs').should(haveValue('12ua/cs'))\n\t    get('input').type('  3').should(haveValue('12ua/cs  3'))\n    }\n)\n\ntest('x-mask with non wildcard alpha-numeric characters (b)',\n    [html`<input x-data x-mask=\"ba9*b\">`],\n    ({ get }) => {\n        get('input').type('a').should(haveValue('ba'))\n        get('input').type('a').should(haveValue('ba'))\n        get('input').type('3').should(haveValue('ba3'))\n        get('input').type('z ').should(haveValue('ba3zb'))\n        get('input').type('{backspace}{backspace}4 ').should(haveValue('ba34b'))\n    }\n)\n\ntest('x-mask:dynamic',\n    [html`<input x-data x-mask:dynamic=\"'(999)'\">`],\n    ({ get }) => {\n        get('input').type('123 ').should(haveValue('(123)'))\n    }\n)\n\ntest('$money',\n    [html`<input x-data x-mask:function=\"$money\">`],\n    ({ get }) => {\n        get('input').type('30.00').should(haveValue('30.00'))\n        get('input').type('5').should(haveValue('30.00'))\n        get('input').type('{backspace}').should(haveValue('30.0'))\n        get('input').type('5').should(haveValue('30.05'))\n        get('input').type('{selectAll}{backspace}').should(haveValue(''))\n        get('input').type('123').should(haveValue('123'))\n        get('input').type('4').should(haveValue('1,234'))\n        get('input').type('567').should(haveValue('1,234,567'))\n        get('input').type('.89').should(haveValue('1,234,567.89'))\n        get('input').type('{leftArrow}7').should(haveValue('1,234,567.87'))\n        get('input').type('{leftArrow}{leftArrow}{leftArrow}89').should(haveValue('123,456,789.87'))\n        get('input').type('{leftArrow}{leftArrow}{leftArrow}{leftArrow}12').should(haveValue('12,345,612,789.87'))\n        get('input').type('3').should(haveValue('123,456,123,789.87'))\n        // Clear it & paste formatted version in:\n        get('input').type('{selectAll}{backspace}')\n        get('input').invoke('val', '123,456,132,789.87').trigger('blur')\n        get('input').should(haveValue('123,456,132,789.87'))\n        // Clear it & paste un-formatted version in:\n        get('input').type('{selectAll}{backspace}')\n        get('input').invoke('val', '123456132789.87').trigger('blur')\n        get('input').should(haveValue('123,456,132,789.87'))\n    },\n)\n\ntest('$money swapping commas and periods',\n    [html`<input x-data x-mask:function=\"$money($input, ',')\">`],\n    ({ get }) => {\n        get('input').type('30,00').should(haveValue('30,00'))\n        get('input').type('5').should(haveValue('30,00'))\n        get('input').type('{backspace}').should(haveValue('30,0'))\n        get('input').type('5').should(haveValue('30,05'))\n        get('input').type('{selectAll}{backspace}').should(haveValue(''))\n        get('input').type('123').should(haveValue('123'))\n        get('input').type('4').should(haveValue('1.234'))\n        get('input').type('567').should(haveValue('1.234.567'))\n        get('input').type(',89').should(haveValue('1.234.567,89'))\n    },\n)\n\ntest('$money with different thousands separator',\n    [html`<input x-data x-mask:function=\"$money($input, '.', ' ')\" />`],\n    ({ get }) => {\n        get('input').type('3000').should(haveValue('3 000'));\n        get('input').type('{backspace}').blur().should(haveValue('300'));\n        get('input').type('5').should(haveValue('3 005'));\n        get('input').type('{selectAll}{backspace}').should(haveValue(''));\n        get('input').type('123').should(haveValue('123'));\n        get('input').type('4').should(haveValue('1 234'));\n        get('input').type('567').should(haveValue('1 234 567'));\n        get('input').type('.89').should(haveValue('1 234 567.89'));\n    }\n);\n\ntest('$money works with permanent inserted at beginning',\n    [html`<input x-data x-mask:dynamic=\"$money\">`],\n    ({ get }) => {\n        get('input').type('40.00').should(haveValue('40.00'))\n        get('input').type('{leftArrow}{leftArrow}{leftArrow}{leftArrow}{leftArrow}')\n        get('input').type('$')\n        get('input').should(haveValue('40.00'))\n    }\n)\n\ntest('$money mask should remove letters or non numeric characters',\n    [html`<input x-data x-mask:dynamic=\"$money\">`],\n    ({ get }) => {\n        get('input').type('A').should(haveValue(''))\n        get('input').type('ABC').should(haveValue(''))\n        get('input').type('$').should(haveValue(''))\n        get('input').type('/').should(haveValue(''))\n        get('input').type('40').should(haveValue('40'))\n    }\n)\n\ntest('$money mask negative values',\n    [html`\n        <input id=\"1\" x-data x-mask:dynamic=\"$money($input)\" value=\"-1234.50\" />\n        <input id=\"2\" x-data x-mask:dynamic=\"$money($input)\" />\n    `],\n    ({ get }) => {\n        get('#1').should(haveValue('-1,234.50'))\n        get('#2').type('-12.509').should(haveValue('-12.50'))\n        get('#2').type('{leftArrow}{leftArrow}{leftArrow}-').should(haveValue('-12.50'))\n        get('#2').type('{leftArrow}{leftArrow}{backspace}').should(haveValue('12.50'))\n        get('#2').type('{rightArrow}-').should(haveValue('12.50'))\n        get('#2').type('{rightArrow}-').should(haveValue('12.50'))\n        get('#2').type('{rightArrow}{rightArrow}{rightArrow}-').should(haveValue('12.50'))\n        get('#2').type('{leftArrow}{leftArrow}{leftArrow}{leftArrow}{leftArrow}-').should(haveValue('-12.50'))\n    }\n)\n\ntest('$money with custom decimal precision',\n    [html`\n        <input id=\"0\" x-data x-mask:dynamic=\"$money($input, '.', ',', 0)\" />\n        <input id=\"1\" x-data x-mask:dynamic=\"$money($input, '.', ',', 1)\" />\n        <input id=\"2\" x-data x-mask:dynamic=\"$money($input, '.', ',', 2)\" />\n        <input id=\"3\" x-data x-mask:dynamic=\"$money($input, '.', ',', 3)\" />\n    `],\n    ({ get }) => {\n        get('#0').type('1234.5678').should(haveValue('12,345,678'))\n        get('#1').type('1234.5678').should(haveValue('1,234.5'))\n        get('#2').type('1234.5678').should(haveValue('1,234.56'))\n        get('#3').type('1234.5678').should(haveValue('1,234.567'))\n    }\n)\n\ntest('x-mask masks programmatic x-model updates',\n    [html`\n        <div x-data=\"{ value: 55555 }\">\n            <input type=\"text\" x-model=\"value\" x-mask:dynamic=\"$money($input)\">\n            <button @click=\"value = 23420\">Change</button>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(haveValue('55,555'))\n        get('button').click()\n        get('input').should(haveValue('23,420'))\n        get('div').should(haveData('value', '23,420'))\n    }\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/morph.spec.js",
    "content": "import { haveAttribute, haveFocus, haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils'\n\ntest('can morph components and preserve Alpine state',\n    [html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button @click=\"foo = 'baz'\">Change Foo</button>\n            <span x-text=\"foo\"></span>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = document.querySelector('div').outerHTML\n\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('span').should(haveText('baz'))\n    },\n)\n\ntest('morphing target uses outer Alpine scope',\n    [html`\n        <article x-data=\"{ foo: 'bar' }\">\n            <div>\n                <button @click=\"foo = 'baz'\">Change Foo</button>\n                <span x-text=\"foo\"></span>\n            </div>\n        </article>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = document.querySelector('div').outerHTML\n\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('span').should(haveText('baz'))\n    },\n)\n\ntest('can morph with HTML change and preserve Alpine state',\n    [html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button @click=\"foo = 'baz'\">Change Foo</button>\n            <span x-text=\"foo\"></span>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = document.querySelector('div').outerHTML.replace('Change Foo', 'Changed Foo')\n\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n        get('button').should(haveText('Change Foo'))\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('span').should(haveText('baz'))\n        get('button').should(haveText('Changed Foo'))\n    },\n)\n\ntest('morphing an element with multiple nested Alpine components preserves scope',\n    [html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button @click=\"foo = 'baz'\">Change Foo</button>\n            <span x-text=\"foo\"></span>\n\n            <div x-data=\"{ bob: 'lob' }\">\n                <a href=\"#\" @click.prevent=\"bob = 'law'\">Change Bob</a>\n                <h1 x-text=\"bob\"></h1>\n            </div>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = document.querySelector('div').outerHTML\n\n        get('span').should(haveText('bar'))\n        get('h1').should(haveText('lob'))\n        get('button').click()\n        get('a').click()\n        get('span').should(haveText('baz'))\n        get('h1').should(haveText('law'))\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('span').should(haveText('baz'))\n        get('h1').should(haveText('law'))\n    },\n)\n\ntest('can morph teleports',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport=\"#b\">\n                <div>\n                    <h1 x-text=\"count\"></h1>\n                    <h2>hey</h2>\n                </div>\n            </template>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport=\"#b\">\n                <div>\n                    <h1 x-text=\"count\"></h1>\n                    <h2>there</h2>\n                </div>\n            </template>\n        </div>\n        `\n        get('h1').should(haveText('1'))\n        get('h2').should(haveText('hey'))\n        get('button').click()\n        get('h1').should(haveText('2'))\n        get('h2').should(haveText('hey'))\n\n        get('div#a').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('h1').should(haveText('2'))\n        get('h2').should(haveText('there'))\n    },\n)\n\ntest('can morph teleports in different places with IDs',\n    [html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <template x-teleport=\"#b\" id=\"template\">\n                <div>\n                    <h1 x-text=\"count\"></h1>\n                    <h2>hey</h2>\n                </div>\n            </template>\n\n            <div>moving placeholder</div>\n        </div>\n\n        <div id=\"b\"></div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <div x-data=\"{ count: 1 }\" id=\"a\">\n            <button @click=\"count++\">Inc</button>\n\n            <div>moving placeholder</div>\n\n            <template x-teleport=\"#b\" id=\"template\">\n                <div>\n                    <h1 x-text=\"count\"></h1>\n                    <h2>there</h2>\n                </div>\n            </template>\n        </div>\n        `\n        get('h1').should(haveText('1'))\n        get('h2').should(haveText('hey'))\n        get('button').click()\n        get('h1').should(haveText('2'))\n        get('h2').should(haveText('hey'))\n\n        get('div#a').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('h1').should(haveText('2'))\n        get('h2').should(haveText('there'))\n    },\n)\n\ntest('can morph',\n    [html`\n        <ul>\n            <li>foo<input></li>\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <ul>\n                <li>bar<input></li>\n                <li>foo<input></li>\n            </ul>\n        `\n\n        get('input').type('foo')\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('li').should(haveLength(2))\n        get('li:nth-of-type(1)').should(haveText('bar'))\n        get('li:nth-of-type(2)').should(haveText('foo'))\n        get('li:nth-of-type(1) input').should(haveValue('foo'))\n        get('li:nth-of-type(2) input').should(haveValue(''))\n    },\n)\n\ntest('can morph using lookahead',\n    [html`\n        <ul>\n            <li>foo<input></li>\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <ul>\n                <li>bar<input></li>\n                <li>baz<input></li>\n                <li>foo<input></li>\n            </ul>\n        `\n\n        get('input').type('foo')\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml, {lookahead: true}))\n\n        get('li').should(haveLength(3))\n        get('li:nth-of-type(1)').should(haveText('bar'))\n        get('li:nth-of-type(2)').should(haveText('baz'))\n        get('li:nth-of-type(3)').should(haveText('foo'))\n        get('li:nth-of-type(1) input').should(haveValue(''))\n        get('li:nth-of-type(2) input').should(haveValue(''))\n        get('li:nth-of-type(3) input').should(haveValue('foo'))\n    },\n)\n\ntest('can morph using keys',\n    [html`\n        <ul>\n            <li key=\"1\">foo<input></li>\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <ul>\n                <li key=\"2\">bar<input></li>\n                <li key=\"3\">baz<input></li>\n                <li key=\"1\">foo<input></li>\n            </ul>\n        `\n\n        get('input').type('foo')\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('li').should(haveLength(3))\n        get('li:nth-of-type(1)').should(haveText('bar'))\n        get('li:nth-of-type(2)').should(haveText('baz'))\n        get('li:nth-of-type(3)').should(haveText('foo'))\n        get('li:nth-of-type(1) input').should(haveValue(''))\n        get('li:nth-of-type(2) input').should(haveValue(''))\n        get('li:nth-of-type(3) input').should(haveValue('foo'))\n    },\n)\n\ntest('can morph using a custom key function',\n    [html`\n        <ul>\n            <li data-key=\"1\">foo<input></li>\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <ul>\n                <li data-key=\"2\">bar<input></li>\n                <li data-key=\"3\">baz<input></li>\n                <li data-key=\"1\">foo<input></li>\n            </ul>\n        `\n\n        get('input').type('foo')\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml, {key(el) {return el.dataset.key}}))\n\n        get('li').should(haveLength(3))\n        get('li:nth-of-type(1)').should(haveText('bar'))\n        get('li:nth-of-type(2)').should(haveText('baz'))\n        get('li:nth-of-type(3)').should(haveText('foo'))\n        get('li:nth-of-type(1) input').should(haveValue(''))\n        get('li:nth-of-type(2) input').should(haveValue(''))\n        get('li:nth-of-type(3) input').should(haveValue('foo'))\n    },\n)\n\ntest('can morph using keys with existing key to be moved up',\n    [html`\n        <ul>\n            <li key=\"1\">foo<input></li>\n            <li key=\"2\">bar<input></li>\n            <li key=\"3\">baz<input></li>\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <ul>\n                <li key=\"1\">foo<input></li>\n                <li key=\"3\">baz<input></li>\n            </ul>\n        `\n\n        get('li:nth-of-type(1) input').type('foo')\n        get('li:nth-of-type(3) input').type('baz')\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('li').should(haveLength(2))\n        get('li:nth-of-type(1)').should(haveText('foo'))\n        get('li:nth-of-type(2)').should(haveText('baz'))\n        get('li:nth-of-type(1) input').should(haveValue('foo'))\n        get('li:nth-of-type(2) input').should(haveValue('baz'))\n    },\n)\n\ntest('can morph text nodes',\n    [html`<h2>Foo <br> Bar</h2>`],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`<h2>Foo <br> Baz</h2>`\n        get('h2').then(([el]) => window.Alpine.morph(el, toHtml))\n        get('h2').should(haveHtml('Foo <br> Baz'))\n    },\n)\n\ntest('can morph with added element before and siblings are different',\n    [html`\n        <button>\n            <div>\n                <div>second</div>\n                <div data=\"false\">third</div>\n            </div>\n        </button>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <button>\n            <div>first</div>\n            <div>\n                <div>second</div>\n                <div data=\"true\">third</div>\n            </div>\n        </button>\n        `\n\n        get('button').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('button > div').should(haveLength(2))\n        get('button > div:nth-of-type(1)').should(haveText('first'))\n        get('button > div:nth-of-type(2)').should(haveHtml(`\n                <div>second</div>\n                <div data=\"true\">third</div>\n            `))\n    },\n)\n\ntest('can morph using different keys',\n    [html`\n        <ul>\n            <li key=\"1\">foo</li>\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <ul>\n                <li key=\"2\">bar</li>\n            </ul>\n        `\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('li').should(haveLength(1))\n        get('li:nth-of-type(1)').should(haveText('bar'))\n        get('li:nth-of-type(1)').should(haveAttribute('key', '2'))\n    },\n)\n\ntest('can morph elements with dynamic ids',\n    [html`\n        <ul>\n            <li x-data x-bind:id=\"'1'\" >foo<input></li>\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <ul>\n                <li x-data x-bind:id=\"'1'\" >foo<input></li>\n            </ul>\n        `\n\n        get('input').type('foo')\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml, {\n            key(el) { return el.id }\n        }))\n\n        get('li:nth-of-type(1) input').should(haveValue('foo'))\n    },\n)\n\ntest('can morph different inline nodes',\n    [html`\n    <div id=\"from\">\n        Hello <span>World</span>\n    </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <div id=\"to\">\n            Welcome <b>Person</b>!\n        </div>\n        `\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('div').should(haveHtml('\\n            Welcome <b>Person</b>!\\n        '))\n    },\n)\n\ntest('can morph multiple nodes',\n    [html`\n        <div x-data>\n            <p></p>\n            <p></p>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let paragraphs = document.querySelectorAll('p')\n        window.Alpine.morph(paragraphs[0], '<p>1</p')\n        window.Alpine.morph(paragraphs[1], '<p>2</p')\n        get('p:nth-of-type(1)').should(haveText('1'))\n        get('p:nth-of-type(2)').should(haveText('2'))\n    },\n)\n\ntest('can morph table tr',\n    [html`\n        <table>\n            <tr><td>1</td></tr>\n        </table>\n    `],\n    ({ get }, reload, window, document) => {\n        let tr = document.querySelector('tr')\n        window.Alpine.morph(tr, '<tr><td>2</td></tr>')\n        get('td').should(haveText('2'))\n    },\n)\n\ntest('can morph with conditional markers',\n    [html`\n        <main>\n            <!--[if BLOCK]><![endif]-->\n            <div>foo<input></div>\n            <!--[if ENDBLOCK]><![endif]-->\n            <div>bar<input></div>\n        </main>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <main>\n            <!--[if BLOCK]><![endif]-->\n            <div>foo<input></div>\n            <div>baz<input></div>\n            <!--[if ENDBLOCK]><![endif]-->\n            <div>bar<input></div>\n        </main>\n        `\n\n        get('div:nth-of-type(1) input').type('foo')\n        get('div:nth-of-type(2) input').type('bar')\n\n        get('main').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('div:nth-of-type(1) input').should(haveValue('foo'))\n        get('div:nth-of-type(2) input').should(haveValue(''))\n        get('div:nth-of-type(3) input').should(haveValue('bar'))\n    },\n)\n\ntest('can morph with flat-nested conditional markers',\n    [html`\n        <main>\n            <!--[if BLOCK]><![endif]-->\n            <div>foo<input></div>\n            <!--[if BLOCK]><![endif]-->\n            <!--[if ENDBLOCK]><![endif]-->\n            <!--[if ENDBLOCK]><![endif]-->\n            <div>bar<input></div>\n        </main>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <main>\n            <!--[if BLOCK]><![endif]-->\n            <div>foo<input></div>\n            <!--[if BLOCK]><![endif]-->\n            <!--[if ENDBLOCK]><![endif]-->\n            <div>baz<input></div>\n            <!--[if ENDBLOCK]><![endif]-->\n            <div>bar<input></div>\n        </main>\n        `\n\n        get('div:nth-of-type(1) input').type('foo')\n        get('div:nth-of-type(2) input').type('bar')\n\n        get('main').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('div:nth-of-type(1) input').should(haveValue('foo'))\n        get('div:nth-of-type(2) input').should(haveValue(''))\n        get('div:nth-of-type(3) input').should(haveValue('bar'))\n    },\n)\n\n// '@event' handlers cannot be assigned directly on the element without Alpine's internl monkey patching...\ntest('can morph @event handlers', [\n    html`\n        <div x-data=\"{ foo: 'bar' }\">\n            <button x-text=\"foo\"></button>\n        </div>\n    `],\n    ({ get, click }, reload, window, document) => {\n        let toHtml = html`\n            <button @click=\"foo = 'buzz'\" x-text=\"foo\"></button>\n        `;\n\n        get('button').should(haveText('bar'));\n\n        get('button').then(([el]) => window.Alpine.morph(el, toHtml));\n        get('button').click();\n        get('button').should(haveText('buzz'));\n    }\n);\n\ntest('can morph menu',\n    [html`\n        <main x-data>\n            <article x-menu>\n                <button data-trigger x-menu:button x-text=\"'ready'\"></button>\n\n                <div x-menu:items>\n                    <button x-menu:item href=\"#edit\">\n                        Edit\n                        <input>\n                    </button>\n                </div>\n            </article>\n        </main>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n            <main x-data>\n                <article x-menu>\n                    <button data-trigger x-menu:button x-text=\"'ready'\"></button>\n\n                    <div x-menu:items>\n                        <button x-menu:item href=\"#edit\">\n                            Edit\n                            <input>\n                        </button>\n                    </div>\n                </article>\n            </main>\n        `\n\n        get('[data-trigger]').should(haveText('ready'));\n        get('button[data-trigger').click()\n\n        get('input').type('foo')\n\n        get('main').then(([el]) => window.Alpine.morph(el, toHtml, {\n            key(el) { return el.id }\n        }))\n\n        get('input').should(haveValue('foo'))\n    },\n)\n\ntest('can morph teleports with x-for',\n    [html`\n    <main x-data>\n        <template x-teleport=\"body\">\n            <article>\n                <template x-for=\"item in 3\" :key=\"item\">\n                    <span x-text=\"item\"></span>\n                </template>\n            </article>\n        </template>\n\n        <button x-data=\"{ count: 1 }\" x-text=\"count\" x-on:click=\"count++\" type=\"button\"></button>\n    </main>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <main x-data>\n            <template x-teleport=\"body\">\n                <article>\n                    <template x-for=\"item in 3\" :key=\"item\">\n                        <span x-text=\"item\"></span>\n                    </template>\n                </article>\n            </template>\n\n            <button x-data=\"{ count: 1 }\" x-text=\"count\" x-on:click=\"count++\" type=\"button\"></button>\n        </main>\n        `\n\n        get('button').should(haveText('1'));\n        get('button').click()\n        get('button').should(haveText('2'));\n\n        get('main').then(([el]) => window.Alpine.morph(el, toHtml));\n\n        get('button').should(haveText('2'));\n        get('button').click()\n        get('button').should(haveText('3'));\n    },\n)\n\ntest('can morph teleports with root-level state',\n    [html`\n    <main x-data>\n        <template x-teleport=\"body\">\n            <div x-data=\"{ foo: 'bar' }\">\n                <h1 x-text=\"foo\"></h1>\n            </div>\n        </template>\n    </main>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <main x-data>\n            <template x-teleport=\"body\">\n                <div x-data=\"{ foo: 'bar' }\">\n                    <h1 x-text=\"foo\"></h1>\n                </div>\n            </template>\n        </main>\n        `\n\n        get('h1').should(haveText('bar'));\n\n        get('main').then(([el]) => window.Alpine.morph(el, toHtml));\n\n        get('h1').should(haveText('bar'));\n    },\n)\n\ntest('can use morphBetween with comment markers',\n    [html`\n        <div>\n            <h2>Header</h2>\n            <!--start-->\n            <p>Original content</p>\n            <!--end-->\n            <h2>Footer</h2>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find the comment markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'start') startMarker = node;\n            if (node.textContent === 'end') endMarker = node;\n        }\n\n        window.Alpine.morphBetween(startMarker, endMarker, '<p>New content</p><p>More content</p>')\n\n        get('h2:nth-of-type(1)').should(haveText('Header'))\n        get('h2:nth-of-type(2)').should(haveText('Footer'))\n        get('p').should(haveLength(2))\n        get('p:nth-of-type(1)').should(haveText('New content'))\n        get('p:nth-of-type(2)').should(haveText('More content'))\n    },\n)\n\ntest('morphBetween preserves Alpine state',\n    [html`\n        <div x-data=\"{ count: 1 }\">\n            <button @click=\"count++\">Inc</button>\n            <!--morph-start-->\n            <p x-text=\"count\"></p>\n            <input x-model=\"count\">\n            <!--morph-end-->\n            <span>Static content</span>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'morph-start') startMarker = node;\n            if (node.textContent === 'morph-end') endMarker = node;\n        }\n\n        get('p').should(haveText('1'))\n        get('button').click()\n        get('p').should(haveText('2'))\n\n        window.Alpine.morphBetween(startMarker, endMarker, `\n            <p x-text=\"count\"></p>\n            <article>New element</article>\n            <input x-model=\"count\">\n        `)\n\n        get('p').should(haveText('2'))\n        get('article').should(haveText('New element'))\n        get('input').should(haveValue('2'))\n        get('input').clear().type('5')\n        get('p').should(haveText('5'))\n    },\n)\n\ntest('morphBetween with keyed elements',\n    [html`\n        <ul>\n            <!--items-start-->\n            <li key=\"1\">foo<input></li>\n            <li key=\"2\">bar<input></li>\n            <!--items-end-->\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'items-start') startMarker = node;\n            if (node.textContent === 'items-end') endMarker = node;\n        }\n\n        get('li:nth-of-type(1) input').type('first')\n        get('li:nth-of-type(2) input').type('second')\n\n        get('ul').then(([el]) => window.Alpine.morphBetween(startMarker, endMarker, `\n            <li key=\"3\">baz<input></li>\n            <li key=\"1\">foo<input></li>\n            <li key=\"2\">bar<input></li>\n        `, { key(el) { return el.getAttribute('key') } }))\n\n        get('li').should(haveLength(3))\n        get('li:nth-of-type(1)').should(haveText('baz'))\n        get('li:nth-of-type(2)').should(haveText('foo'))\n        get('li:nth-of-type(3)').should(haveText('bar'))\n        // Need to verify by the key attribute since the elements have been reordered\n        get('li[key=\"1\"] input').should(haveValue('first'))\n        get('li[key=\"2\"] input').should(haveValue('second'))\n        get('li[key=\"3\"] input').should(haveValue(''))\n    },\n)\n\ntest('morphBetween with custom key function',\n    [html`\n        <div>\n            <!--start-->\n            <div data-id=\"a\">Item A<input></div>\n            <div data-id=\"b\">Item B<input></div>\n            <!--end-->\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'start') startMarker = node;\n            if (node.textContent === 'end') endMarker = node;\n        }\n\n        get('div[data-id=\"a\"] input').type('aaa')\n        get('div[data-id=\"b\"] input').type('bbb')\n\n        window.Alpine.morphBetween(startMarker, endMarker, `\n            <div data-id=\"b\">Item B Updated<input></div>\n            <div data-id=\"c\">Item C<input></div>\n            <div data-id=\"a\">Item A Updated<input></div>\n        `, {\n            key(el) { return el.dataset.id }\n        })\n\n        get('div[data-id]').should(haveLength(3))\n        get('div[data-id=\"b\"]').should(haveText('Item B Updated'))\n        get('div[data-id=\"a\"]').should(haveText('Item A Updated'))\n        get('div[data-id=\"a\"] input').should(haveValue('aaa'))\n        get('div[data-id=\"b\"] input').should(haveValue('bbb'))\n        get('div[data-id=\"c\"] input').should(haveValue(''))\n    },\n)\n\ntest('morphBetween with hooks',\n    [html`\n        <div>\n            <!--region-start-->\n            <p>Old paragraph</p>\n            <span>Old span</span>\n            <!--region-end-->\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'region-start') startMarker = node;\n            if (node.textContent === 'region-end') endMarker = node;\n        }\n\n        let removedElements = []\n        let addedElements = []\n\n        window.Alpine.morphBetween(startMarker, endMarker, `\n            <p>New paragraph</p>\n            <article>New article</article>\n        `, {\n            removing(el) {\n                if (el.nodeType === 1) removedElements.push(el.tagName)\n            },\n            adding(el) {\n                if (el.nodeType === 1) addedElements.push(el.tagName)\n            }\n        })\n\n        get('p').should(haveText('New paragraph'))\n        get('article').should(haveText('New article'))\n\n        // Check hooks were called\n        cy.wrap(removedElements).should('deep.equal', ['SPAN'])\n        cy.wrap(addedElements).should('deep.equal', ['ARTICLE'])\n    },\n)\n\ntest('morphBetween with empty content',\n    [html`\n        <div>\n            <h3>Title</h3>\n            <!--content-start-->\n            <p>Content 1</p>\n            <p>Content 2</p>\n            <!--content-end-->\n            <h3>End</h3>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'content-start') startMarker = node;\n            if (node.textContent === 'content-end') endMarker = node;\n        }\n\n        window.Alpine.morphBetween(startMarker, endMarker, '')\n\n        get('h3').should(haveLength(2))\n        get('p').should(haveLength(0))\n\n        // Verify markers are still there\n        let found = false;\n        const walker2 = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n        while (node = walker2.nextNode()) {\n            if (node.textContent === 'content-start' || node.textContent === 'content-end') {\n                found = true;\n            }\n        }\n        cy.wrap(found).should('be.true')\n    },\n)\n\ntest('morphBetween with nested Alpine components',\n    [html`\n        <div x-data=\"{ outer: 'foo' }\">\n            <!--nested-start-->\n            <div x-data=\"{ inner: 'bar' }\">\n                <span x-text=\"outer\"></span>\n                <span x-text=\"inner\"></span>\n                <input x-model=\"inner\">\n            </div>\n            <!--nested-end-->\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'nested-start') startMarker = node;\n            if (node.textContent === 'nested-end') endMarker = node;\n        }\n\n        get('span:nth-of-type(1)').should(haveText('foo'))\n        get('span:nth-of-type(2)').should(haveText('bar'))\n        get('input').clear().type('baz')\n        get('span:nth-of-type(2)').should(haveText('baz'))\n\n        window.Alpine.morphBetween(startMarker, endMarker, `\n            <div x-data=\"{ inner: 'bar' }\">\n                <h4>New heading</h4>\n                <span x-text=\"outer\"></span>\n                <span x-text=\"inner\"></span>\n                <input x-model=\"inner\">\n            </div>\n        `)\n\n        get('h4').should(haveText('New heading'))\n        get('span:nth-of-type(1)').should(haveText('foo'))\n        get('span:nth-of-type(2)').should(haveText('baz'))\n        get('input').should(haveValue('baz'))\n    },\n)\n\ntest('morphBetween with conditional blocks',\n    [html`\n        <main>\n            <!--section-start-->\n            <!--[if BLOCK]><![endif]-->\n            <div>conditional content<input></div>\n            <!--[if ENDBLOCK]><![endif]-->\n            <p>regular content<input></p>\n            <!--section-end-->\n        </main>\n    `],\n    ({ get }, reload, window, document) => {\n        // Find markers\n        let startMarker, endMarker;\n        const walker = document.createTreeWalker(\n            document.body,\n            NodeFilter.SHOW_COMMENT,\n            null,\n            false\n        );\n\n        let node;\n        while (node = walker.nextNode()) {\n            if (node.textContent === 'section-start') startMarker = node;\n            if (node.textContent === 'section-end') endMarker = node;\n        }\n\n        get('div input').type('div-value')\n        get('p input').type('p-value')\n\n        window.Alpine.morphBetween(startMarker, endMarker, `\n            <!--[if BLOCK]><![endif]-->\n            <div>conditional content<input></div>\n            <span>new conditional<input></span>\n            <!--[if ENDBLOCK]><![endif]-->\n            <p>regular content<input></p>\n        `)\n\n        get('div input').should(haveValue('div-value'))\n        get('span input').should(haveValue(''))\n        get('p input').should(haveValue('p-value'))\n    },\n)\n\ntest('can ignore region between comment markers using skipUntil',\n    [html`\n        <ul>\n            <li>foo</li>\n            <!-- [Slot] -->\n            <li>bar</li>\n            <li>baz</li>\n            <!-- [EndSlot] -->\n            <!-- bob -->\n        </ul>\n    `],\n    ({ get }, reload, window, document) => {\n        // Generate \"to\" html without the items between Slot markers\n        let toHtml = html`\n            <ul>\n                <li>foo</li>\n                <!-- [Slot] -->\n                <!-- [EndSlot] -->\n                <!-- bob -->\n            </ul>\n        `\n\n        // The original list should have 3 li's\n        get('li').should(haveLength(3))\n        get('li:nth-of-type(1)').should(haveText('foo'))\n        get('li:nth-of-type(2)').should(haveText('bar'))\n        get('li:nth-of-type(3)').should(haveText('baz'))\n\n        // Run morph with custom updating hook that calls skipUntil\n        let isStart = node => node && node.nodeType === 8 && node.textContent.trim() === '[Slot]'\n        let isEnd   = node => node && node.nodeType === 8 && node.textContent.trim() === '[EndSlot]'\n\n        get('ul').then(([el]) => window.Alpine.morph(el, toHtml, {\n            updating(from, to, childrenOnly, skip, skipChildren, skipUntil) {\n                if (isStart(from) && isStart(to)) {\n                    skipUntil(node => isEnd(node))\n                }\n            },\n        }))\n\n        // After morph, the list should still contain the items inside the slot\n        get('li').should(haveLength(3))\n        get('li:nth-of-type(2)').should(haveText('bar'))\n        get('li:nth-of-type(3)').should(haveText('baz'))\n    },\n)\n\ntest('morph properly closes dialog opened with showModal()',\n    [html`\n        <div x-data>\n            <dialog>\n                <p>Dialog content</p>\n            </dialog>\n            <button id=\"outside\">Outside</button>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        // Open the dialog with showModal() so it enters the top layer\n        get('dialog').then(([dialog]) => {\n            dialog.showModal()\n            expect(dialog.open).to.be.true\n        })\n\n        // Morph to a version without 'open' attribute (same as original)\n        get('div').then(([el]) => {\n            window.Alpine.morph(el, `\n                <div x-data>\n                    <dialog>\n                        <p>Dialog content</p>\n                    </dialog>\n                    <button id=\"outside\">Outside</button>\n                </div>\n            `)\n        })\n\n        // Dialog should be closed\n        get('dialog').then(([dialog]) => {\n            expect(dialog.open).to.be.false\n        })\n\n        // Page should not be inert — outside button should be clickable\n        get('#outside').click()\n    },\n)\n\ntest('can morph child element containing x-ref without crashing',\n    [html`\n        <div x-data=\"{ value: 'initial' }\">\n            <section>\n                <input x-ref=\"myInput\" x-model=\"value\">\n                <button @click=\"$refs.myInput.focus()\">Focus</button>\n                <span x-text=\"value\"></span>\n            </section>\n        </div>\n    `],\n    ({ get }, reload, window, document) => {\n        get('span').should(haveText('initial'))\n\n        // Morph a CHILD element (section), not the x-data root\n        get('section').then(([el]) => {\n            window.Alpine.morph(el, `\n                <section>\n                    <input x-ref=\"myInput\" x-model=\"value\">\n                    <button @click=\"$refs.myInput.focus()\">Focus</button>\n                    <span x-text=\"value\"></span>\n                </section>\n            `)\n        })\n\n        // State should be preserved\n        get('span').should(haveText('initial'))\n\n        // Verify $refs still resolves after morph\n        get('button').click()\n        get('input').should(haveFocus())\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/navigate.spec.js",
    "content": "import { beEqualTo, beVisible, haveAttribute, haveFocus, haveText, html, notBeVisible, test } from '../../utils'\n\n// Skipping these tests because the plugin has been moved to livewire/livewire until it's stablhese tests because the plugin has been moved to livewire/livewire until it's stable...\ndescribe.skip('Navigate tests', function () {\n    it.skip('navigates pages without reload',\n        () => {\n            cy.intercept('/first', {\n                headers: { 'content-type': 'text/html' },\n                body: html`\n                    <html>\n                        <head>\n                            <script src=\"/../../packages/navigate/dist/cdn.js\" defer></script>\n                            <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n                        </head>\n                        <body>\n                            <a href=\"/second\">Navigate</a>\n\n                            <h2>First Page</h2>\n\n                            <script>\n                                window.fromFirstPage = true\n                            </script>\n                        </body>\n                    </html>\n            `})\n\n            cy.intercept('/second', {\n                headers: { 'content-type': 'text/html' },\n                body: html`\n                    <html>\n                        <head>\n                            <script src=\"/../../packages/navigate/dist/cdn.js\" defer></script>\n                            <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n                        </head>\n                        <body>\n                            <h2>Second Page</h2>\n                        </body>\n                    </html>\n            `})\n\n            cy.visit('/first')\n            cy.window().its('fromFirstPage').should(beEqualTo(true))\n            cy.get('h2').should(haveText('First Page'))\n\n            cy.get('a').click()\n\n            cy.url().should('include', '/second')\n            cy.get('h2').should(haveText('Second Page'))\n            cy.window().its('fromFirstPage').should(beEqualTo(true))\n        },\n    )\n\n    it.skip('autofocuses autofocus elements',\n        () => {\n            cy.intercept('/first', {\n                headers: { 'content-type': 'text/html' },\n                body: html`\n                    <html>\n                        <head>\n                            <script src=\"/../../packages/navigate/dist/cdn.js\" defer></script>\n                            <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n                        </head>\n                        <body>\n                            <a href=\"/second\">Navigate</a>\n                        </body>\n                    </html>\n            `})\n\n            cy.intercept('/second', {\n                headers: { 'content-type': 'text/html' },\n                body: html`\n                    <html>\n                        <head>\n                            <script src=\"/../../packages/navigate/dist/cdn.js\" defer></script>\n                            <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n                        </head>\n                        <body>\n                            <input type=\"text\" autofocus>\n                        </body>\n                    </html>\n            `})\n\n            cy.visit('/first')\n\n            cy.get('a').click()\n\n            cy.url().should('include', '/second')\n            cy.get('input').should(haveFocus())\n        },\n    )\n\n    it.skip('scripts and styles are properly merged/run or skipped',\n        () => {\n            cy.intercept('/first', {\n                headers: { 'content-type': 'text/html' },\n                body: html`\n                    <html>\n                        <head>\n                            <title>First Page</title>\n                            <meta name=\"description\" content=\"first description\">\n                            <script src=\"/../../packages/navigate/dist/cdn.js\" defer></script>\n                            <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n                        </head>\n                        <body>\n                            <a href=\"/second\">Navigate</a>\n                        </body>\n                    </html>\n            `})\n\n            cy.intercept('/head-script.js', {\n                headers: { 'content-type': 'text/js' },\n                body: `window.fromHeadScript = true`\n            })\n\n            cy.intercept('/body-script.js', {\n                headers: { 'content-type': 'text/js' },\n                body: `window.fromBodyScript = true`\n            })\n\n            cy.intercept('/head-style.css', {\n                headers: { 'content-type': 'text/css' },\n                body: `body { background: black !important; }`\n            })\n\n            cy.intercept('/second', {\n                headers: { 'content-type': 'text/html' },\n                body: html`\n                    <html>\n                        <head>\n                            <title>Second Page</title>\n                            <meta name=\"description\" content=\"second description\">\n                            <script src=\"/../../packages/navigate/dist/cdn.js\" defer></script>\n                            <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n                            <script src=\"head-script.js\" defer></script>\n                            <script>window.fromHeadScriptInline = true</script>\n                            <link rel=\"stylesheet\" src=\"head-style.css\"></script>\n                        </head>\n                        <body>\n                            <script src=\"body-script.js\" defer></script>\n                            <script>window.fromBodyScriptInline = true</script>\n                        </body>\n                    </html>\n            `})\n\n            cy.visit('/first')\n\n            cy.get('a').click()\n\n            cy.url().should('include', '/second')\n            cy.title().should(beEqualTo('Second Page'))\n            cy.get('meta').should(haveAttribute('name', 'description'))\n            cy.get('meta').should(haveAttribute('content', 'second description'))\n            cy.window().its('fromHeadScript').should(beEqualTo(true))\n            cy.window().its('fromHeadScriptInline').should(beEqualTo(true))\n            cy.window().its('fromBodyScript').should(beEqualTo(true))\n            cy.window().its('fromBodyScriptInline').should(beEqualTo(true))\n        },\n    )\n})\n"
  },
  {
    "path": "tests/cypress/integration/plugins/persist.spec.js",
    "content": "import { beEqualTo, exist, haveText, html, notExist, test } from '../../utils'\n\ntest('can persist number',\n    [html`\n        <div x-data=\"{ count: $persist(1) }\">\n            <button @click=\"count++\">Inc</button>\n            <span x-text=\"count\"></span>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span').should(haveText('1'))\n        get('button').click()\n        get('span').should(haveText('2'))\n        reload()\n        get('span').should(haveText('2'))\n    },\n)\n\ntest('can persist string',\n    [html`\n        <div x-data=\"{ message: $persist('foo') }\">\n            <input x-model=\"message\">\n\n            <span x-text=\"message\"></span>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span').should(haveText('foo'))\n        get('input').clear().type('bar')\n        get('span').should(haveText('bar'))\n        reload()\n        get('span').should(haveText('bar'))\n    },\n)\n\ntest('can persist array',\n    [html`\n        <div x-data=\"{ things: $persist(['foo', 'bar']) }\">\n            <button @click=\"things.push('baz')\"></button>\n\n            <span x-text=\"things.join('-')\"></span>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span').should(haveText('foo-bar'))\n        get('button').click()\n        get('span').should(haveText('foo-bar-baz'))\n        reload()\n        get('span').should(haveText('foo-bar-baz'))\n    },\n)\n\ntest('can persist object',\n    [html`\n        <div x-data=\"{ something: $persist({foo: 'bar'}) }\">\n            <button id=\"one\" @click=\"something.foo = 'baz'\"></button>\n            <button id=\"two\" @click=\"something = {foo: 'bob'}\"></button>\n\n            <span x-text=\"something.foo\"></span>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span').should(haveText('bar'))\n        get('button#one').click()\n        get('span').should(haveText('baz'))\n        reload()\n        get('span').should(haveText('baz'))\n        get('button#two').click()\n        get('span').should(haveText('bob'))\n        reload()\n        get('span').should(haveText('bob'))\n    },\n)\n\ntest('can persist boolean',\n    [html`\n        <div x-data=\"{ show: $persist(false) }\">\n            <button @click=\"show = true\"></button>\n\n            <template x-if=\"show\">\n                <span>Foo</span>\n            </template>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span').should(notExist())\n        get('button').click()\n        get('span').should(exist())\n        reload()\n        get('span').should(exist())\n    },\n)\n\ntest('can persist multiple components using the same property',\n    [html`\n        <div x-data=\"{ duplicate: $persist('foo') }\">\n            <button @click=\"duplicate = 'bar'\"></button>\n            <span id=\"one\" x-text=\"duplicate\"></span>\n        </div>\n        <div x-data=\"{ duplicate: $persist('foo') }\">\n            <span id=\"two\" x-text=\"duplicate\"></span>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span#one').should(haveText('foo'))\n        get('span#two').should(haveText('foo'))\n        get('button').click()\n        get('span#one').should(haveText('bar'))\n        reload()\n        get('span#one').should(haveText('bar'))\n        get('span#two').should(haveText('bar'))\n    },\n)\n\ntest('can persist using an alias',\n    [html`\n        <div x-data=\"{ show: $persist(false) }\">\n            <template x-if=\"show\">\n                <span id=\"one\">Foo</span>\n            </template>\n        </div>\n        <div x-data=\"{ show: $persist(false).as('foo') }\">\n            <button id=\"test\" @click=\"show = true\"></button>\n\n            <template x-if=\"show\">\n                <span id=\"two\">Foo</span>\n            </template>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span#one').should(notExist())\n        get('span#two').should(notExist())\n        get('button').click()\n        get('span#one').should(notExist())\n        get('span#two').should(exist())\n        reload()\n        get('span#one').should(notExist())\n        get('span#two').should(exist())\n    },\n)\n\ntest('aliases do not affect other $persist calls',\n    [html`\n        <div x-data=\"{ show: $persist(false).as('foo') }\">\n            <button id=\"test\" @click=\"show = true\"></button>\n\n            <template x-if=\"show\">\n                <span id=\"two\">Foo</span>\n            </template>\n        </div>\n        <div x-data=\"{ open: $persist(false) }\">\n            <template x-if=\"open\">\n                <span id=\"one\">Foo</span>\n            </template>\n        </div>\n    `],\n    ({ get }, reload) => {\n        get('span#one').should(notExist())\n        get('span#two').should(notExist())\n        get('button').click()\n        get('span#one').should(notExist())\n        get('span#two').should(exist())\n        reload()\n        get('span#one').should(notExist())\n        get('span#two').should(exist())\n    },\n)\n\ntest('can persist to custom storage',\n    [html`\n        <div x-data=\"{ message: $persist('foo').using(sessionStorage) }\">\n            <input x-model=\"message\">\n\n            <span x-text=\"message\"></span>\n        </div>\n    `],\n    ({ get, window }, reload) => {\n        get('span').should(haveText('foo'))\n        get('input').clear().type('bar')\n        get('span').should(haveText('bar'))\n        reload()\n        get('span').should(haveText('bar'))\n        window().its('sessionStorage._x_message').should(beEqualTo(JSON.stringify('bar')))\n        window().then((win) => {\n            win.sessionStorage.clear()\n        });\n    },\n)\n\ntest('can persist to custom storage using an alias',\n    [html`\n        <div x-data=\"{ message: $persist('foo').as('mymessage').using(sessionStorage) }\">\n            <input x-model=\"message\">\n\n            <span x-text=\"message\"></span>\n        </div>\n    `],\n    ({ get, window }, reload) => {\n        get('span').should(haveText('foo'))\n        get('input').clear().type('bar')\n        get('span').should(haveText('bar'))\n        window().its('sessionStorage.mymessage').should(beEqualTo(JSON.stringify('bar')))\n        window().then((win) => {\n            win.sessionStorage.clear()\n        });\n    },\n)\n\ntest('can persist using global Alpine.$persist within Alpine.store',\n    [html`\n        <div x-data>\n            <input x-model=\"$store.name.firstName\">\n\n            <span x-text=\"$store.name.firstName\"></span>\n        </div>\n    `, `\n        Alpine.store('name', {\n            firstName: Alpine.$persist('Daniel').as('dev-name')\n        })\n    `],\n    ({ get, window }, reload) => {\n        get('span').should(haveText('Daniel'))\n        get('input').clear().type('Malcolm')\n        get('span').should(haveText('Malcolm'))\n        reload()\n        get('span').should(haveText('Malcolm'))\n    },\n)\n\ntest('persist in Stores is available in init call',\n    [html`\n        <div x-data>\n            <span x-text=\"$store.name.name\"></span>\n        </div>\n    `, `\n        Alpine.store('name', {\n            firstName: Alpine.$persist('Daniel').as('dev-name'),\n            name: null,\n            init() {\n                this.name = String(this.firstName)\n            }\n        })\n    `],\n    ({ get }) => {\n        get('span').should(haveText('Daniel'))\n    },\n)\n\ntest('multiple aliases work when using global Alpine.$persist',\n    [html`\n        <div x-data>\n            <input x-model=\"$store.name.firstName\">\n\n            <span x-text=\"$store.name.firstName\"></span>\n            <p x-text=\"$store.name.lastName\"></p>\n        </div>\n    `, `\n        Alpine.store('name', {\n            firstName: Alpine.$persist('John').as('first-name'),\n            lastName: Alpine.$persist('Doe').as('name-name')\n        })\n    `],\n    ({ get, window }, reload) => {\n        get('span').should(haveText('John'))\n        get('p').should(haveText('Doe'))\n        get('input').clear().type('Joe')\n        get('span').should(haveText('Joe'))\n        get('p').should(haveText('Doe'))\n        reload()\n        get('span').should(haveText('Joe'))\n        get('p').should(haveText('Doe'))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/resize.spec.js",
    "content": "import { haveText, test, html, notHaveText } from '../../utils'\n\ntest('can react to the resizing of an element',\n    [html`\n    <div x-data=\"{ width: 0, height: 0 }\">\n        <h1 x-text=\"width\"></h1>\n        <h2 x-text=\"height\"></h2>\n\n        <div x-ref=\"target\" x-resize=\"width = $width; height = $height\" style=\"width: 100px; height: 100px; background: red\">\n        </div>\n\n        <button id=\"1\" x-on:click=\"$refs.target.style.width = 50 + 'px'\">resize width</button>\n        <button id=\"2\" x-on:click=\"$refs.target.style.height = 50 + 'px'\">resize height</button>\n    </div>\n    `],\n    ({ get }) => {\n        get('h1').should(haveText('100'))\n        get('h2').should(haveText('100'))\n        get('button#1').click()\n        get('h1').should(haveText('50'))\n        get('h2').should(haveText('100'))\n        get('button#2').click()\n        get('h1').should(haveText('50'))\n        get('h2').should(haveText('50'))\n    },\n)\n\ntest('can react to the resizing of the document',\n    [html`\n    <div x-data=\"{ width: 0, height: 0 }\">\n        <h1 x-text=\"width\"></h1>\n        <h2 x-text=\"height\"></h2>\n\n        <div x-ref=\"target\" x-resize.document=\"width = $width; height = $height\" style=\"width: 100px; height: 100px; background: red\">\n    </div>\n    `],\n    ({ get }) => {\n        get('h1').should(notHaveText('0'))\n        get('h2').should(notHaveText('0'))\n        get('h1').should(notHaveText('100'))\n        get('h2').should(notHaveText('100'))\n\n        cy.viewport(550, 750)\n\n        get('h1').should(haveText('550'))\n        get('h2').should(haveText('750'))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/sort.spec.js",
    "content": "import { haveText, html, test } from '../../utils'\n\n/**\n * Skipping all these tests because they are flaky in CI.\n * They should all pass locally though...\n */\n\ntest.skip('basic drag sorting works',\n    [html`\n        <div x-data>\n            <ul x-sort>\n                <li id=\"1\">foo</li>\n                <li id=\"2\">bar</li>\n                <li id=\"3\">baz</li>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul li').eq(0).should(haveText('foo'))\n        get('ul li').eq(1).should(haveText('bar'))\n        get('ul li').eq(2).should(haveText('baz'))\n\n        // Unfortunately, github actions doesn't like \"async/await\" here\n        // so we need to use .then() throughout this entire test...\n        get('#1').drag('#3').then(() => {\n            get('ul li').eq(0).should(haveText('bar'))\n            get('ul li').eq(1).should(haveText('baz'))\n            get('ul li').eq(2).should(haveText('foo'))\n\n            get('#3').drag('#1').then(() => {\n                get('ul li').eq(0).should(haveText('bar'))\n                get('ul li').eq(1).should(haveText('foo'))\n                get('ul li').eq(2).should(haveText('baz'))\n            })\n        })\n    },\n)\n\ntest.skip('can use a custom handle',\n    [html`\n        <div x-data>\n            <ul x-sort>\n                <li id=\"1\"><span x-sort:handle>handle</span> - foo</li>\n                <li id=\"2\"><span x-sort:handle>handle</span> - bar</li>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul li').eq(0).should(haveText('handle - foo'))\n        get('ul li').eq(1).should(haveText('handle - bar'))\n\n        get('#1 span').drag('#2').then(() => {\n            get('ul li').eq(0).should(haveText('handle - bar'))\n            get('ul li').eq(1).should(haveText('handle - foo'))\n        })\n    },\n)\n\ntest.skip('can move items between groups',\n    [html`\n        <div x-data>\n            <ul x-sort x-sort:group=\"one\">\n                <li id=\"1\">foo</li>\n                <li id=\"2\">bar</li>\n            </ul>\n\n            <ol x-sort x-sort:group=\"one\">\n                <li id=\"3\">oof</li>\n                <li id=\"4\">rab</li>\n            </ol>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul li').eq(0).should(haveText('foo'))\n        get('ul li').eq(1).should(haveText('bar'))\n        get('ol li').eq(0).should(haveText('oof'))\n        get('ol li').eq(1).should(haveText('rab'))\n\n        get('#1').drag('#4').then(() => {\n            get('ul li').eq(0).should(haveText('bar'))\n            get('ol li').eq(0).should(haveText('oof'))\n            get('ol li').eq(1).should(haveText('foo'))\n            get('ol li').eq(2).should(haveText('rab'))\n        })\n    },\n)\n\ntest.skip('sort handle method',\n    [html`\n        <div x-data=\"{ handle(key, position) { $refs.outlet.textContent = key+'-'+position } }\">\n            <ul x-sort=\"handle\">\n                <li x-sort:key=\"1\" id=\"1\">foo</li>\n                <li x-sort:key=\"2\" id=\"2\">bar</li>\n                <li x-sort:key=\"3\" id=\"3\">baz</li>\n            </ul>\n\n            <h1 x-ref=\"outlet\"></h1>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').drag('#3').then(() => {\n            get('h1').should(haveText('1-2'))\n\n            get('#3').drag('#1').then(() => {\n                get('h1').should(haveText('3-2'))\n            })\n        })\n    },\n)\n\ntest.skip('item is also supported for the key in the sort handle method',\n    [html`\n        <div x-data=\"{ handle(item, position) { $refs.outlet.textContent = item+'-'+position } }\">\n            <ul x-sort=\"handle\">\n                <li x-sort:item=\"1\" id=\"1\">foo</li>\n                <li x-sort:item=\"2\" id=\"2\">bar</li>\n                <li x-sort:item=\"3\" id=\"3\">baz</li>\n            </ul>\n\n            <h1 x-ref=\"outlet\"></h1>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').drag('#3').then(() => {\n            get('h1').should(haveText('1-2'))\n\n            get('#3').drag('#1').then(() => {\n                get('h1').should(haveText('3-2'))\n            })\n        })\n    },\n)\n\ntest.skip('can access key and position in handler',\n    [html`\n        <div x-data=\"{ handle(key, position) { $refs.outlet.textContent = key+'-'+position } }\">\n            <ul x-sort=\"handle($position, $key)\">\n                <li x-sort:key=\"1\" id=\"1\">foo</li>\n                <li x-sort:key=\"2\" id=\"2\">bar</li>\n                <li x-sort:key=\"3\" id=\"3\">baz</li>\n            </ul>\n\n            <h1 x-ref=\"outlet\"></h1>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').drag('#3').then(() => {\n            get('h1').should(haveText('2-1'))\n\n            get('#3').drag('#1').then(() => {\n                get('h1').should(haveText('2-3'))\n            })\n        })\n    },\n)\n\ntest.skip('can access $item instead of $key',\n    [html`\n        <div x-data=\"{ handle(key, position) { $refs.outlet.textContent = key+'-'+position } }\">\n            <ul x-sort=\"handle($position, $item)\">\n                <li x-sort:key=\"1\" id=\"1\">foo</li>\n                <li x-sort:key=\"2\" id=\"2\">bar</li>\n                <li x-sort:key=\"3\" id=\"3\">baz</li>\n            </ul>\n\n            <h1 x-ref=\"outlet\"></h1>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').drag('#3').then(() => {\n            get('h1').should(haveText('2-1'))\n\n            get('#3').drag('#1').then(() => {\n                get('h1').should(haveText('2-3'))\n            })\n        })\n    },\n)\n\ntest.skip('can use custom sortablejs configuration',\n    [html`\n        <div x-data>\n            <ul x-sort x-sort:config=\"{ filter: '[data-ignore]' }\">\n                <li id=\"1\" data-ignore>foo</li>\n                <li id=\"2\">bar</li>\n                <li id=\"3\">baz</li>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul li').eq(0).should(haveText('foo'))\n        get('ul li').eq(1).should(haveText('bar'))\n        get('ul li').eq(2).should(haveText('baz'))\n\n        get('#1').drag('#3').then(() => {\n            get('ul li').eq(0).should(haveText('foo'))\n            get('ul li').eq(1).should(haveText('bar'))\n            get('ul li').eq(2).should(haveText('baz'))\n\n            get('#3').drag('#1').then(() => {\n                get('ul li').eq(0).should(haveText('baz'))\n                get('ul li').eq(1).should(haveText('foo'))\n                get('ul li').eq(2).should(haveText('bar'))\n            })\n        })\n    },\n)\n\ntest.skip('works with Livewire morphing',\n    [html`\n        <div x-data>\n            <ul x-sort>\n                <!-- [if BLOCK]><![endif] -->\n                <li id=\"1\">foo</li>\n                <li id=\"2\">bar</li>\n                <li id=\"3\">baz</li>\n                <!-- [if ENDBLOCK]><![endif] -->\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1').drag('#3').then(() => {\n            // This is the easiest way I can think of to assert the order of HTML comments doesn't change...\n            get('ul').should('have.html', `\\n                <!-- [if BLOCK]><![endif] -->\\n                \\n                <li id=\"2\" style=\"\">bar</li>\\n                <li id=\"3\" style=\"\">baz</li>\\n                \\n            <li id=\"1\" draggable=\"false\" class=\"\" style=\"opacity: 1;\">foo</li><!-- [if ENDBLOCK]><![endif] -->`)\n        })\n    },\n)\n\ntest.skip('x-sort:item can be used as a filter',\n    [html`\n        <div x-data>\n            <ul x-sort>\n                <li x-sort:item id=\"1\">foo</li>\n                <li id=\"2\">bar</li>\n                <li x-sort:item id=\"3\">baz</li>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul li').eq(0).should(haveText('foo'))\n        get('ul li').eq(1).should(haveText('bar'))\n        get('ul li').eq(2).should(haveText('baz'))\n\n        // Unfortunately, github actions doesn't like \"async/await\" here\n        // so we need to use .then() throughout this entire test...\n        get('#1').drag('#3').then(() => {\n            get('ul li').eq(0).should(haveText('bar'))\n            get('ul li').eq(1).should(haveText('baz'))\n            get('ul li').eq(2).should(haveText('foo'))\n\n            get('#2').drag('#1').then(() => {\n                get('ul li').eq(0).should(haveText('bar'))\n                get('ul li').eq(1).should(haveText('baz'))\n                get('ul li').eq(2).should(haveText('foo'))\n            })\n        })\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/combobox.spec.js",
    "content": "import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, contain, notContain, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, haveValue, haveLength, ensureNoConsoleWarns} from '../../../utils'\n\ntest('it works with x-model',\n    [html`\n        <div\n            x-data=\"{\n                query: '',\n                selected: null,\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ],\n                get filteredPeople() {\n                    return this.query === ''\n                        ? this.people\n                        : this.people.filter((person) => {\n                            return person.name.toLowerCase().includes(this.query.toLowerCase())\n                        })\n                },\n            }\"\n        >\n            <div x-combobox x-model=\"selected\">\n                <label x-combobox:label>Select person</label>\n\n                <div>\n                    <div>\n                        <input\n                            x-combobox:input\n                            :display-value=\"person => person.name\"\n                            @change=\"query = $event.target.value\"\n                            placeholder=\"Search...\"\n                        />\n\n                        <button x-combobox:button>Toggle</button>\n                    </div>\n\n                    <div x-combobox:options>\n                        <ul>\n                            <template\n                                x-for=\"person in filteredPeople\"\n                                :key=\"person.id\"\n                                hidden\n                            >\n                                <li\n                                    x-combobox:option\n                                    :option=\"person.id\"\n                                    :value=\"person\"\n                                    :disabled=\"person.disabled\"\n                                    x-text=\"person.name\"\n                                >\n                                </li>\n                            </template>\n                        </ul>\n\n                        <p x-show=\"filteredPeople.length == 0\">No people match your query.</p>\n                    </div>\n                </div>\n\n                <article x-text=\"selected?.name\"></article>\n            </div>\n\n            <a href=\"#\" x-on:click.prevent=\"selected = { id: 7, name: 'Caroline Schultz' }\">Set selected via code</a>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('Arlene Mccoy'))\n        get('article').should(haveText('Arlene Mccoy'))\n        get('button').click()\n        get('ul').should(contain('Wade Cooper'))\n            .should(contain('Arlene Mccoy'))\n            .should(contain('Devon Webb'))\n        get('[option=\"3\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('Devon Webb'))\n        get('article').should(haveText('Devon Webb'))\n        get('button').click()\n        get('ul').should(contain('Wade Cooper'))\n            .should(contain('Arlene Mccoy'))\n            .should(contain('Devon Webb'))\n        get('[option=\"1\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('Wade Cooper'))\n        get('article').should(haveText('Wade Cooper'))\n        get('a').click()\n        get('input').should(haveValue('Caroline Schultz'))\n        get('article').should(haveText('Caroline Schultz'))\n    },\n)\n\ntest('initial value is set from x-model',\n    [html`\n        <div\n            x-data=\"{\n                query: '',\n                selected: { id: 1, name: 'Wade Cooper' },\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                ],\n                get filteredPeople() {\n                    return this.query === ''\n                        ? this.people\n                        : this.people.filter((person) => {\n                            return person.name.toLowerCase().includes(this.query.toLowerCase())\n                        })\n                },\n            }\"\n        >\n            <div x-combobox x-model=\"selected\">\n                <label x-combobox:label>Select person</label>\n\n                <div>\n                    <div>\n                        <input\n                            x-combobox:input\n                            :display-value=\"person => person.name\"\n                            @change=\"query = $event.target.value\"\n                            placeholder=\"Search...\"\n                        />\n\n                        <button x-combobox:button>Toggle</button>\n                    </div>\n\n                    <div x-combobox:options>\n                        <ul>\n                            <template\n                                x-for=\"person in filteredPeople\"\n                                :key=\"person.id\"\n                                hidden\n                            >\n                                <li\n                                    x-combobox:option\n                                    :option=\"person.id\"\n                                    :value=\"person\"\n                                    :disabled=\"person.disabled\"\n                                    x-text=\"person.name\"\n                                >\n                                </li>\n                            </template>\n                        </ul>\n                    </div>\n                </div>\n\n                <article x-text=\"selected?.name\"></article>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(haveValue('Wade Cooper'))\n    },\n)\n\ntest('it works with internal state',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value.name : 'Select Person'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button')\n            .should(haveText('Select Person'))\n            .click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('Arlene Mccoy'))\n        get('input').should(haveValue('Arlene Mccoy'))\n    },\n)\n\ntest('$combobox/$comboboxOption',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value.name : 'Select Person'\"></button>\n\n            <p x-text=\"$combobox.activeIndex\"></p>\n            <article x-text=\"$combobox.activeOption?.name\"></article>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                            'disabled': $comboboxOption.isDisabled,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(haveText(''))\n        get('[option=\"5\"]').should(haveClasses(['disabled']))\n        get('button')\n            .should(haveText('Select Person'))\n            .click()\n        get('[option=\"1\"]').should(haveClasses(['active']))\n        get('input').type('{downarrow}')\n        get('article').should(haveText('Arlene Mccoy'))\n        get('p').should(haveText('1'))\n        get('[option=\"2\"]').should(haveClasses(['active']))\n        get('button').should(haveText('Select Person'))\n        get('[option=\"2\"]').click()\n        get('button').should(haveText('Arlene Mccoy'))\n        get('[option=\"2\"]').should(haveClasses(['selected']))\n    },\n)\n\ntest('\"name\" prop',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n            name=\"person\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value : 'Select Person'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(haveAttribute('value', 'null'))\n        get('button').click()\n        get('input').should(haveAttribute('value', 'null'))\n        get('[option=\"2\"]').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'person'))\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').click()\n        get('[option=\"4\"]').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'person'))\n            .should(haveAttribute('value', '4'))\n            .should(haveAttribute('type', 'hidden'))\n    },\n);\n\ntest('Preserves currently active keyboard selection while options change from searching even if there\\'s a selected option in the filtered results',\n    [html`\n        <div\n            x-data=\"{\n                query: '',\n                selected: null,\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ],\n                get filteredPeople() {\n                    return this.query === ''\n                        ? this.people\n                        : this.people.filter((person) => {\n                            return person.name.toLowerCase().includes(this.query.toLowerCase())\n                        })\n                },\n            }\"\n        >\n            <div x-combobox x-model=\"selected\">\n                <label x-combobox:label>Select person</label>\n\n                <div>\n                    <div>\n                        <input\n                            x-combobox:input\n                            :display-value=\"person => person.name\"\n                            @change=\"query = $event.target.value\"\n                            placeholder=\"Search...\"\n                        />\n\n                        <button x-combobox:button>Toggle</button>\n                    </div>\n\n                    <div x-combobox:options>\n                        <ul>\n                            <template\n                                x-for=\"person in filteredPeople\"\n                                :key=\"person.id\"\n                                hidden\n                            >\n                                <li\n                                    x-combobox:option\n                                    :option=\"person.id\"\n                                    :value=\"person\"\n                                    :disabled=\"person.disabled\"\n                                >\n                                    <span x-text=\"person.name\"></span>\n                                    <span x-show=\"$comboboxOption.isActive\">*</span>\n                                    <span x-show=\"$comboboxOption.isSelected\">x</span>\n                                </li>\n                            </template>\n                        </ul>\n\n                        <p x-show=\"filteredPeople.length == 0\">No people match your query.</p>\n                    </div>\n                </div>\n            </div>\n\n            <article>lorem ipsum</article>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(haveText(''))\n        get('button').click()\n        get('[option=\"3\"]').click()\n        cy.wait(100)\n        get('input').type('{selectAll}{backspace}')\n        cy.wait(100)\n        get('input').type('{downArrow}')\n        cy.wait(100)\n        get('[option=\"3\"]').should(contain('*'))\n        get('input').type('{upArrow}{upArrow}')\n        cy.wait(100)\n        get('[option=\"1\"]').should(contain('*'))\n        cy.wait(100)\n        get('input').type('d')\n        get('input').trigger('change')\n        cy.wait(100)\n        get('[option=\"1\"]').should(contain('*'))\n    },\n);\n\ntest('Ignore active selection while options change if not selected by a keyboard event',\n    [html`\n        <div\n            x-data=\"{\n                query: '',\n                selected: null,\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ],\n                get filteredPeople() {\n                    return this.query === ''\n                        ? this.people\n                        : this.people.filter((person) => {\n                            return person.name.toLowerCase().includes(this.query.toLowerCase())\n                        })\n                },\n            }\"\n        >\n            <div x-combobox x-model=\"selected\">\n                <label x-combobox:label>Select person</label>\n\n                <div>\n                    <div>\n                        <input\n                            x-combobox:input\n                            :display-value=\"person => person.name\"\n                            @change=\"query = $event.target.value\"\n                            placeholder=\"Search...\"\n                        />\n\n                        <button x-combobox:button>Toggle</button>\n                    </div>\n\n                    <div x-combobox:options>\n                        <ul>\n                            <template\n                                x-for=\"person in filteredPeople\"\n                                :key=\"person.id\"\n                                hidden\n                            >\n                                <li\n                                    x-combobox:option\n                                    :option=\"person.id\"\n                                    :value=\"person\"\n                                    :disabled=\"person.disabled\"\n                                >\n                                    <span x-text=\"person.name\"></span>\n                                    <span x-show=\"$comboboxOption.isActive\">*</span>\n                                    <span x-show=\"$comboboxOption.isSelected\">x</span>\n                                </li>\n                            </template>\n                        </ul>\n\n                        <p x-show=\"filteredPeople.length == 0\">No people match your query.</p>\n                    </div>\n                </div>\n            </div>\n\n            <article>lorem ipsum</article>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(haveText(''))\n        get('button').click()\n        get('[option=\"1\"]').should(contain('*'))\n        get('input').type('t')\n        get('input').trigger('change')\n        get('[option=\"4\"]').should(contain('*'))\n        get('input').type('{backspace}')\n        get('input').trigger('change')\n        get('[option=\"1\"]').should(contain('*'))\n    },\n);\n\ntest('\"name\" prop with object value',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n            name=\"person\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value.name : 'Select Person'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input[name=\"person\"]').should(haveAttribute('value', 'null'))\n        get('button').click()\n        get('[name=\"person[id]\"]').should(notExist())\n        get('[option=\"2\"]').click()\n        get('input[name=\"person\"]').should(notExist())\n        get('[name=\"person[id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"person[name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').click()\n        get('[option=\"4\"]').click()\n        get('[name=\"person[id]\"]').should(beHidden())\n            .should(haveAttribute('value', '4'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"person[name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Tom Cook'))\n            .should(haveAttribute('type', 'hidden'))\n    },\n);\n\ntest('\"default-value\" prop',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n            name=\"person\"\n            default-value=\"2\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value : 'Select Person'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input[name=\"person\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n    },\n);\n\ntest('\"multiple\" prop',\n    [html`\n        <div\n            x-data=\"{\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ]\n            }\"\n            x-combobox\n            multiple\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value.join(',') : 'Select People'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(beVisible())\n        get('button').should(haveText('2'))\n        get('[option=\"4\"]').click()\n        get('button').should(haveText('2,4'))\n        get('ul').should(beVisible())\n        get('[option=\"4\"]').click()\n        get('button').should(haveText('2'))\n        get('ul').should(beVisible())\n        get('input').type('Tom')\n        get('input').type('{enter}')\n        get('button').should(haveText('2,4'))\n        // input field doesn't reset when a new option is selected\n        get('input').should(haveValue('Tom'))\n    },\n);\n\ntest('\"multiple\" and \"name\" props together',\n    [html`\n        <div\n            x-data=\"{\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ]\n            }\"\n            x-combobox\n            multiple\n            name=\"people\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value.map(p => p.id).join(',') : 'Select People'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        // get('input[name=\"people\"]').should(haveAttribute('value', 'null'))\n        get('button').click()\n        get('[name=\"people[0][id]\"]').should(notExist())\n        get('[option=\"2\"]').click()\n        get('ul').should(beVisible())\n        get('button').should(haveText('2'))\n        get('input[name=\"people\"]').should(notExist())\n        get('[name=\"people[0][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[0][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[option=\"4\"]').click()\n        get('[name=\"people[0][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[0][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[1][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '4'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[1][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Tom Cook'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').should(haveText('2,4'))\n        get('ul').should(beVisible())\n        get('[option=\"4\"]').click()\n        get('[name=\"people[0][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[0][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[1][id]\"]').should(notExist())\n        get('[name=\"people[1][name]\"]').should(notExist())\n        get('button').should(haveText('2'))\n        get('ul').should(beVisible())\n    },\n);\n\ntest('\"by\" prop with string value',\n    [html`\n        <div\n            x-data=\"{\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ]\n            }\"\n            x-combobox\n            by=\"id\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person\" type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value : 'Select People'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('2'))\n        get('button').should(haveText('2'))\n        get('button').click()\n        get('ul').should(contain('Wade Cooper'))\n            .should(contain('Arlene Mccoy'))\n            .should(contain('Devon Webb'))\n        get('[option=\"3\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('3'))\n        get('button').should(haveText('3'))\n        get('button').click()\n        get('ul').should(contain('Wade Cooper'))\n            .should(contain('Arlene Mccoy'))\n            .should(contain('Devon Webb'))\n        get('[option=\"1\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('1'))\n        get('button').should(haveText('1'))\n    },\n);\n\ntest('\"by\" prop with string value and \"nullable\"',\n    [html`\n        <div\n            x-data=\"{\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ]\n            }\"\n            x-combobox\n            by=\"id\"\n            default-value=\"5\"\n            nullable\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person?.name\" type=\"text\">\n            <button x-combobox:button x-text=\"$combobox.value ? $combobox.value.name : 'Select People'\"></button>\n\n            <ul x-combobox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('Arlene Mccoy'))\n        get('button').should(haveText('Arlene Mccoy'))\n        get('button').click()\n        get('ul').should(contain('Wade Cooper'))\n            .should(contain('Arlene Mccoy'))\n            .should(contain('Devon Webb'))\n        get('[option=\"3\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('Devon Webb'))\n        get('button').should(haveText('Devon Webb'))\n        get('button').click()\n        get('ul').should(contain('Wade Cooper'))\n            .should(contain('Arlene Mccoy'))\n            .should(contain('Devon Webb'))\n        get('[option=\"1\"]').click()\n        get('ul').should(notBeVisible())\n        get('input').should(haveValue('Wade Cooper'))\n        get('button').should(haveText('Wade Cooper'))\n    },\n);\n\n\ntest('keyboard controls',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n            x-model=\"active\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button x-combobox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-combobox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('.active').should(notExist())\n        get('button').click()\n        get('[options]')\n            .should(beVisible())\n        get('input').should(haveFocus())\n        get('[option=\"1\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .type('{downarrow}')\n        get('[option=\"2\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .type('{downarrow}')\n        get('[option=\"4\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .type('{uparrow}')\n        get('[option=\"2\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .type('{home}')\n        get('[option=\"1\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .type('{end}')\n        get('[option=\"10\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .type('{pageUp}')\n        get('[option=\"1\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .type('{pageDown}')\n        get('[option=\"10\"]')\n            .should(haveClasses(['active']))\n        get('input')\n            .tab()\n            .should(haveFocus())\n        get('[options]')\n            .should(beVisible())\n        get('input')\n            .type('{esc}')\n        get('[options]')\n            .should(notBeVisible())\n    },\n)\n\ntest('changing value manually changes internal state',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n            x-model=\"active\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button toggle x-combobox:button x-text=\"$combobox.value ? $combobox.value : 'Select Person'\"></button>\n\n            <button select-tim @click=\"active = 4\">Select Tim</button>\n\n            <ul x-combobox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('[select-tim]').click()\n        get('[option=\"4\"]').should(haveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[toggle]').should(haveText('4'))\n    },\n)\n\ntest('has accessibility attributes',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n            x-model=\"active\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button x-combobox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-combobox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $comboboxOption.isSelected,\n                            'active': $comboboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input')\n            .should(haveAttribute('aria-expanded', 'false'))\n\n        get('button')\n            .should(haveAttribute('aria-haspopup', 'true'))\n            .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1 alpine-combobox-button-1'))\n            .should(haveAttribute('aria-expanded', 'false'))\n            .should(notHaveAttribute('aria-controls'))\n            .should(haveAttribute('id', 'alpine-combobox-button-1'))\n            .should(haveAttribute('tabindex', '-1'))\n            .click()\n            .should(haveAttribute('aria-expanded', 'true'))\n            .should(haveAttribute('aria-controls', 'alpine-combobox-options-1'))\n\n        get('[options]')\n            .should(haveAttribute('role', 'listbox'))\n            .should(haveAttribute('id', 'alpine-combobox-options-1'))\n            .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1'))\n\n        get('[option=\"1\"]')\n            .should(haveAttribute('role', 'option'))\n            .should(haveAttribute('id', 'alpine-combobox-option-1'))\n            .should(haveAttribute('tabindex', '-1'))\n            .should(haveAttribute('aria-selected', 'false'))\n\n        get('[option=\"2\"]')\n            .should(haveAttribute('role', 'option'))\n            .should(haveAttribute('id', 'alpine-combobox-option-2'))\n            .should(haveAttribute('tabindex', '-1'))\n            .should(haveAttribute('aria-selected', 'false'))\n\n        get('input')\n            .should(haveAttribute('role', 'combobox'))\n            .should(haveAttribute('aria-autocomplete', 'list'))\n            .should(haveAttribute('tabindex', '0'))\n            .should(haveAttribute('aria-expanded', 'true'))\n            .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1'))\n            .should(haveAttribute('aria-controls', 'alpine-combobox-options-1'))\n            .should(haveAttribute('aria-activedescendant', 'alpine-combobox-option-1'))\n            .type('{downarrow}')\n            .should(haveAttribute('aria-activedescendant', 'alpine-combobox-option-2'))\n            .type('{enter}')\n\n        get('[option=\"2\"]')\n            .should(haveAttribute('aria-selected', 'true'))\n\n        get('[option=\"1\"]')\n            .should(haveAttribute('aria-selected', 'false'))\n    },\n)\n\ntest('\"static\" prop',\n    [html`\n        <div\n            x-data=\"{ active: null, show: false, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-combobox\n            x-model=\"active\"\n        >\n            <label x-combobox:label>Assigned to</label>\n\n            <input x-combobox:input :display-value=\"(person) => person.name\" type=\"text\">\n            <button normal-toggle x-combobox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <button real-toggle @click=\"show = ! show\">Toggle</button>\n\n            <ul x-combobox:options x-show=\"show\" static>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-combobox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('[normal-toggle]')\n            .should(haveText('Select Person'))\n            .click()\n        get('ul').should(notBeVisible())\n        get('[real-toggle]').click()\n        get('ul').should(beVisible())\n        get('[option=\"2\"]').click()\n        get('ul').should(beVisible())\n        get('[normal-toggle]').should(haveText('Arlene Mccoy'))\n    },\n)\n\ntest('input reset',\n    [html`\n        <div\n            x-data=\"{\n                query: '',\n                selected: null,\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ],\n                get filteredPeople() {\n                    return this.query === ''\n                        ? this.people\n                        : this.people.filter((person) => {\n                            return person.name.toLowerCase().includes(this.query.toLowerCase())\n                        })\n                },\n            }\"\n        >\n            <div x-combobox x-model=\"selected\">\n                <label x-combobox:label>Select person</label>\n\n                <div>\n                    <div>\n                        <input\n                            x-combobox:input\n                            :display-value=\"person => person.name\"\n                            @change=\"query = $event.target.value\"\n                            placeholder=\"Search...\"\n                        />\n\n                        <button x-combobox:button>Toggle</button>\n                    </div>\n\n                    <div x-combobox:options>\n                        <ul>\n                            <template\n                                x-for=\"person in filteredPeople\"\n                                :key=\"person.id\"\n                                hidden\n                            >\n                                <li\n                                    x-combobox:option\n                                    :option=\"person.id\"\n                                    :value=\"person\"\n                                    :disabled=\"person.disabled\"\n                                    x-text=\"person.name\"\n                                >\n                                </li>\n                            </template>\n                        </ul>\n\n                        <p x-show=\"filteredPeople.length == 0\">No people match your query.</p>\n                    </div>\n                </div>\n            </div>\n\n            <article>lorem ipsum</article>\n            <a x-on:click=\"selected = null\">Clear</a>\n        </div>\n    `],\n    ({ get }) => {\n        // Test after closing with button\n        get('button').click()\n        get('input').type('w')\n        get('button').click()\n        get('input').should(haveValue(''))\n\n        // Test correct state after closing with ESC\n        get('button').click()\n        get('input').type('w')\n        get('input').type('{esc}')\n        get('input').should(haveValue(''))\n\n        // Test correct state after closing with TAB\n        get('button').click()\n        get('input').type('w')\n        get('input').tab()\n        get('input').should(haveValue(''))\n\n        // Test correct state after closing with external click\n        get('button').click()\n        get('input').type('w')\n        get('article').click()\n        get('input').should(haveValue(''))\n\n        // Select something\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"2\"]').click()\n        get('input').should(haveValue('Arlene Mccoy'))\n\n        // Test after closing with button\n        get('button').click()\n        get('input').type('w')\n        get('button').click()\n        get('input').should(haveValue('Arlene Mccoy'))\n\n        // Test correct state after closing with ESC and reopening\n        get('button').click()\n        get('input').type('w')\n        get('input').type('{esc}')\n        get('input').should(haveValue('Arlene Mccoy'))\n\n        // Test correct state after closing with TAB and reopening\n        get('button').click()\n        get('input').type('w')\n        get('input').tab()\n        get('input').should(haveValue('Arlene Mccoy'))\n\n        // Test correct state after closing with external click and reopening\n        get('button').click()\n        get('input').type('w')\n        get('article').click()\n        get('input').should(haveValue('Arlene Mccoy'))\n\n        // Test correct state after clearing selected via code\n        get('a').click()\n        get('input').should(haveValue(''))\n    },\n)\n\ntest('combobox shows all options when opening',\n    [html`\n        <div\n            x-data=\"{\n                query: '',\n                selected: null,\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ],\n                get filteredPeople() {\n                    return this.query === ''\n                        ? this.people\n                        : this.people.filter((person) => {\n                            return person.name.toLowerCase().includes(this.query.toLowerCase())\n                        })\n                },\n            }\"\n        >\n            <div x-combobox x-model=\"selected\">\n                <label x-combobox:label>Select person</label>\n\n                <div>\n                    <div>\n                        <input\n                            x-combobox:input\n                            :display-value=\"person => person.name\"\n                            @change=\"query = $event.target.value\"\n                            placeholder=\"Search...\"\n                        />\n\n                        <button x-combobox:button>Toggle</button>\n                    </div>\n\n                    <div x-combobox:options>\n                        <ul>\n                            <template\n                                x-for=\"person in filteredPeople\"\n                                :key=\"person.id\"\n                                hidden\n                            >\n                                <li\n                                    x-combobox:option\n                                    :option=\"person.id\"\n                                    :value=\"person\"\n                                    :disabled=\"person.disabled\"\n                                    x-text=\"person.name\"\n                                >\n                                </li>\n                            </template>\n                        </ul>\n\n                        <p x-show=\"filteredPeople.length == 0\">No people match your query.</p>\n                    </div>\n                </div>\n            </div>\n\n            <article>lorem ipsum</article>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').click()\n        get('li').should(haveLength('10'))\n\n        // Test after closing with button and reopening\n        get('input').type('w').trigger('input')\n        get('li').should(haveLength('2'))\n        get('button').click()\n        get('button').click()\n        get('li').should(haveLength('10'))\n\n        // Test correct state after closing with ESC and reopening\n        get('input').type('w').trigger('input')\n        get('li').should(haveLength('2'))\n        get('input').type('{esc}')\n        get('button').click()\n        get('li').should(haveLength('10'))\n\n        // Test correct state after closing with TAB and reopening\n        get('input').type('w').trigger('input')\n        get('li').should(haveLength('2'))\n        get('input').tab()\n        get('button').click()\n        get('li').should(haveLength('10'))\n\n        // Test correct state after closing with external click and reopening\n        get('input').type('w').trigger('input')\n        get('li').should(haveLength('2'))\n        get('article').click()\n        get('button').click()\n        get('li').should(haveLength('10'))\n    },\n)\n\ntest('active element logic when opening a combobox',\n    [html`\n        <div\n            x-data=\"{\n                query: '',\n                selected: null,\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ],\n                get filteredPeople() {\n                    return this.query === ''\n                        ? this.people\n                        : this.people.filter((person) => {\n                            return person.name.toLowerCase().includes(this.query.toLowerCase())\n                        })\n                },\n            }\"\n        >\n            <div x-combobox x-model=\"selected\">\n                <label x-combobox:label>Select person</label>\n\n                <div>\n                    <div>\n                        <input\n                            x-combobox:input\n                            :display-value=\"person => person.name\"\n                            @change=\"query = $event.target.value\"\n                            placeholder=\"Search...\"\n                        />\n\n                        <button x-combobox:button>Toggle</button>\n                    </div>\n\n                    <div x-combobox:options>\n                        <ul>\n                            <template\n                                x-for=\"person in filteredPeople\"\n                                :key=\"person.id\"\n                                hidden\n                            >\n                                <li\n                                    x-combobox:option\n                                    :option=\"person.id\"\n                                    :value=\"person\"\n                                    :disabled=\"person.disabled\"\n                                    :class=\"$comboboxOption.isActive ? 'active' : ''\"\n                                    x-text=\"person.name\"\n                                >\n                                </li>\n                            </template>\n                        </ul>\n\n                        <p x-show=\"filteredPeople.length == 0\">No people match your query.</p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').click()\n        // First option is selected on opening if no preselection\n        get('ul').should(beVisible())\n        get('[option=\"1\"]').should(haveAttribute('aria-selected', 'false'))\n        get('[option=\"1\"]').should(haveClasses(['active']))\n        // First match is selected while typing\n        get('[option=\"4\"]').should(haveAttribute('aria-selected', 'false'))\n        get('[option=\"4\"]').should(notHaveClasses(['active']))\n        get('input').type('T')\n        get('input').trigger('change')\n        get('[option=\"4\"]').should(haveAttribute('aria-selected', 'false'))\n        get('[option=\"4\"]').should(haveClasses(['active']))\n        // Reset state and select option 3\n        get('button').click()\n        get('button').click()\n        get('[option=\"3\"]').click()\n        // Previous selection is selected\n        get('button').click()\n        get('[option=\"4\"]').should(haveAttribute('aria-selected', 'false'))\n        get('[option=\"3\"]').should(haveAttribute('aria-selected', 'true'))\n    }\n)\n\ntest('can remove an option without other options getting removed',\n    [html`<div\n        x-data=\"{\n            query: '',\n            selected: [],\n            frameworks: [\n                {\n                    id: 1,\n                    name: 'Laravel',\n                    disabled: false,\n                },\n                {\n                    id: 2,\n                    name: 'Ruby on Rails',\n                    disabled: false,\n                },\n                {\n                    id: 3,\n                    name: 'Django',\n                    disabled: false,\n                },\n            ],\n            get filteredFrameworks() {\n                return this.query === ''\n                    ? this.frameworks\n                    : this.frameworks.filter((framework) => {\n                        return framework.name.toLowerCase().includes(this.query.toLowerCase())\n                    })\n            },\n            remove(framework) {\n                this.selected = this.selected.filter((i) => i !== framework)\n            }\n        }\"\n    >\n        <div x-combobox x-model=\"selected\" by=\"id\" multiple>\n            <div x-show=\"selected.length\">\n                <template x-for=\"selectedFramework in selected\" :key=\"selectedFramework.id\">\n                    <button x-on:click.prevent=\"remove(selectedFramework)\" :remove-option=\"selectedFramework.id\">\n                        <span x-text=\"selectedFramework.name\"></span>\n                    </button>\n                </template>\n            </div>\n\n            <div>\n                <div>\n                    <input\n                        x-combobox:input\n                        @change=\"query = $event.target.value;\"\n                        placeholder=\"Search...\"\n                    />\n                    <button x-combobox:button>\n                        Show options\n                    </button>\n                </div>\n\n                <div x-combobox:options x-cloak x-transition.out.opacity>\n                    <ul>\n                        <template\n                            x-for=\"framework in filteredFrameworks\"\n                            :key=\"framework.id\"\n                            hidden\n                        >\n                            <li\n                                x-combobox:option\n                                :option=\"framework.id\"\n                                :value=\"framework\"\n                                :disabled=\"framework.disabled\"\n                            >\n                                <span x-text=\"framework.name\"></span>\n\n                                <span x-show=\"$comboboxOption.isSelected\" :check=\"framework.id\">&check;</span>\n                            </li>\n                        </template>\n                    </ul>\n\n                    <p x-show=\"filteredFrameworks.length == 0\">No frameworks match your query.</p>\n                </div>\n            </div>\n        </div>\n    </div>\n    `],\n    ({ get }) => {\n        get('input').type('a').trigger('input')\n        cy.wait(100)\n        get('[option=\"1\"]').click()\n        get('[option=\"2\"]').click()\n        get('[option=\"3\"]').click()\n        get('[remove-option=\"3\"]').click()\n        get('[option=\"1\"]').should(haveAttribute('aria-selected', 'true'))\n        get('[option=\"2\"]').should(haveAttribute('aria-selected', 'true'))\n        get('[option=\"3\"]').should(haveAttribute('aria-selected', 'false'))\n        get('input').type('a').trigger('input')\n        get('[check=\"1\"]').should(beVisible())\n        get('[check=\"2\"]').should(beVisible())\n        get('[check=\"3\"]').should(notBeVisible())\n    },\n);\n\ntest('works with morph',\n    [html`\n    <div x-data=\"{ value: null }\">\n        <div x-combobox x-model=\"value\">\n            <button x-combobox:button>Select Framework</button>\n\n            <ul x-combobox:options>\n                <li x-combobox:option value=\"laravel\">Laravel</li>\n            </ul>\n        </div>\n\n        Selected: <span x-text=\"value\"></span>\n    </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <div x-data=\"{ value: null }\">\n            <div x-combobox x-model=\"value\">\n                <button x-combobox:button>Select Framework (updated)</button>\n\n                <ul x-combobox:options>\n                    <li x-combobox:option value=\"laravel\">Laravel</li>\n                </ul>\n            </div>\n\n            Selected: <span x-text=\"value\"></span>\n        </div>\n        `\n        ensureNoConsoleWarns()\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('button').should(haveText('Select Framework (updated)'))\n    },\n)\n\ntest('boolean option values',\n    [html`\n    <div x-data=\"{ value: null }\">\n        <div x-combobox x-model=\"value\">\n            <input x-combobox:input />\n            <button x-combobox:button>Select boolean</button>\n\n            <ul x-combobox:options>\n                <li\n                    option=\"boolean-true\"\n                    x-combobox:option\n                    :value=\"true\"\n                    :class=\"{\n                        'selected': $comboboxOption.isSelected,\n                        'active': $comboboxOption.isActive,\n                    }\">\n                    <span>Yes</span>\n                </li>\n                <li\n                    option=\"boolean-false\"\n                    x-combobox:option\n                    :value=\"false\"\n                    :class=\"{\n                        'selected': $comboboxOption.isSelected,\n                        'active': $comboboxOption.isActive,\n                    }\">\n                    <span>No</span>\n                </li>\n            </ul>\n        </div>\n\n        Selected: <p x-text=\"value?.toString()\"></p>\n    </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('p').should(haveText(''))\n        get('button')\n            .should(haveText('Select boolean'))\n            .click()\n        get('ul').should(beVisible())\n        get('[option=\"boolean-true\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-false\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-true\"]').click()\n        get('ul').should(notBeVisible())\n        get('p').should(haveText('true'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"boolean-true\"]').should(haveClasses(['selected']))\n        get('[option=\"boolean-false\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-false\"]').click()\n        get('ul').should(notBeVisible())\n        get('p').should(haveText('false'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"boolean-true\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-false\"]').should(haveClasses(['selected']))\n    },\n)\n\ntest('integer option values',\n    [html`\n    <div x-data=\"{ value: null }\">\n        <div x-combobox x-model=\"value\">\n            <input x-combobox:input />\n            <button x-combobox:button>Select number</button>\n\n            <ul x-combobox:options>\n                <li\n                    option=\"0\"\n                    x-combobox:option\n                    :value=\"0\"\n                    :class=\"{\n                        'selected': $comboboxOption.isSelected,\n                        'active': $comboboxOption.isActive,\n                    }\">\n                    <span>0</span>\n                </li>\n                <li\n                    option=\"1\"\n                    x-combobox:option\n                    :value=\"1\"\n                    :class=\"{\n                        'selected': $comboboxOption.isSelected,\n                        'active': $comboboxOption.isActive,\n                    }\">\n                    <span>1</span>\n                </li>\n                <li\n                    option=\"2\"\n                    x-combobox:option\n                    :value=\"2\"\n                    :class=\"{\n                        'selected': $comboboxOption.isSelected,\n                        'active': $comboboxOption.isActive,\n                    }\">\n                    <span>2</span>\n                </li>\n            </ul>\n        </div>\n\n        Selected: <p x-text=\"value?.toString()\"></p>\n    </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('p').should(haveText(''))\n        get('button')\n            .should(haveText('Select number'))\n            .click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').click()\n        get('ul').should(notBeVisible())\n        get('p').should(haveText('1'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').should(haveClasses(['selected']))\n        get('[option=\"2\"]').should(notHaveClasses(['selected']))\n        get('[option=\"0\"]').click()\n        get('ul').should(notBeVisible())\n        get('p').should(haveText('0'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(haveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('p').should(haveText('2'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').should(haveClasses(['selected']))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/dialog.spec.js",
    "content": "import { beVisible, haveAttribute, haveText, html, notBeVisible, notExist, test } from '../../../utils'\n\ntest('has accessibility attributes',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = ! open\">Toggle</button>\n\n            <article x-dialog x-model=\"open\">\n                Dialog Contents!\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(haveAttribute('role', 'dialog'))\n        get('article').should(haveAttribute('aria-modal', 'true'))\n    },\n)\n\ntest('works with x-model',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = ! open\">Toggle</button>\n\n            <article x-dialog x-model=\"open\">\n                Dialog Contents!\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(notBeVisible())\n        get('button').click()\n        get('article').should(beVisible())\n        get('button').click()\n        get('article').should(notBeVisible())\n    },\n)\n\ntest('works with open prop and close event',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = ! open\">Toggle</button>\n\n            <article x-dialog :open=\"open\" @close=\"open = false\">\n                Dialog Contents!\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(notBeVisible())\n        get('button').click()\n        get('article').should(beVisible())\n    },\n)\n\ntest('works with static prop',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = ! open\">Toggle</button>\n\n            <template x-if=\"open\">\n                <article x-dialog static>\n                    Dialog Contents!\n                </article>\n            </template>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(notExist())\n        get('button').click()\n        get('article').should(beVisible())\n    },\n)\n\ntest('pressing escape closes modal',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = ! open\">Toggle</button>\n\n            <article x-dialog x-model=\"open\">\n                Dialog Contents!\n                <input type=\"text\">\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(notBeVisible())\n        get('button').click()\n        get('article').should(beVisible())\n        get('input').type('{esc}')\n        get('article').should(notBeVisible())\n    },\n)\n\ntest('x-dialog:panel allows for click away',\n    [html`\n        <div x-data=\"{ open: true }\">\n            <h1>Click away on me</h1>\n\n            <article x-dialog x-model=\"open\">\n                <div x-dialog:panel>\n                    Dialog Contents!\n                </div>\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(beVisible())\n        get('h1').click()\n        get('article').should(notBeVisible())\n    },\n)\n\ntest('x-dialog:overlay closes dialog when clicked on',\n    [html`\n        <div x-data=\"{ open: true }\">\n            <h1>Click away on me</h1>\n\n            <article x-dialog x-model=\"open\">\n                <main x-dialog:overlay>\n                    Some Overlay\n                </main>\n\n                <div>\n                    Dialog Contents!\n                </div>\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(beVisible())\n        get('h1').click()\n        get('article').should(beVisible())\n        get('main').click()\n        get('article').should(notBeVisible())\n    },\n)\n\ntest('x-dialog:title',\n    [html`\n        <article x-data x-dialog>\n            <h1 x-dialog:title>Dialog Title</h1>\n        </article>\n    `],\n    ({ get }) => {\n        get('article').should(haveAttribute('aria-labelledby', 'alpine-dialog-title-1'))\n        get('h1').should(haveAttribute('id', 'alpine-dialog-title-1'))\n    },\n)\n\ntest('x-dialog:description',\n    [html`\n        <article x-data x-dialog>\n            <p x-dialog:description>Dialog Title</p>\n        </article>\n    `],\n    ({ get }) => {\n        get('article').should(haveAttribute('aria-describedby', 'alpine-dialog-description-1'))\n        get('p').should(haveAttribute('id', 'alpine-dialog-description-1'))\n    },\n)\n\ntest('$modal.open exposes internal \"open\" state',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = ! open\">Toggle</button>\n\n            <article x-dialog x-model=\"open\">\n                Dialog Contents!\n                <h2 x-text=\"$dialog.open\"></h2>\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('h2').should(haveText('false'))\n        get('button').click()\n        get('h2').should(haveText('true'))\n    },\n)\n\ntest('works with x-teleport',\n    [html`\n        <div x-data=\"{ open: false }\">\n            <button @click=\"open = ! open\">Toggle</button>\n\n            <template x-teleport=\"body\">\n                <article x-dialog x-model=\"open\">\n                    Dialog Contents!\n                </article>\n            </template>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(notBeVisible())\n        get('button').click()\n        get('article').should(beVisible())\n        get('button').click()\n        get('article').should(notBeVisible())\n    },\n)\n\n// Skipping these two tests as anything focus related seems to be flaky\n// with cypress, but fine in a real browser.\n// test('x-dialog traps focus'...\n// test('initial-focus prop'...\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/disclosure.spec.js",
    "content": "import { beVisible, haveClasses, haveAttribute, html, notBeVisible, notHaveClasses, test } from '../../../utils'\n\ntest('has accessibility attributes',\n    [html`\n        <div x-data x-disclosure>\n            <button trigger x-disclosure:button>Trigger</button>\n\n            <div x-disclosure:panel panel>\n                Content\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').should(haveAttribute('aria-expanded', 'false'))\n        get('button').should(haveAttribute('aria-controls', 'alpine-disclosure-panel-1'))\n        get('[panel]').should(haveAttribute('id', 'alpine-disclosure-panel-1'))\n    },\n)\n\ntest('it toggles',\n    [html`\n        <div x-data x-disclosure>\n            <button trigger x-disclosure:button>Trigger</button>\n\n            <div x-disclosure:panel panel>\n                Content\n\n                <button close-button type=\"button\" @click=\"$disclosure.close()\">Close</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel]').should(notBeVisible())\n        get('[trigger]').click()\n        get('[panel]').should(beVisible())\n        get('[trigger]').click()\n        get('[panel]').should(notBeVisible())\n    },\n)\n\ntest('$disclosure.isOpen and $disclosure.close() work',\n    [html`\n        <div x-data x-disclosure>\n            <button trigger x-disclosure:button>Trigger</button>\n\n            <div x-disclosure:panel panel :class=\"$disclosure.isOpen && 'open'\">\n                Content\n\n                <button close-button type=\"button\" @click=\"$disclosure.close()\">Close</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel]').should(notHaveClasses(['open']))\n        get('[trigger]').click()\n        get('[panel]').should(haveClasses(['open']))\n        get('[close-button]').click()\n        get('[panel]').should(notBeVisible())\n    },\n)\n\ntest('can set a default open state',\n    [html`\n        <div x-data x-disclosure :default-open=\"true\">\n            <button trigger x-disclosure:button>Trigger</button>\n\n            <div x-disclosure:panel panel>\n                Content\n\n                <button close-button type=\"button\" @click=\"$disclosure.close()\">Close</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel]').should(beVisible())\n        get('[trigger]').click()\n        get('[panel]').should(notBeVisible())\n    },\n)\n\ntest('it toggles using the space key',\n    [html`\n        <div x-data x-disclosure>\n            <button trigger x-disclosure:button>Trigger</button>\n\n            <div x-disclosure:panel panel>\n                Content\n\n                <button close-button type=\"button\" @click=\"$disclosure.close()\">Close</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel]').should(notBeVisible())\n        get('[trigger]').click()\n        get('[panel]').should(beVisible())\n        get('[trigger]').type(' ')\n        get('[panel]').should(notBeVisible())\n        get('[trigger]').type(' ')\n        get('[panel]').should(beVisible())\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/listbox.spec.js",
    "content": "import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, ensureNoConsoleWarns} from '../../../utils'\n\ntest('it works with x-model',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button')\n            .should(haveText('Select Person'))\n            .click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('Arlene Mccoy'))\n    },\n)\n\ntest('it works with internal state',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"$listbox.selected ? $listbox.selected.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button')\n            .should(haveText('Select Person'))\n            .click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('Arlene Mccoy'))\n    },\n)\n\ntest('$listbox/$listboxOption',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"$listbox.selected ? $listbox.selected.name : 'Select Person'\"></button>\n\n            <article x-text=\"$listbox.active?.name\"></article>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                            'disabled': $listboxOption.isDisabled,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(haveText(''))\n        get('[option=\"5\"]').should(haveClasses(['disabled']))\n        get('button')\n            .should(haveText('Select Person'))\n            .click()\n        get('article').should(haveText('Wade Cooper'))\n        get('[option=\"1\"]').should(haveClasses(['active']))\n        get('ul').type('{downarrow}')\n        get('article').should(haveText('Arlene Mccoy'))\n        get('[option=\"2\"]').should(haveClasses(['active']))\n        get('button').should(haveText('Select Person'))\n        get('[option=\"2\"]').click()\n        get('button').should(haveText('Arlene Mccoy'))\n        get('[option=\"2\"]').should(haveClasses(['selected']))\n    },\n)\n\ntest('\"name\" prop',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            name=\"person\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"$listbox.selected ? $listbox.selected : 'Select Person'\"></button>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(haveAttribute('value', 'null'))\n        get('button').click()\n        get('input').should(haveAttribute('value', 'null'))\n        get('[option=\"2\"]').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'person'))\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').click()\n        get('[option=\"4\"]').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'person'))\n            .should(haveAttribute('value', '4'))\n            .should(haveAttribute('type', 'hidden'))\n    },\n);\n\ntest('\"name\" prop with object value',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            name=\"person\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"$listbox.selected ? $listbox.selected.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input[name=\"person\"]').should(haveAttribute('value', 'null'))\n        get('button').click()\n        get('[name=\"person[id]\"]').should(notExist())\n        get('[option=\"2\"]').click()\n        get('input[name=\"person\"]').should(notExist())\n        get('[name=\"person[id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"person[name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').click()\n        get('[option=\"4\"]').click()\n        get('[name=\"person[id]\"]').should(beHidden())\n            .should(haveAttribute('value', '4'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"person[name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Tom Cook'))\n            .should(haveAttribute('type', 'hidden'))\n    },\n);\n\ntest('\"default-value\" prop',\n    [html`\n        <div\n            x-data=\"{ people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            name=\"person\"\n            default-value=\"2\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"$listbox.selected ? $listbox.selected : 'Select Person'\"></button>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'person'))\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n    },\n);\n\ntest('\"multiple\" prop',\n    [html`\n        <div\n            x-data=\"{\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ]\n            }\"\n            x-listbox\n            multiple\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"$listbox.selected ? $listbox.selected.join(',') : 'Select People'\"></button>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(beVisible())\n        get('button').should(haveText('2'))\n        get('[option=\"4\"]').click()\n        get('button').should(haveText('2,4'))\n        get('ul').should(beVisible())\n        get('[option=\"4\"]').click()\n        get('button').should(haveText('2'))\n        get('ul').should(beVisible())\n    },\n);\n\ntest('\"multiple\" and \"name\" props together',\n    [html`\n        <div\n            x-data=\"{\n                people: [\n                    { id: 1, name: 'Wade Cooper' },\n                    { id: 2, name: 'Arlene Mccoy' },\n                    { id: 3, name: 'Devon Webb' },\n                    { id: 4, name: 'Tom Cook' },\n                    { id: 5, name: 'Tanya Fox', disabled: true },\n                    { id: 6, name: 'Hellen Schmidt' },\n                    { id: 7, name: 'Caroline Schultz' },\n                    { id: 8, name: 'Mason Heaney' },\n                    { id: 9, name: 'Claudie Smitham' },\n                    { id: 10, name: 'Emil Schaefer' },\n                ]\n            }\"\n            x-listbox\n            multiple\n            name=\"people\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"$listbox.selected ? $listbox.selected.map(p => p.id).join(',') : 'Select People'\"></button>\n\n            <ul x-listbox:options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('input[name=\"people\"]').should(notExist())\n        get('button').click()\n        get('[name=\"people[0][id]\"]').should(notExist())\n        get('[option=\"2\"]').click()\n        get('ul').should(beVisible())\n        get('button').should(haveText('2'))\n        get('input[name=\"people\"]').should(notExist())\n        get('[name=\"people[0][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[0][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[option=\"4\"]').click()\n        get('[name=\"people[0][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[0][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[1][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '4'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[1][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Tom Cook'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').should(haveText('2,4'))\n        get('ul').should(beVisible())\n        get('[option=\"4\"]').click()\n        get('[name=\"people[0][id]\"]').should(beHidden())\n            .should(haveAttribute('value', '2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[0][name]\"]').should(beHidden())\n            .should(haveAttribute('value', 'Arlene Mccoy'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[name=\"people[1][id]\"]').should(notExist())\n        get('[name=\"people[1][name]\"]').should(notExist())\n        get('button').should(haveText('2'))\n        get('ul').should(beVisible())\n    },\n);\n\ntest('keyboard controls',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('.active').should(notExist())\n        get('button').focus().type(' ')\n        get('[options]')\n            .should(beVisible())\n            .should(haveFocus())\n        get('[option=\"1\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{downarrow}')\n        get('[option=\"2\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{downarrow}')\n        get('[option=\"4\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{uparrow}')\n        get('[option=\"2\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{home}')\n        get('[option=\"1\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{end}')\n        get('[option=\"10\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{pageUp}')\n        get('[option=\"1\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{pageDown}')\n        get('[option=\"10\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .tab()\n            .should(haveFocus())\n            .should(beVisible())\n            .tab({ shift: true })\n            .should(haveFocus())\n            .should(beVisible())\n            .type('{esc}')\n            .should(notBeVisible())\n    },\n)\n\ntest('\"horizontal\" keyboard controls',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n            horizontal\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('.active').should(notExist())\n        get('button').focus().type(' ')\n        get('[options]')\n            .should(haveAttribute('aria-orientation', 'horizontal'))\n            .should(beVisible())\n            .should(haveFocus())\n        get('[option=\"1\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{rightarrow}')\n        get('[option=\"2\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{rightarrow}')\n        get('[option=\"4\"]')\n            .should(haveClasses(['active']))\n        get('[options]')\n            .type('{leftarrow}')\n        get('[option=\"2\"]')\n            .should(haveClasses(['active']))\n    },\n)\n\ntest('\"by\" prop with string value',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n            by=\"id\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button')\n            .should(haveText('Select Person'))\n            .click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('Arlene Mccoy'))\n    },\n)\n\ntest('search',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get, wait }) => {\n        get('.active').should(notExist())\n        get('button').click()\n        get('[options]')\n            .type('ar')\n        get('[option=\"2\"]')\n            .should(haveClasses(['active']))\n        wait(500)\n        get('[options]')\n            .type('ma')\n        get('[option=\"8\"]')\n            .should(haveClasses(['active']))\n    },\n)\n\ntest('changing value manually changes internal state',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button toggle x-listbox:button x-text=\"$listbox.selected ? $listbox.selected : 'Select Person'\"></button>\n\n            <button select-tim @click=\"active = 4\">Select Tim</button>\n\n            <ul x-listbox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person.id\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('[select-tim]').click()\n        get('[option=\"4\"]').should(haveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[toggle]').should(haveText('4'))\n    },\n)\n\ntest('has accessibility attributes',\n    [html`\n        <div\n            x-data=\"{ active: null, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb', disabled: true },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button x-listbox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <ul x-listbox:options options>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                        :class=\"{\n                            'selected': $listboxOption.isSelected,\n                            'active': $listboxOption.isActive,\n                        }\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('button')\n            .should(haveAttribute('aria-haspopup', 'true'))\n            .should(haveAttribute('aria-labelledby', 'alpine-listbox-label-1'))\n            .should(haveAttribute('aria-expanded', 'false'))\n            .should(notHaveAttribute('aria-controls'))\n            .should(haveAttribute('id', 'alpine-listbox-button-1'))\n            .click()\n            .should(haveAttribute('aria-expanded', 'true'))\n            .should(haveAttribute('aria-controls', 'alpine-listbox-options-1'))\n\n        get('[options]')\n            .should(haveAttribute('aria-orientation', 'vertical'))\n            .should(haveAttribute('role', 'listbox'))\n            .should(haveAttribute('id', 'alpine-listbox-options-1'))\n            .should(haveAttribute('aria-labelledby', 'alpine-listbox-button-1'))\n            .should(notHaveAttribute('aria-activedescendant'))\n            .should(haveAttribute('tabindex', '0'))\n            .should(haveAttribute('aria-activedescendant', 'alpine-listbox-option-1'))\n\n        get('[option=\"1\"]')\n            .should(haveAttribute('role', 'option'))\n            .should(haveAttribute('id', 'alpine-listbox-option-1'))\n            .should(haveAttribute('tabindex', '-1'))\n            .should(haveAttribute('aria-selected', 'false'))\n\n        get('[option=\"2\"]')\n            .should(haveAttribute('role', 'option'))\n            .should(haveAttribute('id', 'alpine-listbox-option-2'))\n            .should(haveAttribute('tabindex', '-1'))\n            .should(haveAttribute('aria-selected', 'false'))\n\n        get('[options]')\n            .type('{downarrow}')\n            .should(haveAttribute('aria-activedescendant', 'alpine-listbox-option-2'))\n\n        get('[option=\"2\"]')\n            .click()\n            .should(haveAttribute('aria-selected', 'true'))\n    },\n)\n\ntest('\"static\" prop',\n    [html`\n        <div\n            x-data=\"{ active: null, show: false, people: [\n                { id: 1, name: 'Wade Cooper' },\n                { id: 2, name: 'Arlene Mccoy' },\n                { id: 3, name: 'Devon Webb' },\n                { id: 4, name: 'Tom Cook' },\n                { id: 5, name: 'Tanya Fox', disabled: true },\n                { id: 6, name: 'Hellen Schmidt' },\n                { id: 7, name: 'Caroline Schultz' },\n                { id: 8, name: 'Mason Heaney' },\n                { id: 9, name: 'Claudie Smitham' },\n                { id: 10, name: 'Emil Schaefer' },\n            ]}\"\n            x-listbox\n            x-model=\"active\"\n        >\n            <label x-listbox:label>Assigned to</label>\n\n            <button normal-toggle x-listbox:button x-text=\"active ? active.name : 'Select Person'\"></button>\n\n            <button real-toggle @click=\"show = ! show\">Toggle</button>\n\n            <ul x-listbox:options x-show=\"show\" static>\n                <template x-for=\"person in people\" :key=\"person.id\">\n                    <li\n                        :option=\"person.id\"\n                        x-listbox:option\n                        :value=\"person\"\n                        :disabled=\"person.disabled\"\n                    >\n                        <span x-text=\"person.name\"></span>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('[normal-toggle]')\n            .should(haveText('Select Person'))\n            .click()\n        get('ul').should(notBeVisible())\n        get('[real-toggle]').click()\n        get('ul').should(beVisible())\n        get('[option=\"2\"]').click()\n        get('ul').should(beVisible())\n        get('[normal-toggle]').should(haveText('Arlene Mccoy'))\n    },\n)\n\ntest('works with morph',\n    [html`\n    <div x-data=\"{ value: null }\">\n        <div x-listbox x-model=\"value\">\n            <button x-listbox:button>Select Framework</button>\n\n            <ul x-listbox:options>\n                <li x-listbox:option value=\"laravel\">Laravel</li>\n            </ul>\n        </div>\n\n        Selected: <span x-text=\"value\"></span>\n    </div>\n    `],\n    ({ get }, reload, window, document) => {\n        let toHtml = html`\n        <div x-data=\"{ value: null }\">\n            <div x-listbox x-model=\"value\">\n                <button x-listbox:button>Select Framework (updated)</button>\n\n                <ul x-listbox:options>\n                    <li x-listbox:option value=\"laravel\">Laravel</li>\n                </ul>\n            </div>\n\n            Selected: <span x-text=\"value\"></span>\n        </div>\n        `\n        ensureNoConsoleWarns()\n\n        get('div').then(([el]) => window.Alpine.morph(el, toHtml))\n\n        get('button').should(haveText('Select Framework (updated)'))\n    },\n)\n\n\ntest('boolean option values',\n    [html`\n    <div x-data=\"{ value: null }\" x-listbox x-model=\"value\">\n        <label x-listbox:label>Value</label>\n\n        <button x-listbox:button x-text=\"value !== null ? value.toString() : 'Select boolean'\"></button>\n\n        <ul x-listbox:options options>\n            <li\n                option=\"boolean-true\"\n                x-listbox:option\n                :value=\"true\"\n                :class=\"{\n                    'selected': $listboxOption.isSelected,\n                    'active': $listboxOption.isActive,\n                }\">\n                <span>Yes</span>\n            </li>\n            <li\n                option=\"boolean-false\"\n                x-listbox:option\n                :value=\"false\"\n                :class=\"{\n                    'selected': $listboxOption.isSelected,\n                    'active': $listboxOption.isActive,\n                }\">\n                <span>No</span>\n            </li>\n        </ul>\n    </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button')\n            .should(haveText('Select boolean'))\n            .click()\n        get('ul').should(beVisible())\n        get('[option=\"boolean-true\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-false\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-true\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('true'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"boolean-true\"]').should(haveClasses(['selected']))\n        get('[option=\"boolean-false\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-false\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('false'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"boolean-true\"]').should(notHaveClasses(['selected']))\n        get('[option=\"boolean-false\"]').should(haveClasses(['selected']))\n    },\n)\n\ntest('integer option values',\n    [html`\n    <div x-data=\"{ value: null }\" x-listbox x-model=\"value\">\n        <label x-listbox:label>Value</label>\n\n        <button x-listbox:button x-text=\"value !== null ? value.toString() : 'Select number'\"></button>\n\n        <ul x-listbox:options options>\n            <li\n                option=\"0\"\n                x-listbox:option\n                :value=\"0\"\n                :class=\"{\n                    'selected': $listboxOption.isSelected,\n                    'active': $listboxOption.isActive,\n                }\">\n                <span>0</span>\n            </li>\n            <li\n                option=\"1\"\n                x-listbox:option\n                :value=\"1\"\n                :class=\"{\n                    'selected': $listboxOption.isSelected,\n                    'active': $listboxOption.isActive,\n                }\">\n                <span>1</span>\n            </li>\n            <li\n                option=\"2\"\n                x-listbox:option\n                :value=\"2\"\n                :class=\"{\n                    'selected': $listboxOption.isSelected,\n                    'active': $listboxOption.isActive,\n                }\">\n                <span>2</span>\n            </li>\n        </ul>\n    </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button')\n            .should(haveText('Select number'))\n            .click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('1'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').should(haveClasses(['selected']))\n        get('[option=\"2\"]').should(notHaveClasses(['selected']))\n        get('[option=\"0\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('0'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(haveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').click()\n        get('ul').should(notBeVisible())\n        get('button').should(haveText('2'))\n        get('button').click()\n        get('ul').should(beVisible())\n        get('[option=\"0\"]').should(notHaveClasses(['selected']))\n        get('[option=\"1\"]').should(notHaveClasses(['selected']))\n        get('[option=\"2\"]').should(haveClasses(['selected']))\n    },\n)\n\n// test \"by\" attribute\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/menu.spec.js",
    "content": "import { haveClasses, beVisible, haveAttribute, haveText, html, notBeVisible, notExist, test, haveFocus, notHaveClasses, notHaveAttribute } from '../../../utils'\n\ntest('it works',\n    [html`\n        <div x-data x-menu>\n            <span>\n                <button x-menu:button trigger>\n                    <span>Options</span>\n                </button>\n            </span>\n\n            <div x-menu:items items>\n                <div>\n                    <p>Signed in as</p>\n                    <p>tom@example.com</p>\n                </div>\n\n                <div>\n                    <a x-menu:item href=\"#account-settings\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\">\n                        Support\n                    </a>\n                    <a x-menu:item disabled href=\"#new-feature\">\n                        New feature (soon)\n                    </a>\n                    <a x-menu:item href=\"#license\">\n                        License\n                    </a>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#sign-out\">\n                        Sign out\n                    </a>\n                </div>\n            </div>\n        </div>`],\n    ({ get }) => {\n        get('[items]').should(notBeVisible())\n        get('[trigger]').click()\n        get('[items]').should(beVisible())\n    },\n)\n\ntest('focusing away closes menu',\n    [html`\n    <div>\n        <div x-data x-menu>\n            <span>\n                <button x-menu:button trigger>\n                    <span>Options</span>\n                </button>\n            </span>\n            <div x-menu:items items>\n                <div>\n                    <p>Signed in as</p>\n                    <p>tom@example.com</p>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#account-settings\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\">\n                        Support\n                    </a>\n                    <a x-menu:item href=\"#license\">\n                        License\n                    </a>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#sign-out\">\n                        Sign out\n                    </a>\n                </div>\n            </div>\n        </div>\n\n        <button>Focus away</button>\n    </div>\n    `],\n    ({ get }) => {\n        get('[items]').should(notBeVisible())\n        get('[trigger]').click()\n        get('[items]').should(beVisible())\n        cy.focused().tab()\n        get('[items]').should(notBeVisible())\n    },\n)\n\ntest('it works with x-model',\n    [html`\n        <div x-data=\"{ open: false }\" x-menu x-model=\"open\">\n            <button trigger @click=\"open = !open\">\n                <span>Options</span>\n            </button>\n\n            <button x-menu:button>\n                <span>Options</span>\n            </button>\n\n            <div x-menu:items items>\n                <div>\n                    <p>Signed in as</p>\n                    <p>tom@example.com</p>\n                </div>\n\n                <div>\n                    <a x-menu:item href=\"#account-settings\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\">\n                        Support\n                    </a>\n                    <a x-menu:item disabled href=\"#new-feature\">\n                        New feature (soon)\n                    </a>\n                    <a x-menu:item href=\"#license\">\n                        License\n                    </a>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#sign-out\">\n                        Sign out\n                    </a>\n                </div>\n            </div>\n        </div>`],\n    ({ get }) => {\n        get('[items]').should(notBeVisible())\n        get('[trigger]').click()\n        get('[items]').should(beVisible())\n        get('[trigger]').click()\n        get('[items]').should(notBeVisible())\n    },\n)\n\ntest('keyboard controls',\n    [html`\n        <div x-data x-menu>\n            <span>\n                <button x-menu:button trigger>\n                    <span>Options</span>\n                </button>\n            </span>\n\n            <div x-menu:items items>\n                <div>\n                    <p>Signed in as</p>\n                    <p>tom@example.com</p>\n                </div>\n\n                <div>\n                    <a x-menu:item href=\"#account-settings\" :class=\"$menuItem.isActive && 'active'\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\" :class=\"$menuItem.isActive && 'active'\">\n                        Support\n                    </a>\n                    <a x-menu:item disabled href=\"#new-feature\" :class=\"$menuItem.isActive && 'active'\">\n                        New feature (soon)\n                    </a>\n                    <a x-menu:item href=\"#license\" :class=\"$menuItem.isActive && 'active'\">\n                        License\n                    </a>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#sign-out\" :class=\"$menuItem.isActive && 'active'\">\n                        Sign out\n                    </a>\n                </div>\n            </div>\n        </div>`],\n    ({ get }) => {\n        get('.active').should(notExist())\n        get('[trigger]').type(' ')\n        get('[items]')\n            .should(beVisible())\n            .should(haveFocus())\n            .type('{downarrow}')\n        get('[href=\"#account-settings\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .type('{downarrow}')\n        get('[href=\"#support\"]')\n            .should(haveClasses(['active']))\n            .type('{downarrow}')\n        get('[href=\"#license\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .type('{uparrow}')\n        get('[href=\"#support\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .type('{home}')\n        get('[href=\"#account-settings\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .type('{end}')\n        get('[href=\"#sign-out\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .type('{pageUp}')\n        get('[href=\"#account-settings\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .type('{pageDown}')\n        get('[href=\"#sign-out\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .tab()\n            .should(haveFocus())\n            .should(beVisible())\n            .tab({ shift: true})\n            .should(haveFocus())\n            .should(beVisible())\n            .type('{esc}')\n            .should(notBeVisible())\n    },\n)\n\ntest('keyboard controls with x-teleport',\n    [html`\n        <div x-data x-menu>\n            <span>\n                <button x-menu:button trigger>\n                    <span>Options</span>\n                </button>\n            </span>\n\n            <template x-teleport=\"body\">\n                <div x-menu:items items>\n                    <a x-menu:item href=\"#account-settings\" :class=\"$menuItem.isActive && 'active'\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\" :class=\"$menuItem.isActive && 'active'\">\n                        Support\n                    </a>\n                </div>\n            </template>\n        </div>`],\n    ({ get }) => {\n        get('.active').should(notExist())\n        get('[trigger]').type(' ')\n        get('[items]')\n            .should(beVisible())\n            .should(haveFocus())\n            .type('{downarrow}')\n        get('[href=\"#account-settings\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .type('{downarrow}')\n        get('[href=\"#support\"]')\n            .should(haveClasses(['active']))\n            .type('{uparrow}')\n        get('[href=\"#account-settings\"]')\n            .should(haveClasses(['active']))\n        get('[items]')\n            .tab()\n            .should(haveFocus())\n            .should(beVisible())\n            .tab({ shift: true})\n            .should(haveFocus())\n            .should(beVisible())\n            .type('{esc}')\n            .should(notBeVisible())\n    },\n)\n\ntest('search',\n    [html`\n        <div x-data x-menu>\n            <span>\n                <button x-menu:button trigger>\n                    <span>Options</span>\n                </button>\n            </span>\n\n            <div x-menu:items items>\n                <div>\n                    <p>Signed in as</p>\n                    <p>tom@example.com</p>\n                </div>\n\n                <div>\n                    <a x-menu:item href=\"#account-settings\" :class=\"$menuItem.isActive && 'active'\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\" :class=\"$menuItem.isActive && 'active'\">\n                        Support\n                    </a>\n                    <a x-menu:item disabled href=\"#new-feature\" :class=\"$menuItem.isActive && 'active'\">\n                        New feature (soon)\n                    </a>\n                    <a x-menu:item href=\"#license\" :class=\"$menuItem.isActive && 'active'\">\n                        License\n                    </a>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#sign-out\" :class=\"$menuItem.isActive && 'active'\">\n                        Sign out\n                    </a>\n                </div>\n            </div>\n        </div>`],\n    ({ get, wait }) => {\n        get('.active').should(notExist())\n        get('[trigger]').click()\n        get('[items]')\n            .type('ac')\n        get('[href=\"#account-settings\"]')\n            .should(haveClasses(['active']))\n        wait(500)\n        get('[items]')\n            .type('si')\n        get('[href=\"#sign-out\"]')\n            .should(haveClasses(['active']))\n    },\n)\n\ntest('has accessibility attributes',\n    [html`\n        <div x-data x-menu>\n            <label x-menu:label>Options label</label>\n\n            <span>\n                <button x-menu:button trigger>\n                    <span>Options</span>\n                </button>\n            </span>\n\n            <div x-menu:items items>\n                <div>\n                    <p>Signed in as</p>\n                    <p>tom@example.com</p>\n                </div>\n\n                <div>\n                    <a x-menu:item href=\"#account-settings\" :class=\"$menuItem.isActive && 'active'\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\" :class=\"$menuItem.isActive && 'active'\">\n                        Support\n                    </a>\n                    <a x-menu:item disabled href=\"#new-feature\" :class=\"$menuItem.isActive && 'active'\">\n                        New feature (soon)\n                    </a>\n                    <a x-menu:item href=\"#license\" :class=\"$menuItem.isActive && 'active'\">\n                        License\n                    </a>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#sign-out\" :class=\"$menuItem.isActive && 'active'\">\n                        Sign out\n                    </a>\n                </div>\n            </div>\n        </div>`],\n    ({ get }) => {\n        get('[trigger]')\n            .should(haveAttribute('aria-haspopup', 'true'))\n            .should(haveAttribute('aria-labelledby', 'alpine-menu-label-1'))\n            .should(haveAttribute('aria-expanded', 'false'))\n            .should(notHaveAttribute('aria-controls'))\n            .should(haveAttribute('id', 'alpine-menu-button-1'))\n            .click()\n            .should(haveAttribute('aria-expanded', 'true'))\n            .should(haveAttribute('aria-controls', 'alpine-menu-items-1'))\n\n        get('[items]')\n            .should(haveAttribute('aria-orientation', 'vertical'))\n            .should(haveAttribute('role', 'menu'))\n            .should(haveAttribute('id', 'alpine-menu-items-1'))\n            .should(haveAttribute('aria-labelledby', 'alpine-menu-button-1'))\n            .should(notHaveAttribute('aria-activedescendant'))\n            .should(haveAttribute('tabindex', '0'))\n            .type('{downarrow}')\n            .should(haveAttribute('aria-activedescendant', 'alpine-menu-item-1'))\n\n        get('[href=\"#account-settings\"]')\n            .should(haveAttribute('role', 'menuitem'))\n            .should(haveAttribute('id', 'alpine-menu-item-1'))\n            .should(haveAttribute('tabindex', '-1'))\n\n        get('[href=\"#support\"]')\n            .should(haveAttribute('role', 'menuitem'))\n            .should(haveAttribute('id', 'alpine-menu-item-2'))\n            .should(haveAttribute('tabindex', '-1'))\n\n        get('[items]')\n            .type('{downarrow}')\n            .should(haveAttribute('aria-activedescendant', 'alpine-menu-item-2'))\n    },\n)\n\ntest('$menuItem.isDisabled',\n    [html`\n        <div x-data x-menu>\n            <label x-menu:label>Options label</label>\n\n            <span>\n                <button x-menu:button trigger>\n                    <span>Options</span>\n                </button>\n            </span>\n\n            <div x-menu:items items>\n                <div>\n                    <p>Signed in as</p>\n                    <p>tom@example.com</p>\n                </div>\n\n                <div>\n                    <a x-menu:item href=\"#account-settings\" :class=\"{ 'active': $menuItem.isActive, 'disabled': $menuItem.isDisabled }\">\n                        Account settings\n                    </a>\n                    <a x-menu:item href=\"#support\" :class=\"{ 'active': $menuItem.isActive, 'disabled': $menuItem.isDisabled }\">\n                        Support\n                    </a>\n                    <a x-menu:item disabled href=\"#new-feature\" :class=\"{ 'active': $menuItem.isActive, 'disabled': $menuItem.isDisabled }\">\n                        New feature (soon)\n                    </a>\n                    <a x-menu:item href=\"#license\" :class=\"{ 'active': $menuItem.isActive, 'disabled': $menuItem.isDisabled }\">\n                        License\n                    </a>\n                </div>\n                <div>\n                    <a x-menu:item href=\"#sign-out\" :class=\"{ 'active': $menuItem.isActive, 'disabled': $menuItem.isDisabled }\">\n                        Sign out\n                    </a>\n                </div>\n            </div>\n        </div>`],\n    ({ get }) => {\n        get('[trigger]').click()\n        get('[href=\"#account-settings\"]').should(notHaveClasses(['disabled']))\n        get('[href=\"#support\"]').should(notHaveClasses(['disabled']))\n        get('[href=\"#new-feature\"]').should(haveClasses(['disabled']))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/popover.spec.js",
    "content": "import { beVisible, haveAttribute, html, notBeVisible, notHaveAttribute, test } from '../../../utils'\n\ntest('button toggles panel',\n    [html`\n        <div x-data x-popover>\n            <button x-popover:button>Toggle</button>\n\n            <ul x-popover:panel>\n                Dialog Contents!\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(notBeVisible())\n    },\n)\n\ntest('popover can be rendered statically',\n    [html`\n        <div x-data x-popover>\n            <button x-popover:button>Toggle</button>\n\n            <ul x-popover:panel static>\n                Dialog Contents!\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(beVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n    },\n)\n\ntest('has accessibility attributes',\n    [html`\n        <div x-data x-popover>\n            <button x-popover:button>Toggle</button>\n\n            <ul x-popover:panel>\n                Dialog Contents!\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').should(haveAttribute('aria-expanded', 'false'))\n        get('button').should(notHaveAttribute('aria-controls'))\n        get('button').click()\n        get('button').should(haveAttribute('aria-expanded', 'true'))\n        get('button').should(haveAttribute('aria-controls', 'alpine-popover-panel-1'))\n    },\n)\n\ntest('escape closes panel',\n    [html`\n        <div x-data x-popover>\n            <button x-popover:button>Toggle</button>\n\n            <ul x-popover:panel>\n                Dialog Contents!\n            </ul>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n        get('body').type('{esc}')\n        get('ul').should(notBeVisible())\n    },\n)\n\ntest('clicking outside closes panel',\n    [html`\n        <div>\n            <div x-data x-popover>\n                <button x-popover:button>Toggle</button>\n\n                <ul x-popover:panel>\n                    Dialog Contents!\n                </ul>\n            </div>\n\n            <h1>Click away to me</h1>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n        get('h1').click()\n        get('ul').should(notBeVisible())\n    },\n)\n\ntest('focusing away closes panel',\n    [html`\n        <div>\n            <div x-data x-popover>\n                <button x-popover:button>Toggle</button>\n\n                <ul x-popover:panel>\n                    Dialog Contents!\n                </ul>\n            </div>\n\n            <a href=\"#\">Focus Me</a>\n        </div>\n    `],\n    ({ get }) => {\n        get('ul').should(notBeVisible())\n        get('button').click()\n        get('ul').should(beVisible())\n        cy.focused().tab()\n        get('ul').should(notBeVisible())\n    },\n)\n\ntest('focusing away doesnt close panel if focusing inside a group',\n    [html`\n        <div x-data>\n            <div x-popover:group>\n                <div x-data x-popover id=\"1\">\n                    <button x-popover:button>Toggle 1</button>\n                    <ul x-popover:panel>\n                        Dialog 1 Contents!\n                    </ul>\n                </div>\n                <div x-data x-popover id=\"2\">\n                    <button x-popover:button>Toggle 2</button>\n                    <ul x-popover:panel>\n                        Dialog 2 Contents!\n                    </ul>\n                </div>\n            </div>\n\n            <a href=\"#\">Focus Me</a>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1 ul').should(notBeVisible())\n        get('#2 ul').should(notBeVisible())\n        get('#1 button').click()\n        get('#1 ul').should(beVisible())\n        get('#2 ul').should(notBeVisible())\n        cy.focused().tab()\n        get('#1 ul').should(beVisible())\n        get('#2 ul').should(notBeVisible())\n        cy.focused().tab()\n        get('#1 ul').should(notBeVisible())\n        get('#2 ul').should(notBeVisible())\n    },\n)\n\ntest.retry(5)('focusing away still closes panel inside a group if the focus attribute is present',\n    [html`\n        <div x-data>\n            <div x-popover:group>\n                <div x-data x-popover id=\"1\">\n                    <button x-popover:button>Toggle 1</button>\n                    <ul x-popover:panel focus>\n                        <a href=\"#\">Dialog 1 Contents!</a>\n                    </ul>\n                </div>\n                <div x-data x-popover id=\"2\">\n                    <button x-popover:button>Toggle 2</button>\n                    <ul x-popover:panel>\n                        <a href=\"#\">Dialog 2 Contents!</a>\n                    </ul>\n                </div>\n            </div>\n\n            <a href=\"#\">Focus Me</a>\n        </div>\n    `],\n    ({ get }) => {\n        get('#1 ul').should(notBeVisible())\n        get('#2 ul').should(notBeVisible())\n        get('#1 button').click()\n        get('#1 ul').should(beVisible())\n        get('#2 ul').should(notBeVisible())\n        cy.focused().tab()\n        get('#1 ul').should(notBeVisible())\n        get('#2 ul').should(notBeVisible())\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/radio.spec.js",
    "content": "import { haveAttribute, haveFocus, html, haveClasses, notHaveClasses, test, haveText, notExist, beHidden, } from '../../../utils'\n\ntest('it works using x-model',\n    [html`\n        <main x-data=\"{ active: null, access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio x-model=\"active\">\n                <fieldset>\n                    <legend>\n                        <h2 x-radio:label>Privacy setting</h2>\n                    </legend>\n\n                    <div>\n                        <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                            <div :option=\"id\" x-radio:option :value=\"id\" :disabled=\"disabled\">\n                                <span x-radio:label x-text=\"name\"></span>\n                                <span x-radio:description x-text=\"description\"></span>\n                            </div>\n                        </template>\n                    </div>\n                </fieldset>\n            </div>\n\n            <input x-model=\"active\" type=\"hidden\">\n        </main>\n    `],\n    ({ get }) => {\n        get('input').should(haveAttribute('value', ''))\n        get('[option=\"access-2\"]').click()\n        get('input').should(haveAttribute('value', 'access-2'))\n        get('[option=\"access-4\"]').click()\n        get('input').should(haveAttribute('value', 'access-4'))\n    },\n)\n\ntest('it works without x-model/with default-value',\n    [html`\n        <main x-data=\"{ access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio default-value=\"access-4\">\n                <fieldset>\n                    <legend>\n                        <h2 x-radio:label>Privacy setting</h2>\n                    </legend>\n\n                    <div>\n                        <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                            <div :option=\"id\" x-radio:option :value=\"id\" :disabled=\"disabled\">\n                                <span x-radio:label x-text=\"name\"></span>\n                                <span x-radio:description x-text=\"description\"></span>\n                            </div>\n                        </template>\n                    </div>\n                </fieldset>\n            </div>\n        </main>\n    `],\n    ({ get }) => {\n        get('[option=\"access-4\"]').should(haveAttribute('aria-checked', 'true'))\n        get('[option=\"access-2\"]').click()\n        get('[option=\"access-2\"]').should(haveAttribute('aria-checked', 'true'))\n    },\n)\n\ntest('cannot select any option when the group is disabled',\n    [html`\n        <main x-data=\"{ active: null, access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio x-model=\"active\" disabled>\n                <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                    <div :option=\"id\" x-radio:option :value=\"id\" :disabled=\"disabled\">\n                        <span x-radio:label x-text=\"name\"></span>\n                        <span x-radio:description x-text=\"description\"></span>\n                    </div>\n                </template>\n            </div>\n\n            <input x-model=\"active\" type=\"hidden\">\n        </main>\n    `],\n    ({ get }) => {\n        get('input').should(haveAttribute('value', ''))\n        get('[option=\"access-1\"]').click()\n        get('input').should(haveAttribute('value', ''))\n    },\n)\n\ntest('cannot select a disabled option',\n    [html`\n        <main x-data=\"{ active: null, access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio x-model=\"active\">\n                <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                    <div :option=\"id\" x-radio:option :value=\"id\" :disabled=\"disabled\">\n                        <span x-radio:label x-text=\"name\"></span>\n                        <span x-radio:description x-text=\"description\"></span>\n                    </div>\n                </template>\n            </div>\n\n            <input x-model=\"active\" type=\"hidden\">\n        </main>\n    `],\n    ({ get }) => {\n        get('input').should(haveAttribute('value', ''))\n        get('[option=\"access-3\"]').click()\n        get('input').should(haveAttribute('value', ''))\n    },\n)\n\ntest('keyboard navigation works',\n    [html`\n        <main x-data=\"{ active: null, access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio x-model=\"active\">\n                <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                    <div :option=\"id\" x-radio:option :value=\"id\" :disabled=\"disabled\">\n                        <span x-radio:label x-text=\"name\"></span>\n                        <span x-radio:description x-text=\"description\"></span>\n                    </div>\n                </template>\n            </div>\n\n            <input x-model=\"active\" type=\"hidden\">\n        </main>\n    `],\n    ({ get }) => {\n        get('input').should(haveAttribute('value', ''))\n        get('[option=\"access-1\"]').focus().type('{downarrow}')\n        get('[option=\"access-2\"]').should(haveFocus()).type('{downarrow}')\n        get('[option=\"access-4\"]').should(haveFocus()).type('{downarrow}')\n        get('[option=\"access-1\"]').should(haveFocus())\n    },\n)\n\ntest('keyboard navigation works when first option has null as value',\n    [html`\n        <main x-data=\"{ active: null }\">\n            <div x-radio x-model=\"active\">\n                <div x-radio:option option=\"option-null\" :value=\"null\"></div>\n                <div x-radio:option option=\"option-1\" value=\"1\"></div>\n                <div x-radio:option option=\"option-2\" value=\"2\"></div>\n            </div>\n\n            <input x-model=\"active\" type=\"hidden\">\n        </main>\n    `],\n    ({ get }) => {\n        get('[option=\"option-1\"]').focus().type('{downarrow}')\n        get('[option=\"option-2\"]').should(haveFocus()).type('{uparrow}')\n        get('[option=\"option-1\"]').should(haveFocus()).type('{uparrow}')\n        get('[option=\"option-null\"]').should(haveFocus()).type('{uparrow}')\n        get('[option=\"option-2\"]').should(haveFocus()).type('{downarrow}')\n        get('[option=\"option-null\"]').should(haveFocus())\n    },\n)\n\ntest('keyboard navigation works when last option has null as value',\n    [html`\n        <main x-data=\"{ active: null }\">\n            <div x-radio x-model=\"active\">\n                <div x-radio:option option=\"option-1\" value=\"1\"></div>\n                <div x-radio:option option=\"option-2\" value=\"2\"></div>\n                <div x-radio:option option=\"option-null\" :value=\"null\"></div>\n            </div>\n\n            <input x-model=\"active\" type=\"hidden\">\n        </main>\n    `],\n    ({ get }) => {\n        get('[option=\"option-1\"]').focus().type('{downarrow}')\n        get('[option=\"option-2\"]').should(haveFocus()).type('{downarrow}')\n        get('[option=\"option-null\"]').should(haveFocus()).type('{downarrow}')\n        get('[option=\"option-1\"]').should(haveFocus()).type('{uparrow}')\n        get('[option=\"option-null\"]').should(haveFocus())\n    },\n)\n\ntest('has accessibility attributes',\n    [html`\n        <main x-data=\"{ active: null, access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio group x-model=\"active\">\n                <fieldset>\n                    <legend>\n                        <h2 x-radio:label>Privacy setting</h2>\n                        <p x-radio:description>Some description</p>\n                    </legend>\n\n                    <div>\n                        <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                            <div :option=\"id\" x-radio:option :value=\"id\" :disabled=\"disabled\">\n                                <span :label=\"id\" x-radio:label x-text=\"name\"></span>\n                                <span :description=\"id\" x-radio:description x-text=\"description\"></span>\n                            </div>\n                        </template>\n                    </div>\n                </fieldset>\n            </div>\n        </main>\n    `],\n    ({ get }) => {\n        get('[group]').should(haveAttribute('role', 'radiogroup'))\n            .should(haveAttribute('aria-labelledby', 'alpine-radio-label-1'))\n            .should(haveAttribute('aria-describedby', 'alpine-radio-description-1'))\n        get('h2').should(haveAttribute('id', 'alpine-radio-label-1'))\n        get('p').should(haveAttribute('id', 'alpine-radio-description-1'))\n\n        get('[option=\"access-1\"]')\n            .should(haveAttribute('tabindex', 0))\n\n        for (i in 4) {\n            get(`[option=\"access-${i}\"]`)\n                .should(haveAttribute('role', 'radio'))\n                .should(haveAttribute('aria-disabled', 'false'))\n                .should(haveAttribute('aria-labelledby', `alpine-radio-label-${i + 1}`))\n                .should(haveAttribute('aria-describedby', `alpine-radio-description-${i + 1}`))\n            get(`[label=\"access-${i}\"]`)\n                .should(haveAttribute('id', `alpine-radio-label-${i + 1}`))\n            get(`[description=\"access-${i}\"]`)\n                .should(haveAttribute('id', `alpine-radio-description-${i + 1}`))\n        }\n\n        get('[option=\"access-1\"]')\n            .click()\n            .should(haveAttribute('aria-checked', 'true'))\n    },\n)\n\ntest('$radioOption.isActive, $radioOption.isChecked, $radioOption.isDisabled work',\n    [html`\n        <main x-data=\"{ access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio group>\n                <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                    <div\n                        :option=\"id\"\n                        x-radio:option\n                        :value=\"id\"\n                        :disabled=\"disabled\"\n                        :class=\"{\n                            'active': $radioOption.isActive,\n                            'checked': $radioOption.isChecked,\n                            'disabled': $radioOption.isDisabled,\n                        }\"\n                    >\n                        <span :label=\"id\" x-radio:label x-text=\"name\"></span>\n                        <span :description=\"id\" x-radio:description x-text=\"description\"></span>\n                    </div>\n                </template>\n            </div>\n        </main>\n    `],\n    ({ get }) => {\n        get('[option=\"access-1\"]')\n            .should(notHaveClasses(['active', 'checked', 'disabled']))\n            .focus()\n            .should(haveClasses(['active']))\n            .should(notHaveClasses(['checked']))\n            .type(' ')\n            .should(haveClasses(['active', 'checked']))\n            .type('{downarrow}')\n        get('[option=\"access-2\"]')\n            .should(haveClasses(['active', 'checked']))\n        get('[option=\"access-3\"]')\n            .should(haveClasses(['disabled']))\n    },\n)\n\ntest('can bind objects to the value',\n    [html`\n        <main x-data=\"{ active: null, access: [\n            {\n                id: 'access-1',\n                name: 'Public access',\n                description: 'This project would be available to anyone who has the link',\n                disabled: false,\n            },\n            {\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            },\n            {\n                id: 'access-3',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: true,\n            },\n            {\n                id: 'access-4',\n                name: 'Private to you',\n                description: 'You are the only one able to access this project',\n                disabled: false,\n            },\n        ]}\">\n            <div x-radio group x-model=\"active\">\n                <template x-for=\"(option, i) in access\" :key=\"option.id\">\n                    <div\n                        :option=\"option.id\"\n                        x-radio:option\n                        :value=\"option\"\n                        :disabled=\"option.disabled\"\n                    >\n                        <span :label=\"option.id\" x-radio:label x-text=\"option.name\"></span>\n                        <span :description=\"option.id\" x-radio:description x-text=\"option.description\"></span>\n                    </div>\n                </template>\n            </div>\n\n            <article x-text=\"JSON.stringify(active)\"></article>\n        </main>\n    `],\n    ({ get }) => {\n        get('[option=\"access-2\"]').click()\n        get('article')\n            .should(haveText(JSON.stringify({\n                id: 'access-2',\n                name: 'Private to Project Members',\n                description: 'Only members of this project would be able to access',\n                disabled: false,\n            })))\n    },\n)\n\ntest('name prop',\n    [html`\n        <main\n            x-data=\"{\n                active: null,\n                access: [\n                    {\n                        id: 'access-1',\n                        name: 'Public access',\n                        description: 'This project would be available to anyone who has the link',\n                        disabled: false,\n                    },\n                    {\n                        id: 'access-2',\n                        name: 'Private to Project Members',\n                        description: 'Only members of this project would be able to access',\n                        disabled: false,\n                    },\n                    {\n                        id: 'access-3',\n                        name: 'Private to you',\n                        description: 'You are the only one able to access this project',\n                        disabled: true,\n                    },\n                    {\n                        id: 'access-4',\n                        name: 'Private to you',\n                        description: 'You are the only one able to access this project',\n                        disabled: false,\n                    },\n                ]\n            }\n        \">\n            <div x-radio group x-model=\"active\" name=\"access\">\n                <template x-for=\"({ id, name, description, disabled }, i) in access\" :key=\"id\">\n                    <div\n                        :option=\"id\"\n                        x-radio:option\n                        :value=\"id\"\n                        :disabled=\"disabled\"\n                    >\n                        <span :label=\"id\" x-radio:label x-text=\"name\"></span>\n                        <span :description=\"id\" x-radio:description x-text=\"description\"></span>\n                    </div>\n                </template>\n            </div>\n        </main>\n    `],\n    ({ get }) => {\n        get('input').should(notExist())\n        get('[option=\"access-2\"]').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'access'))\n            .should(haveAttribute('value', 'access-2'))\n            .should(haveAttribute('type', 'hidden'))\n        get('[option=\"access-4\"]').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'access'))\n            .should(haveAttribute('value', 'access-4'))\n            .should(haveAttribute('type', 'hidden'))\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/switch.spec.js",
    "content": "import { beHidden, beVisible, haveAttribute, haveClasses, haveText, html, notBeVisible, notExist, test } from '../../../utils'\n\ntest('has accessibility attributes',\n    [html`\n        <div x-data=\"{ checked: false }\">\n            <article x-switch:group>\n                <label x-switch:label>Enable notifications</label>\n                <span description x-switch:description>A description of the switch.</span>\n\n                <button x-switch x-model=\"checked\">Enable Notifications</button>\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('label').should(haveAttribute('id', 'alpine-switch-label-1'))\n        get('[description]').should(haveAttribute('id', 'alpine-switch-description-1'))\n        get('button').should(haveAttribute('type', 'button'))\n        get('button').should(haveAttribute('aria-labelledby', 'alpine-switch-label-1'))\n        get('button').should(haveAttribute('aria-describedby', 'alpine-switch-description-1'))\n        get('button').should(haveAttribute('role', 'switch'))\n        get('button').should(haveAttribute('tabindex', 0))\n        get('button').should(haveAttribute('aria-checked', 'false'))\n        get('button').click()\n        get('button').should(haveAttribute('aria-checked', 'true'))\n    },\n)\n\ntest('works with x-model',\n    [html`\n        <div x-data=\"{ checked: false }\">\n            <button x-switch x-model=\"checked\">Enable notifications</button>\n\n            <article x-show=\"checked\">\n                Notifications are enabled.\n            </article>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(notBeVisible())\n        get('button').click()\n        get('article').should(beVisible())\n        get('button').click()\n        get('article').should(notBeVisible())\n    },\n)\n\ntest('works with internal state/$switch.isChecked',\n    [html`\n        <div x-data>\n            <button x-switch x-bind:class=\"$switch.isChecked ? 'foo' : 'bar'\">\n                Enable notifications\n            </button>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').should(haveClasses(['bar']))\n        get('button').click()\n        get('button').should(haveClasses(['foo']))\n        get('button').click()\n        get('button').should(haveClasses(['bar']))\n    },\n)\n\ntest('pressing space toggles the switch',\n    [html`\n        <div x-data=\"{ checked: false }\">\n            <div>\n                <button x-switch x-model=\"checked\">Enable notifications</button>\n\n                <article x-show=\"checked\">\n                    Notifications are enabled.\n                </article>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('article').should(notBeVisible())\n        get('button').focus()\n        get('button').type(' ')\n        get('article').should(beVisible())\n        get('button').type(' ')\n        get('article').should(notBeVisible())\n    },\n)\n\ntest('default-checked',\n    [html`\n        <div x-data>\n            <div>\n                <button\n                    x-switch\n                    default-checked\n                    :class=\"$switch.isChecked ? 'checked' : 'not-checked'\"\n                >Enable notifications</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('button').should(haveClasses(['checked']))\n        get('button').click()\n        get('button').should(haveClasses(['not-checked']))\n    },\n)\n\ntest('name and value props',\n    [html`\n        <div x-data>\n            <div>\n                <button\n                    x-switch\n                    name=\"notifications\"\n                    value=\"yes\"\n                >Enable notifications</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(notExist())\n        get('button').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'notifications'))\n            .should(haveAttribute('value', 'yes'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').click()\n        get('input').should(notExist())\n    },\n)\n\n\ntest('value defaults to \"on\"',\n    [html`\n        <div x-data>\n            <div>\n                <button\n                    x-switch\n                    name=\"notifications\"\n                >Enable notifications</button>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('input').should(notExist())\n        get('button').click()\n        get('input').should(beHidden())\n            .should(haveAttribute('name', 'notifications'))\n            .should(haveAttribute('value', 'on'))\n            .should(haveAttribute('type', 'hidden'))\n        get('button').click()\n        get('input').should(notExist())\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/plugins/ui/tabs.spec.js",
    "content": "import { beVisible, haveClasses, haveFocus, html, notBeVisible, notHaveClasses, test } from '../../../utils'\n\ntest('can use tabs to toggle panels',\n    [html`\n        <div x-data x-tabs>\n            <div x-tabs:list>\n                <button x-tabs:tab button-1>First</button>\n                <button x-tabs:tab button-2>Second</button>\n            </div>\n\n            <div x-tabs:panels>\n                <div x-tabs:panel panel-1>First Panel</div>\n                <div x-tabs:panel panel-2>Second Panel</div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel-1]').should(beVisible())\n        get('[panel-2]').should(notBeVisible())\n        get('[button-2]').click()\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n    },\n)\n\ntest('can use arrow keys to cycle through tabs',\n    [html`\n        <div x-data x-tabs>\n            <div x-tabs:list>\n                <button x-tabs:tab button-1>First</button>\n                <button x-tabs:tab button-2>Second</button>\n            </div>\n\n            <div x-tabs:panels>\n                <div x-tabs:panel panel-1>First Panel</div>\n                <div x-tabs:panel panel-2>Second Panel</div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel-1]').should(beVisible())\n        get('[panel-2]').should(notBeVisible())\n        get('[button-2]').click()\n        get('[button-2]').should(haveFocus())\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n        get('[button-2]').type('{rightArrow}')\n        get('[button-1]').should(haveFocus())\n        get('[panel-1]').should(beVisible())\n        get('[panel-2]').should(notBeVisible())\n        get('[button-1]').type('{rightArrow}')\n        get('[button-2]').should(haveFocus())\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n    },\n)\n\ntest('cant tab through tabs, can only use arrows',\n    [html`\n        <div>\n            <button button-1>first focusable</button>\n            <div x-data x-tabs>\n                <div x-tabs:list>\n                    <button x-tabs:tab button-2>First</button>\n                    <button x-tabs:tab button-3>Second</button>\n                </div>\n                <div x-tabs:panels>\n                    <div x-tabs:panel panel-1>First Panel</div>\n                    <div x-tabs:panel panel-2>Second Panel</div>\n                </div>\n            </div>\n            <button button-4>first focusable</button>\n        </div>\n    `],\n    ({ get }) => {\n        get('[button-1]').click()\n        get('[button-1]').should(haveFocus())\n        get('[button-1]').tab()\n        get('[button-2]').should(haveFocus())\n        get('[button-2]').tab()\n        get('[panel-1]').should(haveFocus())\n        get('[panel-1]').tab()\n        get('[button-4]').should(haveFocus())\n    },\n)\n\ntest('can detect the selected tab & panel',\n    [html`\n        <div x-data x-tabs>\n            <div x-tabs:list>\n                <button x-tabs:tab button-1 :class=\"$tab.isSelected && 'active'\">First</button>\n                <button x-tabs:tab button-2 :class=\"$tab.isSelected && 'active'\">Second</button>\n            </div>\n\n            <div x-tabs:panels>\n                <div x-tabs:panel panel-1 :class=\"$panel.isSelected && 'active'\">First Panel</div>\n                <div x-tabs:panel panel-2 :class=\"$panel.isSelected && 'active'\">Second Panel</div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel-1]').should(beVisible())\n        get('[panel-2]').should(notBeVisible())\n        get('[button-1]').should(haveClasses(['active']))\n        get('[panel-1]').should(haveClasses(['active']))\n        get('[button-2]').should(notHaveClasses(['active']))\n        get('[panel-2]').should(notHaveClasses(['active']))\n        get('[button-2]').click()\n        get('[button-1]').should(notHaveClasses(['active']))\n        get('[panel-1]').should(notHaveClasses(['active']))\n        get('[button-2]').should(haveClasses(['active']))\n        get('[panel-2]').should(haveClasses(['active']))\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n    },\n)\n\ntest('can disable a tab',\n    [html`\n        <div x-data x-tabs>\n            <div x-tabs:list>\n                <button x-tabs:tab button-1>First</button>\n                <button x-tabs:tab button-2 disabled :class=\"$tab.isDisabled && 'disabled'\">Second</button>\n                <button x-tabs:tab button-3>Third</button>\n            </div>\n\n            <div x-tabs:panels>\n                <div x-tabs:panel panel-1>First Panel</div>\n                <div x-tabs:panel panel-2>Second Panel</div>\n                <div x-tabs:panel panel-3>Third Panel</div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[button-2]').should(haveClasses(['disabled']))\n        get('[button-1]').click()\n        get('[button-1]').should(haveFocus())\n        get('[panel-1]').should(beVisible())\n        get('[panel-2]').should(notBeVisible())\n        get('[button-1]').type('{rightArrow}')\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-3]').should(beVisible())\n        get('[button-3]').type('{rightArrow}')\n        get('[panel-3]').should(notBeVisible())\n        get('[panel-1]').should(beVisible())\n    },\n)\n\ntest('can traverse tabs manually',\n    [html`\n        <div x-data x-tabs manual>\n            <div x-tabs:list>\n                <button x-tabs:tab button-1>First</button>\n                <button x-tabs:tab button-2>Second</button>\n            </div>\n\n            <div x-tabs:panels>\n                <div x-tabs:panel panel-1>First Panel</div>\n                <div x-tabs:panel panel-2>Second Panel</div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[button-1]').click()\n        get('[button-1]').should(haveFocus())\n        get('[panel-1]').should(beVisible())\n        get('[panel-2]').should(notBeVisible())\n        get('[button-1]').type('{rightArrow}')\n        get('[button-2]').should(haveFocus())\n        get('[panel-1]').should(beVisible())\n        get('[panel-2]').should(notBeVisible())\n        get('[button-2]').click()\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n    },\n)\n\ntest('can set a default index',\n    [html`\n        <div x-data x-tabs default-index=\"1\">\n            <div x-tabs:list>\n                <button x-tabs:tab button-1>First</button>\n                <button x-tabs:tab button-2>Second</button>\n            </div>\n\n            <div x-tabs:panels>\n                <div x-tabs:panel panel-1>First Panel</div>\n                <div x-tabs:panel panel-2>Second Panel</div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n    },\n)\n\ntest('can programmatically control the selected tab',\n    [html`\n        <div x-data=\"{ selectedIndex: 1 }\">\n            <button @click=\"selectedIndex = selectedIndex ? 0 : 1\" button-toggle>Toggle tabs</button>\n\n            <div x-tabs x-model=\"selectedIndex\">\n                <div x-tabs:list>\n                    <button x-tabs:tab button-1>First</button>\n                    <button x-tabs:tab button-2>Second</button>\n                </div>\n                <div x-tabs:panels>\n                    <div x-tabs:panel panel-1>First Panel</div>\n                    <div x-tabs:panel panel-2>Second Panel</div>\n                </div>\n            </div>\n        </div>\n    `],\n    ({ get }) => {\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n        get('[button-toggle]').click()\n        get('[panel-2]').should(notBeVisible())\n        get('[panel-1]').should(beVisible())\n        get('[button-toggle]').click()\n        get('[panel-1]').should(notBeVisible())\n        get('[panel-2]').should(beVisible())\n    },\n)\n"
  },
  {
    "path": "tests/cypress/integration/scope.spec.js",
    "content": "import { haveText, html, test } from \"../utils\";\n\ntest(\n    \"properly merges the datastack\",\n    [\n        html`\n            <div x-data=\"{ foo: 'fizz' }\">\n                <div x-data=\"{ bar: 'buzz' }\">\n                    <span x-text=\"foo + bar\"></span>\n                </div>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"span\").should(haveText(\"fizzbuzz\"));\n    }\n);\n\ntest(\n    \"merges stack from bottom up\",\n    [\n        html`\n            <div x-data=\"{ foo: 'fizz' }\">\n                <div x-data=\"{ foo: 'buzz', get bar() { return this.foo } }\">\n                    <span id=\"one\" x-text=\"bar + foo\"></span>\n                </div>\n                <span id=\"two\" x-text=\"foo\"></span>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"span#one\").should(haveText(\"buzzbuzz\"));\n        get(\"span#two\").should(haveText(\"fizz\"));\n    }\n);\n\ntest(\n    \"handles getter setter pairs\",\n    [\n        html`\n            <div x-data=\"{ foo: 'fizzbuzz' }\">\n                <div\n                    x-data=\"{ get bar() { return this.foo }, set bar(value) { this.foo = value } }\"\n                >\n                    <span id=\"one\" x-text=\"bar\" @click=\"bar = 'foobar'\"></span>\n                </div>\n                <span id=\"two\" x-text=\"foo\"></span>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"span#one\").should(haveText(\"fizzbuzz\"));\n        get(\"span#two\").should(haveText(\"fizzbuzz\"));\n        get(\"span#one\").click();\n        get(\"span#one\").should(haveText(\"foobar\"));\n        get(\"span#two\").should(haveText(\"foobar\"));\n    }\n);\n\ntest(\n    \"allows accessing class methods\",\n    [\n        html`\n            <script>\n                class Counter {\n                    value = 0;\n                    constructor() {}\n                    increment() {\n                        this.value++;\n                    }\n                }\n                document.addEventListener(\"alpine:init\", () =>\n                    Alpine.data(\"counter\", () => new Counter())\n                );\n            </script>\n            <div x-data=\"counter\">\n                <button\n                    type=\"button\"\n                    @click=\"increment\"\n                    x-text=\"value\"\n                ></button>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"button\").should(haveText(\"0\"));\n        get(\"button\").click();\n        get(\"button\").should(haveText(\"1\"));\n    }\n);\n\ntest(\n    \"setting value doesn't register a dependency\",\n    [\n        html`\n            <div x-data=\"{ message: 'original' }\">\n                <button\n                    x-effect=\"message = 'effected'\"\n                    @click=\"message = 'clicked'\"\n                    x-text=\"message\"\n                ></button>\n            </div>\n            ;\n        `,\n    ],\n    ({ get }) => {\n        get(\"button\").should(haveText(\"effected\"));\n        get(\"button\").click();\n        get(\"button\").should(haveText(\"clicked\"));\n    }\n);\n\ntest(\n    \"properly merges the datastack with nested data\",\n    [\n        html`\n            <div x-data=\"{ foo: { bar: 'fizz' } }\">\n                <div x-data=\"{ bar: 'buzz' }\">\n                    <span\n                        id=\"1\"\n                        x-text=\"foo.bar + bar\"\n                        @click=\"foo.bar = foo.bar + bar\"\n                    ></span>\n                </div>\n                <span id=\"2\" x-text=\"foo.bar\"></span>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"span#1\").should(haveText(\"fizzbuzz\"));\n        get(\"span#2\").should(haveText(\"fizz\"));\n        get(\"span#1\").click();\n        get(\"span#1\").should(haveText(\"fizzbuzzbuzz\"));\n        get(\"span#2\").should(haveText(\"fizzbuzz\"));\n    }\n);\n\ntest(\n    \"handles getter setter pairs of object\",\n    [\n        html`\n            <div x-data=\"{ foo:  { bar: 'fizzbuzz' } }\">\n                <div\n                    x-data=\"{ get bar() { return this.foo.bar }, set bar(value) { this.foo.bar = value } }\"\n                >\n                    <span id=\"one\" x-text=\"bar\" @click=\"bar = 'foobar'\"></span>\n                </div>\n                <span id=\"two\" x-text=\"foo.bar\"></span>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"span#one\").should(haveText(\"fizzbuzz\"));\n        get(\"span#two\").should(haveText(\"fizzbuzz\"));\n        get(\"span#one\").click();\n        get(\"span#one\").should(haveText(\"foobar\"));\n        get(\"span#two\").should(haveText(\"foobar\"));\n    }\n);\n\ntest(\n    \"allows class setters invocation on nested data\",\n    [\n        html`\n            <script>\n                class BaseHandler {\n                    _propValue = \"bar\";\n                    \n                    get value() {\n                        return this._propValue;\n                    }\n\n                    set value(v) {\n                        this._propValue = v;\n                    }\n                }\n                document.addEventListener(\"alpine:init\", () =>\n                    Alpine.data(\"handler\", () => new BaseHandler())\n                );\n            </script>\n            <div x-data>\n                <div x-data=\"handler\">\n                    <button\n                        type=\"button\"\n                        @click=\"value = 'foo'\"\n                        x-text=\"value\"\n                    ></button>\n                </div>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"button\").should(haveText(\"bar\"));\n        get(\"button\").click();\n        get(\"button\").should(haveText(\"foo\"));\n    }\n);\n\ntest(\n    \"allows class setters to reference other objects from the data stack\",\n    [\n        html`\n            <script>\n                class BaseHandler {\n                    get value() {\n                        return this.foo.bar;\n                    }\n\n                    set value(v) {\n                        this.foo.bar = v;\n                    }\n                }\n                document.addEventListener(\"alpine:init\", () =>\n                    Alpine.data(\"handler\", () => new BaseHandler())\n                );\n            </script>\n            <div x-data=\"{ foo:  { bar: 'fizzbuzz' } }\">\n                <div x-data=\"handler\">\n                    <button\n                        type=\"button\"\n                        @click=\"value = 'foo'\"\n                        x-text=\"value\"\n                    ></button>\n                </div>\n            </div>\n        `,\n    ],\n    ({ get }) => {\n        get(\"button\").should(haveText(\"fizzbuzz\"));\n        get(\"button\").click();\n        get(\"button\").should(haveText(\"foo\"));\n    }\n);\n"
  },
  {
    "path": "tests/cypress/integration/store.spec.js",
    "content": "import { haveText, html, test } from '../utils'\n\ntest('can register and use a global store',\n    [html`\n        <div x-data>\n            <span x-text=\"$store.test.foo\"></span>\n            <button @click=\"$store.test.foo = 'baz'\">clickme</button>\n        </div>\n    `,\n    `\n        Alpine.store('test', { foo: 'bar' })\n    `],\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('store init function is called',\n    [html`\n        <div x-data>\n            <span x-text=\"$store.test.foo\"></span>\n            <button @click=\"$store.test.foo = 'baz'\">clickme</button>\n        </div>\n    `,\n    `\n        Alpine.store('test', { foo: 'bar', init() { this.foo = 'baz'} })\n    `],\n    ({ get }) => {\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('can use primitives as store',\n    [html`\n        <div x-data>\n            <span x-text=\"$store.test\"></span>\n            <button @click=\"$store.test = 'baz'\">clickme</button>\n        </div>\n    `,\n    `\n        Alpine.store('test', 'bar')\n    `],\n    ({ get }) => {\n        get('span').should(haveText('bar'))\n        get('button').click()\n        get('span').should(haveText('baz'))\n    }\n)\n\ntest('can use number as store',\n    [html`\n        <div x-data>\n            <span x-text=\"$store.test\"></span>\n            <button @click=\"$store.test++\">clickme</button>\n        </div>\n    `,\n    `\n        Alpine.store('test', 0)\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('button').click()\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('store\\'s \"this\" context is reactive for init function',\n    [html`\n        <div x-data>\n        <span x-text=\"$store.test.count\"></span>\n        <button id=\"button\">increment</button>\n        </div>\n    `,\n    `\n        Alpine.store('test', {\n            init() {\n                document.querySelector('#button').addEventListener('click', () => {\n                    this.count++\n                })\n            },\n            count: 0,\n        })\n    `],\n    ({ get }) => {\n        get('span').should(haveText('0'))\n        get('button').click()\n        get('span').should(haveText('1'))\n    }\n)\n\ntest('stores can have interceptors', \n    [html`\n        <div x-data>\n        <span x-text=\"$store.test.count\"></span>\n        </div>\n    `,\n    `\n        Alpine.store('test', {\n            init() {\n                this.count++\n            },\n            count: {\n                _x_interceptor: true,\n                initialize() {\n                    return 9\n                }\n            },\n        })\n    `],({ get }) => {\n        get('span').should(haveText('10'))\n    }\n)"
  },
  {
    "path": "tests/cypress/manual-memory.html",
    "content": "<html>\n    <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n    <table class=\"w-dull\">\n        <tr>\n            <td class=\"p-10 w-1/3\"><code>MemoEvaluator cache</code></td>\n            <td class=\"p-10 w-1/3\">\n                <p>\n                    In chrome, open dev tools > Memory tag, click on\n                    \"Take heap snapshot\". First of all, check that there are not existing leaks affecting the test results clicking on\n                    \"Take heap snapshot\": it should not found any results;\n                    if it does, you might want to run the test in incognito\n                    mode so it does not load any chrome extensions).\n                    Once verified, click the \"test\" button, go to the memory\n                    tab, click \"Collect garbage\" a couple of times, take another snapshot and verify we don't have any new\n                    detached node in memory.\n                </p>\n            </td>\n            <td class=\"p-10 w-1/3\">\n                <div id=\"one\" x-data=\"{ foo: 'bar' }\">\n                    <span x-text=\"foo\"></span>\n                    <button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\" @click=\"document.getElementById('one').remove()\">Test</button>\n                </div>\n            </td>\n        </tr>\n    </table>\n</html>\n"
  },
  {
    "path": "tests/cypress/manual-transition-test.html",
    "content": "<html>\n    <script src=\"/../../packages/collapse/dist/cdn.js\" defer></script>\n    <script src=\"/../../packages/alpinejs/dist/cdn.js\" defer></script>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n    <table>\n        <tr>\n            <td><code>x-on:click.away</code></td>\n            <td>\n                <div x-data=\"{ show: false }\">\n                    <button @click=\"show = true\">Show</button>\n\n                    <h1 x-show=\"show\" @click.away=\"show = false\">h1</h1>\n\n                    <h2>h2</h2>\n                  </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td><code>x-transition</code></td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\" x-transition>\n                        Hello 👋\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td><code>x-transition:enter only (should see no blip)</code></td>\n            <td>\n                <main x-data=\"{ open: true }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\" x-transition:enter.duration.500ms>\n                        Hello 👋\n                    </div>\n\n                    <div x-show=\"!open\">\n                        There 👋\n                    </div>\n                </main>\n            </td>\n        </tr>\n\n        <tr>\n            <td><code>x-transition with dynamic classes</code></td>\n            <td>\n                <div x-data=\"{ open: false, props: {\n                    ['x-transition:enter']() { return `transition ease-out duration-300`; },\n                    ['x-transition:enter-start']() { return `opacity-0 transform scale-90`; },\n                    ['x-transition:enter-end']() { return `opacity-100 transform scale-100`; },\n                    ['x-transition:leave']() { return `transition ease-in duration-300`; },\n                    ['x-transition:leave-start']() { return `opacity-100 transform scale-100`; },\n                    ['x-transition:leave-end']() { return `opacity-0 transform scale-90`; },\n                 }}\">\n                    <button @click=\"open = !open\">Toggle</button>\n                    <div x-bind=\"props\" x-show=\"open\">Hello 👋</div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td><code>x-transition</code></td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\">\n                        <div x-show=\"open\" x-transition.duration.250ms>\n                            <h1>Hello 👋</h1>\n                        </div>\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td><code>x-transition.opacity</code></td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\" x-transition.opacity>\n                        Hello 👋\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td><code>x-transition.scale</code></td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\" x-transition.scale>\n                        Hello 👋\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n\n        <tr>\n            <td><code>x-transition.duration.1000ms</code></td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\" x-transition.duration.1000ms>\n                        Hello 👋\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr style=\"border-bottom: 1px solid black;\">\n            <td><code>x-transition.leave only with @click.outside</code></td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\" @click.outside=\"open = false\" x-transition.out.duration.1000ms>\n                        Hello 👋\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td>\n                <div><code>x-transition:enter.opacity.duration.500ms</code></div>\n                <div><code>x-transition:leave.scale.duration.250ms</code></div>\n            </td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @click=\"open = ! open\">Toggle</button>\n\n                    <div x-show=\"open\" x-transition:enter.opacity.duration.500ms x-transition:leave.scale.duration.250ms>\n                        Hello 👋\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td>\n                <div><code>x-transition:enter.delay.0ms x-transition:leave.delay.250ms</code></div>\n                <div><code>x-transition:enter.delay.100ms x-transition:leave.delay.100ms</code></div>\n                <div><code>x-transition:enter.delay.250ms x-transition:leave.delay.0ms</code></div>\n            </td>\n            <td>\n                <div x-data=\"{ open: false }\">\n                    <button @mouseenter=\"open = true\" @mouseleave=\"open = false\">Toggle (mouseover)</button>\n\n                    <div style=\"display: flex;\" x-show=\"open\">\n                        <div x-show=\"open\" x-transition:enter.delay.0ms x-transition:leave.delay.250ms>Hello 👋</div>\n                        <div x-show=\"open\" x-transition:enter.delay.100ms x-transition:leave.delay.100ms>Hello 👋</div>\n                        <div x-show=\"open\" x-transition:enter.delay.250ms x-transition:leave.delay.0ms>Hello 👋</div>\n                    </div>\n                </div>\n            </td>\n        </tr>\n\n        <tr>\n            <td><code>x-collapse with no overflow hidden when expanded</code></td>\n            <td>\n                <div x-data=\"{ show: false }\">\n                    <button @click=\"show = !show\">Show</button>\n\n                    <div x-show=\"show\" x-collapse.duration.2000ms>\n                        <div class=\"ring-2 ring-offset-2 ring-red-400 py-10 bg-gray-200\">my red ring should be fully visible</div>\n                    </div>\n                  </div>\n                </div>\n            </td>\n        </tr>\n    </table>\n</html>\n"
  },
  {
    "path": "tests/cypress/plugins/index.js",
    "content": "/// <reference types=\"cypress\" />\n// ***********************************************************\n// This example plugins/index.js can be used to load plugins\n//\n// You can change the location of this file or turn off loading\n// the plugins file with the 'pluginsFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/plugins-guide\n// ***********************************************************\n\n// This function is called when a project is opened or re-opened (e.g. due to\n// the project's config changing)\n\n/**\n * @type {Cypress.PluginConfig}\n */\nmodule.exports = (on, config) => {\n  // `on` is used to hook into various events Cypress emits\n  // `config` is the resolved Cypress config\n}\n"
  },
  {
    "path": "tests/cypress/spec-csp.html",
    "content": "<html>\n    <meta http-equiv=\"Content-Security-Policy\" content=\"script-src 'nonce-iifbjI67iq4HZJUQ54eC' 'self' data:; default-src 'self';\">\n\n    <!-- Using a <blockquote> because it's an obscure tag -->\n    <!-- which allows us to use document.querySelector()  -->\n    <!-- with generic tags freely inside Cypress tests.   -->\n    <blockquote id=\"root\">\n        <!-- This is where our test subjects will be injected. -->\n    </blockquote>\n\n    <script nonce=\"iifbjI67iq4HZJUQ54eC\">\n        let root = document.querySelector('#root')\n\n        // We aren't loading Alpine directly because we are expecting\n        // Cypress to inject HTML into \"#root\", THEN we'll call\n        // this function from Cypress to boot everything up.\n        root.evalScripts = (extraJavaScript) => {\n            // Load bespoke JavaScript.\n            if (extraJavaScript) {\n                let script = document.createElement('script')\n                script.src = `data:text/javascript;base64,${btoa(`\n                    document.addEventListener('alpine:init', () => {\n                        ${extraJavaScript}\n                    })\n                `)}`\n                root.after(script)\n            }\n\n            document.addEventListener('alpine:initialized', () => {\n                let readyEl = document.createElement('blockquote')\n                readyEl.setAttribute('alpine-is-ready', true)\n                readyEl.style.width = '1px'\n                readyEl.style.height = '1px'\n\n                document.querySelector('blockquote').after(readyEl)\n            })\n\n            // Load Alpine.\n            let script = document.createElement('script')\n            script.src = '/../../packages/csp/dist/cdn.js'\n            root.after(script)\n        }\n    </script>\n</html>\n"
  },
  {
    "path": "tests/cypress/spec.html",
    "content": "<html>\n    <!-- Using a <blockquote> because it's an obscure tag -->\n    <!-- which allows us to use document.querySelector()  -->\n    <!-- with generic tags freely inside Cypress tests.   -->\n    <blockquote id=\"root\">\n        <!-- This is where our test subjects will be injected. -->\n    </blockquote>\n\n    <script src=\"/../../packages/morph/dist/cdn.js\"></script>\n    <script src=\"/../../packages/persist/dist/cdn.js\"></script>\n    <script src=\"/../../packages/focus/dist/cdn.js\"></script>\n    <script src=\"/../../packages/intersect/dist/cdn.js\"></script>\n    <script src=\"/../../packages/collapse/dist/cdn.js\"></script>\n    <script src=\"/../../packages/anchor/dist/cdn.js\"></script>\n    <script src=\"/../../packages/resize/dist/cdn.js\"></script>\n    <script src=\"/../../packages/mask/dist/cdn.js\"></script>\n    <script src=\"/../../packages/sort/dist/cdn.js\"></script>\n    <script src=\"/../../packages/ui/dist/cdn.js\"></script>\n    <script>\n        let root = document.querySelector('#root')\n\n        // We aren't loading Alpine directly because we are expecting\n        // Cypress to inject HTML into \"#root\", THEN we'll call\n        // this function from Cypress to boot everything up.\n        root.evalScripts = (extraJavaScript) => {\n            // Load bespoke JavaScript.\n            if (extraJavaScript) {\n                let script = document.createElement('script')\n                script.src = `data:text/javascript;base64,${btoa(`\n                    document.addEventListener('alpine:init', () => {\n                        ${extraJavaScript}\n                    })\n                `)}`\n                root.after(script)\n            }\n\n            // Load all injected script tags.\n            root.querySelectorAll('script').forEach(el => {\n                eval(el.innerHTML)\n            })\n\n            // Load Alpine.\n            let script = document.createElement('script')\n\n            script.src = '/../../packages/alpinejs/dist/cdn.js'\n\n            root.after(script)\n\n            document.addEventListener('alpine:initialized', () => {\n                let readyEl = document.createElement('blockquote')\n                readyEl.setAttribute('alpine-is-ready', true)\n                readyEl.style.width = '1px'\n                readyEl.style.height = '1px'\n\n                document.querySelector('blockquote').after(readyEl)\n            })\n        }\n    </script>\n</html>\n"
  },
  {
    "path": "tests/cypress/support/commands.js",
    "content": "// ***********************************************\n// This example commands.js shows you how to\n// create various custom commands and overwrite\n// existing commands.\n//\n// For more comprehensive examples of custom\n// commands please read more here:\n// https://on.cypress.io/custom-commands\n// ***********************************************\n//\n//\n// -- This is a parent command --\n// Cypress.Commands.add(\"login\", (email, password) => { ... })\n//\n//\n// -- This is a child command --\n// Cypress.Commands.add(\"drag\", { prevSubject: 'element'}, (subject, options) => { ... })\n//\n//\n// -- This is a dual command --\n// Cypress.Commands.add(\"dismiss\", { prevSubject: 'optional'}, (subject, options) => { ... })\n//\n//\n// -- This will overwrite an existing command --\n// Cypress.Commands.overwrite(\"visit\", (originalFn, url, options) => { ... })\n"
  },
  {
    "path": "tests/cypress/support/drag.js",
    "content": "/**\n * This entire file was coppied from the following github repo: https://github.com/4teamwork/cypress-drag-drop/blob/master/index.js\n *\n * Full credit to the \"cypress-drag-drop\" package...\n */\n\nconst dataTransfer = new DataTransfer()\n\nfunction omit(object = {}, keys = []) {\n    return Object.entries(object).reduce((accum, [key, value]) => (key in keys ? accum : { ...accum, [key]: value }), {})\n}\n\nfunction isAttached(element) {\n    return !!element.closest('html')\n}\n\nconst DragSimulator = {\n    MAX_TRIES: 5,\n    DELAY_INTERVAL_MS: 10,\n    counter: 0,\n    targetElement: null,\n    rectsEqual(r1, r2) {\n        return r1.top === r2.top && r1.right === r2.right && r1.bottom === r2.bottom && r1.left === r2.left\n    },\n    createDefaultOptions(options) {\n        const commonOptions = omit(options, ['source', 'target'])\n        const source = { ...commonOptions, ...options.source }\n        const target = { ...commonOptions, ...options.target }\n        return { source, target }\n    },\n    get dropped() {\n        const currentSourcePosition = this.source.getBoundingClientRect()\n        return !this.rectsEqual(this.initialSourcePosition, currentSourcePosition)\n    },\n    get hasTriesLeft() {\n        return this.counter < this.MAX_TRIES\n    },\n    set target(target) {\n        this.targetElement = target\n    },\n    get target() {\n        return cy.wrap(this.targetElement)\n    },\n    dragstart(clientPosition = {}) {\n        return cy\n            .wrap(this.source)\n            .trigger('pointerdown', {\n                which: 1,\n                button: 0,\n                ...clientPosition,\n                eventConstructor: 'PointerEvent',\n                ...this.options.source,\n            })\n            .trigger('mousedown', {\n                which: 1,\n                button: 0,\n                ...clientPosition,\n                eventConstructor: 'MouseEvent',\n                ...this.options.source,\n            })\n            .trigger('dragstart', { dataTransfer, eventConstructor: 'DragEvent', ...this.options.source })\n    },\n    drop(clientPosition = {}) {\n        return this.target\n            .trigger('drop', {\n                dataTransfer,\n                eventConstructor: 'DragEvent',\n                ...this.options.target,\n            })\n            .then(() => {\n                if (isAttached(this.targetElement)) {\n                    this.target\n                        .trigger('mouseup', {\n                            which: 1,\n                            button: 0,\n                            ...clientPosition,\n                            eventConstructor: 'MouseEvent',\n                            ...this.options.target,\n                        })\n                        .then(() => {\n                            if (isAttached(this.targetElement)) {\n                                this.target.trigger('pointerup', {\n                                    which: 1,\n                                    button: 0,\n                                    ...clientPosition,\n                                    eventConstructor: 'PointerEvent',\n                                    ...this.options.target,\n                                })\n                            }\n                        })\n                }\n            })\n    },\n    dragover(clientPosition = {}) {\n        if (!this.counter || (!this.dropped && this.hasTriesLeft)) {\n            this.counter += 1\n            return this.target\n                .trigger('dragover', {\n                    dataTransfer,\n                    eventConstructor: 'DragEvent',\n                    ...this.options.target,\n                })\n                .trigger('mousemove', {\n                    ...this.options.target,\n                    ...clientPosition,\n                    eventConstructor: 'MouseEvent',\n                })\n                .trigger('pointermove', {\n                    ...this.options.target,\n                    ...clientPosition,\n                    eventConstructor: 'PointerEvent',\n                })\n                .wait(this.DELAY_INTERVAL_MS)\n                .then(() => this.dragover(clientPosition))\n        }\n        if (!this.dropped) {\n            console.error(`Exceeded maximum tries of: ${this.MAX_TRIES}, aborting`)\n            return false\n        } else {\n            return true\n        }\n    },\n    init(source, target, options = {}) {\n        this.options = this.createDefaultOptions(options)\n        this.counter = 0\n        this.source = source.get(0)\n        this.initialSourcePosition = this.source.getBoundingClientRect()\n        return cy.get(target).then((targetWrapper) => {\n            this.target = targetWrapper.get(0)\n        })\n    },\n    drag(sourceWrapper, targetSelector, options) {\n        this.init(sourceWrapper, targetSelector, options)\n            .then(() => this.dragstart())\n            .then(() => this.dragover())\n            .then((success) => {\n                if (success) {\n                    return this.drop().then(() => true)\n                } else {\n                    return false\n                }\n            })\n    },\n    move(sourceWrapper, options) {\n        const { deltaX, deltaY } = options\n        const { top, left } = sourceWrapper.offset()\n        const finalCoords = { clientX: left + deltaX, clientY: top + deltaY }\n        this.init(sourceWrapper, sourceWrapper, options)\n            .then(() => this.dragstart({ clientX: left, clientY: top }))\n            .then(() => this.dragover(finalCoords))\n            .then(() => this.drop(finalCoords))\n    },\n}\n\nfunction addChildCommand(name, command) {\n    Cypress.Commands.add(name, { prevSubject: 'element' }, (...args) => command(...args))\n}\n\naddChildCommand('drag', DragSimulator.drag.bind(DragSimulator))\naddChildCommand('move', DragSimulator.move.bind(DragSimulator))\n"
  },
  {
    "path": "tests/cypress/support/index.js",
    "content": "// ***********************************************************\n// This example support/index.js is processed and\n// loaded automatically before your test files.\n//\n// This is a great place to put global configuration and\n// behavior that modifies Cypress.\n//\n// You can change the location of this file or turn off\n// automatically serving support files with the\n// 'supportFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/configuration\n// ***********************************************************\n\n// Import commands.js using ES2015 syntax:\nimport './commands'\n\n// Import drag and drop helpers (https://github.com/4teamwork/cypress-drag-drop/blob/master/index.js)\nimport './drag'\n\n// Alternatively you can use CommonJS syntax:\n// require('./commands')\nrequire('cypress-plugin-tab')\n"
  },
  {
    "path": "tests/cypress/utils.js",
    "content": "\n// This is an invisible template tag for enabling syntax highlighting\n// of any string in most editors.\nexport function html(strings) {\n    return strings.raw[0]\n}\n\nexport function ensureNoConsoleWarns() {\n    cy.window().then((win) => {\n        let cache = win.console.warn\n\n        win.console.warn = () => { throw new Error('Console warn was triggered') }\n\n        cy.on('window:before:unload', () => {\n            win.console.warn = cache\n        });\n    });\n}\n\nexport let test = function (name, template, callback, handleExpectedErrors = false) {\n    it(name, () => {\n        injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)\n    })\n}\n\ntest.only = (name, template, callback, handleExpectedErrors = false) => {\n    it.only(name, () => {\n        injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)\n    })\n}\n\ntest.skip = (name, template, callback, handleExpectedErrors = false) => {\n    it.skip(name, () => {\n        injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)\n    })\n}\n\ntest.retry = (count) => (name, template, callback, handleExpectedErrors = false) => {\n    it(name, {\n        retries: {\n            // During \"cypress run\"\n            runMode: count - 1,\n            // During \"cypress open\"\n            openMode: count - 1,\n        }\n    }, () => {\n        injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)\n    })\n}\n\ntest.csp = (name, template, callback, handleExpectedErrors = false) => {\n    it(name, () => {\n        injectHtmlAndBootAlpine(cy, template, callback, __dirname+'/spec-csp.html', handleExpectedErrors)\n    })\n}\n\nfunction injectHtmlAndBootAlpine(cy, templateAndPotentiallyScripts, callback, page, handleExpectedErrors = false) {\n    let [template, scripts] = Array.isArray(templateAndPotentiallyScripts)\n        ? templateAndPotentiallyScripts\n        : [templateAndPotentiallyScripts]\n\n    cy.visit(page || __dirname+'/spec.html')\n\n    if( handleExpectedErrors ) {\n        cy.on( 'uncaught:exception', ( error ) => {\n            if( error.el === undefined && error.expression === undefined ) {\n                console.warn( 'Expected all errors originating from Alpine to have el and expression.  Letting cypress fail the test.', error )\n                return true\n            }\n            return false\n        } );\n    }\n\n    cy.get('#root').then(([el]) => {\n        el.innerHTML = template\n\n        el.evalScripts(scripts)\n\n        cy.get('[alpine-is-ready]', { timeout: 5000 }).should('be.visible');\n\n        // We can't just simply reload a page from a test, because we need to\n        // re-inject all the templates and such. This is a helper to allow\n        // a test-subject method to perform a redirect all on their own.\n        let reload = () => {\n            cy.reload()\n\n            cy.get('#root').then(([el]) => {\n                el.innerHTML = template\n\n                el.evalScripts(scripts)\n\n                cy.get('[alpine-is-ready]', { timeout: 5000 }).should('be.visible');\n            })\n        }\n\n        cy.window().then(window => {\n            callback(cy, reload, window, window.document)\n        })\n    })\n}\n\nexport let haveData = (key, value) => ([el]) => expect(root(el)._x_dataStack[0][key]).to.deep.equal(value);\n\nexport let haveFocus = () => el => expect(el).to.have.focus\n\nexport let notHaveFocus = () => el => expect(el).not.to.be.focused\n\nexport let haveAttribute = (name, value) => el => expect(el).to.have.attr(name, value)\n\nexport let notHaveAttribute = (name, value) => el => expect(el).not.to.have.attr(name, value)\n\nexport let haveProperty = (name, value) => el => expect(el).to.have.prop(name, value)\n\nexport let haveText = text => el => expect(el).to.have.text(text)\n\nexport let notHaveText = text => el => expect(el).not.to.have.text(text)\n\nexport let contain = text => el => expect(el).to.contain(text)\n\nexport let notContain = text => el => expect(el).not.to.contain(text)\n\nexport let haveHtml = html => el => expect(el).to.have.html(html)\n\nexport let beChecked = () => el => expect(el).to.be.checked\n\nexport let notBeChecked = () => el => expect(el).not.to.be.checked\n\nexport let beVisible = () => el => expect(el).to.be.visible\n\nexport let notBeVisible = () => el => expect(el).not.to.be.visible\n\nexport let exist = () => el => expect(el).to.exist\n\nexport let notExist = () => el => expect(el).not.to.exist\n\nexport let beHidden = () => el => expect(el).to.be.hidden\n\nexport let haveClasses = classes => el => classes.forEach(aClass => expect(el).to.have.class(aClass))\n\nexport let notHaveClasses = classes => el => classes.forEach(aClass => expect(el).not.to.have.class(aClass))\n\nexport let haveValue = value => el => expect(el).to.have.value(value)\n\nexport let haveLength = length => el => expect(el).to.have.length(length)\n\nexport let beEqualTo = value => el => expect(el).to.eq(value)\n\nexport let notHaveComputedStyle = (name, value) => el => {\n    const win = el[0].ownerDocument.defaultView\n    expect(win.getComputedStyle(el[0]).getPropertyValue(name)).not.to.eq(value)\n}\n\nexport let haveComputedStyle = (name, value) => el => {\n    const win = el[0].ownerDocument.defaultView\n    expect(win.getComputedStyle(el[0]).getPropertyValue(name)).to.eq(value)\n}\n\nexport function root(el) {\n    if (el._x_dataStack) return el\n\n    if (! el.parentElement) return\n\n    return closestRoot(el.parentElement)\n}\n"
  },
  {
    "path": "tests/vitest/csp-evaluator.spec.js",
    "content": "// @vitest-environment jsdom\n\nimport { describe, it, expect, beforeAll } from 'vitest';\nimport Alpine from '../../packages/csp/src/index.js';\nimport { cspRawEvaluator } from '../../packages/csp/src/evaluator.js';\n\nbeforeAll(() => Alpine.start())\n\ndescribe('cspRawEvaluator', () => {\n    it('simple expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(cspRawEvaluator(element, '42')).toBe(42)\n    });\n\n    it('with scope', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(cspRawEvaluator(element, 'foo', { scope: { foo: 42 } })).toBe(42)\n    });\n\n    it('with params', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(cspRawEvaluator(element, 'fn', { scope: { fn: (i) => i }, params: [42] })).toBe(42)\n    });\n\n    it('auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let scope = { getAnswer: () => 42 }\n\n        expect(cspRawEvaluator(element, 'getAnswer()', { scope })).toBe(42)\n    });\n\n    it('non auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let scope = { getAnswer: () => 42 }\n\n        Alpine.dontAutoEvaluateFunctions(() => {\n            let fn = cspRawEvaluator(element, 'getAnswer', { scope })\n            expect(fn()).toBe(42)\n        })\n    });\n\n    it('property access', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let scope = { user: { name: 'John' } }\n\n        expect(cspRawEvaluator(element, 'user.name', { scope })).toBe('John')\n    });\n\n    it('method calls preserve context', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let scope = {\n            counter: {\n                count: 5,\n                getCount() { return this.count }\n            }\n        }\n\n        expect(cspRawEvaluator(element, 'counter.getCount()', { scope })).toBe(5)\n    });\n\n    it('ternary expressions', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(cspRawEvaluator(element, 'true ? 1 : 2')).toBe(1)\n        expect(cspRawEvaluator(element, 'false ? 1 : 2')).toBe(2)\n    });\n\n    it('arithmetic operations', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(cspRawEvaluator(element, '2 + 3 * 4')).toBe(14)\n        expect(cspRawEvaluator(element, '(2 + 3) * 4')).toBe(20)\n    });\n\n    it('comparison operations', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(cspRawEvaluator(element, '5 > 3')).toBe(true)\n        expect(cspRawEvaluator(element, '5 === 5')).toBe(true)\n        expect(cspRawEvaluator(element, '5 === \"5\"')).toBe(false)\n    });\n\n    it('logical operations', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(cspRawEvaluator(element, 'true && false')).toBe(false)\n        expect(cspRawEvaluator(element, 'true || false')).toBe(true)\n        expect(cspRawEvaluator(element, '!false')).toBe(true)\n    });\n});\n"
  },
  {
    "path": "tests/vitest/csp-parser.spec.js",
    "content": "// @vitest-environment jsdom\n\nimport { describe, it, expect } from 'vitest';\nimport { generateRuntimeFunction } from '../../packages/csp/src/parser.js';\n\ndescribe('CSP Parser', () => {\n    describe('Literals', () => {\n        it('should parse numbers', () => {\n            expect(generateRuntimeFunction('42')()).toBe(42);\n            expect(generateRuntimeFunction('-3.14')()).toBe(-3.14);\n            expect(generateRuntimeFunction('0')()).toBe(0);\n        });\n\n        it('should parse strings', () => {\n            expect(generateRuntimeFunction('\"hello\"')()).toBe('hello');\n            expect(generateRuntimeFunction(\"'world'\")()).toBe('world');\n            expect(generateRuntimeFunction('\"escaped \\\\\"quotes\\\\\"\"')()).toBe('escaped \"quotes\"');\n            expect(generateRuntimeFunction(\"'mixed \\\"quotes\\\"'\")()).toBe('mixed \"quotes\"');\n        });\n\n        it('should parse booleans', () => {\n            expect(generateRuntimeFunction('true')()).toBe(true);\n            expect(generateRuntimeFunction('false')()).toBe(false);\n        });\n\n        it('should parse null and undefined', () => {\n            expect(generateRuntimeFunction('null')()).toBe(null);\n            expect(generateRuntimeFunction('undefined')()).toBe(undefined);\n        });\n    });\n\n    describe('Variable Access', () => {\n        it('should access simple variables', () => {\n            const scope = { foo: 'bar', count: 5 };\n            expect(generateRuntimeFunction('foo')({ scope })).toBe('bar');\n            expect(generateRuntimeFunction('count')({ scope })).toBe(5);\n        });\n\n        it('should throw on undefined variables', () => {\n            expect(() => generateRuntimeFunction('nonExistent')()).toThrow('Undefined variable');\n        });\n\n        it('should not access global variables by default when called with no parameters', () => {\n            expect(() => generateRuntimeFunction('console')()).toThrow('Undefined variable: console');\n            expect(() => generateRuntimeFunction('Math')()).toThrow('Undefined variable: Math');\n            expect(() => generateRuntimeFunction('JSON')()).toThrow('Undefined variable: JSON');\n        });\n\n        it('should prefer scope over globals', () => {\n            const scope = { console: 'local console' };\n            expect(generateRuntimeFunction('console')({ scope })).toBe('local console');\n        });\n\n        it('should not access global variables', () => {\n            expect(() => generateRuntimeFunction('console')()).toThrow('Undefined variable: console');\n            expect(() => generateRuntimeFunction('Math')()).toThrow('Undefined variable: Math');\n            expect(() => generateRuntimeFunction('JSON')()).toThrow('Undefined variable: JSON');\n        });\n    });\n\n    describe('Property Access', () => {\n        it('should access properties with dot notation', () => {\n            const scope = {\n                user: { name: 'John', age: 30 },\n                nested: { deep: { value: 'found' } }\n            };\n            expect(generateRuntimeFunction('user.name')({ scope })).toBe('John');\n            expect(generateRuntimeFunction('user.age')({ scope })).toBe(30);\n            expect(generateRuntimeFunction('nested.deep.value')({ scope })).toBe('found');\n        });\n\n        it('should access properties with bracket notation', () => {\n            const scope = {\n                obj: { foo: 'bar', 'with-dash': 'works' },\n                key: 'foo'\n            };\n            expect(generateRuntimeFunction('obj[\"foo\"]')({ scope })).toBe('bar');\n            expect(generateRuntimeFunction('obj[\"with-dash\"]')({ scope })).toBe('works');\n            expect(generateRuntimeFunction('obj[key]')({ scope })).toBe('bar');\n        });\n\n        it('should handle computed property access', () => {\n            const scope = {\n                arr: [1, 2, 3],\n                index: 1\n            };\n            expect(generateRuntimeFunction('arr[index]')({ scope })).toBe(2);\n            expect(generateRuntimeFunction('arr[0]')({ scope })).toBe(1);\n        });\n\n        it('should throw on null/undefined property access', () => {\n            const scope = { nullValue: null };\n            expect(() => generateRuntimeFunction('nullValue.prop')({ scope })).toThrow('Cannot read property');\n        });\n    });\n\n    describe('Function Calls', () => {\n        it('should call functions without arguments', () => {\n            const scope = {\n                getValue: () => 42,\n                getText: function() { return 'hello'; }\n            };\n            expect(generateRuntimeFunction('getValue()')({ scope })).toBe(42);\n            expect(generateRuntimeFunction('getText()')({ scope })).toBe('hello');\n        });\n\n        it('should call functions with arguments', () => {\n            const scope = {\n                add: (a, b) => a + b,\n                greet: (name) => `Hello, ${name}!`\n            };\n            expect(generateRuntimeFunction('add(2, 3)')({ scope })).toBe(5);\n            expect(generateRuntimeFunction('greet(\"World\")')({ scope })).toBe('Hello, World!');\n        });\n\n        it('should call methods on objects', () => {\n            const scope = {\n                obj: {\n                    value: 10,\n                    getValue: function() { return this.value; },\n                    add: function(n) { return this.value + n; }\n                }\n            };\n            expect(generateRuntimeFunction('obj.getValue()')({ scope })).toBe(10);\n            expect(generateRuntimeFunction('obj.add(5)')({ scope })).toBe(15);\n        });\n\n        it('should preserve this context in method calls', () => {\n            const scope = {\n                counter: {\n                    count: 0,\n                    increment: function() { this.count++; return this.count; }\n                }\n            };\n            expect(generateRuntimeFunction('counter.increment()')({ scope })).toBe(1);\n            expect(scope.counter.count).toBe(1);\n        });\n\n        it('should call nested methods', () => {\n            const scope = {\n                api: {\n                    users: {\n                        get: (id) => ({ id, name: 'User' + id })\n                    }\n                }\n            };\n            expect(generateRuntimeFunction('api.users.get(1)')({ scope })).toEqual({ id: 1, name: 'User1' });\n        });\n\n        it('should call methods with scope', () => {\n            const scope = {\n                foo: {\n                    bar: 'baz',\n                    change() { this.bar = 'qux' }\n                }\n            };\n\n            let fn = generateRuntimeFunction('foo.change')({ scope, forceBindingRootScopeToFunctions: false })\n\n            fn.apply(fn, [])\n\n            expect(scope.foo.bar).toEqual('qux');\n        });\n\n        it('should call methods with root scope instead of nested scope if forceBindingRootScopeToFunctions is true', () => {\n            const scope = {\n                foo: {\n                    bar: 'baz',\n                    change() { this.foo.bar = 'qux' }\n                }\n            };\n\n            let fn = generateRuntimeFunction('foo.change')({ scope, forceBindingRootScopeToFunctions: true })\n\n            fn.apply(fn, [])\n\n            expect(scope.foo.bar).toEqual('qux');\n        });\n    });\n\n    describe('Array Literals', () => {\n        it('should parse empty arrays', () => {\n            expect(generateRuntimeFunction('[]')()).toEqual([]);\n        });\n\n        it('should parse arrays with literals', () => {\n            expect(generateRuntimeFunction('[1, 2, 3]')()).toEqual([1, 2, 3]);\n            expect(generateRuntimeFunction('[\"a\", \"b\", \"c\"]')()).toEqual(['a', 'b', 'c']);\n            expect(generateRuntimeFunction('[true, false, null]')()).toEqual([true, false, null]);\n        });\n\n        it('should parse arrays with variables', () => {\n            const scope = { a: 1, b: 2, c: 3 };\n            expect(generateRuntimeFunction('[a, b, c]')({ scope })).toEqual([1, 2, 3]);\n        });\n\n        it('should parse nested arrays', () => {\n            expect(generateRuntimeFunction('[[1, 2], [3, 4]]')()).toEqual([[1, 2], [3, 4]]);\n        });\n    });\n\n    describe('Object Literals', () => {\n        it('should parse empty objects', () => {\n            expect(generateRuntimeFunction('{}')()).toEqual({});\n        });\n\n        it('should parse objects with simple properties', () => {\n            expect(generateRuntimeFunction('{ foo: \"bar\", count: 42 }')()).toEqual({ foo: 'bar', count: 42 });\n        });\n\n        it('should parse objects with string keys', () => {\n            expect(generateRuntimeFunction('{ \"foo-bar\": 1, \"with space\": 2 }')()).toEqual({\n                'foo-bar': 1,\n                'with space': 2\n            });\n        });\n\n        it('should parse objects with variable values', () => {\n            const scope = { value: 'test', num: 100 };\n            expect(generateRuntimeFunction('{ prop: value, count: num }')({ scope })).toEqual({\n                prop: 'test',\n                count: 100\n            });\n        });\n\n        it('should parse nested objects', () => {\n            expect(generateRuntimeFunction('{ outer: { inner: \"value\" } }')()).toEqual({\n                outer: { inner: 'value' }\n            });\n        });\n    });\n\n    describe('Arithmetic Operators', () => {\n        it('should handle addition', () => {\n            expect(generateRuntimeFunction('2 + 3')()).toBe(5);\n            expect(generateRuntimeFunction('10.5 + 0.5')()).toBe(11);\n        });\n\n        it('should handle subtraction', () => {\n            expect(generateRuntimeFunction('10 - 3')()).toBe(7);\n            expect(generateRuntimeFunction('5.5 - 0.5')()).toBe(5);\n        });\n\n        it('should handle multiplication', () => {\n            expect(generateRuntimeFunction('4 * 5')()).toBe(20);\n            expect(generateRuntimeFunction('2.5 * 2')()).toBe(5);\n        });\n\n        it('should handle division', () => {\n            expect(generateRuntimeFunction('10 / 2')()).toBe(5);\n            expect(generateRuntimeFunction('7 / 2')()).toBe(3.5);\n        });\n\n        it('should handle modulo', () => {\n            expect(generateRuntimeFunction('10 % 3')()).toBe(1);\n            expect(generateRuntimeFunction('8 % 2')()).toBe(0);\n        });\n\n        it('should handle string concatenation', () => {\n            expect(generateRuntimeFunction('\"Hello\" + \" \" + \"World\"')()).toBe('Hello World');\n            const scope = { name: 'John' };\n            expect(generateRuntimeFunction('\"Hello, \" + name')({ scope })).toBe('Hello, John');\n        });\n\n        it('should respect operator precedence', () => {\n            expect(generateRuntimeFunction('2 + 3 * 4')()).toBe(14);\n            expect(generateRuntimeFunction('(2 + 3) * 4')()).toBe(20);\n            expect(generateRuntimeFunction('10 - 2 * 3')()).toBe(4);\n        });\n    });\n\n    describe('Comparison Operators', () => {\n        it('should handle equality', () => {\n            expect(generateRuntimeFunction('5 == 5')()).toBe(true);\n            expect(generateRuntimeFunction('5 == \"5\"')()).toBe(true);\n            expect(generateRuntimeFunction('5 === 5')()).toBe(true);\n            expect(generateRuntimeFunction('5 === \"5\"')()).toBe(false);\n        });\n\n        it('should handle inequality', () => {\n            expect(generateRuntimeFunction('5 != 3')()).toBe(true);\n            expect(generateRuntimeFunction('5 != 5')()).toBe(false);\n            expect(generateRuntimeFunction('5 !== \"5\"')()).toBe(true);\n            expect(generateRuntimeFunction('5 !== 5')()).toBe(false);\n        });\n\n        it('should handle relational operators', () => {\n            expect(generateRuntimeFunction('5 > 3')()).toBe(true);\n            expect(generateRuntimeFunction('3 > 5')()).toBe(false);\n            expect(generateRuntimeFunction('5 >= 5')()).toBe(true);\n            expect(generateRuntimeFunction('3 < 5')()).toBe(true);\n            expect(generateRuntimeFunction('5 <= 5')()).toBe(true);\n        });\n    });\n\n    describe('Logical Operators', () => {\n        it('should handle logical AND', () => {\n            expect(generateRuntimeFunction('true && true')()).toBe(true);\n            expect(generateRuntimeFunction('true && false')()).toBe(false);\n            expect(generateRuntimeFunction('5 > 3 && 2 < 4')()).toBe(true);\n        });\n\n        it('should handle logical OR', () => {\n            expect(generateRuntimeFunction('true || false')()).toBe(true);\n            expect(generateRuntimeFunction('false || false')()).toBe(false);\n            expect(generateRuntimeFunction('5 > 10 || 2 < 4')()).toBe(true);\n        });\n\n        it('should handle logical NOT', () => {\n            expect(generateRuntimeFunction('!true')()).toBe(false);\n            expect(generateRuntimeFunction('!false')()).toBe(true);\n            expect(generateRuntimeFunction('!(5 > 3)')()).toBe(false);\n        });\n\n        it('should handle complex logical expressions', () => {\n            const scope = { a: true, b: false, c: true };\n            expect(generateRuntimeFunction('a && (b || c)')({ scope })).toBe(true);\n            expect(generateRuntimeFunction('!a || (b && c)')({ scope })).toBe(false);\n        });\n    });\n\n    describe('Unary Operators', () => {\n        it('should handle unary minus', () => {\n            expect(generateRuntimeFunction('-5')()).toBe(-5);\n            expect(generateRuntimeFunction('-(2 + 3)')()).toBe(-5);\n            const scope = { value: 10 };\n            expect(generateRuntimeFunction('-value')({ scope })).toBe(-10);\n        });\n\n        it('should handle unary plus', () => {\n            expect(generateRuntimeFunction('+5')()).toBe(5);\n            expect(generateRuntimeFunction('+\"5\"')()).toBe(5);\n            expect(generateRuntimeFunction('+true')()).toBe(1);\n        });\n    });\n\n    describe('Conditional (Ternary) Operator', () => {\n        it('should handle simple ternary', () => {\n            expect(generateRuntimeFunction('true ? 1 : 2')()).toBe(1);\n            expect(generateRuntimeFunction('false ? 1 : 2')()).toBe(2);\n        });\n\n        it('should handle ternary with expressions', () => {\n            const scope = { age: 20 };\n            expect(generateRuntimeFunction('age >= 18 ? \"adult\" : \"minor\"')({ scope })).toBe('adult');\n            scope.age = 15;\n            expect(generateRuntimeFunction('age >= 18 ? \"adult\" : \"minor\"')({ scope })).toBe('minor');\n        });\n\n        it('should handle nested ternary', () => {\n            const scope = { score: 85 };\n            expect(generateRuntimeFunction('score >= 90 ? \"A\" : score >= 80 ? \"B\" : \"C\"')({ scope })).toBe('B');\n        });\n    });\n\n    describe('Assignment Operators', () => {\n        it('should handle simple assignment', () => {\n            const scope = { x: 0 };\n            expect(generateRuntimeFunction('x = 5')({ scope })).toBe(5);\n            expect(scope.x).toBe(5);\n        });\n\n        it('should handle chained assignment', () => {\n            const scope = { a: 0, b: 0 };\n            expect(generateRuntimeFunction('a = b = 5')({ scope })).toBe(5);\n            expect(scope.a).toBe(5);\n            expect(scope.b).toBe(5);\n        });\n    });\n\n    describe('Increment/Decrement Operators', () => {\n        it('should handle prefix increment', () => {\n            const scope = { x: 5 };\n            expect(generateRuntimeFunction('++x')({ scope })).toBe(6);\n            expect(scope.x).toBe(6);\n        });\n\n        it('should handle postfix increment', () => {\n            const scope = { x: 5 };\n            expect(generateRuntimeFunction('x++')({ scope })).toBe(5);\n            expect(scope.x).toBe(6);\n        });\n\n        it('should handle prefix decrement', () => {\n            const scope = { x: 5 };\n            expect(generateRuntimeFunction('--x')({ scope })).toBe(4);\n            expect(scope.x).toBe(4);\n        });\n\n        it('should handle postfix decrement', () => {\n            const scope = { x: 5 };\n            expect(generateRuntimeFunction('x--')({ scope })).toBe(5);\n            expect(scope.x).toBe(4);\n        });\n\n        it('should handle increment on properties', () => {\n            const scope = { obj: { count: 10 } };\n            expect(generateRuntimeFunction('obj.count++')({ scope })).toBe(10);\n            expect(scope.obj.count).toBe(11);\n            expect(generateRuntimeFunction('++obj.count')({ scope })).toBe(12);\n            expect(scope.obj.count).toBe(12);\n        });\n    });\n\n    describe('Complex Expressions', () => {\n        it('should handle mixed operators with correct precedence', () => {\n            expect(generateRuntimeFunction('2 + 3 * 4 - 1')()).toBe(13);\n            expect(generateRuntimeFunction('(2 + 3) * (4 - 1)')()).toBe(15);\n            expect(generateRuntimeFunction('10 / 2 + 3 * 2')()).toBe(11);\n        });\n\n        it('should handle complex conditions', () => {\n            const scope = {\n                user: { role: 'admin', active: true },\n                permissions: ['read', 'write', 'delete']\n            };\n            expect(generateRuntimeFunction('user.role === \"admin\" && user.active')({ scope })).toBe(true);\n            expect(generateRuntimeFunction('user.role === \"user\" || user.active')({ scope })).toBe(true);\n        });\n\n        it('should handle method calls with complex arguments', () => {\n            const scope = {\n                math: {\n                    add: (a, b) => a + b,\n                    multiply: (a, b) => a * b\n                },\n                x: 2,\n                y: 3\n            };\n            expect(generateRuntimeFunction('math.add(x * 2, y + 1)')({ scope })).toBe(8);\n            expect(generateRuntimeFunction('math.multiply(math.add(x, y), 2)')({ scope })).toBe(10);\n        });\n    });\n\n    describe('Context (this) Handling', () => {\n        it('should use provided context', () => {\n            const context = { value: 42 };\n            const scope = {\n                getValue: function() { return this.value; }\n            };\n            expect(generateRuntimeFunction('getValue()')({ scope, context })).toBe(42);\n        });\n\n        it('should preserve method context over provided context', () => {\n            const context = { value: 99 };\n            const scope = {\n                obj: {\n                    value: 42,\n                    getValue: function() { return this.value; }\n                }\n            };\n            expect(generateRuntimeFunction('obj.getValue()')({ scope, context })).toBe(42);\n        });\n    });\n\n    describe('Error Handling', () => {\n        it('should provide helpful parse errors', () => {\n            expect(() => generateRuntimeFunction('5 +')).toThrow('CSP Parser Error');\n            expect(() => generateRuntimeFunction('{ foo: }')).toThrow('CSP Parser Error');\n            expect(() => generateRuntimeFunction('\"unclosed string')).toThrow('Unterminated string');\n        });\n\n        it('should provide helpful runtime errors', () => {\n            expect(() => generateRuntimeFunction('nonExistent')()).toThrow('Undefined variable');\n            expect(() => generateRuntimeFunction('5()')()).toThrow('not a function');\n            expect(() => generateRuntimeFunction('null.prop')()).toThrow('Cannot read property');\n        });\n    });\n\n    describe('Edge Cases', () => {\n        it('should handle empty input gracefully', () => {\n            expect(() => generateRuntimeFunction('')).toThrow('CSP Parser Error');\n        });\n\n        it('should handle whitespace', () => {\n            expect(generateRuntimeFunction('  5  ')()).toBe(5);\n            expect(generateRuntimeFunction('2   +   3')()).toBe(5);\n            expect(generateRuntimeFunction('  true   ?   1   :   2  ')()).toBe(1);\n        });\n\n        it('should handle line comments', () => {\n            expect(generateRuntimeFunction('5 // this is a comment')()).toBe(5);\n            expect(generateRuntimeFunction('2 + 3 // add numbers')()).toBe(5);\n        });\n\n        it('should handle deeply nested expressions', () => {\n            const scope = {\n                a: { b: { c: { d: { e: 'deep' } } } }\n            };\n            expect(generateRuntimeFunction('a.b.c.d.e')({ scope })).toBe('deep');\n        });\n\n        it('should handle complex nested structures', () => {\n            const scope = {\n                data: {\n                    users: [\n                        { name: 'Alice', scores: [90, 85, 88] },\n                        { name: 'Bob', scores: [78, 92, 85] }\n                    ]\n                },\n                index: 1\n            };\n            expect(generateRuntimeFunction('data.users[index].name')({ scope })).toBe('Bob');\n            expect(generateRuntimeFunction('data.users[0].scores[2]')({ scope })).toBe(88);\n        });\n    });\n\n    describe('Unsupported Features', () => {\n        it('should not support arrow functions', () => {\n            expect(() => generateRuntimeFunction('() => 5')).toThrow();\n        });\n\n        it('should not support function expressions', () => {\n            expect(() => generateRuntimeFunction('function() { return 5; }')).toThrow();\n        });\n\n        it('should not support template literals', () => {\n            expect(() => generateRuntimeFunction('`hello`')).toThrow();\n        });\n\n        it('should not support spread operator', () => {\n            expect(() => generateRuntimeFunction('[...arr]')).toThrow();\n            expect(() => generateRuntimeFunction('{ ...obj }')).toThrow();\n        });\n\n        it('should not support destructuring', () => {\n            expect(() => generateRuntimeFunction('{ a, b } = obj')).toThrow();\n            expect(() => generateRuntimeFunction('[a, b] = arr')).toThrow();\n        });\n\n        it('should not support optional chaining', () => {\n            expect(() => generateRuntimeFunction('obj?.prop')).toThrow();\n        });\n\n        it('should not support nullish coalescing', () => {\n            expect(() => generateRuntimeFunction('value ?? default')).toThrow();\n        });\n\n        it('should not support compound assignment', () => {\n            expect(() => generateRuntimeFunction('x += 5')).toThrow();\n            expect(() => generateRuntimeFunction('x *= 2')).toThrow();\n        });\n\n        it('should not support new operator', () => {\n            expect(() => generateRuntimeFunction('new Date()')).toThrow();\n        });\n\n        it('should not support typeof operator', () => {\n            expect(() => generateRuntimeFunction('typeof value')).toThrow();\n        });\n\n        it('should not support in operator', () => {\n            expect(() => generateRuntimeFunction('\"prop\" in obj')).toThrow();\n        });\n\n        it('should not support instanceof operator', () => {\n            expect(() => generateRuntimeFunction('obj instanceof Array')).toThrow();\n        });\n\n        it('should not support void operator', () => {\n            expect(() => generateRuntimeFunction('void 0')).toThrow();\n        });\n\n        it('should not support delete operator', () => {\n            expect(() => generateRuntimeFunction('delete obj.prop')).toThrow();\n        });\n\n        it('should not support regex literals', () => {\n            expect(() => generateRuntimeFunction('/pattern/g')).toThrow();\n        });\n\n        it('should not support class expressions', () => {\n            expect(() => generateRuntimeFunction('class Foo {}')).toThrow();\n        });\n\n        it('should not support async/await', () => {\n            expect(() => generateRuntimeFunction('async function() {}')).toThrow();\n            expect(() => generateRuntimeFunction('await promise')).toThrow();\n        });\n\n        it('should not support generators', () => {\n            expect(() => generateRuntimeFunction('function* gen() {}')).toThrow();\n            expect(() => generateRuntimeFunction('yield value')).toThrow();\n        });\n\n        it('should not support dynamic code execution', () => {\n            // eval is not accessible as a global\n            expect(() => generateRuntimeFunction('eval(\"code\")')()).toThrow('Undefined variable: eval');\n\n            // new operator is not supported by parser\n            expect(() => generateRuntimeFunction('new Function(\"code\")')).toThrow();\n        });\n\n        it('should not call global functions', () => {\n            expect(() => generateRuntimeFunction('parseInt(\"42\")')()).toThrow();\n            expect(() => generateRuntimeFunction('Math.max(1, 2, 3)')()).toThrow();\n            expect(() => generateRuntimeFunction('JSON.stringify({a: 1})')()).toThrow();\n        });\n\n        it('should not handle property assignment', () => {\n            expect(() => generateRuntimeFunction('obj.prop = 10')()).toThrow();\n        });\n\n        it('should not handle computed property assignment', () => {\n            expect(() => generateRuntimeFunction('obj[key] = 20')()).toThrow();\n        });\n    });\n\n    describe('Trailing Semicolons', () => {\n        it('should handle expressions with trailing semicolons', () => {\n            expect(generateRuntimeFunction('42;')()).toBe(42);\n            expect(generateRuntimeFunction('\"hello\";')()).toBe('hello');\n            expect(generateRuntimeFunction('true;')()).toBe(true);\n            expect(generateRuntimeFunction('null;')()).toBe(null);\n        });\n\n        it('should handle complex expressions with trailing semicolons', () => {\n            expect(generateRuntimeFunction('2 + 3;')()).toBe(5);\n            expect(generateRuntimeFunction('10 > 5;')()).toBe(true);\n            expect(generateRuntimeFunction('false || true;')()).toBe(true);\n\n            const scope = { name: 'world' };\n            expect(generateRuntimeFunction('\"hello \" + name;')({ scope })).toBe('hello world');\n        });\n\n        it('should handle function calls with trailing semicolons', () => {\n            const scope = {\n                getValue: () => 42,\n                obj: {\n                    method: function() { return this.name; },\n                    name: 'test'\n                }\n            };\n\n            expect(generateRuntimeFunction('getValue();')({ scope })).toBe(42);\n            expect(generateRuntimeFunction('obj.method();')({ scope })).toBe('test');\n        });\n\n        it('should handle assignments with trailing semicolons', () => {\n            const scope = { x: 0, obj: { prop: 5 } };\n\n            expect(generateRuntimeFunction('x = 10;')({ scope })).toBe(10);\n            expect(scope.x).toBe(10);\n        });\n\n        it('should handle increment/decrement with trailing semicolons', () => {\n            const scope = { count: 5 };\n\n            expect(generateRuntimeFunction('++count;')({ scope })).toBe(6);\n            expect(scope.count).toBe(6);\n\n            expect(generateRuntimeFunction('count--;')({ scope })).toBe(6);\n            expect(scope.count).toBe(5);\n        });\n\n        it('should work with ternary expressions and trailing semicolons', () => {\n            expect(generateRuntimeFunction('true ? \"yes\" : \"no\";')()).toBe('yes');\n            expect(generateRuntimeFunction('false ? 1 : 2;')()).toBe(2);\n\n            const scope = { age: 25 };\n            expect(generateRuntimeFunction('age >= 18 ? \"adult\" : \"minor\";')({ scope })).toBe('adult');\n        });\n\n        it('should work without semicolons (backward compatibility)', () => {\n            expect(generateRuntimeFunction('42')()).toBe(42);\n            expect(generateRuntimeFunction('2 + 3')()).toBe(5);\n            expect(generateRuntimeFunction('true ? \"yes\" : \"no\"')()).toBe('yes');\n        });\n    });\n});"
  },
  {
    "path": "tests/vitest/evaluator.spec.js",
    "content": "// @vitest-environment jsdom\n\nimport { describe, it, expect, beforeAll } from 'vitest';\nimport Alpine from '../../packages/alpinejs/src/index.js';\nimport { evaluate, evaluateLater, evaluateRaw } from '../../packages/alpinejs/src/evaluator.js';\n\nbeforeAll(() => Alpine.start())\n\ndescribe('evaluate([String])', () => {\n    it('simple expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, '42')).toBe(42)\n    });\n\n    it('with scope', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, 'foo', { scope: { foo: 42 } })).toBe(42)\n    });\n\n    it('with params', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, '(foo) => foo', { params: [42] })).toBe(42)\n    });\n\n    it('with context', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, 'this.foo', { context: { foo: 42 } })).toBe(42)\n    });\n\n    it('auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, '() => 42')).toBe(42)\n    });\n\n    it('non auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        Alpine.dontAutoEvaluateFunctions(() => {\n            expect(evaluate(element, '() => 42')()).toBe(42)\n        })\n    });\n\n    it('conditional', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, 'if (true) { return 42 }')).toBe(undefined)\n    });\n\n    it('assignment', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, 'let foo = 42')).toBe(undefined)\n    });\n\n    it('await', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let scope = { foo: { bar: 'baz' } }\n\n        expect(evaluate(element, 'await new Promise(resolve => { foo.bar = \"qux\"; resolve() })', { scope })).toBe(undefined)\n\n        expect(scope.foo.bar).toBe('qux')\n    });\n});\n\ndescribe('evaluateLater([String])', () => {\n    it('simple expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let receiver = evaluateLater(element, '42')\n\n        receiver(value => {\n            expect(value).toBe(42)\n        })\n    });\n\n    it('await', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let receiver = evaluateLater(element, 'await new Promise(resolve => { setTimeout(() => resolve(42), 10) })')\n\n        receiver(value => {\n            expect(value).toBe(42)\n        })\n    });\n})\n\ndescribe('evaluate([Function])', () => {\n    it('simple expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, () => 42)).toBe(42)\n    });\n\n    it('with scope', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, function() { return this.foo }, { scope: { foo: 42 } })).toBe(42)\n    });\n\n    it('with params', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, (foo) => foo, { params: [42] })).toBe(42)\n    });\n\n    it.skip('with context', () => {\n        // This is not supported with direct function evaluation...\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, () => this.foo, { context: { foo: 42 } })).toBe(42)\n    });\n\n    it('auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluate(element, () => 42)).toBe(42)\n    });\n\n    it('non auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        Alpine.dontAutoEvaluateFunctions(() => {\n            expect(evaluate(element, () => 42)()).toBe(42)\n        })\n    });\n});\n\ndescribe('evaluateLater([Function])', () => {\n    it('simple expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let receiver = evaluateLater(element, () => 42)\n\n        receiver(value => {\n            expect(value).toBe(42)\n        })\n    });\n\n    it('await', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let receiver = evaluateLater(element, () => new Promise(resolve => { setTimeout(() => resolve(42), 10) }))\n\n        receiver(value => {\n            expect(value).toBe(42)\n        })\n    });\n})\n\ndescribe('evaluateRaw([String])', () => {\n    it('simple expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluateRaw(element, '42')).toBe(42)\n    });\n\n    it('with scope', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluateRaw(element, 'foo', { scope: { foo: 42 } })).toBe(42)\n    });\n\n    it('with params', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluateRaw(element, '(foo) => foo', { params: [42] })).toBe(42)\n    });\n\n    it('auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        expect(evaluateRaw(element, '() => 42')).toBe(42)\n    });\n\n    it('non auto-evaluating function expression', () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        Alpine.dontAutoEvaluateFunctions(() => {\n            expect(evaluateRaw(element, '() => 42')()).toBe(42)\n        })\n    });\n\n    it('await returns promise directly', async () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let result = evaluateRaw(element, 'await Promise.resolve(42)')\n\n        expect(result).toBeInstanceOf(Promise)\n        expect(await result).toBe(42)\n    });\n\n    it('promise is returned directly', async () => {\n        let element = { parentNode: null, _x_dataStack: [] }\n\n        let result = evaluateRaw(element, '(() => { let promise = new Promise(() => {}); promise.foo = \"bar\"; return promise })()')\n\n        expect(result).toBeInstanceOf(Promise)\n        expect(result.foo).toBe('bar')\n    });\n})"
  },
  {
    "path": "tests/vitest/mask.spec.js",
    "content": "import { describe, it, expect } from 'vitest'\nimport { formatInput } from '../../packages/mask/src/index.js'\n\ndescribe('formatInput', () => {\n    it('formats phone numbers with various templates', () => {\n        expect(formatInput('(***) ***-****', '7162256108')).toEqual('(716) 225-6108')\n        expect(formatInput('(999) 999-9999', '7162256108')).toEqual('(716) 225-6108')\n        expect(formatInput('999) 999-9999', '7162256108')).toEqual('716) 225-6108')\n        expect(formatInput('999 999-9999', '7162256108')).toEqual('716 225-6108')\n        expect(formatInput('999999-9999', '7162256108')).toEqual('716225-6108')\n        expect(formatInput('9999999999', '7162256108')).toEqual('7162256108')\n    })\n\n    it('strips existing formatting from input', () => {\n        expect(formatInput('(999) 999-9999', '716 2256108')).toEqual('(716) 225-6108')\n        expect(formatInput('(999) 999-9999', '(716) 2256108')).toEqual('(716) 225-6108')\n        expect(formatInput('(999) 999-9999', '(716) 2-25--6108')).toEqual('(716) 225-6108')\n    })\n\n    it('handles templates with leading literals that overlap input', () => {\n        expect(formatInput('+1 (999) 999-9999', '7162256108')).toEqual('+1 (716) 225-6108')\n        expect(formatInput('+1 (999) 999-9999', '+1 (716) 225-6108')).toEqual('+1 (716) 225-6108')\n        expect(formatInput('ABC (999) 999-9999', '7162256108')).toEqual('ABC (716) 225-6108')\n        expect(formatInput('ABC (999) 999-9999', 'ABC (716) 225-6108')).toEqual('ABC (716) 225-6108')\n    })\n\n    it('handles dot-separated templates', () => {\n        expect(formatInput('999.999.9999', '7162256108')).toEqual('716.225.6108')\n        expect(formatInput('999.999.9999', '716.2256108')).toEqual('716.225.6108')\n        expect(formatInput('999.999.9999', '716.225 6108')).toEqual('716.225.6108')\n    })\n\n    it('handles alpha masks with spaces', () => {\n        expect(formatInput('aaaa aaaa aaaa aaaa', 'abcd9abcd9abcd9abcd9')).toEqual('abcd abcd abcd abcd')\n        expect(formatInput('aaaa aaaa aaaa aaaa', 'abcd abcd abcd abcd')).toEqual('abcd abcd abcd abcd')\n        expect(formatInput('aaaa aaaa aaaa aaaa', 'abcdabcdabcdabcd')).toEqual('abcd abcd abcd abcd')\n        expect(formatInput('aaaa aaaa aaaa aaaa', 'abcd9abcd9abcd9abc')).toEqual('abcd abcd abcd abc')\n    })\n\n    it('handles templates with leading non-wildcard literals', () => {\n        expect(formatInput('### aaaa aaaa aaaa aaaa', 'abcd abcd abcd abcd')).toEqual('### abcd abcd abcd abcd')\n        expect(formatInput('### aaaa aaaa aaaa aaaa', '### abcd abcd abcd abcd')).toEqual('### abcd abcd abcd abcd')\n        expect(formatInput('### aaaa aaaa aaaa aaaa', '### abcd abcd #### abcd')).toEqual('### abcd abcd abcd')\n    })\n\n    it('handles template with only trailing wildcards', () => {\n        expect(formatInput('#### #### #### 9999', '1234 5678 9101 2345')).toEqual('#### #### #### 1234')\n    })\n\n    it('handles non-wildcard alphanumeric characters in template', () => {\n        expect(formatInput('ba9*b', 'a')).toEqual('ba')\n        expect(formatInput('ba9*b', 'aa')).toEqual('ba')\n        expect(formatInput('ba9*b', 'aa3')).toEqual('ba3')\n        expect(formatInput('ba9*b', 'aa3z')).toEqual('ba3z')\n        expect(formatInput('ba9*b', 'aa3z4')).toEqual('ba3zb')\n    })\n\n    it('handles short templates', () => {\n        expect(formatInput('a', 'a9a')).toEqual('a')\n        expect(formatInput('aa', 'b9a')).toEqual('ba')\n        expect(formatInput('aa', 'bb')).toEqual('bb')\n        expect(formatInput('aab', 'aba')).toEqual('abb')\n        expect(formatInput('abb', 'ab')).toEqual('ab')\n        expect(formatInput('abb', 'ab9')).toEqual('abb')\n    })\n})\n"
  },
  {
    "path": "vitest.config.js",
    "content": "import { defineConfig } from 'vitest/config';\nimport { readFileSync } from 'fs';\n\n// Read the version from alpinejs package.json\nconst alpinePackageJson = JSON.parse(\n    readFileSync('./packages/alpinejs/package.json', 'utf-8')\n);\nconst alpineVersion = alpinePackageJson.version;\n\nexport default defineConfig({\n    define: {\n        'ALPINE_VERSION': `'${alpineVersion}'`,\n    },\n});\n"
  }
]